From 7ad2e8cc9f5a65c37d74c74ff5a8434a531a354a Mon Sep 17 00:00:00 2001
From: Mohamed Shaaban <topcoder.fci@gmail.com>
Date: Sun, 25 Feb 2018 23:10:35 +0100
Subject: [PATCH] Decouple initial viewports from SelectViewport component

---
 .../viewport/src/manager/components/Panel.js  |  9 +++++---
 .../src/manager/components/SelectViewport.js  |  5 ++--
 .../manager/components/tests/Panel.test.js    | 23 ++++++++++++++++---
 .../components/tests/SelectViewport.test.js   | 10 ++++----
 .../components/tests/viewportInfo.spec.js     |  8 +++----
 .../src/manager/components/viewportInfo.js    |  2 +-
 6 files changed, 40 insertions(+), 17 deletions(-)

diff --git a/addons/viewport/src/manager/components/Panel.js b/addons/viewport/src/manager/components/Panel.js
index 1056888938d..122c0347266 100644
--- a/addons/viewport/src/manager/components/Panel.js
+++ b/addons/viewport/src/manager/components/Panel.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { baseFonts } from '@storybook/components';
 import { document } from 'global';
 
-import { viewports, defaultViewport, resetViewport } from './viewportInfo';
+import { initialViewports, defaultViewport, resetViewport } from './viewportInfo';
 import { SelectViewport } from './SelectViewport';
 import { RotateViewport } from './RotateViewport';
 import { UPDATE_VIEWPORT_EVENT_ID } from '../../shared';
