Skip to content

P
paragon
Commit a67e2d86 by Jae Bradley Committed by Ari Rizzitano
Options

fix(dependencies): update to React 16 and Enzyme 3

parents 1f9a726e 0bf81740
Showing with 176 additions and 271 deletions
package.json
...@@ -24,11 +24,12 @@ ...@@ -24,11 +24,12 @@
}, },
"dependencies": { "dependencies": {
"@edx/edx-bootstrap": "^0.4.2", "@edx/edx-bootstrap": "^0.4.2",
"babel-polyfill": "^6.26.0",
"classnames": "^2.2.5", "classnames": "^2.2.5",
"font-awesome": "^4.7.0", "font-awesome": "^4.7.0",
"prop-types": "^15.5.8", "prop-types": "^15.5.8",
"react": "^15.5.4", "react": "^16.1.0",
"react-dom": "^15.5.4", "react-dom": "^16.1.0",
"react-element-proptypes": "^1.0.0", "react-element-proptypes": "^1.0.0",
"react-proptype-conditional-require": "^1.0.4" "react-proptype-conditional-require": "^1.0.4"
}, },
...@@ -37,8 +38,8 @@ ...@@ -37,8 +38,8 @@
"@storybook/addon-console": "^1.0.0", "@storybook/addon-console": "^1.0.0",
"@storybook/addon-options": "^3.2.6", "@storybook/addon-options": "^3.2.6",
"@storybook/addon-storyshots": "^3.2.8", "@storybook/addon-storyshots": "^3.2.8",
"@storybook/channels": "^3.2.15", "@storybook/channels": "^3.2.16",
"@storybook/react": "^3.2.12", "@storybook/react": "^3.2.16",
"@storybook/storybook-deployer": "^2.0.0", "@storybook/storybook-deployer": "^2.0.0",
"babel-cli": "^6.24.1", "babel-cli": "^6.24.1",
"babel-jest": "^21.0.0", "babel-jest": "^21.0.0",
...@@ -52,9 +53,10 @@ ...@@ -52,9 +53,10 @@
"coveralls": "^3.0.0", "coveralls": "^3.0.0",
"css-loader": "^0.28.4", "css-loader": "^0.28.4",
"cz-conventional-changelog": "^2.1.0", "cz-conventional-changelog": "^2.1.0",
"enzyme": "^2.8.2", "enzyme": "^3.1.1",
"enzyme-adapter-react-16": "^1.0.4",
"eslint": "^4.5.0", "eslint": "^4.5.0",
"eslint-config-airbnb": "^15.0.1", "eslint-config-airbnb": "^16.0.0",
"eslint-config-edx": "^4.0.1", "eslint-config-edx": "^4.0.1",
"eslint-import-resolver-webpack": "^0.8.1", "eslint-import-resolver-webpack": "^0.8.1",
"eslint-plugin-jsx-a11y": "^5.1.0", "eslint-plugin-jsx-a11y": "^5.1.0",
...@@ -67,7 +69,7 @@ ...@@ -67,7 +69,7 @@
"node-sass": "^4.5.3", "node-sass": "^4.5.3",
"postcss-scss": "^1.0.1", "postcss-scss": "^1.0.1",
"react-router-dom": "^4.1.1", "react-router-dom": "^4.1.1",
"react-test-renderer": "^15.6.1", "react-test-renderer": "^16.1.0",
"sass-loader": "^6.0.5", "sass-loader": "^6.0.5",
"semantic-release": "^8.2.0", "semantic-release": "^8.2.0",
"source-map-loader": "^0.2.1", "source-map-loader": "^0.2.1",
...@@ -77,6 +79,9 @@ ...@@ -77,6 +79,9 @@
"webpack-dev-server": "^2.4.4" "webpack-dev-server": "^2.4.4"
}, },
"jest": { "jest": {
"setupFiles": [
"./src/setupTest.js"
],
"moduleNameMapper": { "moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js", "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
"\\.(css|scss)$": "identity-obj-proxy" "\\.(css|scss)$": "identity-obj-proxy"
......
src/Button/Button.test.jsx
...@@ -12,11 +12,9 @@ describe('<Button />', () => { ...@@ -12,11 +12,9 @@ describe('<Button />', () => {
let button; let button;
beforeEach(() => { beforeEach(() => {
wrapper = mount( wrapper = mount(<Button
<Button
{...defaultProps} {...defaultProps}
/>, />);
);
button = wrapper.find('button'); button = wrapper.find('button');
}); });
...@@ -26,7 +24,8 @@ describe('<Button />', () => { ...@@ -26,7 +24,8 @@ describe('<Button />', () => {
it('puts focus on button on click', () => { it('puts focus on button on click', () => {
expect(button.matchesElement(document.activeElement)).toEqual(false); expect(button.matchesElement(document.activeElement)).toEqual(false);
button.simulate('click'); button.simulate('click');
expect(button.at(0).matchesElement(document.activeElement)).toEqual(true); button = wrapper.find('button');
expect(button.at(0).html()).toEqual(document.activeElement.outerHTML);
}); });
it('calls onClick prop on click', () => { it('calls onClick prop on click', () => {
const onClickSpy = jest.fn(); const onClickSpy = jest.fn();
......
src/CheckBox/CheckBox.test.jsx
...@@ -5,12 +5,7 @@ import CheckBox from './index'; ...@@ -5,12 +5,7 @@ import CheckBox from './index';
describe('<CheckBox />', () => { describe('<CheckBox />', () => {
it('attributes are set correctly', () => { it('attributes are set correctly', () => {
const wrapper = mount( const wrapper = mount(<CheckBox name="checkbox" label="check me out!" />);
<CheckBox
name="checkbox"
label="check me out!"
/>,
);
expect(wrapper.find('[name="checkbox"]').exists()).toEqual(true); expect(wrapper.find('[name="checkbox"]').exists()).toEqual(true);
expect(wrapper.find('[type="checkbox"]').exists()).toEqual(true); expect(wrapper.find('[type="checkbox"]').exists()).toEqual(true);
...@@ -19,12 +14,7 @@ describe('<CheckBox />', () => { ...@@ -19,12 +14,7 @@ describe('<CheckBox />', () => {
}); });
it('aria-label changes after click', () => { it('aria-label changes after click', () => {
const wrapper = mount( const wrapper = mount(<CheckBox name="checkbox" label="check me out!" />);
<CheckBox
name="checkbox"
label="check me out!"
/>,
);
expect(wrapper.find('[aria-checked=false]').exists()).toEqual(true); expect(wrapper.find('[aria-checked=false]').exists()).toEqual(true);
...@@ -39,13 +29,7 @@ describe('<CheckBox />', () => { ...@@ -39,13 +29,7 @@ describe('<CheckBox />', () => {
it('check that callback function is triggered when clicked', () => { it('check that callback function is triggered when clicked', () => {
const spy = jest.fn(); const spy = jest.fn();
const wrapper = mount( const wrapper = mount(<CheckBox name="checkbox" label="check me out!"onChange={spy} />);
<CheckBox
name="checkbox"
label="check me out!"
onChange={spy}
/>,
);
expect(spy).toHaveBeenCalledTimes(0); expect(spy).toHaveBeenCalledTimes(0);
// check // check
...@@ -59,13 +43,7 @@ describe('<CheckBox />', () => { ...@@ -59,13 +43,7 @@ describe('<CheckBox />', () => {
}); });
it('checks if start state can be set to checked', () => { it('checks if start state can be set to checked', () => {
const wrapper = mount( const wrapper = mount(<CheckBox name="checkbox" label="I start checked" checked />);
<CheckBox
name="checkbox"
label="I start checked"
checked
/>,
);
expect(wrapper.find('[defaultChecked=true]').exists()).toEqual(true); expect(wrapper.find('[defaultChecked=true]').exists()).toEqual(true);
expect(wrapper.find('[aria-checked=true]').exists()).toEqual(true); expect(wrapper.find('[aria-checked=true]').exists()).toEqual(true);
...@@ -76,13 +54,7 @@ describe('<CheckBox />', () => { ...@@ -76,13 +54,7 @@ describe('<CheckBox />', () => {
}); });
it('checkbox can be disabled', () => { it('checkbox can be disabled', () => {
const wrapper = mount( const wrapper = mount(<CheckBox name="checkbox" label="I am disabled" disabled />);
<CheckBox
name="checkbox"
label="I am disabled"
disabled
/>,
);
expect(wrapper.props().disabled).toEqual(true); expect(wrapper.props().disabled).toEqual(true);
......
src/Dropdown/Dropdown.test.jsx
/* eslint-disable import/no-extraneous-dependencies */ /* eslint-disable import/no-extraneous-dependencies */
import React from 'react'; import React from 'react';
import { shallow, mount } from 'enzyme'; import { mount, shallow } from 'enzyme';
import Dropdown, { triggerKeys } from './index'; import Dropdown, { triggerKeys } from './index';
...@@ -14,20 +14,16 @@ const props = { ...@@ -14,20 +14,16 @@ const props = {
}; };
const menuOpen = (isOpen, wrapper) => { const menuOpen = (isOpen, wrapper) => {
expect(wrapper.hasClass('show')).toEqual(isOpen); expect(wrapper.childAt(0).hasClass('show')).toEqual(isOpen);
expect(wrapper.find('[type="button"]').prop('aria-expanded')).toEqual(isOpen); expect(wrapper.find('Button').prop('aria-expanded')).toEqual(isOpen);
expect(wrapper.find('[aria-hidden=false]').exists()).toEqual(isOpen); expect(wrapper.find('[aria-hidden=false]').exists()).toEqual(isOpen);
}; };
describe('<Dropdown />', () => { describe('<Dropdown />', () => {
describe('renders', () => { describe('renders', () => {
const wrapper = shallow( const wrapper = shallow(<Dropdown {...props} />);
<Dropdown
{...props}
/>,
);
const menu = wrapper.find('.dropdown-menu'); const menu = wrapper.find('.dropdown-menu');
const button = wrapper.find('[type="button"]'); const button = wrapper.find('Button');
it('with menu and toggle', () => { it('with menu and toggle', () => {
expect(button.exists()).toEqual(true); expect(button.exists()).toEqual(true);
...@@ -45,21 +41,17 @@ describe('<Dropdown />', () => { ...@@ -45,21 +41,17 @@ describe('<Dropdown />', () => {
let wrapper; let wrapper;
beforeEach(() => { beforeEach(() => {
wrapper = mount( wrapper = mount(<Dropdown {...props} />);
<Dropdown
{...props}
/>,
);
}); });
it('on toggle click', () => { it('on toggle click', () => {
wrapper.find('[type="button"]').simulate('click'); wrapper.find('Button').simulate('click');
menuOpen(true, wrapper); menuOpen(true, wrapper);
}); });
triggerKeys.OPEN_MENU.forEach((key) => { triggerKeys.OPEN_MENU.forEach((key) => {
it(`on ${key}`, () => { it(`on ${key}`, () => {
wrapper.find('[type="button"]').simulate('keyDown', { key }); wrapper.find('Button').simulate('keyDown', { key });
menuOpen(true, wrapper); menuOpen(true, wrapper);
}); });
}); });
...@@ -69,27 +61,24 @@ describe('<Dropdown />', () => { ...@@ -69,27 +61,24 @@ describe('<Dropdown />', () => {
let wrapper; let wrapper;
beforeEach(() => { beforeEach(() => {
wrapper = mount( wrapper = mount(<Dropdown {...props} />);
<Dropdown wrapper.find('Button').simulate('click');
{...props}
/>,
);
wrapper.find('[type="button"]').simulate('click');
}); });
it('on toggle click', () => { it('on toggle click', () => {
wrapper.find('[type="button"]').simulate('click'); wrapper.find('Button').simulate('click');
menuOpen(false, wrapper); menuOpen(false, wrapper);
}); });
it('on document click', () => { it('on document click', () => {
document.querySelector('body').click(); document.querySelector('body').click();
wrapper.update();
menuOpen(false, wrapper); menuOpen(false, wrapper);
}); });
triggerKeys.CLOSE_MENU.forEach((key) => { triggerKeys.CLOSE_MENU.forEach((key) => {
it(`on button ${key}`, () => { it(`on button ${key}`, () => {
wrapper.find('[type="button"]').simulate('keyDown', { key }); wrapper.find('Button').simulate('keyDown', { key });
menuOpen(false, wrapper); menuOpen(false, wrapper);
}); });
...@@ -109,7 +98,7 @@ describe('<Dropdown />', () => { ...@@ -109,7 +98,7 @@ describe('<Dropdown />', () => {
/>, />,
{ attachTo: div }, { attachTo: div },
); );
wrapper.find('[type="button"]').simulate('click'); wrapper.find('Button').simulate('click');
document.querySelector('.dropdown-menu').click(); document.querySelector('.dropdown-menu').click();
menuOpen(true, wrapper); menuOpen(true, wrapper);
}); });
...@@ -118,23 +107,19 @@ describe('<Dropdown />', () => { ...@@ -118,23 +107,19 @@ describe('<Dropdown />', () => {
let wrapper; let wrapper;
beforeEach(() => { beforeEach(() => {
wrapper = mount( wrapper = mount(<Dropdown {...props} />);
<Dropdown wrapper.find('Button').simulate('click');
{...props}
/>,
);
wrapper.find('[type="button"]').simulate('click');
}); });
it('first menu item on open', () => { it('first menu item on open', () => {
expect(wrapper.find('a').at(0).matchesElement(document.activeElement)).toEqual(true); expect(wrapper.find('a').at(0).html()).toEqual(document.activeElement.outerHTML);
}); });
describe('forward in list', () => { describe('forward in list', () => {
triggerKeys.NAVIGATE_DOWN.forEach((key) => { triggerKeys.NAVIGATE_DOWN.forEach((key) => {
it(`on ${key}`, () => { it(`on ${key}`, () => {
wrapper.find('a').at(0).simulate('keyDown', { key }); wrapper.find('a').at(0).simulate('keyDown', { key });
expect(wrapper.find('a').at(1).matchesElement(document.activeElement)).toEqual(true); expect(wrapper.find('a').at(1).html()).toEqual(document.activeElement.outerHTML);
}); });
}); });
}); });
...@@ -144,7 +129,7 @@ describe('<Dropdown />', () => { ...@@ -144,7 +129,7 @@ describe('<Dropdown />', () => {
it(`on ${key}`, () => { it(`on ${key}`, () => {
wrapper.find('a').at(0).simulate('keyDown', { key: triggerKeys.NAVIGATE_DOWN[0] }); wrapper.find('a').at(0).simulate('keyDown', { key: triggerKeys.NAVIGATE_DOWN[0] });
wrapper.find('a').at(1).simulate('keyDown', { key }); wrapper.find('a').at(1).simulate('keyDown', { key });
expect(wrapper.find('a').at(0).matchesElement(document.activeElement)).toEqual(true); expect(wrapper.find('a').at(0).html()).toEqual(document.activeElement.outerHTML);
}); });
}); });
}); });
...@@ -152,10 +137,10 @@ describe('<Dropdown />', () => { ...@@ -152,10 +137,10 @@ describe('<Dropdown />', () => {
describe('invalid key in open menu', () => { describe('invalid key in open menu', () => {
it('test', () => { it('test', () => {
menuOpen(true, wrapper); menuOpen(true, wrapper);
expect(wrapper.find('a').at(0).matchesElement(document.activeElement)).toEqual(true); expect(wrapper.find('a').at(0).html()).toEqual(document.activeElement.outerHTML);
wrapper.find('a').at(0).simulate('keyDown', { key: 'q' }); wrapper.find('a').at(0).simulate('keyDown', { key: 'q' });
menuOpen(true, wrapper); menuOpen(true, wrapper);
expect(wrapper.find('a').at(0).matchesElement(document.activeElement)).toEqual(true); expect(wrapper.find('a').at(0).html()).toEqual(document.activeElement.outerHTML);
}); });
}); });
...@@ -163,31 +148,32 @@ describe('<Dropdown />', () => { ...@@ -163,31 +148,32 @@ describe('<Dropdown />', () => {
wrapper.find('a').at(0).simulate('keyDown', { key: triggerKeys.NAVIGATE_DOWN[0] }); wrapper.find('a').at(0).simulate('keyDown', { key: triggerKeys.NAVIGATE_DOWN[0] });
wrapper.find('a').at(1).simulate('keyDown', { key: triggerKeys.NAVIGATE_DOWN[0] }); wrapper.find('a').at(1).simulate('keyDown', { key: triggerKeys.NAVIGATE_DOWN[0] });
wrapper.find('a').at(2).simulate('keyDown', { key: triggerKeys.NAVIGATE_DOWN[0] }); wrapper.find('a').at(2).simulate('keyDown', { key: triggerKeys.NAVIGATE_DOWN[0] });
expect(wrapper.find('a').at(0).matchesElement(document.activeElement)).toEqual(true); expect(wrapper.find('a').at(0).html()).toEqual(document.activeElement.outerHTML);
}); });
describe('toggle', () => { describe('toggle', () => {
it('toggle on close', () => { it('toggle on close', () => {
wrapper.find('a').at(0).simulate('keyDown', { key: triggerKeys.CLOSE_MENU[0] }); wrapper.find('a').at(0).simulate('keyDown', { key: triggerKeys.CLOSE_MENU[0] });
expect(wrapper.find('[type="button"]').matchesElement(document.activeElement)).toEqual(true); wrapper.instance().forceUpdate();
expect(wrapper.find('Button').html()).toEqual(document.activeElement.outerHTML);
}); });
it('does not toggle with invalid key', () => { it('does not toggle with invalid key', () => {
wrapper = mount( wrapper = mount(<Dropdown {...props} />);
<Dropdown
{...props}
/>,
);
menuOpen(false, wrapper); menuOpen(false, wrapper);
// open and close button to get focus on button // open and close button to get focus on button
wrapper.find('[type="button"]').simulate('click'); wrapper.find('Button').prop('onClick');
wrapper.find('[type="button"]').simulate('click'); wrapper.instance().forceUpdate();
expect(wrapper.find('[type="button"]').matchesElement(document.activeElement)).toEqual(true);
wrapper.find('Button').prop('onClick');
wrapper.instance().forceUpdate();
expect(wrapper.find('Button').html()).toEqual(document.activeElement.outerHTML);
wrapper.find('[type="button"]').simulate('keyDown', { key: 'q' }); wrapper.find('Button').simulate('keyDown', { key: 'q' });
menuOpen(false, wrapper); menuOpen(false, wrapper);
expect(wrapper.find('[type="button"]').matchesElement(document.activeElement)).toEqual(true); expect(wrapper.find('Button').html()).toEqual(document.activeElement.outerHTML);
}); });
}); });
}); });
......
src/Hyperlink/Hyperlink.stories.jsx
...@@ -19,22 +19,22 @@ const onClick = (event) => { ...@@ -19,22 +19,22 @@ const onClick = (event) => {
storiesOf('HyperLink', module) storiesOf('HyperLink', module)
.add('minimal usage', () => ( .add('minimal usage', () => (
<Hyperlink <Hyperlink
destination={'https://en.wikipedia.org/wiki/Hyperlink'} destination="https://en.wikipedia.org/wiki/Hyperlink"
content={'edX.org'} content="edX.org"
/> />
)) ))
.add('with blank target', () => ( .add('with blank target', () => (
<Hyperlink <Hyperlink
destination={'https://www.edx.org'} destination="https://www.edx.org"
content={'edX.org'} content="edX.org"
target={'_blank'} target="_blank"
/> />
)) ))
.add('with onClick', () => ( .add('with onClick', () => (
<Hyperlink <Hyperlink
destination={'https://www.edx.org'} destination="https://www.edx.org"
content={'edX.org'} content="edX.org"
target={'_blank'} target="_blank"
onClick={onClick} onClick={onClick}
/> />
)); ));
src/Modal/Modal.test.jsx
/* eslint-disable import/no-extraneous-dependencies */ /* eslint-disable import/no-extraneous-dependencies */
import React from 'react'; import React from 'react';
import { mount } from 'enzyme'; import { mount } from 'enzyme';
import Modal from './index'; import Modal from './index';
import Button from '../Button'; import Button from '../Button';
const modalOpen = (isOpen, wrapper) => { const modalOpen = (isOpen, wrapper) => {
expect(wrapper.hasClass('modal-open')).toEqual(isOpen); expect(wrapper.childAt(0).hasClass('modal-open')).toEqual(isOpen);
expect(wrapper.state('open')).toEqual(isOpen); expect(wrapper.state('open')).toEqual(isOpen);
}; };
const title = 'Modal title'; const title = 'Modal title';
...@@ -38,11 +39,7 @@ describe('<Modal />', () => { ...@@ -38,11 +39,7 @@ describe('<Modal />', () => {
]; ];
it('renders default buttons', () => { it('renders default buttons', () => {
wrapper = mount( wrapper = mount(<Modal {...defaultProps} />);
<Modal
{...defaultProps}
/>,
);
const modalTitle = wrapper.find('.modal-title'); const modalTitle = wrapper.find('.modal-title');
const modalBody = wrapper.find('.modal-body'); const modalBody = wrapper.find('.modal-body');
...@@ -52,36 +49,21 @@ describe('<Modal />', () => { ...@@ -52,36 +49,21 @@ describe('<Modal />', () => {
}); });
it('renders custom buttons', () => { it('renders custom buttons', () => {
wrapper = mount( wrapper = mount(<Modal {...defaultProps} buttons={buttons} />);
<Modal
{...defaultProps}
buttons={buttons}
/>,
);
expect(wrapper.find('button')).toHaveLength(buttons.length + 2); expect(wrapper.find('button')).toHaveLength(buttons.length + 2);
}); });
}); });
describe('props received correctly', () => { describe('props received correctly', () => {
it('component receives props', () => { it('component receives props', () => {
wrapper = mount( wrapper = mount(<Modal title={title} body={body} onClose={() => {}} />);
<Modal
title={title}
body={body}
onClose={() => {}}
/>,
);
modalOpen(false, wrapper); modalOpen(false, wrapper);
wrapper.setProps({ open: true }); wrapper.setProps({ open: true });
modalOpen(true, wrapper); modalOpen(true, wrapper);
}); });
it('component receives props and ignores prop change', () => { it('component receives props and ignores prop change', () => {
wrapper = mount( wrapper = mount(<Modal {...defaultProps} />);
<Modal
{...defaultProps}
/>,
);
modalOpen(true, wrapper); modalOpen(true, wrapper);
wrapper.setProps({ title: 'Changed modal title' }); wrapper.setProps({ title: 'Changed modal title' });
...@@ -91,11 +73,7 @@ describe('<Modal />', () => { ...@@ -91,11 +73,7 @@ describe('<Modal />', () => {
describe('close functions properly', () => { describe('close functions properly', () => {
beforeEach(() => { beforeEach(() => {
wrapper = mount( wrapper = mount(<Modal {...defaultProps} />);
<Modal
{...defaultProps}
/>,
);
}); });
it('closes when x button pressed', () => { it('closes when x button pressed', () => {
...@@ -118,12 +96,10 @@ describe('<Modal />', () => { ...@@ -118,12 +96,10 @@ describe('<Modal />', () => {
it('calls callback function on close', () => { it('calls callback function on close', () => {
const spy = jest.fn(); const spy = jest.fn();
wrapper = mount( wrapper = mount(<Modal
<Modal
{...defaultProps} {...defaultProps}
onClose={spy} onClose={spy}
/>, />);
);
expect(spy).toHaveBeenCalledTimes(0); expect(spy).toHaveBeenCalledTimes(0);
...@@ -134,29 +110,29 @@ describe('<Modal />', () => { ...@@ -134,29 +110,29 @@ describe('<Modal />', () => {
}); });
describe('invalid keystrokes do nothing', () => { describe('invalid keystrokes do nothing', () => {
beforeEach(() => { beforeEach(() => {
wrapper = mount( wrapper = mount(<Modal
<Modal
{...defaultProps} {...defaultProps}
/>, />);
);
}); });
it('does nothing on invalid keystroke q', () => { it('does nothing on invalid keystroke q', () => {
const buttons = wrapper.find('button'); let buttons = wrapper.find('button');
expect(buttons.at(0).matchesElement(document.activeElement)).toEqual(true); expect(buttons.at(0).html()).toEqual(document.activeElement.outerHTML);
modalOpen(true, wrapper); modalOpen(true, wrapper);
buttons.at(0).simulate('keyDown', { key: 'q' }); buttons.at(0).simulate('keyDown', { key: 'q' });
expect(buttons.at(0).matchesElement(document.activeElement)).toEqual(true); buttons = wrapper.find('button');
expect(buttons.at(0).html()).toEqual(document.activeElement.outerHTML);
modalOpen(true, wrapper); modalOpen(true, wrapper);
}); });
it('does nothing on invalid keystroke + ctrl', () => { it('does nothing on invalid keystroke + ctrl', () => {
const buttons = wrapper.find('button'); const buttons = wrapper.find('button');
expect(buttons.at(0).matchesElement(document.activeElement)).toEqual(true); expect(buttons.at(0).html()).toEqual(document.activeElement.outerHTML);
modalOpen(true, wrapper); modalOpen(true, wrapper);
buttons.at(0).simulate('keyDown', { key: 'Tab', ctrlKey: true }); buttons.at(0).simulate('keyDown', { key: 'Tab', ctrlKey: true });
expect(buttons.at(0).matchesElement(document.activeElement)).toEqual(true); expect(buttons.at(0).html()).toEqual(document.activeElement.outerHTML);
modalOpen(true, wrapper); modalOpen(true, wrapper);
}); });
}); });
...@@ -164,35 +140,31 @@ describe('<Modal />', () => { ...@@ -164,35 +140,31 @@ describe('<Modal />', () => {
let buttons; let buttons;
beforeEach(() => { beforeEach(() => {
wrapper = mount( wrapper = mount(<Modal {...defaultProps} />);
<Modal
{...defaultProps}
/>,
);
buttons = wrapper.find('button'); buttons = wrapper.find('button');
}); });
it('has correct initial focus', () => { it('has correct initial focus', () => {
expect(buttons.at(0).matchesElement(document.activeElement)).toEqual(true); expect(buttons.at(0).html()).toEqual(document.activeElement.outerHTML);
}); });
it('has reset focus after close and reopen', () => { it('has reset focus after close and reopen', () => {
expect(buttons.at(0).matchesElement(document.activeElement)).toEqual(true); expect(buttons.at(0).html()).toEqual(document.activeElement.outerHTML);
wrapper.setProps({ open: false }); wrapper.setProps({ open: false });
modalOpen(false, wrapper); modalOpen(false, wrapper);
wrapper.setProps({ open: true }); wrapper.setProps({ open: true });
modalOpen(true, wrapper); modalOpen(true, wrapper);
expect(buttons.at(0).matchesElement(document.activeElement)).toEqual(true); expect(buttons.at(0).html()).toEqual(document.activeElement.outerHTML);
}); });
it('traps focus forwards on tab keystroke', () => { it('traps focus forwards on tab keystroke', () => {
expect(buttons.at(0).matchesElement(document.activeElement)).toEqual(true); expect(buttons.at(0).html()).toEqual(document.activeElement.outerHTML);
buttons.last().simulate('keyDown', { key: 'Tab' }); buttons.last().simulate('keyDown', { key: 'Tab' });
expect(buttons.at(0).matchesElement(document.activeElement)).toEqual(true); expect(buttons.at(0).html()).toEqual(document.activeElement.outerHTML);
}); });
it('traps focus backwards on shift + tab keystroke', () => { it('traps focus backwards on shift + tab keystroke', () => {
expect(buttons.at(0).matchesElement(document.activeElement)).toEqual(true); expect(buttons.at(0).html()).toEqual(document.activeElement.outerHTML);
buttons.at(0).simulate('keyDown', { key: 'Tab', shiftKey: true }); buttons.at(0).simulate('keyDown', { key: 'Tab', shiftKey: true });
expect(buttons.last().matchesElement(document.activeElement)).toEqual(true); expect(buttons.last().html()).toEqual(document.activeElement.outerHTML);
}); });
}); });
}); });
src/RadioButtonGroup/RadioButtonGroup.stories.jsx
...@@ -40,23 +40,23 @@ const onKeyDown = (event) => { ...@@ -40,23 +40,23 @@ const onKeyDown = (event) => {
storiesOf('RadioButtonGroup', module) storiesOf('RadioButtonGroup', module)
.add('unselected minimal usage', () => ( .add('unselected minimal usage', () => (
<RadioButtonGroup <RadioButtonGroup
name={'rbg'} name="rbg"
label={'Radio Button Group'} label="Radio Button Group"
onBlur={action('Radio Button Blur')} onBlur={action('Radio Button Blur')}
onChange={onChange} onChange={onChange}
onClick={onClick} onClick={onClick}
onFocus={onFocus} onFocus={onFocus}
onKeyDown={onKeyDown} onKeyDown={onKeyDown}
> >
<RadioButton value={'jaebaebae'}>First Value</RadioButton> <RadioButton value="jaebaebae">First Value</RadioButton>
<RadioButton value={'value2'}>Second Value</RadioButton> <RadioButton value="value2">Second Value</RadioButton>
<RadioButton value={'value3'}>Third Value</RadioButton> <RadioButton value="value3">Third Value</RadioButton>
</RadioButtonGroup> </RadioButtonGroup>
)) ))
.add('selected minimal usage', () => ( .add('selected minimal usage', () => (
<RadioButtonGroup <RadioButtonGroup
name={'rbg'} name="rbg"
label={'Radio Button Group'} label="Radio Button Group"
onBlur={action('Radio Button Blur')} onBlur={action('Radio Button Blur')}
onChange={onChange} onChange={onChange}
onClick={onClick} onClick={onClick}
...@@ -64,8 +64,8 @@ storiesOf('RadioButtonGroup', module) ...@@ -64,8 +64,8 @@ storiesOf('RadioButtonGroup', module)
onKeyDown={onKeyDown} onKeyDown={onKeyDown}
selectedIndex={1} selectedIndex={1}
> >
<RadioButton value={'jaebaebae'}>First Value</RadioButton> <RadioButton value="jaebaebae">First Value</RadioButton>
<RadioButton value={'value2'}>Second Value</RadioButton> <RadioButton value="value2">Second Value</RadioButton>
<RadioButton value={'value3'}>Third Value</RadioButton> <RadioButton value="value3">Third Value</RadioButton>
</RadioButtonGroup> </RadioButtonGroup>
)); ));
src/RadioButtonGroup/index.jsx
...@@ -34,7 +34,7 @@ class RadioButton extends React.PureComponent { ...@@ -34,7 +34,7 @@ class RadioButton extends React.PureComponent {
return ( return (
<div> <div>
<input <input
type={'radio'} type="radio"
name={name} name={name}
aria-checked={isChecked} aria-checked={isChecked}
defaultChecked={isChecked} defaultChecked={isChecked}
...@@ -95,8 +95,7 @@ class RadioButtonGroup extends React.Component { ...@@ -95,8 +95,7 @@ class RadioButtonGroup extends React.Component {
onFocus, onFocus,
onKeyDown, onKeyDown,
index, index,
}), }));
);
} }
render() { render() {
...@@ -115,7 +114,7 @@ class RadioButtonGroup extends React.Component { ...@@ -115,7 +114,7 @@ class RadioButtonGroup extends React.Component {
return ( return (
<div <div
role={'radiogroup'} role="radiogroup"
aria-label={label} aria-label={label}
onChange={this.onChange} onChange={this.onChange}
tabIndex={-1} tabIndex={-1}
......
src/StatusAlert/StatusAlert.test.jsx
import React from 'react'; import React from 'react';
import { mount } from 'enzyme'; import { mount } from 'enzyme';
import StatusAlert from './index';
import StatusAlert from './index';
const statusAlertOpen = (isOpen, wrapper) => { const statusAlertOpen = (isOpen, wrapper) => {
expect(wrapper.hasClass('show')).toEqual(isOpen); expect(wrapper.childAt(0).hasClass('show')).toEqual(isOpen);
expect(wrapper.state('open')).toEqual(isOpen); expect(wrapper.state('open')).toEqual(isOpen);
}; };
const dialog = 'Status Alert dialog'; const dialog = 'Status Alert dialog';
...@@ -19,11 +19,7 @@ let wrapper; ...@@ -19,11 +19,7 @@ let wrapper;
describe('<StatusAlert />', () => { describe('<StatusAlert />', () => {
describe('correct rendering', () => { describe('correct rendering', () => {
it('renders default view', () => { it('renders default view', () => {
wrapper = mount( wrapper = mount(<StatusAlert {...defaultProps} />);
<StatusAlert
{...defaultProps}
/>,
);
const statusAlertDialog = wrapper.find('.alert-dialog'); const statusAlertDialog = wrapper.find('.alert-dialog');
expect(statusAlertDialog.text()).toEqual(dialog); expect(statusAlertDialog.text()).toEqual(dialog);
...@@ -31,12 +27,7 @@ describe('<StatusAlert />', () => { ...@@ -31,12 +27,7 @@ describe('<StatusAlert />', () => {
}); });
it('renders non-dismissible view', () => { it('renders non-dismissible view', () => {
wrapper = mount( wrapper = mount(<StatusAlert {...defaultProps} dismissible={false} />);
<StatusAlert
{...defaultProps}
dismissible={false}
/>,
);
const statusAlertDialog = wrapper.find('.alert-dialog'); const statusAlertDialog = wrapper.find('.alert-dialog');
expect(statusAlertDialog.text()).toEqual(dialog); expect(statusAlertDialog.text()).toEqual(dialog);
...@@ -46,12 +37,7 @@ describe('<StatusAlert />', () => { ...@@ -46,12 +37,7 @@ describe('<StatusAlert />', () => {
describe('props received correctly', () => { describe('props received correctly', () => {
it('component receives props', () => { it('component receives props', () => {
wrapper = mount( wrapper = mount(<StatusAlert dialog={dialog} onClose={() => {}} />);
<StatusAlert
dialog={dialog}
onClose={() => {}}
/>,
);
statusAlertOpen(false, wrapper); statusAlertOpen(false, wrapper);
wrapper.setProps({ open: true }); wrapper.setProps({ open: true });
...@@ -59,11 +45,7 @@ describe('<StatusAlert />', () => { ...@@ -59,11 +45,7 @@ describe('<StatusAlert />', () => {
}); });
it('component receives props and ignores prop change', () => { it('component receives props and ignores prop change', () => {
wrapper = mount( wrapper = mount(<StatusAlert {...defaultProps} />);
<StatusAlert
{...defaultProps}
/>,
);
statusAlertOpen(true, wrapper); statusAlertOpen(true, wrapper);
wrapper.setProps({ dialog: 'Changed alert dialog' }); wrapper.setProps({ dialog: 'Changed alert dialog' });
...@@ -73,11 +55,7 @@ describe('<StatusAlert />', () => { ...@@ -73,11 +55,7 @@ describe('<StatusAlert />', () => {
describe('close functions properly', () => { describe('close functions properly', () => {
beforeEach(() => { beforeEach(() => {
wrapper = mount( wrapper = mount(<StatusAlert {...defaultProps} />);
<StatusAlert
{...defaultProps}
/>,
);
}); });
it('closes when x button pressed', () => { it('closes when x button pressed', () => {
...@@ -101,12 +79,7 @@ describe('<StatusAlert />', () => { ...@@ -101,12 +79,7 @@ describe('<StatusAlert />', () => {
it('calls callback function on close', () => { it('calls callback function on close', () => {
const spy = jest.fn(); const spy = jest.fn();
wrapper = mount( wrapper = mount(<StatusAlert {...defaultProps} onClose={spy} />);
<StatusAlert
{...defaultProps}
onClose={spy}
/>,
);
expect(spy).toHaveBeenCalledTimes(0); expect(spy).toHaveBeenCalledTimes(0);
...@@ -118,30 +91,26 @@ describe('<StatusAlert />', () => { ...@@ -118,30 +91,26 @@ describe('<StatusAlert />', () => {
describe('invalid keystrokes do nothing', () => { describe('invalid keystrokes do nothing', () => {
beforeEach(() => { beforeEach(() => {
wrapper = mount( wrapper = mount(<StatusAlert {...defaultProps} />);
<StatusAlert
{...defaultProps}
/>,
);
}); });
it('does nothing on invalid keystroke q', () => { it('does nothing on invalid keystroke q', () => {
const buttons = wrapper.find('button'); const buttons = wrapper.find('button');
expect(buttons.at(0).matchesElement(document.activeElement)).toEqual(true); expect(buttons.at(0).html()).toEqual(document.activeElement.outerHTML);
statusAlertOpen(true, wrapper); statusAlertOpen(true, wrapper);
buttons.at(0).simulate('keyDown', { key: 'q' }); buttons.at(0).simulate('keyDown', { key: 'q' });
expect(buttons.at(0).matchesElement(document.activeElement)).toEqual(true); expect(buttons.at(0).html()).toEqual(document.activeElement.outerHTML);
statusAlertOpen(true, wrapper); statusAlertOpen(true, wrapper);
}); });
it('does nothing on invalid keystroke + ctrl', () => { it('does nothing on invalid keystroke + ctrl', () => {
const buttons = wrapper.find('button'); const buttons = wrapper.find('button');
expect(buttons.at(0).matchesElement(document.activeElement)).toEqual(true); expect(buttons.at(0).html()).toEqual(document.activeElement.outerHTML);
statusAlertOpen(true, wrapper); statusAlertOpen(true, wrapper);
buttons.at(0).simulate('keyDown', { key: 'Tab', ctrlKey: true }); buttons.at(0).simulate('keyDown', { key: 'Tab', ctrlKey: true });
expect(buttons.at(0).matchesElement(document.activeElement)).toEqual(true); expect(buttons.at(0).html()).toEqual(document.activeElement.outerHTML);
statusAlertOpen(true, wrapper); statusAlertOpen(true, wrapper);
}); });
}); });
......
src/Table/Table.test.jsx
...@@ -51,11 +51,7 @@ const sortableProps = { ...@@ -51,11 +51,7 @@ const sortableProps = {
describe('<Table />', () => { describe('<Table />', () => {
describe('renders', () => { describe('renders', () => {
const wrapper = shallow( const wrapper = shallow(<Table {...props} />);
<Table
{...props}
/>,
);
it('with display columns in the right order', () => { it('with display columns in the right order', () => {
wrapper.find('th').forEach((th, i) => { wrapper.find('th').forEach((th, i) => {
...@@ -78,12 +74,7 @@ describe('<Table />', () => { ...@@ -78,12 +74,7 @@ describe('<Table />', () => {
}); });
describe('that is non-sortable renders', () => { describe('that is non-sortable renders', () => {
const wrapper = mount( const wrapper = mount(<Table {...sortableProps} tableSortable={false} />);
<Table
{...sortableProps}
tableSortable={false}
/>,
);
it('without sortable columns', () => { it('without sortable columns', () => {
const tableHeadings = wrapper.find('th'); const tableHeadings = wrapper.find('th');
...@@ -105,11 +96,7 @@ describe('<Table />', () => { ...@@ -105,11 +96,7 @@ describe('<Table />', () => {
}); });
describe('that is sortable and has mixed columns renders', () => { describe('that is sortable and has mixed columns renders', () => {
let wrapper = shallow( let wrapper = shallow(<Table {...sortableProps} />);
<Table
{...sortableProps}
/>,
);
it('with sortable classname on correct headings', () => { it('with sortable classname on correct headings', () => {
const tableHeadings = wrapper.find('th'); const tableHeadings = wrapper.find('th');
...@@ -140,11 +127,7 @@ describe('<Table />', () => { ...@@ -140,11 +127,7 @@ describe('<Table />', () => {
expect(wrapper.state('sortDirection')).toEqual(sortableProps.defaultSortDirection); expect(wrapper.state('sortDirection')).toEqual(sortableProps.defaultSortDirection);
}); });
wrapper = mount( wrapper = mount(<Table {...sortableProps} />);
<Table
{...sortableProps}
/>,
);
it('with correct column buttons', () => { it('with correct column buttons', () => {
const buttons = wrapper.find('button'); const buttons = wrapper.find('button');
...@@ -167,11 +150,7 @@ describe('<Table />', () => { ...@@ -167,11 +150,7 @@ describe('<Table />', () => {
let x2Spy; let x2Spy;
beforeEach(() => { beforeEach(() => {
wrapper = mount( wrapper = mount(<Table {...sortableProps} />);
<Table
{...sortableProps}
/>,
);
buttons = wrapper.find('button'); buttons = wrapper.find('button');
numSpy = jest.fn(); numSpy = jest.fn();
...@@ -183,6 +162,7 @@ describe('<Table />', () => { ...@@ -183,6 +162,7 @@ describe('<Table />', () => {
it('changes sort icons appropriately on click', () => { it('changes sort icons appropriately on click', () => {
buttons.at(0).simulate('click'); buttons.at(0).simulate('click');
buttons = wrapper.find('button');
expect(buttons.at(0).find('.fa')).toHaveLength(1); expect(buttons.at(0).find('.fa')).toHaveLength(1);
expect(buttons.at(0).find('.fa-sort-asc')).toHaveLength(1); expect(buttons.at(0).find('.fa-sort-asc')).toHaveLength(1);
...@@ -195,6 +175,7 @@ describe('<Table />', () => { ...@@ -195,6 +175,7 @@ describe('<Table />', () => {
expect(buttons.at(1).find('.fa-sort')).toHaveLength(1); expect(buttons.at(1).find('.fa-sort')).toHaveLength(1);
buttons.at(1).simulate('click'); buttons.at(1).simulate('click');
buttons = wrapper.find('button');
expect(buttons.at(0).find('.fa')).toHaveLength(1); expect(buttons.at(0).find('.fa')).toHaveLength(1);
expect(buttons.at(0).find('.fa-sort-asc')).toHaveLength(0); expect(buttons.at(0).find('.fa-sort-asc')).toHaveLength(0);
...@@ -211,6 +192,7 @@ describe('<Table />', () => { ...@@ -211,6 +192,7 @@ describe('<Table />', () => {
const headings = wrapper.find('.sr-only'); const headings = wrapper.find('.sr-only');
buttons.at(0).simulate('click'); buttons.at(0).simulate('click');
buttons = wrapper.find('button');
expect(headings.at(0).text()).toEqual(' sort ascending'); expect(headings.at(0).text()).toEqual(' sort ascending');
expect(headings.at(1).text()).toEqual(' click to sort'); expect(headings.at(1).text()).toEqual(' click to sort');
...@@ -223,16 +205,19 @@ describe('<Table />', () => { ...@@ -223,16 +205,19 @@ describe('<Table />', () => {
it('changes state appropriately on click', () => { it('changes state appropriately on click', () => {
buttons.at(0).simulate('click'); buttons.at(0).simulate('click');
buttons = wrapper.find('button');
expect(wrapper.state('sortedColumn')).toEqual(sortableProps.defaultSortedColumn); expect(wrapper.state('sortedColumn')).toEqual(sortableProps.defaultSortedColumn);
expect(wrapper.state('sortDirection')).toEqual('asc'); expect(wrapper.state('sortDirection')).toEqual('asc');
buttons.at(0).simulate('click'); buttons.at(0).simulate('click');
buttons = wrapper.find('button');
expect(wrapper.state('sortedColumn')).toEqual(sortableProps.defaultSortedColumn); expect(wrapper.state('sortedColumn')).toEqual(sortableProps.defaultSortedColumn);
expect(wrapper.state('sortDirection')).toEqual('desc'); expect(wrapper.state('sortDirection')).toEqual('desc');
buttons.at(1).simulate('click'); buttons.at(1).simulate('click');
buttons = wrapper.find('button');
expect(wrapper.state('sortedColumn')).toEqual(sortableProps.columns[1].key); expect(wrapper.state('sortedColumn')).toEqual(sortableProps.columns[1].key);
expect(wrapper.state('sortDirection')).toEqual('desc'); expect(wrapper.state('sortDirection')).toEqual('desc');
...@@ -243,6 +228,7 @@ describe('<Table />', () => { ...@@ -243,6 +228,7 @@ describe('<Table />', () => {
expect(x2Spy).toHaveBeenCalledTimes(0); expect(x2Spy).toHaveBeenCalledTimes(0);
buttons.at(0).simulate('click'); buttons.at(0).simulate('click');
buttons = wrapper.find('button');
expect(numSpy).toHaveBeenCalledTimes(1); expect(numSpy).toHaveBeenCalledTimes(1);
expect(x2Spy).toHaveBeenCalledTimes(0); expect(x2Spy).toHaveBeenCalledTimes(0);
...@@ -250,6 +236,7 @@ describe('<Table />', () => { ...@@ -250,6 +236,7 @@ describe('<Table />', () => {
expect(numSpy).toBeCalledWith('asc'); expect(numSpy).toBeCalledWith('asc');
buttons.at(0).simulate('click'); buttons.at(0).simulate('click');
buttons = wrapper.find('button');
expect(numSpy).toHaveBeenCalledTimes(2); expect(numSpy).toHaveBeenCalledTimes(2);
expect(x2Spy).toHaveBeenCalledTimes(0); expect(x2Spy).toHaveBeenCalledTimes(0);
...@@ -257,6 +244,7 @@ describe('<Table />', () => { ...@@ -257,6 +244,7 @@ describe('<Table />', () => {
expect(numSpy).toBeCalledWith('desc'); expect(numSpy).toBeCalledWith('desc');
buttons.at(1).simulate('click'); buttons.at(1).simulate('click');
buttons = wrapper.find('button');
expect(numSpy).toHaveBeenCalledTimes(2); expect(numSpy).toHaveBeenCalledTimes(2);
expect(x2Spy).toHaveBeenCalledTimes(1); expect(x2Spy).toHaveBeenCalledTimes(1);
......
src/Table/index.jsx
...@@ -31,8 +31,7 @@ class Table extends React.Component { ...@@ -31,8 +31,7 @@ class Table extends React.Component {
sortDirection: newDirection, sortDirection: newDirection,
}); });
const currentlySortedColumn = this.props.columns.find( const currentlySortedColumn = this.props.columns.find(column => (columnKey === column.key));
column => (columnKey === column.key));
currentlySortedColumn.onSort(newDirection); currentlySortedColumn.onSort(newDirection);
} }
...@@ -90,9 +89,8 @@ class Table extends React.Component { ...@@ -90,9 +89,8 @@ class Table extends React.Component {
getHeadings() { getHeadings() {
return ( return (
<thead className={classNames( <thead
...this.props.headingClassName.map(className => styles[className]), className={classNames(...this.props.headingClassName.map(className => styles[className]))}
)}
> >
<tr> <tr>
{this.props.columns.map(col => ( {this.props.columns.map(col => (
...@@ -167,7 +165,8 @@ Table.propTypes = { ...@@ -167,7 +165,8 @@ Table.propTypes = {
desc: PropTypes.string, desc: PropTypes.string,
defaultText: PropTypes.string, defaultText: PropTypes.string,
}), }),
props => props.tableSortable), props => props.tableSortable,
),
}; };
Table.defaultProps = { Table.defaultProps = {
......
src/Tabs/Tabs.test.jsx
/* eslint-disable import/no-extraneous-dependencies */ /* eslint-disable import/no-extraneous-dependencies */
import React from 'react'; import React from 'react';
import { shallow } from 'enzyme'; import { shallow } from 'enzyme';
import Tabs from './index'; import Tabs from './index';
const props = { const props = {
...@@ -29,21 +28,13 @@ const tabSelectedAtIndex = (index, wrapper) => { ...@@ -29,21 +28,13 @@ const tabSelectedAtIndex = (index, wrapper) => {
describe('<Tabs />', () => { describe('<Tabs />', () => {
it('renders with first tab selected', () => { it('renders with first tab selected', () => {
const wrapper = shallow( const wrapper = shallow(<Tabs {...props} />);
<Tabs
{...props}
/>,
);
tabSelectedAtIndex(0, wrapper); tabSelectedAtIndex(0, wrapper);
}); });
describe('switches tab selection', () => { describe('switches tab selection', () => {
it('on click', () => { it('on click', () => {
const wrapper = shallow( const wrapper = shallow(<Tabs {...props} />);
<Tabs
{...props}
/>,
);
wrapper.find('a').forEach((node, i) => { wrapper.find('a').forEach((node, i) => {
node.simulate('click'); node.simulate('click');
tabSelectedAtIndex(i, wrapper); tabSelectedAtIndex(i, wrapper);
......
src/asInput/asInput.test.jsx
...@@ -37,9 +37,7 @@ describe('asInput()', () => { ...@@ -37,9 +37,7 @@ describe('asInput()', () => {
...baseProps, ...baseProps,
value: 'foofoo', value: 'foofoo',
}; };
const wrapper = mount( const wrapper = mount(<InputTestComponent {...props} />);
<InputTestComponent {...props} />,
);
expect(wrapper.find('label').text()).toEqual(props.label); expect(wrapper.find('label').text()).toEqual(props.label);
expect(wrapper.find('#description-asInput1').text()).toEqual(props.description); expect(wrapper.find('#description-asInput1').text()).toEqual(props.description);
expect(wrapper.state('value')).toEqual(props.value); expect(wrapper.state('value')).toEqual(props.value);
...@@ -52,9 +50,7 @@ describe('asInput()', () => { ...@@ -52,9 +50,7 @@ describe('asInput()', () => {
...baseProps, ...baseProps,
onBlur: spy, onBlur: spy,
}; };
const wrapper = mount( const wrapper = mount(<InputTestComponent {...props} />);
<InputTestComponent {...props} />,
);
wrapper.find('input').simulate('blur'); wrapper.find('input').simulate('blur');
expect(spy).toHaveBeenCalledTimes(1); expect(spy).toHaveBeenCalledTimes(1);
}); });
...@@ -65,9 +61,7 @@ describe('asInput()', () => { ...@@ -65,9 +61,7 @@ describe('asInput()', () => {
...baseProps, ...baseProps,
onChange: spy, onChange: spy,
}; };
const wrapper = mount( const wrapper = mount(<InputTestComponent {...props} />);
<InputTestComponent {...props} />,
);
wrapper.find('input').simulate('change'); wrapper.find('input').simulate('change');
expect(spy).toHaveBeenCalledTimes(1); expect(spy).toHaveBeenCalledTimes(1);
}); });
...@@ -80,9 +74,7 @@ describe('asInput()', () => { ...@@ -80,9 +74,7 @@ describe('asInput()', () => {
...baseProps, ...baseProps,
validator: spy, validator: spy,
}; };
const wrapper = mount( const wrapper = mount(<InputTestComponent {...props} />);
<InputTestComponent {...props} />,
);
wrapper.find('input').simulate('blur'); wrapper.find('input').simulate('blur');
expect(spy).toHaveBeenCalledTimes(1); expect(spy).toHaveBeenCalledTimes(1);
}); });
...@@ -98,9 +90,7 @@ describe('asInput()', () => { ...@@ -98,9 +90,7 @@ describe('asInput()', () => {
...baseProps, ...baseProps,
validator: spy, validator: spy,
}; };
const wrapper = mount( const wrapper = mount(<InputTestComponent {...props} />);
<InputTestComponent {...props} />,
);
wrapper.find('input').simulate('blur'); wrapper.find('input').simulate('blur');
expect(spy).toHaveBeenCalledTimes(1); expect(spy).toHaveBeenCalledTimes(1);
const err = wrapper.find('.form-control-feedback'); const err = wrapper.find('.form-control-feedback');
......
src/setupTest.js 0 → 100644
// TODO: @jaebradley refactor this when Jest issue (https://github.com/facebook/jest/issues/4545#issuecomment-333004504) is patched
// eslint-disable-next-line no-unused-vars
import raf from './tempPolyfills'; // need to import this first to ignore warnings
// eslint-disable-next-line import/no-extraneous-dependencies, import/first
import Enzyme from 'enzyme';
// eslint-disable-next-line import/no-extraneous-dependencies, import/first
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });
src/tempPolyfills.js 0 → 100644
global.requestAnimationFrame = (cb) => {
setTimeout(cb, 0);
};
const raf = global.requestAnimationFrame;
export default raf;
src/tempPolyfills.test.js 0 → 100644
import raf from './tempPolyfills';
jest.useFakeTimers();
describe('tempPolyfills', () => {
it('raf should equal global.requestAnimationFrame', () => { expect(raf).toEqual(global.requestAnimationFrame); });
describe('callback with setTimeout', () => {
it('should call setTimeout with callback', () => {
const foo = () => { console.log('foo'); }; // eslint-disable-line no-console
raf(foo);
expect(setTimeout.mock.calls.length).toBe(1);
expect(setTimeout.mock.calls[0][1]).toBe(0);
expect(setTimeout.mock.calls[0][0]).toEqual(foo);
});
});
});
webpack.config.js
...@@ -6,6 +6,7 @@ const env = process.env.NODE_ENV || 'dev'; ...@@ -6,6 +6,7 @@ const env = process.env.NODE_ENV || 'dev';
const base = { const base = {
devtool: 'source-map', devtool: 'source-map',
entry: { entry: {
polyfill: 'babel-polyfill',
main: path.resolve('./docs/App.js'), main: path.resolve('./docs/App.js'),
}, },
output: { output: {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment