test(form): add enzyme tests

frontend/package.json

@@ -35,6 +35,7 @@
     "lint:fix": "eslint . --ext js,jsx --fix",
     "test": "jest",
     "test:ci": "npm run lint && npm run build && npm run test",
+    "test:debug": "./node_modules/.bin/node-debug ./node_modules/.bin/jest -i --watch",
     "prepublish": "npm run build"
   },
   "main": "./index.js",
@@ -67,6 +68,8 @@
     "babel-preset-stage-0": "^6.5.0",
     "babel-preset-stage-2": "^6.13.0",
     "css-loader": "^0.28.4",
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-16": "^1.1.1",
     "eslint": "^4.5.0",
     "eslint-config-finn": "^3.0.0",
     "eslint-config-finn-prettier": "^3.0.0",
@@ -92,6 +95,7 @@
       "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/__mocks__/fileMock.js",
       "\\.(css|scss)$": "identity-obj-proxy"
     },
+    "setupTestFrameworkScriptFile": "<rootDir>/src/setupTests.js",
     "setupFiles": [
       "<rootDir>/jest-setup.js"
     ]

frontend/src/component/archive/archive-list-component.jsx

@@ -27,6 +27,7 @@ class ArchiveList extends Component {
                 ))}
             </span>
         );
+        debugger;
         return strategiesList;
     }
     renderStrategiesInList(feature) {

frontend/src/component/feature/__tests__/.eslintrc

@@ -0,0 +1,5 @@
+{
+    "env": {
+        "jest": true
+    }
+}

frontend/src/component/feature/__tests__/__snapshots__/feature-list-item-component-test.jsx.snap

@@ -0,0 +1,55 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly with one feature 1`] = `
+<react-mdl-ListItem
+  twoLine={true}
+>
+  <span
+    className="listItemMetric"
+  >
+    <svg
+      className="mdl-color-text--grey-300"
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M17.3,18C19,16.5 20,14.4 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12C4,14.4 5,16.5 6.7,18C8.2,16.7 10,16 12,16C14,16 15.9,16.7 17.3,18M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M7,9A1,1 0 0,1 8,10A1,1 0 0,1 7,11A1,1 0 0,1 6,10A1,1 0 0,1 7,9M10,6A1,1 0 0,1 11,7A1,1 0 0,1 10,8A1,1 0 0,1 9,7A1,1 0 0,1 10,6M17,9A1,1 0 0,1 18,10A1,1 0 0,1 17,11A1,1 0 0,1 16,10A1,1 0 0,1 17,9M14.4,6.1C14.9,6.3 15.1,6.9 15,7.4L13.6,10.8C13.8,11.1 14,11.5 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12C10,11 10.7,10.1 11.7,10L13.1,6.7C13.3,6.1 13.9,5.9 14.4,6.1Z"
+        fill="currentColor"
+      />
+    </svg>
+  </span>
+  <span
+    className="listItemToggle"
+  >
+    <react-mdl-Switch
+      checked={false}
+      onChange={[Function]}
+      title="Toggle Another"
+    />
+  </span>
+  <span
+    className="mdl-list__item-primary-content listItemLink"
+  >
+    <a
+      className="listLink truncate"
+      onClick={[Function]}
+      style={Object {}}
+    >
+      Another
+      <span
+        className="mdl-list__item-sub-title truncate"
+      >
+        another's description
+      </span>
+    </a>
+  </span>
+  <span
+    className="listItemStrategies hideLt920"
+  >
+    <react-mdl-Chip
+      className="strategyChip"
+    >
+      gradualRolloutRandom
+    </react-mdl-Chip>
+  </span>
+</react-mdl-ListItem>
+`;

frontend/src/component/feature/__tests__/__snapshots__/progress-test.jsx.snap

@@ -0,0 +1,107 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly with 0% done no fallback 1`] = `
+<svg
+  viewBox="0 0 100 100"
+>
+  <path
+    className="trail mdl-color-text--grey-300"
+    d="
+      M 50,50 m 0,-42.5
+      a 42.5,42.5 0 1 1 0,85
+      a 42.5,42.5 0 1 1 0,-85
+    "
+    fillOpacity={0}
+    strokeWidth={15}
+  />
+  <path
+    className="path mdl-color-text--primary"
+    d="
+      M 50,50 m 0,-42.5
+      a 42.5,42.5 0 1 1 0,85
+      a 42.5,42.5 0 1 1 0,-85
+    "
+    fillOpacity={0}
+    strokeWidth={15}
+    style={
+      Object {
+        "strokeDasharray": "267.0353755551324px 267.0353755551324px",
+        "strokeDashoffset": "267.0353755551324px",
+      }
+    }
+  />
+  <text
+    className="text"
+    x={50}
+    y={50}
+  >
+    0
+    %
+  </text>
+</svg>
+`;
+
+exports[`renders correctly with 0% done with fallback 1`] = `
+<svg
+  className="mdl-color-text--grey-300"
+  viewBox="0 0 24 24"
+>
+  <path
+    d="M17.3,18C19,16.5 20,14.4 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12C4,14.4 5,16.5 6.7,18C8.2,16.7 10,16 12,16C14,16 15.9,16.7 17.3,18M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M7,9A1,1 0 0,1 8,10A1,1 0 0,1 7,11A1,1 0 0,1 6,10A1,1 0 0,1 7,9M10,6A1,1 0 0,1 11,7A1,1 0 0,1 10,8A1,1 0 0,1 9,7A1,1 0 0,1 10,6M17,9A1,1 0 0,1 18,10A1,1 0 0,1 17,11A1,1 0 0,1 16,10A1,1 0 0,1 17,9M14.4,6.1C14.9,6.3 15.1,6.9 15,7.4L13.6,10.8C13.8,11.1 14,11.5 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12C10,11 10.7,10.1 11.7,10L13.1,6.7C13.3,6.1 13.9,5.9 14.4,6.1Z"
+    fill="currentColor"
+  />
+</svg>
+`;
+
+exports[`renders correctly with 15% done no fallback 1`] = `
+<svg
+  viewBox="0 0 100 100"
+>
+  <path
+    className="trail mdl-color-text--grey-300"
+    d="
+      M 50,50 m 0,-42.5
+      a 42.5,42.5 0 1 1 0,85
+      a 42.5,42.5 0 1 1 0,-85
+    "
+    fillOpacity={0}
+    strokeWidth={15}
+  />
+  <path
+    className="path mdl-color-text--primary"
+    d="
+      M 50,50 m 0,-42.5
+      a 42.5,42.5 0 1 1 0,85
+      a 42.5,42.5 0 1 1 0,-85
+    "
+    fillOpacity={0}
+    strokeWidth={15}
+    style={
+      Object {
+        "strokeDasharray": "267.0353755551324px 267.0353755551324px",
+        "strokeDashoffset": "226.98006922186255px",
+      }
+    }
+  />
+  <text
+    className="text"
+    x={50}
+    y={50}
+  >
+    15
+    %
+  </text>
+</svg>
+`;
+
+exports[`renders correctly with 15% done with fallback 1`] = `
+<svg
+  className="mdl-color-text--grey-300"
+  viewBox="0 0 24 24"
+>
+  <path
+    d="M17.3,18C19,16.5 20,14.4 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12C4,14.4 5,16.5 6.7,18C8.2,16.7 10,16 12,16C14,16 15.9,16.7 17.3,18M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M7,9A1,1 0 0,1 8,10A1,1 0 0,1 7,11A1,1 0 0,1 6,10A1,1 0 0,1 7,9M10,6A1,1 0 0,1 11,7A1,1 0 0,1 10,8A1,1 0 0,1 9,7A1,1 0 0,1 10,6M17,9A1,1 0 0,1 18,10A1,1 0 0,1 17,11A1,1 0 0,1 16,10A1,1 0 0,1 17,9M14.4,6.1C14.9,6.3 15.1,6.9 15,7.4L13.6,10.8C13.8,11.1 14,11.5 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12C10,11 10.7,10.1 11.7,10L13.1,6.7C13.3,6.1 13.9,5.9 14.4,6.1Z"
+    fill="currentColor"
+  />
+</svg>
+`;