@@ -27,6 +27,7 @@ export class Panel extends Component {
     super(props, context);
     this.state = {
       viewport: defaultViewport,
+      viewports: initialViewports,
       isLandscape: false,
     };
 
@@ -64,7 +65,7 @@ export class Panel extends Component {
   };
 
   updateIframe = () => {
-    const { viewport: viewportKey, isLandscape } = this.state;
+    const { viewports, viewport: viewportKey, isLandscape } = this.state;
     const viewport = viewports[viewportKey] || resetViewport;
 
     if (!this.iframe) {
@@ -82,7 +83,7 @@ export class Panel extends Component {
   };
 
   render() {
-    const { isLandscape, viewport } = this.state;
+    const { isLandscape, viewport, viewports } = this.state;
 
     const disableDefault = viewport === defaultViewport;
     const disabledStyles = disableDefault ? styles.disabled : {};
@@ -97,6 +98,8 @@ export class Panel extends Component {
     return (
       <div style={containerStyles}>
         <SelectViewport
+          viewports={viewports}
+          defaultViewport={defaultViewport}
           activeViewport={viewport}
           onChange={e => this.changeViewport(e.target.value)}
         />
diff --git a/addons/viewport/src/manager/components/SelectViewport.js b/addons/viewport/src/manager/components/SelectViewport.js
index 230e360239d..0312a06263c 100644
--- a/addons/viewport/src/manager/components/SelectViewport.js
+++ b/addons/viewport/src/manager/components/SelectViewport.js
@@ -1,10 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { viewports, defaultViewport } from './viewportInfo';
 import * as styles from './styles';
 
-export function SelectViewport({ activeViewport, onChange }) {
+export function SelectViewport({ viewports, defaultViewport, activeViewport, onChange }) {
   return (
     <div style={styles.row}>
       <label htmlFor="device" style={styles.label}>
@@ -25,4 +24,6 @@ export function SelectViewport({ activeViewport, onChange }) {
 SelectViewport.propTypes = {
   onChange: PropTypes.func.isRequired,
   activeViewport: PropTypes.string.isRequired,
+  viewports: PropTypes.shape({}).isRequired,
+  defaultViewport: PropTypes.string.isRequired,
 };
diff --git a/addons/viewport/src/manager/components/tests/Panel.test.js b/addons/viewport/src/manager/components/tests/Panel.test.js
index 4ad4a189185..e2ae6939722 100644
--- a/addons/viewport/src/manager/components/tests/Panel.test.js
+++ b/addons/viewport/src/manager/components/tests/Panel.test.js
@@ -3,7 +3,7 @@ import { shallow } from 'enzyme';
 import { document } from 'global';
 
 import { Panel } from '../Panel';
-import { viewports, defaultViewport, resetViewport } from '../viewportInfo';
+import { initialViewports, defaultViewport, resetViewport } from '../viewportInfo';
 import * as styles from '../styles';
 
 describe('Viewport/Panel', () => {
@@ -24,6 +24,7 @@ describe('Viewport/Panel', () => {
     it('creates the initial state', () => {
       expect(subject.instance().state).toEqual({
         viewport: defaultViewport,
+        viewports: initialViewports,
         isLandscape: false,
       });
     });
@@ -76,13 +77,13 @@ describe('Viewport/Panel', () => {
 
     describe('new viewport', () => {
       beforeEach(() => {
-        subject.instance().changeViewport(viewports[0]);
+        subject.instance().changeViewport(initialViewports[0]);
       });
 
       it('sets the state with the new information', () => {
         expect(subject.instance().setState).toHaveBeenCalledWith(
           {
-            viewport: viewports[0],
+            viewport: initialViewports[0],
             isLandscape: false,
           },
           subject.instance().updateIframe
@@ -204,6 +205,22 @@ describe('Viewport/Panel', () => {
         );
       });
 
+      it('passes the defaultViewport', () => {
+        expect(select.props()).toEqual(
+          expect.objectContaining({
+            defaultViewport,
+          })
+        );
+      });
+
+      it('passes the initialViewports', () => {
+        expect(select.props()).toEqual(
+          expect.objectContaining({
+            viewports: initialViewports,
+          })
+        );
+      });
+
       it('onChange it updates the viewport', () => {
         const e = { target: { value: 'iphone6' } };
         select.simulate('change', e);
diff --git a/addons/viewport/src/manager/components/tests/SelectViewport.test.js b/addons/viewport/src/manager/components/tests/SelectViewport.test.js
index f43d30763d5..067c87659a9 100644
--- a/addons/viewport/src/manager/components/tests/SelectViewport.test.js
+++ b/addons/viewport/src/manager/components/tests/SelectViewport.test.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { SelectViewport } from '../SelectViewport';
-import { viewports, defaultViewport } from '../viewportInfo';
+import { initialViewports, defaultViewport } from '../viewportInfo';
 import * as styles from '../styles';
 
 describe('Viewport/SelectViewport', () => {
@@ -12,6 +12,8 @@ describe('Viewport/SelectViewport', () => {
     props = {
       onChange: jest.fn(),
       activeViewport: defaultViewport,
+      viewports: initialViewports,
+      defaultViewport,
     };
 
     subject = shallow(<SelectViewport {...props} />);
@@ -35,7 +37,7 @@ describe('Viewport/SelectViewport', () => {
     });
 
     describe('dynamic options', () => {
-      const viewportKeys = Object.keys(viewports);
+      const viewportKeys = Object.keys(initialViewports);
       it('has at least 1 option', () => {
         expect(viewportKeys.length).toBeGreaterThan(0);
       });
@@ -43,9 +45,9 @@ describe('Viewport/SelectViewport', () => {
       viewportKeys.forEach(key => {
         let option;
 
-        it(`renders an option for ${viewports[key].name}`, () => {
+        it(`renders an option for ${initialViewports[key].name}`, () => {
           option = subject.find(`[value="${key}"]`);
-          expect(option.text()).toEqual(viewports[key].name);
+          expect(option.text()).toEqual(initialViewports[key].name);
         });
       });
     });
diff --git a/addons/viewport/src/manager/components/tests/viewportInfo.spec.js b/addons/viewport/src/manager/components/tests/viewportInfo.spec.js
index a2baa2fd03b..c6c24ed50bc 100644
--- a/addons/viewport/src/manager/components/tests/viewportInfo.spec.js
+++ b/addons/viewport/src/manager/components/tests/viewportInfo.spec.js
@@ -1,12 +1,12 @@
-import { viewports, resetViewport, configuredStyles } from '../viewportInfo';
+import { initialViewports, resetViewport, configuredStyles } from '../viewportInfo';
 
 describe('Viewport/constants', () => {
-  describe('viewports', () => {
+  describe('initialViewports', () => {
     it('includes the default styles on every custom viewport', () => {
-      const keys = Object.keys(viewports);
+      const keys = Object.keys(initialViewports);
 
       keys.forEach(key => {
-        expect(viewports[key].styles).toEqual(expect.objectContaining(configuredStyles));
+        expect(initialViewports[key].styles).toEqual(expect.objectContaining(configuredStyles));
       });
     });
   });
diff --git a/addons/viewport/src/manager/components/viewportInfo.js b/addons/viewport/src/manager/components/viewportInfo.js
index df969539910..6a2bdd52552 100644
--- a/addons/viewport/src/manager/components/viewportInfo.js
+++ b/addons/viewport/src/manager/components/viewportInfo.js
@@ -18,7 +18,7 @@ export const resetViewport = {
   },
 };
 
-export const viewports = {
+export const initialViewports = {
   iphone5: {
     name: 'iPhone 5',
     styles: {