From 3a39d64e8c8c747bab089eed6cb029c6a9d212ad Mon Sep 17 00:00:00 2001
From: Alexander Fedyashov <alexander.mcgarret@gmail.com>
Date: Mon, 11 Sep 2017 06:33:13 +0300
Subject: [PATCH] feat(Responsive): add component (#1872)

* feat(Breakpoint): add component

* feat(Breakpoint): add component

* feat(Breakpoint): add component

* style(Breakpoint): prefix bools with "is"

* refactor(Breakpoint): rename Responsive

* style(mixed): fix lint issues

* feat(Responsive): refactor component

* revert(customPropTypes): reverned unnecessary changes
---
 .../Types/ResponsiveExampleContent.js         |  38 ++++++
 .../Types/ResponsiveExampleMaxWidth.js        |  15 +++
 .../Types/ResponsiveExampleMinWidth.js        |  15 +++
 .../Types/ResponsiveExampleMixed.js           |  10 ++
 .../Types/ResponsiveExampleResponsive.js      |  10 ++
 .../Examples/addons/Responsive/Types/index.js |  41 ++++++
 .../Usage/ResponsiveExampleBreakpoints.js     |  14 ++
 .../Usage/ResponsiveExampleOnUpdate.js        |  53 ++++++++
 .../Examples/addons/Responsive/Usage/index.js |  21 +++
 docs/app/Examples/addons/Responsive/index.js  |  13 ++
 index.d.ts                                    |   5 +
 src/addons/Responsive/Responsive.d.ts         |  44 +++++++
 src/addons/Responsive/Responsive.js           | 121 ++++++++++++++++++
 src/addons/Responsive/index.d.ts              |   1 +
 src/addons/Responsive/index.js                |   1 +
 src/index.js                                  |   1 +
 src/lib/eventStack.js                         |   8 +-
 .../addons/Responsive/Responsive-test.js      |  77 +++++++++++
 test/specs/commonTests/isConformant.js        |  14 +-
 19 files changed, 493 insertions(+), 9 deletions(-)
 create mode 100644 docs/app/Examples/addons/Responsive/Types/ResponsiveExampleContent.js
 create mode 100644 docs/app/Examples/addons/Responsive/Types/ResponsiveExampleMaxWidth.js
 create mode 100644 docs/app/Examples/addons/Responsive/Types/ResponsiveExampleMinWidth.js
 create mode 100644 docs/app/Examples/addons/Responsive/Types/ResponsiveExampleMixed.js
 create mode 100644 docs/app/Examples/addons/Responsive/Types/ResponsiveExampleResponsive.js
 create mode 100644 docs/app/Examples/addons/Responsive/Types/index.js
 create mode 100644 docs/app/Examples/addons/Responsive/Usage/ResponsiveExampleBreakpoints.js
 create mode 100644 docs/app/Examples/addons/Responsive/Usage/ResponsiveExampleOnUpdate.js
 create mode 100644 docs/app/Examples/addons/Responsive/Usage/index.js
 create mode 100644 docs/app/Examples/addons/Responsive/index.js
 create mode 100644 src/addons/Responsive/Responsive.d.ts
 create mode 100644 src/addons/Responsive/Responsive.js
 create mode 100644 src/addons/Responsive/index.d.ts
 create mode 100644 src/addons/Responsive/index.js
 create mode 100644 test/specs/addons/Responsive/Responsive-test.js

diff --git a/docs/app/Examples/addons/Responsive/Types/ResponsiveExampleContent.js b/docs/app/Examples/addons/Responsive/Types/ResponsiveExampleContent.js
new file mode 100644
index 0000000000..ad951be010
--- /dev/null
+++ b/docs/app/Examples/addons/Responsive/Types/ResponsiveExampleContent.js
@@ -0,0 +1,38 @@
+import React, { Component } from 'react'
+import { Responsive, Button, Menu } from 'semantic-ui-react'
+
+export default class ResponsiveExampleContent extends Component {
+  state = { active: 'home' }
+
+  handleItemClick = (e, { name }) => this.setState({ active: name })
+
+  render() {
+    const { active } = this.state
+
+    return (
+      <Menu>
+        <Menu.Item active={active === 'home'} content='Home' name='home' onClick={this.handleItemClick} />
+        <Menu.Item active={active === 'messages'} content='Messages' name='messages' onClick={this.handleItemClick} />
+
+        <Menu.Menu position='right'>
+          <Menu.Item>
+            <Responsive
+              {...Responsive.onlyMobile}
+              as={Button}
+              content='Switch to desktop version'
+              icon='desktop'
+              labelPosition='left'
+            />
+            <Responsive
+              as={Button}
+              content='Switch to mobile version'
+              icon='mobile'
+              labelPosition='left'
+              minWidth={Responsive.onlyTablet.minWidth}
+            />
+          </Menu.Item>
+        </Menu.Menu>
+      </Menu>
+    )
+  }
+}
diff --git a/docs/app/Examples/addons/Responsive/Types/ResponsiveExampleMaxWidth.js b/docs/app/Examples/addons/Responsive/Types/ResponsiveExampleMaxWidth.js
new file mode 100644
index 0000000000..08bd71af08
--- /dev/null
+++ b/docs/app/Examples/addons/Responsive/Types/ResponsiveExampleMaxWidth.js
@@ -0,0 +1,15 @@
+import React from 'react'
+import { Responsive, Segment } from 'semantic-ui-react'
+
+const ResponsiveExampleMaxWidth = () => (
+  <Segment.Group>
+    <Responsive as={Segment} maxWidth={767}>
+      Visible only if display has <code>767px</code> width and lower
+    </Responsive>
+    <Responsive as={Segment} maxWidth={2569}>
+      Visible only if display has <code>2569px</code> width
+    </Responsive>
+  </Segment.Group>
+)
+
+export default ResponsiveExampleMaxWidth
diff --git a/docs/app/Examples/addons/Responsive/Types/ResponsiveExampleMinWidth.js b/docs/app/Examples/addons/Responsive/Types/ResponsiveExampleMinWidth.js
new file mode 100644
index 0000000000..5875fa8e57
--- /dev/null
+++ b/docs/app/Examples/addons/Responsive/Types/ResponsiveExampleMinWidth.js
@@ -0,0 +1,15 @@
+import React from 'react'
+import { Responsive, Segment } from 'semantic-ui-react'
+
+const ResponsiveExampleMinWidth = () => (
+  <Segment.Group>
+    <Responsive as={Segment} minWidth={768}>
+      Visible only if display has <code>768px</code> width and higher
+    </Responsive>
+    <Responsive as={Segment} minWidth={992}>
+      Visible only if display has <code>992px</code> width and higher
+    </Responsive>
+  </Segment.Group>
+)
+
+export default ResponsiveExampleMinWidth
diff --git a/docs/app/Examples/addons/Responsive/Types/ResponsiveExampleMixed.js b/docs/app/Examples/addons/Responsive/Types/ResponsiveExampleMixed.js
new file mode 100644
index 0000000000..4584563b49
--- /dev/null
+++ b/docs/app/Examples/addons/Responsive/Types/ResponsiveExampleMixed.js
@@ -0,0 +1,10 @@
+import React from 'react'
+import { Responsive, Segment } from 'semantic-ui-react'
+
+const ResponsiveExampleMixed = () => (
+  <Responsive as={Segment} minWidth={320} maxWidth={2559}>
+      Visible only if display has width between <code>320px</code> and <code>2559px</code>
+  </Responsive>
+)
+
+export default ResponsiveExampleMixed
diff --git a/docs/app/Examples/addons/Responsive/Types/ResponsiveExampleResponsive.js b/docs/app/Examples/addons/Responsive/Types/ResponsiveExampleResponsive.js
new file mode 100644
index 0000000000..78c1883cad
--- /dev/null
+++ b/docs/app/Examples/addons/Responsive/Types/ResponsiveExampleResponsive.js
@@ -0,0 +1,10 @@
+import React from 'react'
+import { Responsive, Segment } from 'semantic-ui-react'
+
+const ResponsiveExampleResponsive = () => (
+  <Segment.Group>
+    <Responsive as={Segment}>I'm always visible by default</Responsive>
+  </Segment.Group>
+)
+
+export default ResponsiveExampleResponsive
diff --git a/docs/app/Examples/addons/Responsive/Types/index.js b/docs/app/Examples/addons/Responsive/Types/index.js
new file mode 100644
index 0000000000..94a474bc1a
--- /dev/null
+++ b/docs/app/Examples/addons/Responsive/Types/index.js
@@ -0,0 +1,41 @@
+import React from 'react'
+import { Message } from 'semantic-ui-react'
+
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const ResponsiveTypesExamples = () => (
+  <ExampleSection title='Types'>
+    <ComponentExample
+      title='Responsive'
+      description='Responsive is always visible.'
+      examplePath='addons/Responsive/Types/ResponsiveExampleResponsive'
+    >
+      <Message info>
+        Instead of <code>Grid</code> visibility breakpoints, <code>Responsive</code> doesn't render invisible content.
+      </Message>
+    </ComponentExample>
+    <ComponentExample
+      title='Minimal Width'
+      description='You can pass minimal width value at which content will be displayed.'
+      examplePath='addons/Responsive/Types/ResponsiveExampleMinWidth'
+    />
+    <ComponentExample
+      title='Maximum Width'
+      description='You can pass maximum width value at which content will be displayed.'
+      examplePath='addons/Responsive/Types/ResponsiveExampleMaxWidth'
+    />
+    <ComponentExample
+      title='Mixed'
+      description='You can pass minimal and maximum width value at which content will be displayed.'
+      examplePath='addons/Responsive/Types/ResponsiveExampleMixed'
+    />
+    <ComponentExample
+      title='Content'
+      description='Responsive can contain different content.'
+      examplePath='addons/Responsive/Types/ResponsiveExampleContent'
+    />
+  </ExampleSection>
+)
+
+export default ResponsiveTypesExamples
diff --git a/docs/app/Examples/addons/Responsive/Usage/ResponsiveExampleBreakpoints.js b/docs/app/Examples/addons/Responsive/Usage/ResponsiveExampleBreakpoints.js
new file mode 100644
index 0000000000..f2b7d56fd4
--- /dev/null
+++ b/docs/app/Examples/addons/Responsive/Usage/ResponsiveExampleBreakpoints.js
@@ -0,0 +1,14 @@
+import React from 'react'
+import { Responsive, Segment } from 'semantic-ui-react'
+
+const ResponsiveExampleBreakpoints = () => (
+  <Segment.Group>
+    <Responsive as={Segment} {...Responsive.onlyMobile}>Mobile</Responsive>
+    <Responsive as={Segment} {...Responsive.onlyTablet}>Tablet</Responsive>
+    <Responsive as={Segment} {...Responsive.onlyComputer}>Computer</Responsive>
+    <Responsive as={Segment} {...Responsive.onlyLargeScreen}>Large Screen</Responsive>
+    <Responsive as={Segment} {...Responsive.onlyWidescreen}>Widescreen</Responsive>
+  </Segment.Group>
+)
+
+export default ResponsiveExampleBreakpoints
diff --git a/docs/app/Examples/addons/Responsive/Usage/ResponsiveExampleOnUpdate.js b/docs/app/Examples/addons/Responsive/Usage/ResponsiveExampleOnUpdate.js
new file mode 100644
index 0000000000..02bf1d303e
--- /dev/null
+++ b/docs/app/Examples/addons/Responsive/Usage/ResponsiveExampleOnUpdate.js
@@ -0,0 +1,53 @@
+import React, { Component } from 'react'
+import { Button, Grid, Label, Responsive, Segment } from 'semantic-ui-react'
+
+export default class ResponsiveExampleOnUpdate extends Component {
+  state = {
+    log: [],
+    logCount: 0,
+  }
+
+  handleOnUpdate = () => this.setState({
+    log: [
+      `${new Date().toLocaleTimeString()}: onUpdate()`,
+      ...this.state.log,
+    ].slice(0, 20),
+    logCount: this.state.logCount + 1,
+  })
+
+  clearLog = () => this.setState({ log: [], logCount: 0 })
+
+  render() {
+    const { log, logCount } = this.state
+
+    return (
+      <Grid columns={2}>
+        <Grid.Column>
+          <Responsive as={Segment} onUpdate={this.handleOnUpdate}>
+            Responsive Segment
+          </Responsive>
+        </Grid.Column>
+
+        <Grid.Column>
+          <Segment.Group>
+            <Segment>
+              <Button
+                compact
+                content='Clear'
+                floated='right'
+                onClick={this.clearLog}
+                size='small'
+              />
+              Event Log <Label circular>{logCount}</Label>
+            </Segment>
+            {log.length > 0 && (
+              <Segment secondary>
+                <pre>{log.map((e, i) => <div key={i}>{e}</div>)}</pre>
+              </Segment>
+            )}
+          </Segment.Group>
+        </Grid.Column>
+      </Grid>
+    )
+  }
+}
diff --git a/docs/app/Examples/addons/Responsive/Usage/index.js b/docs/app/Examples/addons/Responsive/Usage/index.js
new file mode 100644
index 0000000000..e4f3ebe169
--- /dev/null
+++ b/docs/app/Examples/addons/Responsive/Usage/index.js
@@ -0,0 +1,21 @@
+import React from 'react'
+
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const ResponsiveUsageExamples = () => (
+  <ExampleSection title='Usage'>
+    <ComponentExample
+      title='Predefined breakpoints'
+      description='Responsive has predefined breakpoints that mimics SUI default variables.'
+      examplePath='addons/Responsive/Usage/ResponsiveExampleBreakpoints'
+    />
+    <ComponentExample
+      title='OnUpdate'
+      description='Responsive listens for window resize events and calls event handler.'
+      examplePath='addons/Responsive/Usage/ResponsiveExampleOnUpdate'
+    />
+  </ExampleSection>
+)
+
+export default ResponsiveUsageExamples
diff --git a/docs/app/Examples/addons/Responsive/index.js b/docs/app/Examples/addons/Responsive/index.js
new file mode 100644
index 0000000000..e976ba8196
--- /dev/null
+++ b/docs/app/Examples/addons/Responsive/index.js
@@ -0,0 +1,13 @@
+import React from 'react'
+
+import Types from './Types'
+import Usage from './Usage'
+
+const ResponsiveExamples = () => (
+  <div>
+    <Types />
+    <Usage />
+  </div>
+)
+
+export default ResponsiveExamples
diff --git a/index.d.ts b/index.d.ts
index df2212038c..5654094f4c 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -1,4 +1,9 @@
 // Addons
+export {
+  default as Responsive,
+  ResponsiveProps,
+  ResponsiveWidthShorthand
+} from './dist/commonjs/addons/Responsive';
 export { default as Confirm, ConfirmProps } from './dist/commonjs/addons/Confirm';
 export { default as Portal, PortalProps } from './dist/commonjs/addons/Portal';
 export { default as Radio, RadioProps } from './dist/commonjs/addons/Radio';
diff --git a/src/addons/Responsive/Responsive.d.ts b/src/addons/Responsive/Responsive.d.ts
new file mode 100644
index 0000000000..5a52c3d181
--- /dev/null
+++ b/src/addons/Responsive/Responsive.d.ts
@@ -0,0 +1,44 @@
+import * as React from 'react';
+
+export interface ResponsiveProps {
+  [key: string]: any;
+
+  /** An element type to render as (string or function). */
+  as?: any;
+
+  /** Primary content. */
+  children?: React.ReactNode;
+
+  /** The maximum width at which content will be displayed. */
+  maxWidth?: number | string;
+
+  /** The minimum width at which content will be displayed. */
+  minWidth?: number | string;
+
+  /**
+   * Called on update.
+   *
+   * @param {SyntheticEvent} event - The React SyntheticEvent object
+   * @param {object} data - All props and the event value.
+   */
+  onUpdate?: (event: React.SyntheticEvent<HTMLElement>, data: ResponsiveOnUpdateData) => void;
+}
+
+export interface ResponsiveOnUpdateData extends ResponsiveProps {
+  width: string;
+}
+
+export interface ResponsiveWidthShorthand {
+  minWidth: number;
+  maxWidth?: number;
+}
+
+declare class Responsive extends React.Component<ResponsiveProps, {}> {
+  static onlyMobile: ResponsiveWidthShorthand;
+  static onlyTablet: ResponsiveWidthShorthand;
+  static onlyComputer: ResponsiveWidthShorthand;
+  static onlyLargeScreen: ResponsiveWidthShorthand;
+  static onlyWidescreen: ResponsiveWidthShorthand;
+}
+
+export default Responsive;
diff --git a/src/addons/Responsive/Responsive.js b/src/addons/Responsive/Responsive.js
new file mode 100644
index 0000000000..bee953ca4e
--- /dev/null
+++ b/src/addons/Responsive/Responsive.js
@@ -0,0 +1,121 @@
+import _ from 'lodash'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
+
+import {
+  customPropTypes,
+  eventStack,
+  getElementType,
+  getUnhandledProps,
+  META,
+} from '../../lib'
+
+/**
+ * Responsive can control visibility of content.
+ */
+export default class Responsive extends Component {
+  static propTypes = {
+    /** An element type to render as (string or function). */
+    as: customPropTypes.as,
+
+    /** Primary content. */
+    children: PropTypes.node,
+
+    /** The maximum width at which content will be displayed. */
+    maxWidth: PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.string,
+    ]),
+
+    /** The minimum width at which content will be displayed. */
+    minWidth: PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.string,
+    ]),
+
+    /**
+     * Called on update.
+     *
+     * @param {SyntheticEvent} event - The React SyntheticEvent object
+     * @param {object} data - All props and the event value.
+     */
+    onUpdate: PropTypes.func,
+  }
+
+  static _meta = {
+    name: 'Responsive',
+    type: META.TYPES.ADDON,
+  }
+
+  static onlyMobile = { minWidth: 320, maxWidth: 767 }
+  static onlyTablet = { minWidth: 768, maxWidth: 991 }
+  static onlyComputer = { minWidth: 992 }
+  static onlyLargeScreen = { minWidth: 1200, maxWidth: 1919 }
+  static onlyWidescreen = { minWidth: 1920 }
+
+  constructor(...args) {
+    super(...args)
+    this.state = { width: window.innerWidth }
+  }
+
+  componentDidMount() {
+    eventStack.sub('resize', this.handleResize)
+  }
+
+  componentWillUnmount() {
+    eventStack.unsub('resize', this.handleResize)
+  }
+
+  // ----------------------------------------
+  // Helpers
+  // ----------------------------------------
+
+  fitsMaxWidth = () => {
+    const { maxWidth } = this.props
+    const { width } = this.state
+
+    return _.isNil(maxWidth) ? true : width <= maxWidth
+  }
+
+  fitsMinWidth = () => {
+    const { minWidth } = this.props
+    const { width } = this.state
+
+    return _.isNil(minWidth) ? true : width >= minWidth
+  }
+
+  isVisible = () => this.fitsMinWidth() && this.fitsMaxWidth()
+
+  // ----------------------------------------
+  // Event handlers
+  // ----------------------------------------
+
+  handleResize = (e) => {
+    if (this.ticking) return
+
+    this.ticking = true
+    requestAnimationFrame(() => this.handleUpdate(e))
+  }
+
+  handleUpdate = (e) => {
+    this.ticking = false
+    const width = window.innerWidth
+
+    this.setState({ width })
+    _.invoke(this.props, 'onUpdate', e, { ...this.props, width })
+  }
+
+  // ----------------------------------------
+  // Render
+  // ----------------------------------------
+
+  render() {
+    const { children } = this.props
+
+    const ElementType = getElementType(Responsive, this.props)
+    const rest = getUnhandledProps(Responsive, this.props)
+
+    if (this.isVisible()) return <ElementType {...rest}>{children}</ElementType>
+    return null
+  }
+}
diff --git a/src/addons/Responsive/index.d.ts b/src/addons/Responsive/index.d.ts
new file mode 100644
index 0000000000..1b11f72ff4
--- /dev/null
+++ b/src/addons/Responsive/index.d.ts
@@ -0,0 +1 @@
+export { default, ResponsiveProps, ResponsiveOnUpdateData, ResponsiveWidthShorthand } from './Responsive';
diff --git a/src/addons/Responsive/index.js b/src/addons/Responsive/index.js
new file mode 100644
index 0000000000..fd5e7015aa
--- /dev/null
+++ b/src/addons/Responsive/index.js
@@ -0,0 +1 @@
+export default from './Responsive'
diff --git a/src/index.js b/src/index.js
index 356e9e74cb..e42c3cd3e8 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,4 +1,5 @@
 // Addons
