Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-31 00:16:47 +01:00
Code Issues Projects Releases Wiki Activity

test(form): add enzyme tests

Browse Source
This commit is contained in:
Corinne Krych 2018-02-16 20:45:05 +01:00
parent f8fb2bbc76
commit bfee62ed82
16 changed files with 443 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/package.json
View File

@ -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"
]

1
frontend/src/component/archive/archive-list-component.jsx
View File

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

5
frontend/src/component/feature/__tests__/.eslintrc Normal file
View File

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

55
frontend/src/component/feature/__tests__/__snapshots__/feature-list-item-component-test.jsx.snap Normal file
View File

@ -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>
`;

107
frontend/src/component/feature/__tests__/__snapshots__/progress-test.jsx.snap Normal file
View File

@ -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>
`;

37
frontend/src/component/feature/__tests__/feature-list-item-component-test.jsx Normal file
View File

@ -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();
});

34
frontend/src/component/feature/__tests__/progress-test.jsx Normal file
View File

@ -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();
});

5
frontend/src/component/feature/form/__tests__/.eslintrc Normal file
View File

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

103
frontend/src/component/feature/form/__tests__/__snapshots__/strategy-input-list-test.jsx.snap Normal file
View File

@ -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>
`;

68
frontend/src/component/feature/form/__tests__/strategy-input-list-test.jsx Normal file
View File

@ -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();
});

4
frontend/src/component/feature/form/form-add-feature-component.jsx
View File

@ -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) {

4
frontend/src/component/feature/form/form-update-feature-component.jsx
View File

@ -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) {

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

@ -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;

4
frontend/src/component/feature/form/strategies-section.jsx
View File

@ -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;

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

@ -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 (inputValue && inputValue.value) {
list.push(inputValue.value);
inputValue.value = '';
if (this.textInput && this.textInput.inputRef && this.textInput.inputRef.value) {
list.push(this.textInput.inputRef.value);
this.textInput.inputRef.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}
onBlur={this.onBlur}
ref="input"
onFocus={this.onFocus.bind(this)}
onBlur={this.onBlur.bind(this)}
ref={(input) => { this.textInput = input; }}
/>
<IconButton
name="add"

4
frontend/src/setupTests.js Normal file
View File

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