Skip to content

Commit d3549e4

Browse files
author
jfusco
committed
Update tests and devDependencies
Update Jest and test suite to use snapshots. Update webpack and remove loaders and add rules, update to 2.2.1. Add in new style-loader, css-loader and sass-loader rules. Update ad modify ExtractTextPlugin in webpack. Remove '' in extensions because webpack does not require it anymore. Remove Dedupe plugin as webpack has deprecated this. Add NoEmitOnErrorsPlugin and remove NoErrorsPlugin as webpack deprecated this. Update all outdated devDependecnies to latest builds and fix any regression issues with the build and creating docs. Update and simplify babelrc. Remove all plugins from babelrc and package.json and add stage-0 preset to cover the functionality of the removed plugins.
1 parent 8a2bc6c commit d3549e4

File tree

22 files changed

+22383
-21756
lines changed

22 files changed

+22383
-21756
lines changed

‎.babelrc‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,7 @@
11
{
22
"presets": [
33
"react",
4-
"es2015"
5-
],
6-
"plugins": [
7-
"transform-function-bind",
8-
"transform-class-properties",
9-
"transform-object-rest-spread"
4+
"es2015",
5+
"stage-0"
106
]
117
}

‎__tests__/Tag-test.js‎

Lines changed: 30 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,158 +1,100 @@
11
'use strict';
22

3-
jest.disableAutomock();
4-
53
import React from 'react';
6-
import { findDOMNode } from 'react-dom';
7-
import { createRenderer, Simulate, renderIntoDocument } from 'react-addons-test-utils';
4+
import renderer from 'react-test-renderer';
5+
import { shallow, mount } from 'enzyme';
6+
import toJson from 'enzyme-to-json';
87
import Tag from '../src/component/js/Tag';
98

109
const TAG_NAME = 'foo';
1110