+export { default as Responsive } from './addons/Responsive'
 export { default as Confirm } from './addons/Confirm'
 export { default as Portal } from './addons/Portal'
 export { default as Radio } from './addons/Radio'
diff --git a/src/lib/eventStack.js b/src/lib/eventStack.js
index 2a70839a85..368d75b40e 100644
--- a/src/lib/eventStack.js
+++ b/src/lib/eventStack.js
@@ -1,6 +1,8 @@
 import _ from 'lodash'
 import isBrowser from './isBrowser'
 
+const windowEvents = ['resize']
+
 class EventStack {
   _handlers = {}
   _pools = {}
@@ -31,16 +33,18 @@ class EventStack {
   _listen = (name) => {
     if (_.has(this._handlers, name)) return
     const handler = this._emit(name)
+    const target = _.includes(windowEvents, name) ? window : document
 
-    document.addEventListener(name, handler)
+    target.addEventListener(name, handler)
     this._handlers[name] = handler
   }
 
   _unlisten = (name) => {
     if (_.some(this._pools, name)) return
     const { [name]: handler } = this._handlers
+    const target = _.includes(windowEvents, name) ? window : document
 
-    document.removeEventListener(name, handler)
+    target.removeEventListener(name, handler)
     delete this._handlers[name]
   }
 
diff --git a/test/specs/addons/Responsive/Responsive-test.js b/test/specs/addons/Responsive/Responsive-test.js
new file mode 100644
index 0000000000..50849bdcd6
--- /dev/null
+++ b/test/specs/addons/Responsive/Responsive-test.js
@@ -0,0 +1,77 @@
+import React from 'react'
+
+import Responsive from 'src/addons/Responsive/Responsive'
+import * as common from 'test/specs/commonTests'
+import { domEvent, sandbox } from 'test/utils'
+
+describe('Responsive', () => {
+  common.isConformant(Responsive)
+  common.rendersChildren(Responsive)
+
+  describe('children', () => {
+    it('renders by default', () => {
+      shallow(<Responsive />)
+        .should.be.present()
+    })
+  })
+
+  describe('maxWidth', () => {
+    it('renders when fits', () => {
+      sandbox.stub(window, 'innerWidth').value(Responsive.onlyMobile.maxWidth)
+      shallow(<Responsive {...Responsive.onlyMobile} />)
+        .should.be.present()
+    })
+
+    it('do not render when not fits', () => {
+      sandbox.stub(window, 'innerWidth').value(Responsive.onlyTablet.maxWidth)
+      shallow(<Responsive {...Responsive.onlyMobile} />)
+        .should.be.blank()
+    })
+  })
+
+  describe('minWidth', () => {
+    it('renders when fits', () => {
+      sandbox.stub(window, 'innerWidth').value(Responsive.onlyMobile.minWidth)
+      shallow(<Responsive {...Responsive.onlyMobile} />)
+        .should.be.present()
+    })
+
+    it('do not render when not fits', () => {
+      sandbox.stub(window, 'innerWidth').value(Responsive.onlyTablet.minWidth)
+      shallow(<Responsive {...Responsive.onlyMobile} />)
+        .should.be.blank()
+    })
+  })
+
+  describe('onUpdate', () => {
+    it('listens for resize', (done) => {
+      sandbox.stub(window, 'innerWidth').value(Responsive.onlyMobile.minWidth)
+      const wrapper = mount(<Responsive {...Responsive.onlyMobile} />)
+      wrapper.should.be.present()
+
+      sandbox.stub(window, 'innerWidth').value(Responsive.onlyTablet.minWidth)
+      domEvent.fire(window, 'resize')
+
+      requestAnimationFrame(() => {
+        wrapper.should.be.blank()
+        done()
+      })
+    })
+
+    it('is called with (e, data) when window was resized', (done) => {
+      const onUpdate = sandbox.spy()
+      const width = Responsive.onlyTablet.minWidth
+      mount(<Responsive {...Responsive.onlyMobile} onUpdate={onUpdate} />)
+
+      sandbox.stub(window, 'innerWidth').value(width)
+      domEvent.fire(window, 'resize')
+
+      requestAnimationFrame(() => {
+        onUpdate.should.have.been.calledOnce()
+        onUpdate.should.have.been.calledWithMatch({}, { ...Responsive.onlyMobile, width })
+
+        done()
+      })
+    })
+  })
+})
diff --git a/test/specs/commonTests/isConformant.js b/test/specs/commonTests/isConformant.js
index bdf4983d75..2ee7575494 100644
--- a/test/specs/commonTests/isConformant.js
+++ b/test/specs/commonTests/isConformant.js
@@ -131,12 +131,12 @@ export default (Component, options = {}) => {
       const tags = ['a', 'em', 'div', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'i', 'p', 'span', 'strong']
       try {
         tags.forEach((tag) => {
-          shallow(<Component as={tag} />)
+          shallow(<Component {...requiredProps} as={tag} />)
             .should.have.tagName(tag)
         })
       } catch (err) {
         tags.forEach((tag) => {
-          const wrapper = shallow(<Component as={tag} />)
+          const wrapper = shallow(<Component {...requiredProps} as={tag} />)
           wrapper.type().should.not.equal(Component)
           wrapper.should.have.prop('as', tag)
         })
@@ -147,11 +147,11 @@ export default (Component, options = {}) => {
       const MyComponent = () => null
 
       try {
-        shallow(<Component as={MyComponent} />)
+        shallow(<Component {...requiredProps} as={MyComponent} />)
           .type()
           .should.equal(MyComponent)
       } catch (err) {
-        const wrapper = shallow(<Component as={MyComponent} />)
+        const wrapper = shallow(<Component {...requiredProps} as={MyComponent} />)
         wrapper.type().should.not.equal(Component)
         wrapper.should.have.prop('as', MyComponent)
       }
@@ -165,11 +165,11 @@ export default (Component, options = {}) => {
       }
 
       try {
-        shallow(<Component as={MyComponent} />)
+        shallow(<Component {...requiredProps} as={MyComponent} />)
           .type()
           .should.equal(MyComponent)
       } catch (err) {
-        const wrapper = shallow(<Component as={MyComponent} />)
+        const wrapper = shallow(<Component {...requiredProps} as={MyComponent} />)
         wrapper.type().should.not.equal(Component)
         wrapper.should.have.prop('as', MyComponent)
       }
@@ -178,7 +178,7 @@ export default (Component, options = {}) => {
     it('passes extra props to the component it is renders as', () => {
       const MyComponent = () => null
 
-      shallow(<Component as={MyComponent} data-extra-prop='foo' />)
+      shallow(<Component {...requiredProps} as={MyComponent} data-extra-prop='foo' />)
         .should.have.descendants('[data-extra-prop="foo"]')
     })
   })