Update to enzyme v3 (#1012)

* Update to enzyme v3 * Remove unnecessary new lines * Update Mutli and Single Selectable List Row snapshots
cerner · Nov 13, 2017 · 2b08c19 · 2b08c19
1 parent 81c6946
commit 2b08c19
Show file tree

Hide file tree

Showing 50 changed files with 490 additions and 242 deletions.
diff --git a/jestsetup.js b/jestsetup.js
@@ -1,6 +1,9 @@
 // Make Enzyme functions available in all test files without importing
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { shallow, render, mount } from 'enzyme';
+/* eslint-disable import/no-extraneous-dependencies */
+import Enzyme, { mount, render, shallow } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-15';
+
+Enzyme.configure({ adapter: new Adapter() });
 
 global.shallow = shallow;
 global.render = render;

diff --git a/package.json b/package.json
@@ -67,15 +67,16 @@
   "devDependencies": {
     "babel-cli": "^6.24.1",
     "babel-core": "^6.24.1",
-    "babel-jest": "^20.0.0",
+    "babel-jest": "^21.0.0",
     "babel-plugin-transform-object-assign": "^6.22.0",
     "babel-plugin-transform-object-rest-spread": "^6.23.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
     "check-installed-dependencies": "^1.0.0",
     "danger": "^1.0.0",
-    "enzyme": "^2.8.2",
-    "enzyme-to-json": "^1.5.1",
+    "enzyme": "^3.1.1",
+    "enzyme-adapter-react-15": "^1.0.5",
+    "enzyme-to-json": "^3.2.2",
     "eslint": "^3.19.0",
     "eslint-config-airbnb": "^14.1.0",
     "eslint-plugin-import": "^2.2.0",

diff --git a/packages/terra-arrange/tests/jest/Arrange.test.jsx b/packages/terra-arrange/tests/jest/Arrange.test.jsx
@@ -56,25 +56,25 @@ describe('Arrange', () => {
   it('should have all prop set correctly', () => {
     const arrange = <Arrange fitStart={fitStart} fitEnd={fitEnd} fill={fill} align="center" fitStartAttributes={{ style: { maxWidth: '10px' } }} fillAttributes={{ style: { maxWidth: '20px' } }} fitEndAttributes={{ style: { maxWidth: '30px' } }} />;
     const wrapper = shallow(arrange);
-    expect(wrapper.unrendered.props.fitStart.type).toEqual('img');
-    expect(wrapper.unrendered.props.fitEnd.type).toEqual('a');
-    expect(wrapper.unrendered.props.fill.type).toEqual('div');
-    expect(wrapper.unrendered.props.align).toEqual('center');
-    expect(wrapper.unrendered.props.fitStartAttributes).toEqual({ style: { maxWidth: '10px' } });
-    expect(wrapper.unrendered.props.fillAttributes).toEqual({ style: { maxWidth: '20px' } });
-    expect(wrapper.unrendered.props.fitEndAttributes).toEqual({ style: { maxWidth: '30px' } });
+    expect(wrapper.instance().props.fitStart.type).toEqual('img');
+    expect(wrapper.instance().props.fitEnd.type).toEqual('a');
+    expect(wrapper.instance().props.fill.type).toEqual('div');
+    expect(wrapper.instance().props.align).toEqual('center');
+    expect(wrapper.instance().props.fitStartAttributes).toEqual({ style: { maxWidth: '10px' } });
+    expect(wrapper.instance().props.fillAttributes).toEqual({ style: { maxWidth: '20px' } });
+    expect(wrapper.instance().props.fitEndAttributes).toEqual({ style: { maxWidth: '30px' } });
   });
 
   it('should have align prop undefined when align not pass', () => {
     const arrange = <Arrange fitStart={fitStart} fill={fill} />;
     const wrapper = shallow(arrange);
     expect(wrapper.type()).toEqual('div');
-    expect(wrapper.unrendered.props.alignFitStart).toEqual(undefined);
-    expect(wrapper.unrendered.props.alignFitEnd).toEqual(undefined);
-    expect(wrapper.unrendered.props.alignFill).toEqual(undefined);
-    expect(wrapper.unrendered.props.fitStartAttributes).toEqual(undefined);
-    expect(wrapper.unrendered.props.fillAttributes).toEqual(undefined);
-    expect(wrapper.unrendered.props.fitEndAttributes).toEqual(undefined);
+    expect(wrapper.instance().props.alignFitStart).toEqual(undefined);
+    expect(wrapper.instance().props.alignFitEnd).toEqual(undefined);
+    expect(wrapper.instance().props.alignFill).toEqual(undefined);
+    expect(wrapper.instance().props.fitStartAttributes).toEqual(undefined);
+    expect(wrapper.instance().props.fillAttributes).toEqual(undefined);
+    expect(wrapper.instance().props.fitEndAttributes).toEqual(undefined);
   });
 
   // Structure test

diff --git a/packages/terra-base/tests/jest/Base.test.jsx b/packages/terra-base/tests/jest/Base.test.jsx
@@ -4,10 +4,10 @@ import Base from '../../src/Base';
 // Snapshot Tests
 it('should support rendering a string without translation', () => {
   const base = shallow(<Base>String</Base>);
-
   expect(base).toMatchSnapshot();
 });
 
+
 it('throws error for missing required locale', () => {
   const messages = { Terra: 'Terra' };
 
@@ -17,54 +17,3 @@ it('throws error for missing required locale', () => {
     expect(e.message).toContain('Missing locale prop');
   }
 });
-
-it('should support rendering a string as children', () => {
-  const base = shallow(<Base locale="en-US">String</Base>);
-  base.setState({ areTranslationsLoaded: true });
-
-  expect(base).toMatchSnapshot();
-});
-
-it('should support rendering an element as children', () => {
-  const base = shallow(<Base locale="en-US"><p>Element</p></Base>);
-  base.setState({ areTranslationsLoaded: true });
-
-  expect(base).toMatchSnapshot();
-});
-
-it('should support rendering an array of elements as a children', () => {
-  const base = shallow(<Base locale="en-US"><h1>Heading</h1><p>Element 1</p><p>Element 2</p></Base>);
-  base.setState({ areTranslationsLoaded: true });
-
-  expect(base).toMatchSnapshot();
-});
-
-it('should render the component with merged attributes', () => {
-  const base = shallow(<Base className="TestClass" data-mock="data" id="TestId" locale="en-US">String</Base>);
-  base.setState({ areTranslationsLoaded: true });
-
-  expect(base).toMatchSnapshot();
-});
-
-it('should render the component with customMessages', () => {
-  const customMessages = {
-    'App.test': 'App test',
-  };
-  const base = shallow(<Base customMessages={customMessages} locale="en-US">customMessages</Base>);
-  base.setState({ areTranslationsLoaded: true });
-
-  expect(base).toMatchSnapshot();
-});
-
-it('should support rendering a string as the translationsLoadingPlaceholder prop', () => {
-  const base = shallow(<Base locale="en-US" translationsLoadingPlaceholder="String">String</Base>);
-
-  expect(base).toMatchSnapshot();
-});
-
-it('should support rendering an element as the translationsLoadingPlaceholder prop', () => {
-  const placeholder = <p>Element</p>;
-  const base = shallow(<Base locale="en-US" translationsLoadingPlaceholder={placeholder}>String</Base>);
-
-  expect(base).toMatchSnapshot();
-});
diff --git a/packages/terra-base/tests/jest/__snapshots__/Base.test.jsx.snap b/packages/terra-base/tests/jest/__snapshots__/Base.test.jsx.snap
@@ -1,83 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`should render the component with customMessages 1`] = `
-<I18nProvider
-  locale="en-US"
-  messages={
-    Object {
-      "App.test": "App test",
-    }
-  }
->
-  customMessages
-</I18nProvider>
-`;
-
-exports[`should render the component with merged attributes 1`] = `
-<I18nProvider
-  className="TestClass"
-  data-mock="data"
-  id="TestId"
-  locale="en-US"
-  messages={Object {}}
->
-  String
-</I18nProvider>
-`;
-
-exports[`should support rendering a string as children 1`] = `
-<I18nProvider
-  locale="en-US"
-  messages={Object {}}
->
-  String
-</I18nProvider>
-`;
-
-exports[`should support rendering a string as the translationsLoadingPlaceholder prop 1`] = `
-<div>
-  String
-</div>
-`;
-
 exports[`should support rendering a string without translation 1`] = `
 <div>
   String
 </div>
 `;
-
-exports[`should support rendering an array of elements as a children 1`] = `
-<I18nProvider
-  locale="en-US"
-  messages={Object {}}
->
-  <h1>
-    Heading
-  </h1>
-  <p>
-    Element 1
-  </p>
-  <p>
-    Element 2
-  </p>
-</I18nProvider>
-`;
-
-exports[`should support rendering an element as children 1`] = `
-<I18nProvider
-  locale="en-US"
-  messages={Object {}}
->
-  <p>
-    Element
-  </p>
-</I18nProvider>
-`;
-
-exports[`should support rendering an element as the translationsLoadingPlaceholder prop 1`] = `
-<div>
-  <p>
-    Element
-  </p>
-</div>
-`;
diff --git a/packages/terra-base/tests/nightwatch/ArrayBase.jsx b/packages/terra-base/tests/nightwatch/ArrayBase.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import Base from '../../lib/Base';
+
+const ArrayBase = () => (
+  <div>
+    <Base>
+      <div id="one">One</div>
+      <div id="two">Two</div>
+      <div id="three">Three</div>
+    </Base>
+
+    <Base locale="en-US">
+      <div id="four">Four</div>
+      <div id="five">Five</div>
+      <div id="six">Six</div>
+    </Base>
+  </div>
+);
+
+export default ArrayBase;
diff --git a/packages/terra-base/tests/nightwatch/BaseTestRoutes.jsx b/packages/terra-base/tests/nightwatch/BaseTestRoutes.jsx
@@ -1,18 +1,21 @@
 /* eslint-disable import/no-extraneous-dependencies */
-
 import React from 'react';
 import { Route } from 'react-router';
 import BaseTests from './BaseTests';
 import DefaultBase from './DefaultBase';
+import ArrayBase from './ArrayBase';
 import SwitchLocaleBase from './SwitchLocaleBase';
 import NoTranslationsLoadedBase from './NoTranslationsLoadedBase';
+import NoTranslationsLoadedStringBase from './NoTranslationsLoadedStringBase';
 
 const routes = (
   <div>
     <Route path="/tests/base-tests" component={BaseTests} />
     <Route path="/tests/base-tests/default" component={DefaultBase} />
+    <Route path="/tests/base-tests/array-of-children" component={ArrayBase} />
     <Route path="/tests/base-tests/switch" component={SwitchLocaleBase} />
     <Route path="/tests/base-tests/no-translations-loaded" component={NoTranslationsLoadedBase} />
+    <Route path="/tests/base-tests/no-translations-loaded-string" component={NoTranslationsLoadedStringBase} />
   </div>
 );
 

diff --git a/packages/terra-base/tests/nightwatch/BaseTests.jsx b/packages/terra-base/tests/nightwatch/BaseTests.jsx
@@ -1,14 +1,15 @@
 /* eslint-disable import/no-extraneous-dependencies */
-
 import React from 'react';
 import { Link } from 'react-router';
 
 const BaseTests = () => (
   <div>
     <ul>
       <li><Link to="/tests/base-tests/default">Default Base</Link></li>
+      <li><Link to="/tests/base-tests/array-of-children">Array Of Children Base</Link></li>
       <li><Link to="/tests/base-tests/switch">Switch Locale Base</Link></li>
-      <li><Link to="/tests/base-tests/no-translations-loaded">No Translations Loaded Base</Link></li>
+      <li><Link to="/tests/base-tests/no-translations-loaded">No Translations Loaded Component Base</Link></li>
+      <li><Link to="/tests/base-tests/no-translations-loaded-string">No Translations Loaded String Base</Link></li>
     </ul>
   </div>
 );

diff --git a/packages/terra-base/tests/nightwatch/DefaultBase.jsx b/packages/terra-base/tests/nightwatch/DefaultBase.jsx
@@ -1,8 +1,6 @@
 import React from 'react';
-
 import Base from '../../lib/Base';
 
-
 const BaseDefault = () => (
   <Base>
     <h1>Heading 1</h1>

diff --git a/packages/terra-base/tests/nightwatch/NoTranslationsLoadedBase.jsx b/packages/terra-base/tests/nightwatch/NoTranslationsLoadedBase.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-
 import Base from '../../lib/Base';
 
 const BaseNoTranslationsLoaded = () => {
@@ -8,7 +7,6 @@ const BaseNoTranslationsLoaded = () => {
       <div>Translations</div>
     </Base>
   );
-
   return noTranslations;
 };
 

diff --git a/packages/terra-base/tests/nightwatch/NoTranslationsLoadedStringBase.jsx b/packages/terra-base/tests/nightwatch/NoTranslationsLoadedStringBase.jsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import Base from '../../lib/Base';
+
+const BaseNoTranslationsLoaded = () => {
+  const noTranslations = (
+    <Base locale="gabcdef" translationsLoadingPlaceholder={'No Translations String'}>
+      <div>Translations</div>
+    </Base>
+  );
+  return noTranslations;
+};
+
+export default BaseNoTranslationsLoaded;
diff --git a/packages/terra-base/tests/nightwatch/SwitchLocaleBase.jsx b/packages/terra-base/tests/nightwatch/SwitchLocaleBase.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { FormattedMessage } from '../../../terra-i18n/node_modules/react-intl';
-
 import Base from '../../lib/Base';
 
 const customMessages = {

diff --git a/packages/terra-base/tests/nightwatch/base-spec.js b/packages/terra-base/tests/nightwatch/base-spec.js
@@ -9,6 +9,16 @@ module.exports = resizeTo(['tiny', 'small', 'medium', 'large', 'huge', 'enormous
     browser.expect.element('div').text.to.contain('en').before(waitInms);
   },
 
+  'Displays an array of elements as a children': (browser) => {
+    browser.url(`${browser.launchUrl}/#/tests/base-tests/array-of-children`);
+    browser.assert.elementPresent('#one');
+    browser.assert.elementPresent('#two');
+    browser.assert.elementPresent('#three');
+    browser.assert.elementPresent('#four');
+    browser.assert.elementPresent('#five');
+    browser.assert.elementPresent('#six');
+  },
+
   'Switches locale and displays en-US customized locale message': (browser) => {
     browser
       .url(`${browser.launchUrl}/#/tests/base-tests/switch`)
@@ -21,8 +31,13 @@ module.exports = resizeTo(['tiny', 'small', 'medium', 'large', 'huge', 'enormous
   // NOTE: This test is designed to assume that tests won't fail on an error.  If it starts failing,
   // we can remove it and either deem that this scenario is not needed in night watch or find a
   // better solution.
-  'Displays a placeholder when translations are not loaded': (browser) => {
+  'Displays a placeholder element when translations are not loaded': (browser) => {
     browser.url(`${browser.launchUrl}/#/tests/base-tests/no-translations-loaded`);
     browser.expect.element('div').text.to.contain('No Translations');
   },
+
+  'Displays a placeholder string when translations are not loaded': (browser) => {
+    browser.url(`${browser.launchUrl}/#/tests/base-tests/no-translations-loaded-string`);
+    browser.expect.element('div').text.to.contain('No Translations String');
+  },
 });