@skyscanner/backpack-web 7.0.0-alpha.1 → 7.0.0-alpha.2

package/bpk-react-utils/src/Portal.js

@@ -0,0 +1,288 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _reactDom = require("react-dom");
+
+var _objectAssign = _interopRequireDefault(require("object-assign"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const KEYCODES = {
+  ESCAPE: 'Escape'
+};
+
+class Portal extends _react.Component {
+  constructor() {
+    super();
+    this.portalElement = null;
+    this.state = {
+      isVisible: false
+    }; // shouldClose is used to keep track of the user's mouse-down events in order to
+    // prevent the dialog closing if the mouse leaves / enters the portal during the click
+
+    this.shouldClose = false;
+    this.close = this.close.bind(this);
+    this.onDocumentMouseUp = this.onDocumentMouseUp.bind(this);
+    this.onDocumentMouseDown = this.onDocumentMouseDown.bind(this);
+    this.onDocumentKeyDown = this.onDocumentKeyDown.bind(this);
+    this.onDocumentMouseMove = this.onDocumentMouseMove.bind(this);
+    this.getClickEventProperties = this.getClickEventProperties.bind(this);
+    this.supportsPassiveEvents = this.supportsPassiveEvents.bind(this);
+  }
+
+  componentDidMount() {
+    if (this.props.isOpen) {
+      this.open();
+    }
+
+    if (this.props.targetRef) {
+      this.props.targetRef(this.getTargetElement());
+    }
+  } // When the consumer updates `isOpen` to be `false`, we
+  // call their beforeClose function so that they can trigger the close.
+  // If they don't provide `beforeClose` we just call `close` directly.
+
+
+  componentDidUpdate(prevProps) {
+    if (this.props.isOpen) {
+      if (!prevProps.isOpen) {
+        this.open();
+      } else {
+        this.props.onRender(this.portalElement, this.getTargetElement());
+      }
+    } else if (prevProps.isOpen) {
+      if (this.props.beforeClose) {
+        this.props.beforeClose(this.close);
+      } else {
+        this.close();
+      }
+    }
+  }
+
+  componentWillUnmount() {
+    this.close();
+  }
+
+  onDocumentMouseDown(event) {
+    const clickEventProperties = this.getClickEventProperties(event);
+
+    if (clickEventProperties.isNotLeftClick || clickEventProperties.isTargetClick || clickEventProperties.isPortalClick) {
+      this.shouldClose = false;
+      return;
+    }
+
+    this.shouldClose = true;
+  }
+
+  onDocumentMouseUp(event) {
+    const clickEventProperties = this.getClickEventProperties(event);
+
+    if (clickEventProperties.isNotLeftClick || clickEventProperties.isTargetClick || clickEventProperties.isPortalClick) {
+      this.shouldClose = false;
+      return;
+    }
+
+    if (this.shouldClose) {
+      // `onClose` tells the consumer that they should change `isOpen` to false.
+      // Once the consumer has responded to `onClose`, `beforeClose` and `close` will be called.
+      this.props.onClose(event, {
+        source: 'DOCUMENT_CLICK'
+      });
+    }
+  }
+
+  onDocumentKeyDown(event) {
+    if (event.key === KEYCODES.ESCAPE && this.props.isOpen && this.props.closeOnEscPressed) {
+      // `onClose` tells the consumer that they should change `isOpen` to false.
+      // Once the consumer has responded to `onClose`, `beforeClose` and `close` will be called.
+      this.props.onClose(event, {
+        source: 'ESCAPE'
+      });
+    }
+  }
+
+  onDocumentMouseMove() {
+    this.shouldClose = false;
+  }
+
+  getClickEventProperties(event) {
+    const isNotLeftClick = event.button && event.button !== 0;
+    const targetElement = this.getTargetElement();
+    const isTargetClick = targetElement && event.target instanceof Node && (event.target === targetElement || targetElement.contains(event.target));
+    const isPortalClick = this.portalElement && event.target instanceof Node && (event.target === this.portalElement || this.portalElement.contains(event.target));
+    return {
+      isNotLeftClick: !!isNotLeftClick,
+      isTargetClick: !!isTargetClick,
+      isPortalClick: !!isPortalClick
+    };
+  }
+
+  getTargetElement() {
+    var _this$props$target;
+
+    return typeof this.props.target === 'function' ? this.props.target() : (_this$props$target = this.props.target) === null || _this$props$target === void 0 ? void 0 : _this$props$target.ref.current;
+  }
+
+  getRenderTarget() {
+    const target = typeof this.props.renderTarget === 'function' ? this.props.renderTarget() : this.props.renderTarget;
+
+    if (target) {
+      return target;
+    }
+
+    if (document.body) {
+      return document.body;
+    }
+
+    throw new Error('Render target and fallback unavailable');
+  }
+
+  open() {
+    if (this.portalElement) {
+      return;
+    }
+
+    this.portalElement = document.createElement('div');
+    this.getRenderTarget().appendChild(this.portalElement);
+    const passiveArgs = this.supportsPassiveEvents() ? {
+      passive: true
+    } : false;
+    document.addEventListener('touchstart', this.onDocumentMouseDown, passiveArgs);
+    document.addEventListener('touchmove', this.onDocumentMouseMove, passiveArgs);
+    document.addEventListener('touchend', this.onDocumentMouseUp, passiveArgs);
+    document.addEventListener('mousedown', this.onDocumentMouseDown, false);
+    document.addEventListener('mouseup', this.onDocumentMouseUp, false);
+    document.addEventListener('keydown', this.onDocumentKeyDown, false);
+
+    if (this.props.style) {
+      (0, _objectAssign.default)(this.portalElement.style, this.props.style);
+    }
+
+    if (this.props.className) {
+      this.portalElement.className = this.props.className;
+    }
+
+    this.setState({
+      isVisible: true
+    }, () => this.props.onOpen(this.portalElement, this.getTargetElement()));
+  }
+
+  close() {
+    if (!this.portalElement) {
+      return;
+    }
+
+    const renderTarget = this.getRenderTarget();
+
+    if (renderTarget) {
+      renderTarget.removeChild(this.portalElement);
+    }
+
+    document.removeEventListener('touchstart', this.onDocumentMouseDown);
+    document.removeEventListener('touchmove', this.onDocumentMouseMove);
+    document.removeEventListener('touchend', this.onDocumentMouseUp);
+    document.removeEventListener('mousedown', this.onDocumentMouseDown);
+    document.removeEventListener('mouseup', this.onDocumentMouseUp);
+    document.removeEventListener('keydown', this.onDocumentKeyDown);
+    this.portalElement = null;
+    this.setState({
+      isVisible: false
+    });
+  } // This function is taken from modernizr
+  // See https://github.com/modernizr/modernizr
+  // eslint-disable-next-line class-methods-use-this
+
+
+  supportsPassiveEvents() {
+    let supportsPassiveOption = false;
+
+    try {
+      const opts = Object.defineProperty({}, 'passive', {
+        // eslint-disable-next-line getter-return
+        get() {
+          supportsPassiveOption = true;
+        }
+
+      });
+      window.addEventListener('test', null, opts);
+    } catch (e) {
+      return false;
+    }
+
+    return supportsPassiveOption;
+  }
+
+  render() {
+    const {
+      portalElement,
+      props: {
+        children
+      },
+      state: {
+        isVisible
+      }
+    } = this;
+
+    if (!isVisible || !portalElement) {
+      return null;
+    }
+
+    return /*#__PURE__*/(0, _reactDom.createPortal)(children, portalElement);
+  }
+
+}
+
+Portal.propTypes = {
+  children: _propTypes.default.node.isRequired,
+  isOpen: _propTypes.default.bool.isRequired,
+  beforeClose: _propTypes.default.func,
+  className: _propTypes.default.string,
+  onClose: _propTypes.default.func,
+  onOpen: _propTypes.default.func,
+  onRender: _propTypes.default.func,
+  style: _propTypes.default.object,
+  // eslint-disable-line react/forbid-prop-types
+  renderTarget: _propTypes.default.func,
+  target: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
+  targetRef: _propTypes.default.func,
+  closeOnEscPressed: _propTypes.default.bool
+};
+Portal.defaultProps = {
+  beforeClose: null,
+  className: null,
+  onClose: () => null,
+  onOpen: () => null,
+  onRender: () => null,
+  style: null,
+  renderTarget: null,
+  target: null,
+  targetRef: null,
+  closeOnEscPressed: true
+};
+var _default = Portal;
+exports.default = _default;

package/bpk-react-utils/src/TransitionInitialMount-test.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _TransitionInitialMount = _interopRequireDefault(require("./TransitionInitialMount"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+describe('TransitionInitialMount', () => {
+  it('should render correctly', () => {
+    const {
+      asFragment
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_TransitionInitialMount.default, {
+      appearClassName: "block--appear",
+      appearActiveClassName: "block--apear-active",
+      transitionTimeout: 250
+    }, /*#__PURE__*/_react.default.createElement("p", null, "My transition")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/bpk-react-utils/src/TransitionInitialMount.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _objectAssign = _interopRequireDefault(require("object-assign"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _CSSTransition = _interopRequireDefault(require("react-transition-group/CSSTransition"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+// Object.assign() is used unpolyfilled in react-transition-group.
+// It will use the native implementation if it's present and isn't buggy.
+Object.assign = _objectAssign.default;
+
+const TransitionInitialMount = ({
+  appearActiveClassName,
+  appearClassName,
+  children,
+  transitionTimeout
+}) => /*#__PURE__*/_react.default.createElement(_CSSTransition.default, {
+  classNames: {
+    appear: appearClassName,
+    appearActive: appearActiveClassName
+  },
+  in: true,
+  appear: true,
+  timeout: {
+    exit: 0,
+    enter: 0,
+    appear: transitionTimeout
+  }
+}, children);
+
+TransitionInitialMount.propTypes = {
+  children: _propTypes.default.node.isRequired,
+  appearClassName: _propTypes.default.string.isRequired,
+  appearActiveClassName: _propTypes.default.string.isRequired,
+  transitionTimeout: _propTypes.default.number.isRequired
+};
+var _default = TransitionInitialMount;
+exports.default = _default;

package/bpk-react-utils/src/accessibility-test.js

@@ -0,0 +1,75 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _jestAxe = require("jest-axe");
+
+var _Portal = _interopRequireDefault(require("./Portal"));
+
+var _TransitionInitialMount = _interopRequireDefault(require("./TransitionInitialMount"));
+
+var _withDefaultProps = _interopRequireDefault(require("./withDefaultProps"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+describe('Portal accessibility tests', () => {
+  it('should not have programmatically-detectable accessibility issues', async () => {
+    const {
+      container
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_Portal.default, {
+      isOpen: false
+    }, /*#__PURE__*/_react.default.createElement("div", null, "My portal content")));
+    const results = await (0, _jestAxe.axe)(container);
+    expect(results).toHaveNoViolations();
+  });
+});
+describe('TransitionInitialMount accessibility tests', () => {
+  it('should not have programmatically-detectable accessibility issues', async () => {
+    const {
+      container
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_TransitionInitialMount.default, {
+      appearClassName: "block--appear",
+      appearActiveClassName: "block--apear-active",
+      transitionTimeout: 250
+    }, /*#__PURE__*/_react.default.createElement("p", null, "My transition")));
+    const results = await (0, _jestAxe.axe)(container);
+    expect(results).toHaveNoViolations();
+  });
+});
+describe('withDefaultProps accessibility tests', () => {
+  it('should not have programmatically-detectable accessibility issues', async () => {
+    const TestComponent = props => /*#__PURE__*/_react.default.createElement("div", props);
+
+    const Component = (0, _withDefaultProps.default)(TestComponent, {
+      a: 1,
+      b: 2,
+      c: {
+        d: 3
+      }
+    });
+    const {
+      container
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(Component, null, "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."));
+    const results = await (0, _jestAxe.axe)(container);
+    expect(results).toHaveNoViolations();
+  });
+});

package/bpk-react-utils/src/cssModules-test.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _cssModules = _interopRequireDefault(require("./cssModules"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+describe('cssModules', () => {
+  it('should return a function', () => {
+    expect((0, _cssModules.default)()).toBeInstanceOf(Function);
+  });
+  describe('returned function', () => {
+    it('should pass through key as className if not found', () => {
+      const getClassName = (0, _cssModules.default)();
+      expect(getClassName('foo')).toEqual('foo');
+      expect(getClassName('bar')).toEqual('bar');
+      expect(getClassName('baz')).toEqual('baz');
+    });
+    it('should resolve classNames for known keys', () => {
+      const getClassName = (0, _cssModules.default)({
+        foo: 'a',
+        bar: 'b',
+        baz: 'c'
+      });
+      expect(getClassName('foo')).toEqual('a');
+      expect(getClassName('bar')).toEqual('b');
+      expect(getClassName('baz')).toEqual('c');
+    });
+    it('should resolve multiple class names', () => {
+      const getClassName = (0, _cssModules.default)({
+        foo: 'a'
+      });
+      expect(getClassName('foo', 'bar')).toEqual('a bar');
+    });
+    it('should ignore values other than strings', () => {
+      const getClassName = (0, _cssModules.default)({
+        foo: 'a'
+      });
+      expect(getClassName('foo', false, 1, undefined, {}, true, 'bar')).toEqual('a bar');
+    });
+  });
+});

package/bpk-react-utils/src/cssModules.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+var _default = (styles = {}) => (...classNames) => classNames.reduce((className, currentClass) => {
+  if (currentClass && typeof currentClass === 'string') {
+    const realName = styles[currentClass] || currentClass;
+    return className ? `${className} ${realName}` : realName;
+  }
+
+  return className;
+}, '');
+
+exports.default = _default;

package/bpk-react-utils/src/deprecated.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+// We disable eslint on the below line because it breaks the flow type definitions and the FlowIssue comment below
+// We can remove this when we migrate this file to TypeScript.
+// $FlowIssue[value-as-type] - PropType is imported as a type so is incorrectly reporting the PropType is not a valid type
+const deprecated = (propType, alternativeSuggestion) => // eslint-disable-line
+(props, propName, componentName, ...rest) => {
+  if (props[propName] != null) {
+    const message = `Warning: "${propName}" property of "${componentName}" has been deprecated. ${alternativeSuggestion}`; // eslint-disable-next-line no-console
+
+    console.warn(message);
+  }
+
+  return propType(props, propName, componentName, ...rest);
+};
+
+var _default = deprecated;
+exports.default = _default;

package/bpk-react-utils/src/deviceDetection-test.js

@@ -0,0 +1,81 @@
+"use strict";
+
+var _deviceDetection = require("./deviceDetection");
+
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+describe('isIphone tests', () => {
+  beforeEach(() => {
+    jest.resetModules();
+  });
+  it('should return a boolean', () => {
+    expect(typeof (0, _deviceDetection.isDeviceIphone)()).toBe('boolean');
+  });
+  it('should return false by default', () => {
+    expect((0, _deviceDetection.isDeviceIphone)()).toBe(false);
+  });
+  it('should return true if an iPhone', () => {
+    // $FlowIssue[extra-arg] - The extra arg for accessType is valid as per the spec of Jest: https://jestjs.io/docs/jest-object#jestspyonobject-methodname-accesstype
+    const platform = jest.spyOn(window.navigator, 'platform', 'get');
+    platform.mockReturnValue('iPhone');
+    expect((0, _deviceDetection.isDeviceIphone)()).toBe(true);
+  });
+});
+describe('isIpad tests', () => {
+  beforeEach(() => {
+    jest.resetModules();
+  });
+  it('should return a boolean', () => {
+    expect(typeof (0, _deviceDetection.isDeviceIpad)()).toBe('boolean');
+  });
+  it('should return false by default', () => {
+    expect((0, _deviceDetection.isDeviceIpad)()).toBe(false);
+  });
+  it('should return true if an iPad', () => {
+    // $FlowIssue[extra-arg] - The extra arg for accessType is valid as per the spec of Jest: https://jestjs.io/docs/jest-object#jestspyonobject-methodname-accesstype
+    const platform = jest.spyOn(window.navigator, 'platform', 'get');
+    platform.mockReturnValue('iPad');
+    expect((0, _deviceDetection.isDeviceIpad)()).toBe(true);
+  });
+});
+describe('isIos tests', () => {
+  beforeEach(() => {
+    jest.resetModules();
+  });
+  it('should return a boolean', () => {
+    expect(typeof (0, _deviceDetection.isDeviceIos)()).toBe('boolean');
+  });
+  it('should return false by default', () => {
+    // $FlowIssue[extra-arg] - The extra arg for accessType is valid as per the spec of Jest: https://jestjs.io/docs/jest-object#jestspyonobject-methodname-accesstype
+    const platform = jest.spyOn(window.navigator, 'platform', 'get');
+    platform.mockReturnValue('Mac');
+    expect((0, _deviceDetection.isDeviceIos)()).toBe(false);
+  });
+  it('should return true if an iPhone', () => {
+    // $FlowIssue[extra-arg] - The extra arg for accessType is valid as per the spec of Jest: https://jestjs.io/docs/jest-object#jestspyonobject-methodname-accesstype
+    const platform = jest.spyOn(window.navigator, 'platform', 'get');
+    platform.mockReturnValue('iPhone');
+    expect((0, _deviceDetection.isDeviceIos)()).toBe(true);
+  });
+  it('should return true if an iPad', () => {
+    // $FlowIssue[extra-arg] - The extra arg for accessType is valid as per the spec of Jest: https://jestjs.io/docs/jest-object#jestspyonobject-methodname-accesstype
+    const platform = jest.spyOn(window.navigator, 'platform', 'get');
+    platform.mockReturnValue('iPad');
+    expect((0, _deviceDetection.isDeviceIos)()).toBe(true);
+  });
+});