1211
describe('Tag', () => {
13-
let renderer,
14-
tag;
15-
16-
beforeEach(() => {
17-
renderer = createRenderer();
18-
19-
renderer.render(
12+
it('should render', () => {
13+
const component = renderer.create(
2014
<Tag
2115
name={TAG_NAME} />
22-
);
16+
).toJSON();
2317

24-
tag = renderer.getRenderOutput();
25-
});
26-
27-
afterEach(() => {
28-
renderer = null;
29-
tag = null;
30-
});
31-
32-
it('should render', () => {
33-
expect(tag).not.toBeUndefined();
34-
expect(tag.type).toBe('li');
35-
});
36-
37-
it('should render with a name', () => {
38-
const props = tag.props.children;
39-
40-
expect(props[0]).toBe(TAG_NAME);
18+
expect(component).toMatchSnapshot();
4119
});
4220
});
4321

44-
4522
describe('Tag - "readOnly"', () => {
46-
let renderer;
47-
48-
beforeEach(() => {
49-
renderer = createRenderer();
50-
});
51-
52-
afterEach(() => {
53-
renderer = null;
54-
});
55-
56-
describe('when readOnly is false', () => {
23+
describe('when false', () => {
5724
it('should render the removeTagIcon', () => {
58-
renderer.render(
25+
const component = shallow(
5926
<Tag
6027
name={TAG_NAME}
6128
readOnly={false} />
6229
);
6330

64-
const tag = renderer.getRenderOutput();
65-
const removeIcon = tag.props.children[1];
31+
expect(component.find('a')).toHaveLength(1);
32+
expect(component.find('a').text()).toEqual(String.fromCharCode(215));
6633

67-
expect(removeIcon).not.toBeNull();
68-
expect(removeIcon.type).toBe('a');
34+
expect(toJson(component)).toMatchSnapshot();
6935
});
7036
});
7137

72-
describe('when readOnly is true', () => {
38+
describe('when true', () => {
7339
it('should not render the removeTagIcon', () => {
74-
renderer.render(
40+
const component = shallow(
7541
<Tag
7642
name={TAG_NAME}
7743
readOnly={true} />
7844
);
7945

80-
const tag = renderer.getRenderOutput();
46+
expect(component.find('a')).toHaveLength(0);
8147

82-
expect(tag.props.children[1]).toBeNull();
48+
expect(toJson(component)).toMatchSnapshot();
8349
});
8450
});
8551
});
8652

8753
describe('Tag - "removeTagIcon"', () => {
88-
let renderer;
89-
90-
beforeEach(() => {
91-
renderer = createRenderer();
92-
});
93-
94-
afterEach(() => {
95-
renderer = null;
96-
});
97-
9854
describe('when a custom element is passed in', () => {
9955
it('should render the element', () => {
10056
const customRemoveIcon = (
10157
<i className="icon-remove"></i>
10258
);
10359

104-
renderer.render(
60+
const component = renderer.create(
10561
<Tag
10662
name={TAG_NAME}
10763
removeTagIcon={customRemoveIcon} />
108-
);
109-
110-
const tag = renderer.getRenderOutput();
111-
const removeIcon = tag.props.children[1].props.children;
64+
).toJSON();
11265

113-
expect(tag.props.children[1].type).toBe('a');
114-
expect(removeIcon.type).toBe('i');
115-
expect(removeIcon.props.className).toBe('icon-remove');
66+
expect(component).toMatchSnapshot();
11667
});
11768
});
11869

11970
describe('when a custom string is passed in', () => {
12071
it('should render the string', () => {
121-
const renderer = createRenderer();
122-
12372
const customRemoveString = 'remove';
12473

125-
renderer.render(
74+
const component = renderer.create(
12675
<Tag
12776
name={TAG_NAME}
12877
removeTagIcon={customRemoveString} />
129-
);
78+
).toJSON();
13079

131-
const tag = renderer.getRenderOutput();
132-
const removeIcon = tag.props.children[1].props.children;
133-
134-
expect(tag.props.children[1].type).toBe('a');
135-
expect(removeIcon).toBe('remove');
80+
expect(component).toMatchSnapshot();
13681
});
13782
});
13883
});
13984

14085
describe('Tag - "onRemoveTag"', () => {
14186
it('should be called when clicking the remove icon', () => {
142-
const onRemoveClick = jest.genMockFunction();
87+
const onRemoveClick = jest.fn();
14388

144-
const tag = renderIntoDocument(
145-
<div>
146-
<Tag
147-
name={TAG_NAME}
148-
onRemoveTag={onRemoveClick} />
149-
</div>
89+
const component = shallow(
90+
<Tag
91+
name={TAG_NAME}
92+
onRemoveTag={onRemoveClick} />
15093
);
15194

152-
const statelessTag = findDOMNode(tag).children[0];
153-
const removeIcon = statelessTag.getElementsByTagName('a')[0];
154-
155-
Simulate.click(removeIcon);
95+
component.find('a').simulate('click', {
96+
preventDefault() {}
97+
});
15698

15799
expect(onRemoveClick).toBeCalled();
158100
});

‎__tests__/Tags-test.js‎

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
'use strict';
22

3-
jest.disableAutomock();
4-
53
import React from 'react';
64
import { findDOMNode } from 'react-dom';
75
import { createRenderer, Simulate, renderIntoDocument } from 'react-addons-test-utils';
@@ -382,3 +380,28 @@ describe('Tags - "maxTags"', () => {
382380
});
383381
});
384382
});
383+
384+
describe('Tags - "deleteOnKeyPress"', () => {
385+
describe('when deleteOnKeyPress is false', () => {
386+
it('should not remove tags on backspace', () => {
387+
const tags = renderIntoDocument(
388+
<Tags
389+
initialTags={TEST_TAGS}
390+
deleteOnKeyPress={false} />
391+
);
392+
393+
const renderedDOM = findDOMNode(tags);
394+
const input = renderedDOM.getElementsByTagName('input')[0];
395+
const tagContainer = renderedDOM.querySelector('.react-tags__container');
396+
397+
input.value = '';
398+
399+
Simulate.change(input);
400+
Simulate.keyDown(input, {key: 'Delete', keyCode: 8, which: 8});
401+
402+
expect(tagContainer.children.length).toBe(2);
403+
expect(tagContainer.children[1].textContent).toContain(TEST_TAGS[1]);
404+
expect(tagContainer.children.length).toBe(2);
405+
});
406+
});
407+
});

‎__tests__/__snapshots__/Tag-test.js.snap‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Tag - "readOnly" when false should render the removeTagIcon 1`] = `
4+
<li>
5+
foo
6+
<a
7+
onClick={[Function]}
8+
>
9+
×
10+
</a>
11+
</li>
12+
`;
13+
14+
exports[`Tag - "readOnly" when true should not render the removeTagIcon 1`] = `
15+
<li>
16+
foo
17+
</li>
18+
`;
19+
20+
exports[`Tag - "removeTagIcon" when a custom element is passed in should render the element 1`] = `
21+
<li>
22+
foo
23+
<a
24+
onClick={[Function]}
25+
>
26+
<i
27+
className="icon-remove"
28+
/>
29+
</a>
30+
</li>
31+
`;
32+
33+
exports[`Tag - "removeTagIcon" when a custom string is passed in should render the string 1`] = `
34+
<li>
35+
foo
36+
<a
37+
onClick={[Function]}
38+
>
39+
remove
40+
</a>
41+
</li>
42+
`;
43+
44+
exports[`Tag should render 1`] = `
45+
<li>
46+
foo
47+
<a
48+
onClick={[Function]}
49+
>
50+
×
51+
</a>
52+
</li>
53+
`;

0 commit comments

Comments
 (0)