Skip to content

Commit

Permalink
fix(dependencies): update to React 16 and Enzyme 3
Browse files Browse the repository at this point in the history
  • Loading branch information
jaebradley authored and arizzitano committed Nov 21, 2017
2 parents 1f9a726 + 0bf8174 commit a67e2d8
Show file tree
Hide file tree
Showing 18 changed files with 724 additions and 721 deletions.
990 changes: 544 additions & 446 deletions package-lock.json

Large diffs are not rendered by default.

19 changes: 12 additions & 7 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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"
Expand Down
11 changes: 5 additions & 6 deletions src/Button/Button.test.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,9 @@ describe('<Button />', () => {
let button;

beforeEach(() => {
wrapper = mount(
<Button
{...defaultProps}
/>,
);
wrapper = mount(<Button
{...defaultProps}
/>);

button = wrapper.find('button');
});
Expand All @@ -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();
Expand Down
38 changes: 5 additions & 33 deletions src/CheckBox/CheckBox.test.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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);

Expand All @@ -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
Expand All @@ -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);
Expand All @@ -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);

Expand Down
82 changes: 34 additions & 48 deletions src/Dropdown/Dropdown.test.jsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/* 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';

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

Expand All @@ -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);
});
Expand All @@ -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);
});
});
});
Expand All @@ -144,50 +129,51 @@ 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);
});
});
});

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

it('first menu item after looping through', () => {
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);
});
});
});
Expand Down
16 changes: 8 additions & 8 deletions src/Hyperlink/Hyperlink.stories.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
/>
));
Loading

0 comments on commit a67e2d8

Please sign in to comment.