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 180 additions and 275 deletions
package.json
......@@ -24,11 +24,12 @@
},
"dependencies": {
"@edx/edx-bootstrap": "^0.4.2",
"babel-polyfill": "^6.26.0",
"classnames": "^2.2.5",
"font-awesome": "^4.7.0",
"prop-types": "^15.5.8",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react": "^16.1.0",
"react-dom": "^16.1.0",
"react-element-proptypes": "^1.0.0",
"react-proptype-conditional-require": "^1.0.4"
},
......@@ -37,8 +38,8 @@
"@storybook/addon-console": "^1.0.0",
"@storybook/addon-options": "^3.2.6",
"@storybook/addon-storyshots": "^3.2.8",
"@storybook/channels": "^3.2.15",
"@storybook/react": "^3.2.12",
"@storybook/channels": "^3.2.16",
"@storybook/react": "^3.2.16",
"@storybook/storybook-deployer": "^2.0.0",
"babel-cli": "^6.24.1",
"babel-jest": "^21.0.0",
......@@ -52,9 +53,10 @@
"coveralls": "^3.0.0",
"css-loader": "^0.28.4",
"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-config-airbnb": "^15.0.1",
"eslint-config-airbnb": "^16.0.0",
"eslint-config-edx": "^4.0.1",
"eslint-import-resolver-webpack": "^0.8.1",
"eslint-plugin-jsx-a11y": "^5.1.0",
......@@ -67,7 +69,7 @@
"node-sass": "^4.5.3",
"postcss-scss": "^1.0.1",
"react-router-dom": "^4.1.1",
"react-test-renderer": "^15.6.1",
"react-test-renderer": "^16.1.0",
"sass-loader": "^6.0.5",
"semantic-release": "^8.2.0",
"source-map-loader": "^0.2.1",
......@@ -77,6 +79,9 @@
"webpack-dev-server": "^2.4.4"
},
"jest": {
"setupFiles": [
"./src/setupTest.js"
],
"moduleNameMapper": {
"\\.(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"
......
src/Button/Button.test.jsx
......@@ -12,11 +12,9 @@ describe('<Button />', () => {
let button;
beforeEach(() => {
wrapper = mount(
<Button
{...defaultProps}
/>,
);
wrapper = mount(<Button
{...defaultProps}
/>);
button = wrapper.find('button');
});
......@@ -26,7 +24,8 @@ describe('<Button />', () => {
it('puts focus on button on click', () => {
expect(button.matchesElement(document.activeElement)).toEqual(false);
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', () => {
const onClickSpy = jest.fn();
......
src/CheckBox/CheckBox.test.jsx
......@@ -5,12 +5,7 @@ import CheckBox from './index';
describe('<CheckBox />', () => {
it('attributes are set correctly', () => {
const wrapper = mount(
<CheckBox
name="checkbox"
label="check me out!"
/>,
);
const wrapper = mount(<CheckBox name="checkbox" label="check me out!" />);
expect(wrapper.find('[name="checkbox"]').exists()).toEqual(true);
expect(wrapper.find('[type="checkbox"]').exists()).toEqual(true);
......@@ -19,12 +14,7 @@ describe('<CheckBox />', () => {
});
it('aria-label changes after click', () => {
const wrapper = mount(
<CheckBox
name="checkbox"
label="check me out!"
/>,
);
const wrapper = mount(<CheckBox name="checkbox" label="check me out!" />);
expect(wrapper.find('[aria-checked=false]').exists()).toEqual(true);
......@@ -39,13 +29,7 @@ describe('<CheckBox />', () => {
it('check that callback function is triggered when clicked', () => {
const spy = jest.fn();
const wrapper = mount(
<CheckBox
name="checkbox"
label="check me out!"
onChange={spy}
/>,
);
const wrapper = mount(<CheckBox name="checkbox" label="check me out!"onChange={spy} />);
expect(spy).toHaveBeenCalledTimes(0);
// check
......@@ -59,13 +43,7 @@ describe('<CheckBox />', () => {
});
it('checks if start state can be set to checked', () => {
const wrapper = mount(
<CheckBox
name="checkbox"
label="I start checked"
checked
/>,
);
const wrapper = mount(<CheckBox name="checkbox" label="I start checked" checked />);
expect(wrapper.find('[defaultChecked=true]').exists()).toEqual(true);
expect(wrapper.find('[aria-checked=true]').exists()).toEqual(true);
......@@ -76,13 +54,7 @@ describe('<CheckBox />', () => {
});
it('checkbox can be disabled', () => {
const wrapper = mount(
<CheckBox
name="checkbox"
label="I am disabled"
disabled
/>,
);
const wrapper = mount(<CheckBox name="checkbox" label="I am disabled" disabled />);
expect(wrapper.props().disabled).toEqual(true);
......
src/Dropdown/Dropdown.test.jsx
/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import { shallow, mount } from 'enzyme';
import { mount, shallow } from 'enzyme';
import Dropdown, { triggerKeys } from './index';
......@@ -14,20 +14,16 @@ const props = {
};
const menuOpen = (isOpen, wrapper) => {
expect(wrapper.hasClass('show')).toEqual(isOpen);
expect(wrapper.find('[type="button"]').prop('aria-expanded')).toEqual(isOpen);
expect(wrapper.childAt(0).hasClass('show')).toEqual(isOpen);
expect(wrapper.find('Button').prop('aria-expanded')).toEqual(isOpen);
expect(wrapper.find('[aria-hidden=false]').exists()).toEqual(isOpen);
};
describe('<Dropdown />', () => {
describe('renders', () => {
const wrapper = shallow(
<Dropdown
{...props}
/>,
);
const wrapper = shallow(<Dropdown {...props} />);
const menu = wrapper.find('.dropdown-menu');
const button = wrapper.find('[type="button"]');
const button = wrapper.find('Button');
it('with menu and toggle', () => {
expect(button.exists()).toEqual(true);
......@@ -45,21 +41,17 @@ describe('<Dropdown />', () => {
let wrapper;
beforeEach(() => {
wrapper = mount(
<Dropdown
{...props}
/>,
);
wrapper = mount(<Dropdown {...props} />);
});
it('on toggle click', () => {
wrapper.find('[type="button"]').simulate('click');
wrapper.find('Button').simulate('click');
menuOpen(true, wrapper);
});
triggerKeys.OPEN_MENU.forEach((key) => {
it(`on ${key}`, () => {
wrapper.find('[type="button"]').simulate('keyDown', { key });
wrapper.find('Button').simulate('keyDown', { key });
menuOpen(true, wrapper);
});
});
......@@ -69,27 +61,24 @@ describe('<Dropdown />', () => {
let wrapper;
beforeEach(() => {
wrapper = mount(
<Dropdown
{...props}
/>,
);
wrapper.find('[type="button"]').simulate('click');
wrapper = mount(<Dropdown {...props} />);
wrapper.find('Button').simulate('click');
});
it('on toggle click', () => {
wrapper.find('[type="button"]').simulate('click');
wrapper.find('Button').simulate('click');
menuOpen(false, wrapper);
});
it('on document click', () => {
document.querySelector('body').click();
wrapper.update();
menuOpen(false, wrapper);
});
triggerKeys.CLOSE_MENU.forEach((key) => {
it(`on button ${key}`, () => {
wrapper.find('[type="button"]').simulate('keyDown', { key });
wrapper.find('Button').simulate('keyDown', { key });
menuOpen(false, wrapper);
});
......@@ -109,7 +98,7 @@ describe('<Dropdown />', () => {
/>,
{ attachTo: div },
);
wrapper.find('[type="button"]').simulate('click');
wrapper.find('Button').simulate('click');
document.querySelector('.dropdown-menu').click();
menuOpen(true, wrapper);
});
......@@ -118,23 +107,19 @@ describe('<Dropdown />', () => {
let wrapper;
beforeEach(() => {
wrapper = mount(
<Dropdown
{...props}
/>,
);
wrapper.find('[type="button"]').simulate('click');
wrapper = mount(<Dropdown {...props} />);
wrapper.find('Button').simulate('click');
});
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', () => {
triggerKeys.NAVIGATE_DOWN.forEach((key) => {
it(`on ${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 />', () => {
it(`on ${key}`, () => {
wrapper.find('a').at(0).simulate('keyDown', { key: triggerKeys.NAVIGATE_DOWN[0] });
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 />', () => {
describe('invalid key in open menu', () => {
it('test', () => {
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' });
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 />', () => {
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(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', () => {
it('toggle on close', () => {
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', () => {
wrapper = mount(
<Dropdown
{...props}
/>,
);
wrapper = mount(<Dropdown {...props} />);
menuOpen(false, wrapper);
// open and close button to get focus on button
wrapper.find('[type="button"]').simulate('click');
wrapper.find('[type="button"]').simulate('click');
expect(wrapper.find('[type="button"]').matchesElement(document.activeElement)).toEqual(true);
wrapper.find('Button').prop('onClick');
wrapper.instance().forceUpdate();
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);
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) => {
storiesOf('HyperLink', module)
.add('minimal usage', () => (
<Hyperlink
destination={'https://en.wikipedia.org/wiki/Hyperlink'}
content={'edX.org'}
destination="https://en.wikipedia.org/wiki/Hyperlink"
content="edX.org"
/>
))
.add('with blank target', () => (
<Hyperlink
destination={'https://www.edx.org'}
content={'edX.org'}
target={'_blank'}
destination="https://www.edx.org"
content="edX.org"
target="_blank"
/>
))
.add('with onClick', () => (
<Hyperlink
destination={'https://www.edx.org'}
content={'edX.org'}
target={'_blank'}
destination="https://www.edx.org"
content="edX.org"
target="_blank"
onClick={onClick}
/>
));
src/Modal/Modal.test.jsx
/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import { mount } from 'enzyme';
import Modal from './index';
import Button from '../Button';
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);
};
const title = 'Modal title';
......@@ -38,11 +39,7 @@ describe('<Modal />', () => {
];
it('renders default buttons', () => {
wrapper = mount(
<Modal
{...defaultProps}
/>,
);
wrapper = mount(<Modal {...defaultProps} />);
const modalTitle = wrapper.find('.modal-title');
const modalBody = wrapper.find('.modal-body');
......@@ -52,36 +49,21 @@ describe('<Modal />', () => {
});
it('renders custom buttons', () => {
wrapper = mount(
<Modal
{...defaultProps}
buttons={buttons}
/>,
);
wrapper = mount(<Modal {...defaultProps} buttons={buttons} />);
expect(wrapper.find('button')).toHaveLength(buttons.length + 2);
});
});
describe('props received correctly', () => {
it('component receives props', () => {
wrapper = mount(
<Modal
title={title}
body={body}
onClose={() => {}}
/>,
);
wrapper = mount(<Modal title={title} body={body} onClose={() => {}} />);
modalOpen(false, wrapper);
wrapper.setProps({ open: true });
modalOpen(true, wrapper);
});
it('component receives props and ignores prop change', () => {
wrapper = mount(
<Modal
{...defaultProps}
/>,
);
wrapper = mount(<Modal {...defaultProps} />);
modalOpen(true, wrapper);
wrapper.setProps({ title: 'Changed modal title' });
......@@ -91,11 +73,7 @@ describe('<Modal />', () => {
describe('close functions properly', () => {
beforeEach(() => {
wrapper = mount(
<Modal
{...defaultProps}
/>,
);
wrapper = mount(<Modal {...defaultProps} />);
});
it('closes when x button pressed', () => {
......@@ -118,12 +96,10 @@ describe('<Modal />', () => {
it('calls callback function on close', () => {
const spy = jest.fn();
wrapper = mount(
<Modal
{...defaultProps}
onClose={spy}
/>,
);
wrapper = mount(<Modal
{...defaultProps}
onClose={spy}
/>);
expect(spy).toHaveBeenCalledTimes(0);
......@@ -134,29 +110,29 @@ describe('<Modal />', () => {
});
describe('invalid keystrokes do nothing', () => {
beforeEach(() => {
wrapper = mount(
<Modal
{...defaultProps}
/>,
);
wrapper = mount(<Modal
{...defaultProps}
/>);
});
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);
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);
});
it('does nothing on invalid keystroke + ctrl', () => {
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);
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);
});
});
......@@ -164,35 +140,31 @@ describe('<Modal />', () => {
let buttons;
beforeEach(() => {
wrapper = mount(
<Modal
{...defaultProps}
/>,
);
wrapper = mount(<Modal {...defaultProps} />);
buttons = wrapper.find('button');
});
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', () => {
expect(buttons.at(0).matchesElement(document.activeElement)).toEqual(true);
expect(buttons.at(0).html()).toEqual(document.activeElement.outerHTML);
wrapper.setProps({ open: false });
modalOpen(false, wrapper);
wrapper.setProps({ open: true });
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', () => {
expect(buttons.at(0).matchesElement(document.activeElement)).toEqual(true);
expect(buttons.at(0).html()).toEqual(document.activeElement.outerHTML);
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', () => {
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 });
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) => {
storiesOf('RadioButtonGroup', module)
.add('unselected minimal usage', () => (
<RadioButtonGroup
name={'rbg'}
label={'Radio Button Group'}
name="rbg"
label="Radio Button Group"
onBlur={action('Radio Button Blur')}
onChange={onChange}
onClick={onClick}
onFocus={onFocus}
onKeyDown={onKeyDown}
>
<RadioButton value={'jaebaebae'}>First Value</RadioButton>
<RadioButton value={'value2'}>Second Value</RadioButton>
<RadioButton value={'value3'}>Third Value</RadioButton>
<RadioButton value="jaebaebae">First Value</RadioButton>
<RadioButton value="value2">Second Value</RadioButton>
<RadioButton value="value3">Third Value</RadioButton>
</RadioButtonGroup>
))
.add('selected minimal usage', () => (
<RadioButtonGroup
name={'rbg'}
label={'Radio Button Group'}
name="rbg"
label="Radio Button Group"
onBlur={action('Radio Button Blur')}
onChange={onChange}
onClick={onClick}
......@@ -64,8 +64,8 @@ storiesOf('RadioButtonGroup', module)
onKeyDown={onKeyDown}
selectedIndex={1}
>
<RadioButton value={'jaebaebae'}>First Value</RadioButton>
<RadioButton value={'value2'}>Second Value</RadioButton>
<RadioButton value={'value3'}>Third Value</RadioButton>
<RadioButton value="jaebaebae">First Value</RadioButton>
<RadioButton value="value2">Second Value</RadioButton>
<RadioButton value="value3">Third Value</RadioButton>
</RadioButtonGroup>
));
src/RadioButtonGroup/index.jsx
......@@ -34,7 +34,7 @@ class RadioButton extends React.PureComponent {
return (
<div>
<input
type={'radio'}
type="radio"
name={name}
aria-checked={isChecked}
defaultChecked={isChecked}
......@@ -95,8 +95,7 @@ class RadioButtonGroup extends React.Component {
onFocus,
onKeyDown,
index,
}),
);
}));
}
render() {
......@@ -115,7 +114,7 @@ class RadioButtonGroup extends React.Component {
return (
<div
role={'radiogroup'}
role="radiogroup"
aria-label={label}
onChange={this.onChange}
tabIndex={-1}
......
src/StatusAlert/StatusAlert.test.jsx
import React from 'react';
import { mount } from 'enzyme';
import StatusAlert from './index';
import StatusAlert from './index';
const statusAlertOpen = (isOpen, wrapper) => {
expect(wrapper.hasClass('show')).toEqual(isOpen);
expect(wrapper.childAt(0).hasClass('show')).toEqual(isOpen);
expect(wrapper.state('open')).toEqual(isOpen);
};
const dialog = 'Status Alert dialog';
......@@ -19,11 +19,7 @@ let wrapper;
describe('<StatusAlert />', () => {
describe('correct rendering', () => {
it('renders default view', () => {
wrapper = mount(
<StatusAlert
{...defaultProps}
/>,
);
wrapper = mount(<StatusAlert {...defaultProps} />);
const statusAlertDialog = wrapper.find('.alert-dialog');
expect(statusAlertDialog.text()).toEqual(dialog);
......@@ -31,12 +27,7 @@ describe('<StatusAlert />', () => {
});
it('renders non-dismissible view', () => {
wrapper = mount(
<StatusAlert
{...defaultProps}
dismissible={false}
/>,
);
wrapper = mount(<StatusAlert {...defaultProps} dismissible={false} />);
const statusAlertDialog = wrapper.find('.alert-dialog');
expect(statusAlertDialog.text()).toEqual(dialog);
......@@ -46,12 +37,7 @@ describe('<StatusAlert />', () => {
describe('props received correctly', () => {
it('component receives props', () => {
wrapper = mount(
<StatusAlert
dialog={dialog}
onClose={() => {}}
/>,
);
wrapper = mount(<StatusAlert dialog={dialog} onClose={() => {}} />);
statusAlertOpen(false, wrapper);
wrapper.setProps({ open: true });
......@@ -59,11 +45,7 @@ describe('<StatusAlert />', () => {
});
it('component receives props and ignores prop change', () => {
wrapper = mount(
<StatusAlert
{...defaultProps}
/>,
);
wrapper = mount(<StatusAlert {...defaultProps} />);
statusAlertOpen(true, wrapper);
wrapper.setProps({ dialog: 'Changed alert dialog' });
......@@ -73,11 +55,7 @@ describe('<StatusAlert />', () => {
describe('close functions properly', () => {
beforeEach(() => {
wrapper = mount(
<StatusAlert
{...defaultProps}
/>,
);
wrapper = mount(<StatusAlert {...defaultProps} />);
});
it('closes when x button pressed', () => {
......@@ -101,12 +79,7 @@ describe('<StatusAlert />', () => {
it('calls callback function on close', () => {
const spy = jest.fn();
wrapper = mount(
<StatusAlert
{...defaultProps}
onClose={spy}
/>,
);
wrapper = mount(<StatusAlert {...defaultProps} onClose={spy} />);
expect(spy).toHaveBeenCalledTimes(0);
......@@ -118,30 +91,26 @@ describe('<StatusAlert />', () => {
describe('invalid keystrokes do nothing', () => {
beforeEach(() => {
wrapper = mount(
<StatusAlert
{...defaultProps}
/>,
);
wrapper = mount(<StatusAlert {...defaultProps} />);
});
it('does nothing on invalid keystroke q', () => {
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);
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);
});
it('does nothing on invalid keystroke + ctrl', () => {
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);
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);
});
});
......
src/Table/Table.test.jsx
......@@ -51,11 +51,7 @@ const sortableProps = {
describe('<Table />', () => {
describe('renders', () => {
const wrapper = shallow(
<Table
{...props}
/>,
);
const wrapper = shallow(<Table {...props} />);
it('with display columns in the right order', () => {
wrapper.find('th').forEach((th, i) => {
......@@ -78,12 +74,7 @@ describe('<Table />', () => {
});
describe('that is non-sortable renders', () => {
const wrapper = mount(
<Table
{...sortableProps}
tableSortable={false}
/>,
);
const wrapper = mount(<Table {...sortableProps} tableSortable={false} />);
it('without sortable columns', () => {
const tableHeadings = wrapper.find('th');
......@@ -105,11 +96,7 @@ describe('<Table />', () => {
});
describe('that is sortable and has mixed columns renders', () => {
let wrapper = shallow(
<Table
{...sortableProps}
/>,
);
let wrapper = shallow(<Table {...sortableProps} />);
it('with sortable classname on correct headings', () => {
const tableHeadings = wrapper.find('th');
......@@ -140,11 +127,7 @@ describe('<Table />', () => {
expect(wrapper.state('sortDirection')).toEqual(sortableProps.defaultSortDirection);
});
wrapper = mount(
<Table
{...sortableProps}
/>,
);
wrapper = mount(<Table {...sortableProps} />);
it('with correct column buttons', () => {
const buttons = wrapper.find('button');
......@@ -167,11 +150,7 @@ describe('<Table />', () => {
let x2Spy;
beforeEach(() => {
wrapper = mount(
<Table
{...sortableProps}
/>,
);
wrapper = mount(<Table {...sortableProps} />);
buttons = wrapper.find('button');
numSpy = jest.fn();
......@@ -183,6 +162,7 @@ describe('<Table />', () => {
it('changes sort icons appropriately on click', () => {
buttons.at(0).simulate('click');
buttons = wrapper.find('button');
expect(buttons.at(0).find('.fa')).toHaveLength(1);
expect(buttons.at(0).find('.fa-sort-asc')).toHaveLength(1);
......@@ -195,6 +175,7 @@ describe('<Table />', () => {
expect(buttons.at(1).find('.fa-sort')).toHaveLength(1);
buttons.at(1).simulate('click');
buttons = wrapper.find('button');
expect(buttons.at(0).find('.fa')).toHaveLength(1);
expect(buttons.at(0).find('.fa-sort-asc')).toHaveLength(0);
......@@ -211,6 +192,7 @@ describe('<Table />', () => {
const headings = wrapper.find('.sr-only');
buttons.at(0).simulate('click');
buttons = wrapper.find('button');
expect(headings.at(0).text()).toEqual(' sort ascending');
expect(headings.at(1).text()).toEqual(' click to sort');
......@@ -223,16 +205,19 @@ describe('<Table />', () => {
it('changes state appropriately on click', () => {
buttons.at(0).simulate('click');
buttons = wrapper.find('button');
expect(wrapper.state('sortedColumn')).toEqual(sortableProps.defaultSortedColumn);
expect(wrapper.state('sortDirection')).toEqual('asc');
buttons.at(0).simulate('click');
buttons = wrapper.find('button');
expect(wrapper.state('sortedColumn')).toEqual(sortableProps.defaultSortedColumn);
expect(wrapper.state('sortDirection')).toEqual('desc');
buttons.at(1).simulate('click');
buttons = wrapper.find('button');
expect(wrapper.state('sortedColumn')).toEqual(sortableProps.columns[1].key);
expect(wrapper.state('sortDirection')).toEqual('desc');
......@@ -243,6 +228,7 @@ describe('<Table />', () => {
expect(x2Spy).toHaveBeenCalledTimes(0);
buttons.at(0).simulate('click');
buttons = wrapper.find('button');
expect(numSpy).toHaveBeenCalledTimes(1);
expect(x2Spy).toHaveBeenCalledTimes(0);
......@@ -250,6 +236,7 @@ describe('<Table />', () => {
expect(numSpy).toBeCalledWith('asc');
buttons.at(0).simulate('click');
buttons = wrapper.find('button');
expect(numSpy).toHaveBeenCalledTimes(2);
expect(x2Spy).toHaveBeenCalledTimes(0);
......@@ -257,6 +244,7 @@ describe('<Table />', () => {
expect(numSpy).toBeCalledWith('desc');
buttons.at(1).simulate('click');
buttons = wrapper.find('button');
expect(numSpy).toHaveBeenCalledTimes(2);
expect(x2Spy).toHaveBeenCalledTimes(1);
......
src/Table/index.jsx
......@@ -31,8 +31,7 @@ class Table extends React.Component {
sortDirection: newDirection,
});
const currentlySortedColumn = this.props.columns.find(
column => (columnKey === column.key));
const currentlySortedColumn = this.props.columns.find(column => (columnKey === column.key));
currentlySortedColumn.onSort(newDirection);
}
......@@ -90,9 +89,8 @@ class Table extends React.Component {
getHeadings() {
return (
<thead className={classNames(
...this.props.headingClassName.map(className => styles[className]),
)}
<thead
className={classNames(...this.props.headingClassName.map(className => styles[className]))}
>
<tr>
{this.props.columns.map(col => (
......@@ -167,7 +165,8 @@ Table.propTypes = {
desc: PropTypes.string,
defaultText: PropTypes.string,
}),
props => props.tableSortable),
props => props.tableSortable,
),
};
Table.defaultProps = {
......
src/Tabs/Tabs.test.jsx
/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import { shallow } from 'enzyme';
import Tabs from './index';
const props = {
......@@ -29,21 +28,13 @@ const tabSelectedAtIndex = (index, wrapper) => {
describe('<Tabs />', () => {
it('renders with first tab selected', () => {
const wrapper = shallow(
<Tabs
{...props}
/>,
);
const wrapper = shallow(<Tabs {...props} />);
tabSelectedAtIndex(0, wrapper);
});
describe('switches tab selection', () => {
it('on click', () => {
const wrapper = shallow(
<Tabs
{...props}
/>,
);
const wrapper = shallow(<Tabs {...props} />);
wrapper.find('a').forEach((node, i) => {
node.simulate('click');
tabSelectedAtIndex(i, wrapper);
......
src/asInput/asInput.test.jsx
......@@ -37,9 +37,7 @@ describe('asInput()', () => {
...baseProps,
value: 'foofoo',
};
const wrapper = mount(
<InputTestComponent {...props} />,
);
const wrapper = mount(<InputTestComponent {...props} />);
expect(wrapper.find('label').text()).toEqual(props.label);
expect(wrapper.find('#description-asInput1').text()).toEqual(props.description);
expect(wrapper.state('value')).toEqual(props.value);
......@@ -52,9 +50,7 @@ describe('asInput()', () => {
...baseProps,
onBlur: spy,
};
const wrapper = mount(
<InputTestComponent {...props} />,
);
const wrapper = mount(<InputTestComponent {...props} />);
wrapper.find('input').simulate('blur');
expect(spy).toHaveBeenCalledTimes(1);
});
......@@ -65,9 +61,7 @@ describe('asInput()', () => {
...baseProps,
onChange: spy,
};
const wrapper = mount(
<InputTestComponent {...props} />,
);
const wrapper = mount(<InputTestComponent {...props} />);
wrapper.find('input').simulate('change');
expect(spy).toHaveBeenCalledTimes(1);
});
......@@ -80,9 +74,7 @@ describe('asInput()', () => {
...baseProps,
validator: spy,
};
const wrapper = mount(
<InputTestComponent {...props} />,
);
const wrapper = mount(<InputTestComponent {...props} />);
wrapper.find('input').simulate('blur');
expect(spy).toHaveBeenCalledTimes(1);
});
......@@ -98,9 +90,7 @@ describe('asInput()', () => {
...baseProps,
validator: spy,
};
const wrapper = mount(
<InputTestComponent {...props} />,
);
const wrapper = mount(<InputTestComponent {...props} />);
wrapper.find('input').simulate('blur');
expect(spy).toHaveBeenCalledTimes(1);
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';
const base = {
devtool: 'source-map',
entry: {
polyfill: 'babel-polyfill',
main: path.resolve('./docs/App.js'),
},
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