Adding functionality for delimiters option - finishing unit tests for tags and tag components - refactored tests for tags component - installled class properties plugin so we could use static members inside a React Component class - fixing unit test task runner - changing tag container to an unordered list element

Author: jfusco

.babelrc

@@ -2,5 +2,8 @@
 	"presets": [
 		"react",
 		"es2015"
+	],
+	"plugins": [
+		"transform-class-properties"
 	]
 }

README.md

@@ -57,8 +57,10 @@ render(<Application />, document.getElementById('application'));
 #### Options
 * **[`initialTags`](#initialTags)**
 * **[`placeholder`](#placeholder)**
+* **[`delimiters`](#delimiters)**
 * **[`change`](#change)**
 * **[`added`](#added)**
+* **[`removed`](#removed)**
 * **[`readOnly`](#readOnly)**
 * **[`removeTagWithDeleteKey`](#removeTagWithDeleteKey)**
 * **[`removeTagIcon`](#removeTagIcon)**
@@ -81,6 +83,15 @@ A `string` used as placeholder text in the tags input field
 <Tags placeholder="Add a tag" />
 ```
 
+<a name="delimiters"></a>
+##### delimiters ~ optional ~ default `[13, 9, 32]`
+An `array` of keyCodes used to tell the tags component which delimiter to use to add a tag
+
+[Here](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode) is more info and a list of keyCodes
+```js
+<Tags delimiters={[13, 9, 32, 188]} />
+```
+
 <a name="change"></a>
 ##### change ~ optional
 A `function` fired anytime there is a change - returns the new `array` of tags

__tests__/Tag-test.js

@@ -0,0 +1,159 @@
+'use strict';
+
+jest.disableAutomock();
+
+import React from 'react';
+import { findDOMNode } from 'react-dom';
+import { createRenderer, Simulate, renderIntoDocument } from 'react-addons-test-utils';
+import Tag from '../src/js/Tag';
+
+const TAG_NAME = 'foo';
+
+describe('Tag', () => {
+	let renderer,
+		tag;
+
+	beforeEach(() => {
+		renderer = createRenderer();
+
+		renderer.render(
+			<Tag
+				name={TAG_NAME} />
+		);
+
+		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);
+	});
+});
+
+
+describe('Tag - "readOnly"', () => {
+	let renderer;
+
+	beforeEach(() => {
+		renderer = createRenderer();
+	});
+
+	afterEach(() => {
+		renderer = null;
+	});
+
+	describe('when readOnly is false', () => {
+		it('should render the removeTagIcon', () => {
+			renderer.render(
+				<Tag
+					name={TAG_NAME}
+					readOnly={false} />
+			);
+
+			const tag = renderer.getRenderOutput();
+			const removeIcon = tag.props.children[1];
+
+			expect(removeIcon).not.toBeNull();
+			expect(removeIcon.type).toBe('a');
+		});
+	});
+
+	describe('when readOnly is true', () => {
+		it('should not render the removeTagIcon', () => {
+			renderer.render(
+				<Tag
+					name={TAG_NAME}
+					readOnly={true} />
+			);
+
+			const tag = renderer.getRenderOutput();
+
+			expect(tag.props.children[1]).toBeNull();
+		});
+	});
+});
+
+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(
+				<Tag
+					name={TAG_NAME}
+					removeTagIcon={customRemoveIcon} />
+			);
+
+			const tag = renderer.getRenderOutput();
+			const removeIcon = tag.props.children[1].props.children;
+
+			expect(tag.props.children[1].type).toBe('a');
+			expect(removeIcon.type).toBe('i');
+			expect(removeIcon.props.className).toBe('icon-remove');
+		});
+	});
+
+	describe('when a custom string is passed in', () => {
+		it('should render the string', () => {
+			const renderer = createRenderer();
+
+			const customRemoveString = 'remove';
+
+			renderer.render(
+				<Tag
+					name={TAG_NAME}
+					removeTagIcon={customRemoveString} />
+			);
+
+			const tag = renderer.getRenderOutput();
+			const removeIcon = tag.props.children[1].props.children;
+
+			expect(tag.props.children[1].type).toBe('a');
+			expect(removeIcon).toBe('remove');
+		});
+	});
+});
+
+describe('Tag - "removeTag"', () => {
+	it('should be called when clicking the remove icon', () => {
+		const onRemoveClick = jest.genMockFunction();
+
+		const tag = renderIntoDocument(
+			<div>
+				<Tag
+					name={TAG_NAME}
+					removeTag={onRemoveClick} />
+			</div>
+		);
+
+		const statelessTag = findDOMNode(tag).children[0];
+		const removeIcon = statelessTag.getElementsByTagName('a')[0];
+
+		Simulate.click(removeIcon);
+
+		expect(onRemoveClick).toBeCalled();
+	});
+});