frontend/src/component/feature/__tests__/feature-list-item-component-test.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import Feature from './../feature-list-item-component';
+import renderer from 'react-test-renderer';
+
+jest.mock('react-mdl');
+
+test('renders correctly with one feature', () => {
+    const feature = {
+        name: 'Another',
+        description: "another's description",
+        enabled: false,
+        strategies: [
+            {
+                name: 'gradualRolloutRandom',
+                parameters: {
+                    percentage: 50,
+                },
+            },
+        ],
+        createdAt: '2018-02-04T20:27:52.127Z',
+    };
+    const featureMetrics = { lastHour: {}, lastMinute: {}, seenApps: {} };
+    const settings = { sort: 'name' };
+    const tree = renderer.create(
+        <Feature
+            key={0}
+            settings={settings}
+            metricsLastHour={featureMetrics.lastHour[feature.name]}
+            metricsLastMinute={featureMetrics.lastMinute[feature.name]}
+            feature={feature}
+            toggleFeature={jest.fn()}
+        />
+    );
+
+    expect(tree).toMatchSnapshot();
+});

frontend/src/component/feature/__tests__/progress-test.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import Progress from './../progress';
+import renderer from 'react-test-renderer';
+
+jest.mock('react-mdl');
+
+test('renders correctly with 15% done no fallback', () => {
+    const percent = 15;
+    const tree = renderer.create(<Progress strokeWidth={15} percentage={percent} isFallback={false} />);
+
+    expect(tree).toMatchSnapshot();
+});
+
+test('renders correctly with 0% done no fallback', () => {
+    const percent = 0;
+    const tree = renderer.create(<Progress strokeWidth={15} percentage={percent} isFallback={false} />);
+
+    expect(tree).toMatchSnapshot();
+});
+
+test('renders correctly with 15% done with fallback', () => {
+    const percent = 15;
+    const tree = renderer.create(<Progress strokeWidth={15} percentage={percent} isFallback={true} />);
+
+    expect(tree).toMatchSnapshot();
+});
+
+test('renders correctly with 0% done with fallback', () => {
+    const percent = 0;
+    const tree = renderer.create(<Progress strokeWidth={15} percentage={percent} isFallback={true} />);
+
+    expect(tree).toMatchSnapshot();
+});

