refactor(box): Use new responsive component

Add tests for viewport sizes

config/jest.config.js

@@ -11,6 +11,7 @@ module.exports = {
   setupFiles: [
     '<rootDir>/__mocks__/requestAnimationFrame.js',
     path.resolve('config/jest/setupEnzyme.js'),
+    path.resolve('config/jest/setupGlobals.js'),
   ],
   setupTestFrameworkScriptFile: path.resolve('node_modules/jest-enzyme/lib/index.js'),
   snapshotSerializers: ['enzyme-to-json/serializer'],

config/jest/setupGlobals.js

@@ -0,0 +1,3 @@
+import mockMatchMedia from '../../src/__mocks__/matchMedia'
+
+mockMatchMedia()

src/components/Box/Box.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Responsive from '../Responsive/Responsive'
+import Responsive from '../ResponsiveReactMedia/ResponsiveReactMedia'
 
 import safeRest from '../../utils/safeRest'
 import joinClassNames from '../../utils/joinClassNames'
@@ -17,15 +17,15 @@ const getClassName = (spacing, location, scale, desktop) => {
   return styles[`${location}${capitalize(spacing)}${viewportSuffix(desktop)}-${scale}`]
 }
 
-const getBetweenClasses = (betweenSize, inline, desktop) => {
-  if (!betweenSize) {
+const getBetweenClasses = (scale, inline, desktop) => {
+  if (!scale) {
     return undefined
   }
 
   const direction = inline ? 'Right' : 'Bottom'
   return joinClassNames(
-    styles[`between${direction}Margin${viewportSuffix(desktop)}-${betweenSize}`],
-    inline ? styles.betweenRight : styles.betweenBottom
+    styles[`between${direction}Margin${viewportSuffix(desktop)}-${scale}`],
+    inline ? styles.inline : styles.stack
   )
 }
 

src/components/Box/Box.modules.scss

@@ -25,12 +25,12 @@ $desktop: (
   8: $spacing-base * 6
 );
 
-.betweenRight {
+.inline {
   display: flex;
   flex-direction: row;
 }
 
-.betweenBottom {
+.stack {
   display: flex;
   flex-direction: column;
 }

src/components/Box/__tests__/Box.spec.jsx

@@ -1,91 +1,126 @@
 import React from 'react'
-import { shallow } from 'enzyme'
+import { mount } from 'enzyme'
 
 import Box from '../Box'
 
+import mockMatchMedia from '../../../__mocks__/matchMedia'
+
 describe('Box', () => {
   const defaultProps = { between: 3 }
-  const doShallow = (props = {}) =>
-    shallow(
+  const doMount = (props = {}) => {
+    const box = mount(
       <Box {...defaultProps} {...props}>
         Some content
       </Box>
     )
-      .dive()
-      .dive()
 
-  it('renders', () => {
-    const box = doShallow()
+    return box.find(box.props().tag)
+  }
 
-    expect(box).toMatchSnapshot()
+  beforeEach(() => {
+    mockMatchMedia(575)
   })
 
-  it('can be either inline or block', () => {
-    let box = doShallow()
-    expect(box).toHaveTagName('div')
+  it('renders', () => {
+    const box = doMount()
 
-    box = doShallow({ inline: true })
-    expect(box).toHaveClassName('betweenRight betweenRightMargin-3')
+    expect(box).toMatchSnapshot()
   })
 
-  it('can render as other elements', () => {
-    const box = doShallow({ tag: 'ul' })
+  it('can render as a specified HTML element', () => {
+    const box = doMount({ tag: 'ul' })
+
     expect(box).toHaveTagName('ul')
   })
 
-  it('can have vertical or horizontal spacing', () => {
-    let box = doShallow({ vertical: 1 })
-    expect(box).toHaveClassName('verticalPadding-1')
+  it('can apply bottom margin', () => {
+    const box = doMount({ below: 2 })
 
-    box = doShallow({ horizontal: 1 })
-    expect(box).toHaveClassName('horizontalPadding-1')
+    expect(box).toHaveClassName('bottomMargin-2')
   })
 
-  it('can have horizontal and vertical spacing of different scales', () => {
-    const box = doShallow({ vertical: 1, horizontal: 2 })
+  describe('insets', () => {
+    it('can be equal on all sides', () => {
+      const box = doMount({ inset: 3 })
 
-    expect(box).toHaveClassName('verticalPadding-1 horizontalPadding-2')
-  })
+      expect(box).toHaveClassName('verticalPadding-3 horizontalPadding-3')
+    })
+
+    it('can be either vertical or horizonal', () => {
+      let box = doMount({ vertical: 1 })
+      expect(box).toHaveClassName('verticalPadding-1')
 
-  it('can have inset padding', () => {
-    const box = doShallow({ inset: 3 })
+      box = doMount({ horizontal: 1 })
+      expect(box).toHaveClassName('horizontalPadding-1')
 
-    expect(box).toHaveClassName('verticalPadding-3 horizontalPadding-3')
+      box = doMount({ vertical: 2, horizontal: 3 })
+      expect(box).toHaveClassName('verticalPadding-2 horizontalPadding-3')
+    })
   })
 
-  it('can have bottom margin', () => {
-    const box = doShallow({ below: 2 })
+  describe('between', () => {
+    it('arranges the children horizontally or vertically be either inline or block', () => {
+      let box = doMount()
+      expect(box).toHaveClassName('stack')
 
-    expect(box).toHaveClassName('bottomMargin-2')
-  })
+      box = doMount({ inline: true })
+      expect(box).toHaveClassName('inline')
+    })
+
+    it('separates children by equal margins in a stack', () => {
+      const box = doMount({ between: 2 })
 
-  it('can have between margin as a stack', () => {
-    const box = doShallow({ between: 2 })
+      expect(box).toHaveClassName('betweenBottomMargin-2')
+    })
 
-    expect(box).toHaveClassName('betweenBottomMargin-2')
+    it('separates children by equal margins inline', () => {
+      const box = doMount({ between: 2, inline: true })
+
+      expect(box).toHaveClassName('betweenRightMargin-2')
+    })
   })
 
-  it('can have between margin as inline', () => {
-    const box = doShallow({ between: 2, inline: true })
+  describe('responsive spacing above medium viewport', () => {
+    beforeEach(() => {
+      mockMatchMedia(768)
+    })
+
+    it('applies greater insets', () => {
+      let box = doMount({ inset: 2 })
+      expect(box).toHaveClassName('verticalPaddingDesktop-2 horizontalPaddingDesktop-2')
+
+      box = doMount({ vertical: 3, horizontal: 4 })
+      expect(box).toHaveClassName('verticalPaddingDesktop-3 horizontalPaddingDesktop-4')
+    })
+
+    it('applies greater bottom margin', () => {
+      const box = doMount({ below: 5 })
+
+      expect(box).toHaveClassName('bottomMarginDesktop-5')
+    })
+
+    it('applies greater separation between children', () => {
+      const box = doMount({ between: 6 })
 
-    expect(box).toHaveClassName('betweenRight betweenRightMargin-2')
+      expect(box).toHaveClassName('betweenBottomMarginDesktop-6')
+    })
   })
 
-  it('passes additional attributes to the element', () => {
-    const box = doShallow({ id: 'the-id', 'data-some-attr': 'some value' })
+  it('passes additional attributes to the wrapping element', () => {
+    const box = doMount({ id: 'the-id', 'data-some-attr': 'some value' })
 
     expect(box).toHaveProp('id', 'the-id')
     expect(box).toHaveProp('data-some-attr', 'some value')
   })
 
   it('will add additional arbitrary class names', () => {
-    const box = doShallow({ dangerouslyAddClassName: 'a-class' })
+    const box = doMount({ dangerouslyAddClassName: 'a-class' })
 
     expect(box).toHaveClassName('a-class')
   })
 
   it('does not allow custom CSS', () => {
-    const box = doShallow({ className: 'my-custom-class', style: { color: 'hotpink' } })
+    const box = doMount({ className: 'my-custom-class', style: { color: 'hotpink' } })
 
     expect(box).not.toHaveProp('className', 'my-custom-class')
     expect(box).not.toHaveProp('style')

src/components/Box/__tests__/__snapshots__/Box.spec.jsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Box renders 1`] = `
 <div
-  className="betweenBottomMargin-3 betweenBottom"
+  className="betweenBottomMargin-3 stack"
 >
   Some content
 </div>

src/components/Button/BaseButton/BaseButton.jsx

@@ -9,10 +9,6 @@ import Responsive from '../../ResponsiveReactMedia/ResponsiveReactMedia'
 
 import styles from './BaseButton.modules.scss'
 
-const getSizeClassName = desktop => {
-  return desktop ? styles.inline : styles.fullWidth
-}
-
 /**
  * A common base for Button and ButtonLink.
  */
@@ -25,7 +21,7 @@ const BaseButton = ({ element, variant, dangerouslyAddClassName, children, ...re
           {
             ...safeRest(rest),
             className: joinClassNames(
-              getSizeClassName(desktop),
+              desktop ? styles.inline : styles.fullWidth,
               styles[variant],
               dangerouslyAddClassName
             ),

src/components/Button/__tests__/Button.spec.jsx

@@ -16,10 +16,6 @@ describe('Button', () => {
     return button.find('button')
   }
 
-  beforeEach(() => {
-    mockMatchMedia()
-  })
-
   afterEach(() => {
     jest.clearAllMocks()
   })

src/components/Card/__tests__/__snapshots__/Card.spec.jsx.snap

@@ -2,7 +2,7 @@
 
 exports[`<Card /> renders 1`] = `
 <div
-  class="horizontalPadding-4 verticalPadding-5 white"
+  class="horizontalPaddingDesktop-4 verticalPaddingDesktop-5 white"
 >
   Children
 </div>