Merge pull request #378 from weaveworks/jest-update

update jest, jest-styled-components, babel-jest

package.json

@@ -58,14 +58,15 @@
     "prop-types": "15.6.0",
     "react-input-autosize": "2.2.1",
     "react-motion": "0.5.2",
+    "react-required-if": "^1.0.3",
     "react-resize-aware": "2.7.0",
     "react-router": "3.2.0"
   },
   "devDependencies": {
     "babel-cli": "^6.18.0",
     "babel-core": "6.18.2",
     "babel-eslint": "8.2.1",
-    "babel-jest": "^17.0.2",
+    "babel-jest": "23.6.0",
     "babel-loader": "6.2.8",
     "babel-plugin-lodash": "^3.3.2",
     "babel-plugin-styled-components": "^1.3.0",
@@ -95,9 +96,8 @@
     "font-awesome-webpack": "0.0.4",
     "highlight.js": "9.12.0",
     "html-webpack-plugin": "2.24.1",
-    "jest": "20.0.4",
-    "jest-cli": "19.0.2",
-    "jest-styled-components": "4.4.1",
+    "jest": "23.6.0",
+    "jest-styled-components": "6.2.0",
     "json-loader": "0.5.4",
     "less": "2.7.2",
     "lodash": "4.17.10",

src/components/Code/Code.test.js

@@ -1,13 +1,10 @@
 import React from 'react';
-import enzyme, { shallow, mount } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import { shallow, mount } from 'enzyme';
 
 import { withTheme } from '../../utils/theme';
 
 import Code from '.';
 
-enzyme.configure({ adapter: new Adapter() });
-
 document.execCommand = () => {};
 document.getSelection = () => ({
   toString: () => '',

src/components/Code/__snapshots__/Code.test.js.snap

@@ -40,21 +40,21 @@ exports[`<Code /> should render multi line function correctly with multiCommand=
         >
           sudo curl -l git.io/scope -o /usr/local/bin/scope
           
-          
+
         </Code__PaddedLine>
         <Code__PaddedLine
           key="sudo chmod a+x /usr/local/bin/scope"
         >
           sudo chmod a+x /usr/local/bin/scope
           
-          
+
         </Code__PaddedLine>
         <Code__PaddedLine
           key="scope launch https://yjsjsubdx1h8un1f858gp7to8d51zdre@frontend.dev.weave.works"
         >
           scope launch https://yjsjsubdx1h8un1f858gp7to8d51zdre@frontend.dev.weave.works
           
-          
+
         </Code__PaddedLine>
       </Code__Pre>
     </Code__Content>
@@ -86,7 +86,7 @@ exports[`<Code /> should render multi line jsx correctly with multiCommand=true
             sudo curl -L git.io/scope -o /usr/local/bin/scope
           </div>
           
-          
+
         </Code__PaddedLine>
         <Code__PaddedLine
           key="1/.1"
@@ -95,7 +95,7 @@ exports[`<Code /> should render multi line jsx correctly with multiCommand=true
             sudo chmod a+x /usr/local/bin/scope
           </div>
           
-          
+
         </Code__PaddedLine>
         <Code__PaddedLine
           key="2/.2"
@@ -106,7 +106,7 @@ exports[`<Code /> should render multi line jsx correctly with multiCommand=true
             https://yjsjsubdx1h8un1f858gp7to8d51zdre@frontend.dev.weave.works
           </div>
           
-          
+
         </Code__PaddedLine>
       </Code__Pre>
     </Code__Content>
@@ -136,21 +136,21 @@ exports[`<Code /> should render multi line string correctly with multiCommand=tr
         >
           sudo curl -l git.io/scope -o /usr/local/bin/scope
           
-          
+
         </Code__PaddedLine>
         <Code__PaddedLine
           key="sudo chmod a+x /usr/local/bin/scope"
         >
           sudo chmod a+x /usr/local/bin/scope
           
-          
+
         </Code__PaddedLine>
         <Code__PaddedLine
           key="scope launch https://yjsjsubdx1h8un1f858gp7to8d51zdre@frontend.dev.weave.works"
         >
           scope launch https://yjsjsubdx1h8un1f858gp7to8d51zdre@frontend.dev.weave.works
           
-          
+
         </Code__PaddedLine>
       </Code__Pre>
     </Code__Content>

src/components/DataTable/__snapshots__/DataTable.test.js.snap

@@ -49,7 +49,6 @@ exports[`DataTable snapshots renders an element instead of a label 1`] = `
       <td
         className="c1"
         onClick={[Function]}
-        title={undefined}
       >
         <i
           className="fa fa-some-icon"

src/components/Input/Input.test.js

@@ -1,14 +1,11 @@
 import React from 'react';
-import enzyme, { mount } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import { mount } from 'enzyme';
 import 'jest-styled-components';
 
 import { withTheme } from '../../utils/theme';
 
 import Input from './Input';
 
-enzyme.configure({ adapter: new Adapter() });
-
 describe('<Input />', () => {
   let props;
   let wrapper;
@@ -66,6 +63,8 @@ describe('<Input />', () => {
   it('should remove validation message from the DOM when hideValidationMessage=true', () => {
     props = {
       hideValidationMessage: true,
+      // https://github.com/styled-components/jest-styled-components/issues/189
+      message: 'Derp!',
     };
     wrapper = mount(withTheme(<Input {...props} />));
 

src/components/Input/__snapshots__/Input.test.js.snap

@@ -266,7 +266,7 @@ exports[`<Input /> should render correctly 1`] = `
   <Input
     label="Hi"
     message="Doh!"
-    onChange={[Function]}
+    onChange={[MockFunction]}
     valid={false}
   >
     <Input
@@ -277,7 +277,7 @@ exports[`<Input /> should render correctly 1`] = `
       inputRef={[Function]}
       label="Hi"
       message="Doh!"
-      onChange={[Function]}
+      onChange={[MockFunction]}
       textarea={false}
       valid={false}
     >
@@ -294,7 +294,7 @@ exports[`<Input /> should render correctly 1`] = `
             className="c1"
           >
             <input
-              onChange={[Function]}
+              onChange={[MockFunction]}
             />
             <Input__Icon
               className="fa fa-times-circle"

src/components/Search/Search.js

@@ -2,6 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { map, includes, without, isEmpty, last, noop } from 'lodash';
 import PropTypes from 'prop-types';
+import requiredIf from 'react-required-if';
 
 import { copyPropTypes } from '../../utils/compose';
 import Input from '../Input';
@@ -221,7 +222,7 @@ Search.propTypes = {
    * Handler that runs when an item from the search filter dropdown is selected
    * Returns the selected filter value.
    */
-  onFilterSelect: PropTypes.func,
+  onFilterSelect: requiredIf(PropTypes.func, props => props.filters.length > 0),
   onFocus: PropTypes.func,
   onBlur: PropTypes.func,
 };
@@ -230,10 +231,8 @@ Search.defaultProps = {
   placeholder: 'search',
   disabled: false,
   filters: [],
+  onFilterSelect: noop,
   onPin: noop,
-  onFilterSelect: () => {
-    throw new Error('Please provide an onFilterSelect(value) callback!');
-  },
   onFocus: noop,
   onBlur: noop,
 };

src/components/Search/Search.test.js

@@ -13,20 +13,36 @@ describe('<Search />', () => {
   describe('snapshots', () => {
     it('renders empty', () => {
       const tree = renderer
-        .create(withTheme(<Search query="" pinnedTerms={[]} onChange={noop} />))
+        .create(
+          withTheme(
+            <Search
+              query=""
+              pinnedTerms={[]}
+              onChange={noop}
+              onFilterSelect={noop}
+            />
+          )
+        )
         .toJSON();
       expect(tree).toMatchSnapshot();
     });
+
     it('renders a search string', () => {
       const tree = renderer
         .create(
           withTheme(
-            <Search query="ui-server" pinnedTerms={[]} onChange={noop} />
+            <Search
+              query="ui-server"
+              pinnedTerms={[]}
+              onChange={noop}
+              onFilterSelect={noop}
+            />
           )
         )
         .toJSON();
       expect(tree).toMatchSnapshot();
     });
+
     it('renders a group of terms', () => {
       const tree = renderer
         .create(
@@ -35,12 +51,14 @@ describe('<Search />', () => {
               query=""
               pinnedTerms={['deployments', 'default']}
               onChange={noop}
+              onFilterSelect={noop}
             />
           )
         )
         .toJSON();
       expect(tree).toMatchSnapshot();
     });
+
     it('renders filters', () => {
       const tree = renderer
         .create(
@@ -49,6 +67,7 @@ describe('<Search />', () => {
               query=""
               pinnedTerms={[]}
               onChange={noop}
+              onFilterSelect={noop}
               filters={[
                 { value: 'automated', label: 'Automated' },
                 { value: 'locked', label: 'Locked' },
@@ -60,15 +79,24 @@ describe('<Search />', () => {
       expect(tree).toMatchSnapshot();
     });
   });
+
   it('returns search terms', () => {
     const spy = createSpy();
     const search = mount(
-      withTheme(<Search query="" pinnedTerms={['a']} onChange={spy} />)
+      withTheme(
+        <Search
+          query=""
+          pinnedTerms={['a']}
+          onChange={spy}
+          onFilterSelect={noop}
+        />
+      )
     );
     const $input = search.find('input');
     $input.simulate('change', { target: { value: 'myterm' } });
     expect(spy.calls[0].arguments).toEqual(['myterm', ['a']]);
   });
+
   it('calls the onFilterSelect prop with selected filter value', () => {
     const spy = createSpy();
     const search = mount(
@@ -99,40 +127,24 @@ describe('<Search />', () => {
       .simulate('click');
     expect(spy.calls[0].arguments).toEqual(['automated']);
   });
+
   it('clears terms', () => {
     const spy = createSpy();
-    const search = mount(
-      withTheme(<Search query="" pinnedTerms={['a', 'b']} onChange={spy} />)
-    );
-    // Remove the 'a' search term
-    search
-      .find('.remove-term')
-      .first()
-      .simulate('click');
-    expect(spy.calls[0].arguments).toEqual(['', ['b']]);
-  });
-  it('should raise an error if you forget to provide an onFilterSelect callback', () => {
     const search = mount(
       withTheme(
         <Search
-          query="ui-server"
-          pinnedTerms={[]}
-          onChange={noop}
-          filters={[{ value: '1', label: 'one' }]}
+          query=""
+          pinnedTerms={['a', 'b']}
+          onChange={spy}
+          onFilterSelect={noop}
         />
       )
     );
+    // Remove the 'a' search term
     search
-      .find('.dropdown-toggle')
+      .find('.remove-term')
       .first()
       .simulate('click');
-
-    expect(() =>
-      // select a filter
-      search
-        .find('.dropdown-item')
-        .first()
-        .simulate('click')
-    ).toThrow();
+    expect(spy.calls[0].arguments).toEqual(['', ['b']]);
   });
 });

src/components/Search/__snapshots__/Search.test.js.snap

@@ -232,9 +232,7 @@ exports[`<Search /> snapshots renders a group of terms 1`] = `
     <div
       className="c5 c6"
     >
-      <label
-        htmlFor={undefined}
-      >
+      <label>
         
       </label>
       <div
@@ -451,9 +449,7 @@ exports[`<Search /> snapshots renders a search string 1`] = `
     <div
       className="c4 c5"
     >
-      <label
-        htmlFor={undefined}
-      >
+      <label>
         
       </label>
       <div
@@ -670,9 +666,7 @@ exports[`<Search /> snapshots renders empty 1`] = `
     <div
       className="c4 c5"
     >
-      <label
-        htmlFor={undefined}
-      >
+      <label>
         
       </label>
       <div
@@ -941,9 +935,7 @@ exports[`<Search /> snapshots renders filters 1`] = `
     <div
       className="c4 c5"
     >
-      <label
-        htmlFor={undefined}
-      >
+      <label>
         
       </label>
       <div