frontend/src/component/feature/form/__tests__/.eslintrc

@@ -0,0 +1,5 @@
+{
+    "env": {
+        "jest": true
+    }
+}

frontend/src/component/feature/form/__tests__/__snapshots__/strategy-input-list-test.jsx.snap

@@ -0,0 +1,103 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders strategy with empty list as param 1`] = `
+<div>
+  <p>
+    featureName
+  </p>
+  <div
+    style={
+      Object {
+        "display": "flex",
+      }
+    }
+  >
+    <react-mdl-Textfield
+      floatingLabel={true}
+      label="Add list entry"
+      name="featureName_input"
+      onBlur={[Function]}
+      onFocus={[Function]}
+      style={
+        Object {
+          "flex": 1,
+          "width": "100%",
+        }
+      }
+    />
+    <react-mdl-IconButton
+      name="add"
+      onClick={[Function]}
+      raised={true}
+      style={
+        Object {
+          "flex": 1,
+          "flexGrow": 0,
+          "margin": "20px 0 0 10px",
+        }
+      }
+    />
+  </div>
+</div>
+`;
+
+exports[`renders strategy with list as param 1`] = `
+<div>
+  <p>
+    featureName
+  </p>
+  <react-mdl-Chip
+    onClose={[Function]}
+    style={
+      Object {
+        "marginRight": "3px",
+      }
+    }
+  >
+    item1
+  </react-mdl-Chip>
+  <react-mdl-Chip
+    onClose={[Function]}
+    style={
+      Object {
+        "marginRight": "3px",
+      }
+    }
+  >
+    item2
+  </react-mdl-Chip>
+  <div
+    style={
+      Object {
+        "display": "flex",
+      }
+    }
+  >
+    <react-mdl-Textfield
+      floatingLabel={true}
+      label="Add list entry"
+      name="featureName_input"
+      onBlur={[Function]}
+      onFocus={[Function]}
+      style={
+        Object {
+          "flex": 1,
+          "width": "100%",
+        }
+      }
+    />
+    <react-mdl-IconButton
+      name="add"
+      onClick={[Function]}
+      raised={true}
+      style={
+        Object {
+          "flex": 1,
+          "flexGrow": 0,
+          "margin": "20px 0 0 10px",
+        }
+      }
+    />
+  </div>
+</div>
+`;

frontend/src/component/feature/form/__tests__/strategy-input-list-test.jsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import InputList from './../strategy-input-list';
+import renderer from 'react-test-renderer';
+import { shallow } from 'enzyme';
+
+it('renders strategy with list as param', () => {
+    const list = ['item1', 'item2'];
+    const name = 'featureName';
+    const tree = renderer.create(<InputList list={list} name={name} setConfig={jest.fn()} />);
+
+    expect(tree).toMatchSnapshot();
+});
+
+it('renders strategy with empty list as param', () => {
+    const list = [];
+    const name = 'featureName';
+    const tree = renderer.create(<InputList list={list} name={name} setConfig={jest.fn()} />);
+
+    expect(tree).toMatchSnapshot();
+});
+
+it('renders an item as chip', () => {
+    let list = ['item1'];
+    const name = 'featureName';
+    let wrapper = shallow(<InputList list={list} name={name} setConfig={jest.fn()} />);
+    expect(wrapper.find('react-mdl-Chip').length).toEqual(1);
+    expect(wrapper.find('react-mdl-Chip').text()).toEqual('item1');
+});
+
+it('go inside onFocus', () => {
+    let list = ['item1'];
+    const name = 'featureName';
+    const wrapper = shallow(<InputList list={list} name={name} setConfig={jest.fn()} />);
+    let focusMock = {
+        preventDefault: () => {},
+        stopPropagation: () => {},
+        key: 'e',
+    };
+    wrapper.find('react-mdl-Textfield').simulate('focus', focusMock);
+});
+
+// https://github.com/airbnb/enzyme/issues/944
+it('spy onFocus', () => {
+    let list = ['item1'];
+    const name = 'featureName';
+    const onFocus = jest.spyOn(InputList.prototype, 'onFocus');
+    let focusMock = {
+        preventDefault: () => {},
+        stopPropagation: () => {},
+        key: 'e',
+    };
+    const wrapper = shallow(<InputList list={list} name={name} setConfig={jest.fn()} />);
+    wrapper.find('react-mdl-Textfield').simulate('focus', focusMock);
+    expect(onFocus).toHaveBeenCalled();
+});
+
+it('spy onBlur', () => {
+    let list = ['item1'];
+    const name = 'featureName';
+    const onFocus = jest.spyOn(InputList.prototype, 'onBlur');
+    let focusMock = {
+        preventDefault: () => {},
+        stopPropagation: () => {},
+    };
+    const wrapper = shallow(<InputList list={list} name={name} setConfig={jest.fn()} />);
+    wrapper.find('react-mdl-Textfield').simulate('blur', focusMock);
+    expect(onFocus).toHaveBeenCalled();
+});

frontend/src/component/feature/form/form-add-feature-component.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Textfield, Switch } from 'react-mdl';
 import StrategiesSection from './strategies-section-container';
 
-import { FormButtons, getDisplayName } from './../../common';
+import { FormButtons } from './../../common';
 
 const trim = value => {
     if (value && value.trim) {
@@ -14,7 +14,7 @@ const trim = value => {
 };
 
 class AddFeatureComponent extends Component {
-    static displayName = `Add2FeatureToggleComponent${getDisplayName(Component)}`;
+    //static displayName = `AddFeatureComponent-${getDisplayName(Component)}`;
     componentWillMount() {
         // TODO unwind this stuff
         if (this.props.initCallRequired === true) {

frontend/src/component/feature/form/form-update-feature-component.jsx

@@ -2,10 +2,10 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import StrategiesSection from './strategies-section-container';
 
-import { FormButtons, getDisplayName } from './../../common';
+import { FormButtons } from './../../common';
 
 class UpdateFeatureComponent extends Component {
-    static displayName = `AddFeatureToggleComponent${getDisplayName(Component)}`;
+    //static displayName = `UpdateFeatureComponent-{getDisplayName(Component)}`;
     componentWillMount() {
         // TODO unwind this stuff
         if (this.props.initCallRequired === true) {

frontend/src/component/feature/form/strategies-section-container.jsx

@@ -1,10 +1,11 @@
 import { connect } from 'react-redux';
-import StrategiesSection from './strategies-section';
+import StrategiesSectionComponent from './strategies-section';
 import { fetchStrategies } from '../../../store/strategy/actions';
 
-export default connect(
+const StrategiesSection = connect(
     state => ({
         strategies: state.strategies.get('list').toArray(),
     }),
     { fetchStrategies }
-)(StrategiesSection);
+)(StrategiesSectionComponent);
+export default StrategiesSection;

frontend/src/component/feature/form/strategies-section.jsx

@@ -5,7 +5,7 @@ import StrategiesList from './strategies-list';
 import AddStrategy from './strategies-add';
 import { HeaderTitle } from '../../common';
 
-class StrategiesSection extends React.Component {
+class StrategiesSectionComponent extends React.Component {
     static propTypes = {
         strategies: PropTypes.array.isRequired,
         addStrategy: PropTypes.func.isRequired,
@@ -32,4 +32,4 @@ class StrategiesSection extends React.Component {
     }
 }
 
-export default StrategiesSection;
+export default StrategiesSectionComponent;

frontend/src/component/feature/form/strategy-input-list.jsx

@@ -9,16 +9,16 @@ export default class InputList extends Component {
         setConfig: PropTypes.func.isRequired,
     };
 
-    onBlur = e => {
+    onBlur(e) {
         this.setValue(e);
         window.removeEventListener('keydown', this.onKeyHandler, false);
-    };
+    }
 
-    onFocus = e => {
+    onFocus(e) {
         e.preventDefault();
         e.stopPropagation();
         window.addEventListener('keydown', this.onKeyHandler, false);
-    };
+    }
 
     onKeyHandler = e => {
         if (e.key === 'Enter') {
@@ -35,10 +35,9 @@ export default class InputList extends Component {
         }
 
         const { name, list, setConfig } = this.props;
-        const inputValue = this.refs.input.inputRef;
+        if (this.textInput && this.textInput.inputRef && this.textInput.inputRef.value) {
-        if (inputValue && inputValue.value) {
+            list.push(this.textInput.inputRef.value);
-            list.push(inputValue.value);
+            this.textInput.inputRef.value = '';
-            inputValue.value = '';
             setConfig(name, list.join(','));
         }
     };
@@ -66,9 +65,9 @@ export default class InputList extends Component {
                         style={{ width: '100%', flex: 1 }}
                         floatingLabel
                         label="Add list entry"
-                        onFocus={this.onFocus}
+                        onFocus={this.onFocus.bind(this)}
-                        onBlur={this.onBlur}
+                        onBlur={this.onBlur.bind(this)}
-                        ref="input"
+                        ref={(input) => { this.textInput = input; }}
                     />
                     <IconButton
                         name="add"

frontend/src/setupTests.js

@@ -0,0 +1,4 @@
+import { configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+configure({ adapter: new Adapter() });