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.

.babelrc

@@ -1,11 +1,7 @@
 {
 	"presets": [
 		"react",
-		"es2015"
-	],
-	"plugins": [
-		"transform-function-bind",
-		"transform-class-properties",
-		"transform-object-rest-spread"
+		"es2015",
+		"stage-0"
 	]
 }

__tests__/Tag-test.js

@@ -1,158 +1,100 @@
 'use strict';
 
-jest.disableAutomock();
-
 import React from 'react';
-import { findDOMNode } from 'react-dom';
-import { createRenderer, Simulate, renderIntoDocument } from 'react-addons-test-utils';
+import renderer from 'react-test-renderer';
+import { shallow, mount } from 'enzyme';
+import toJson from 'enzyme-to-json';
 import Tag from '../src/component/js/Tag';
 
 const TAG_NAME = 'foo';
 
 describe('Tag', () => {
-	let renderer,
-		tag;
-
-	beforeEach(() => {
-		renderer = createRenderer();
-
-		renderer.render(
+	it('should render', () => {
+		const component = renderer.create(
 			<Tag
 				name={TAG_NAME} />
-		);
+		).toJSON();
 
-		tag = renderer.getRenderOutput();
-	});
-
-	afterEach(() => {
-		renderer = null;
-		tag = null;
-	});
-
-	it('should render', () => {
-		expect(tag).not.toBeUndefined();
-		expect(tag.type).toBe('li');
-	});
-
-	it('should render with a name', () => {
-		const props = tag.props.children;
-
-		expect(props[0]).toBe(TAG_NAME);
+		expect(component).toMatchSnapshot();
 	});
 });
 
-
 describe('Tag - "readOnly"', () => {
-	let renderer;
-
-	beforeEach(() => {
-		renderer = createRenderer();
-	});
-
-	afterEach(() => {
-		renderer = null;
-	});
-
-	describe('when readOnly is false', () => {
+	describe('when false', () => {
 		it('should render the removeTagIcon', () => {
-			renderer.render(
+			const component = shallow(
 				<Tag
 					name={TAG_NAME}
 					readOnly={false} />
 			);
 
-			const tag = renderer.getRenderOutput();
-			const removeIcon = tag.props.children[1];
+			expect(component.find('a')).toHaveLength(1);
+			expect(component.find('a').text()).toEqual(String.fromCharCode(215));
 
-			expect(removeIcon).not.toBeNull();
-			expect(removeIcon.type).toBe('a');
+			expect(toJson(component)).toMatchSnapshot();
 		});
 	});
 
-	describe('when readOnly is true', () => {
+	describe('when true', () => {
 		it('should not render the removeTagIcon', () => {
-			renderer.render(
+			const component = shallow(
 				<Tag
 					name={TAG_NAME}
 					readOnly={true} />
 			);
 
-			const tag = renderer.getRenderOutput();
+			expect(component.find('a')).toHaveLength(0);
 
-			expect(tag.props.children[1]).toBeNull();
+			expect(toJson(component)).toMatchSnapshot();
 		});
 	});
 });
 
 describe('Tag - "removeTagIcon"', () => {
-	let renderer;
-
-	beforeEach(() => {
-		renderer = createRenderer();
-	});
-
-	afterEach(() => {
-		renderer = null;
-	});
-
 	describe('when a custom element is passed in', () => {
 		it('should render the element', () => {
 			const customRemoveIcon = (
 				<i className="icon-remove"></i>
 			);
 
-			renderer.render(
+			const component = renderer.create(
 				<Tag
 					name={TAG_NAME}
 					removeTagIcon={customRemoveIcon} />
-			);
-
-			const tag = renderer.getRenderOutput();
-			const removeIcon = tag.props.children[1].props.children;
+			).toJSON();
 
-			expect(tag.props.children[1].type).toBe('a');
-			expect(removeIcon.type).toBe('i');
-			expect(removeIcon.props.className).toBe('icon-remove');
+			expect(component).toMatchSnapshot();
 		});
 	});
 
 	describe('when a custom string is passed in', () => {
 		it('should render the string', () => {
-			const renderer = createRenderer();
-
 			const customRemoveString = 'remove';
 
-			renderer.render(
+			const component = renderer.create(
 				<Tag
 					name={TAG_NAME}
 					removeTagIcon={customRemoveString} />
-			);
+			).toJSON();
 
-			const tag = renderer.getRenderOutput();
-			const removeIcon = tag.props.children[1].props.children;
-
-			expect(tag.props.children[1].type).toBe('a');
-			expect(removeIcon).toBe('remove');
+			expect(component).toMatchSnapshot();
 		});
 	});
 });
 
 describe('Tag - "onRemoveTag"', () => {
 	it('should be called when clicking the remove icon', () => {
-		const onRemoveClick = jest.genMockFunction();
+		const onRemoveClick = jest.fn();
 
-		const tag = renderIntoDocument(
-			<div>
-				<Tag
-					name={TAG_NAME}
-					onRemoveTag={onRemoveClick} />
-			</div>
+		const component = shallow(
+			<Tag
+				name={TAG_NAME}
+				onRemoveTag={onRemoveClick} />
 		);
 
-		const statelessTag = findDOMNode(tag).children[0];
-		const removeIcon = statelessTag.getElementsByTagName('a')[0];
-
-		Simulate.click(removeIcon);
+		component.find('a').simulate('click', {
+			preventDefault() {}
+		});
 
 		expect(onRemoveClick).toBeCalled();
 	});

__tests__/Tags-test.js

@@ -1,7 +1,5 @@
 'use strict';
 
-jest.disableAutomock();
-
 import React from 'react';
 import { findDOMNode } from 'react-dom';
 import { createRenderer, Simulate, renderIntoDocument } from 'react-addons-test-utils';
@@ -382,3 +380,28 @@ describe('Tags - "maxTags"', () => {
 		});
 	});
 });
+
+describe('Tags - "deleteOnKeyPress"', () => {
+	describe('when deleteOnKeyPress is false', () => {
+		it('should not remove tags on backspace', () => {
+			const tags = renderIntoDocument(
+				<Tags
+					initialTags={TEST_TAGS}
+					deleteOnKeyPress={false} />
+			);
+
+			const renderedDOM = findDOMNode(tags);
+			const input = renderedDOM.getElementsByTagName('input')[0];
+			const tagContainer = renderedDOM.querySelector('.react-tags__container');
+
+			input.value = '';
+
+			Simulate.change(input);
+			Simulate.keyDown(input, {key: 'Delete', keyCode: 8, which: 8});
+
+			expect(tagContainer.children.length).toBe(2);
+			expect(tagContainer.children[1].textContent).toContain(TEST_TAGS[1]);
+			expect(tagContainer.children.length).toBe(2);
+		});
+	});
+});

__tests__/__snapshots__/Tag-test.js.snap

@@ -0,0 +1,53 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tag - "readOnly" when false should render the removeTagIcon 1`] = `
+<li>
+  foo
+  <a
+    onClick={[Function]}
+  >
+    ×
+  </a>
+</li>
+`;
+
+exports[`Tag - "readOnly" when true should not render the removeTagIcon 1`] = `
+<li>
+  foo
+</li>
+`;
+
+exports[`Tag - "removeTagIcon" when a custom element is passed in should render the element 1`] = `
+<li>
+  foo
+  <a
+    onClick={[Function]}
+  >
+    <i
+      className="icon-remove"
+    />
+  </a>
+</li>
+`;
+
+exports[`Tag - "removeTagIcon" when a custom string is passed in should render the string 1`] = `
+<li>
+  foo
+  <a
+    onClick={[Function]}
+  >
+    remove
+  </a>
+</li>
+`;
+
+exports[`Tag should render 1`] = `
+<li>
+  foo
+  <a
+    onClick={[Function]}
+  >
+    ×
+  </a>
+</li>
+`;