Adds E2E tests for single responsive prop

packages/atomic-layout/examples/all.test.js

@@ -82,4 +82,5 @@ describe('Recipes', () => {
  */
 describe('Regression tests', () => {
   require('./regression/StylesUndefined.test')
+  require('./regression/SingleResponsiveProp.test')
 })

packages/atomic-layout/examples/index.js

@@ -119,5 +119,8 @@ storiesOf('Recipes|All', module).add('Iterative areas', IterativeAreas)
  * Bugfixes
  */
 import StylesUndefined from './regression/StylesUndefined'
+import SingleResponsiveProp from './regression/SingleResponsiveProp'
 
-storiesOf('Regression|All', module).add('Styles undefined', StylesUndefined)
+storiesOf('Regression|All', module)
+  .add('Styles undefined', StylesUndefined)
+  .add('Single responsive prop', SingleResponsiveProp)

packages/atomic-layout/examples/regression/SingleResponsiveProp.jsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { Composition } from 'atomic-layout'
+import Square from '@stories/Square'
+
+const SingleResponsiveProp = () => (
+  <Composition
+    id="composition"
+    areasMd="left right"
+    paddingMdDown={15}
+    gutterLgOnly={10}
+  >
+    {(Areas) => (
+      <>
+        <Areas.Left data-area="left">
+          <Square>Left</Square>
+        </Areas.Left>
+        <Areas.Right data-area="right">
+          <Square>Right</Square>
+        </Areas.Right>
+      </>
+    )}
+  </Composition>
+)
+
+export default SingleResponsiveProp

packages/atomic-layout/examples/regression/SingleResponsiveProp.test.js

@@ -0,0 +1,68 @@
+describe('Single responsive prop', () => {
+  before(() => {
+    cy.loadStory(['regression', 'all'], ['single-responsive-prop'])
+  })
+
+  describe('Given "up" behavior', () => {
+    it('Renders no areas on unmatched breakpoints', () => {
+      const shouldRenderNothing = () => {
+        cy.get('[data-area="left"]').should('not.be.visible')
+        cy.get('[data-area="right"]').should('not.be.visible')
+      }
+
+      cy.setBreakpoint('xs').then(shouldRenderNothing)
+      cy.setBreakpoint('sm').then(shouldRenderNothing)
+    })
+
+    it('Renders areas on matched breakpoint and up', () => {
+      const shouldRenderAreas = () => {
+        cy.get('#composition').assertAreas([['left', 'right']])
+      }
+
+      cy.setBreakpoint('md').then(shouldRenderAreas)
+      cy.setBreakpoint('lg').then(shouldRenderAreas)
+      cy.setBreakpoint('xl').then(shouldRenderAreas)
+    })
+  })
+
+  describe('Given "down" behavior', () => {
+    it('Has no padding on unmatched breakpoints', () => {
+      const shouldHaveNoPadding = () => {
+        cy.get('#composition').should('have.css', 'padding', '0px')
+      }
+
+      cy.setBreakpoint('lg').then(shouldHaveNoPadding)
+      cy.setBreakpoint('xl').then(shouldHaveNoPadding)
+    })
+
+    it('Has padding on matched breakpoints', () => {
+      const shouldHavePadding = () => {
+        cy.get('#composition').should('have.css', 'padding', '15px')
+      }
+
+      cy.setBreakpoint('xs').then(shouldHavePadding)
+      cy.setBreakpoint('sm').then(shouldHavePadding)
+      cy.setBreakpoint('md').then(shouldHavePadding)
+    })
+  })
+
+  describe('Given "only" behavior', () => {
+    it('Has no gap on unmatched breakpoints', () => {
+      const shouldHaveNoGap = () => {
+        cy.get('#composition').should('have.css', 'grid-gap', 'normal normal')
+      }
+
+      cy.setBreakpoint('xs').then(shouldHaveNoGap)
+      cy.setBreakpoint('sm').then(shouldHaveNoGap)
+      cy.setBreakpoint('md').then(shouldHaveNoGap)
+    })
+
+    it('Has a gap on a matched breakpoint', () => {
+      const shouldHaveGap = () => {
+        cy.get('#composition').should('have.css', 'grid-gap', '10px 10px')
+      }
+
+      cy.setBreakpoint('lg').then(shouldHaveGap)
+    })
+  })
+})