test: setup jest tests

Also add CI

.npmignore

@@ -0,0 +1,10 @@
+__tests__/
+.vscode/
+coverage/
+docs/
+scripts/
+.*
+jest.config.js
+postcss.config.js
+stylelint.config.js
+webpack.*

.travis.yml

@@ -0,0 +1,34 @@
+language: node_js
+node_js:
+  - '9'
+cache:
+  directories:
+    - "~/.npm"
+    - node_modules
+install:
+  - npm install
+script:
+  - npm test
+before_deploy:
+  - npm run build
+  - zip -r fonticonpicker.react.zip dist/*
+deploy:
+  - provider: npm
+    email: swashata4u@gmail.com
+    api_key:
+      secure: HGi4+jTwi3S3L50no17DMCWXUxYlHdG/ZtD+AgPAF9KFIfkZ43XfMJX9mf4TDKH9qgGGkUicBUFJbdWs0QoDA0srfHzg/NnYWCa+lpv2tCM3a843ESK/XJpZrXPrtYwfsN53U78Pk9w24QTTZl4G0YBI0FkfxW8jiBcdtQalJ3c6S+29GAvXDbYBkl+U9HUvO6i8Qq4t4i8dl/pFQtOWkgmxB3obiwc2t8yVQcUONMu+CeKOXFNnRUZQ/Lb0N0gvD5kN9D9dTiBxO5M6I9ijsx4cNDbb+YhWe+D7b9CH1TYhRPaN5s8SyQiC8ji4SYvhDGXxZQLRSaxrTjYhp9IkWaQ1cTyIBGky38rb2uFFgwYHlLbSGwaN2tPOba4tXZcTWhX25g96p+bPX+7jyzYVPhtTWxBmaQe7PfdPql+wTkIiEqFqiC8k7YtB1lM2fHYjQNj411rtOHPHi/3t0JZi4jLN31Oz1lGC3vahp8J9TwfEb0DVWF8XFRFutH6MIluKa+19eeykNDGpXtuLpDhZB6R2mrDGg2hLS/0ZH3xJlmFO1QZl6U+nfnmpN+mbh/dVx6DWNmOPCmrXDc1peFO+Hg2UGD7gQDR45WIifcgKNKzlGgscoJ8L8EYcMqBlk/2T01Wn+2BPjPUDH2pKELGnVU6uqjywneD6IqTBfbqjyVI=
+    on:
+      tags: true
+      repo: fontIconPicker/react-fonticonpicker
+    skip_cleanup: true
+    overwrite: true
+  - provider: releases
+    api_key:
+      secure: "mtS3RvL/lyZnZUh6+bvrbLcHCvq03GNlGlpW1oQMJFrdBrYwYni3nEqD9Oh3xbE//RFDz2xy2oVM0AiXNnbJJ7Ta7IxTyWXNI2SdiLilc6HSfYsh5ZkbpywyI6gS3gwxjUdm9+UH5dnYfwFzYSZYBwVDVAxw89X1WT7Ep2vZxtI6OeJMBrnu3faMDG+Owlj143FSN2wwma2ZxNSij94dbbm3O054cfiLbT04HIqpK4wyIpyMYJqtxxue9/C8i9WR/tUcg0isqMAyJGC4HATuNQDiaZRs4KooCQFAv2I5u0ZZepK57DbLd+ypoVQC2i6yn7VXXltYqRHCD8CHrlevlKVzQJIfs8N4e16Mb6r7ECAz8//1p25Z6NZ/vUvaEbJY81okZ4sapuBhQx98PVcS0IOoQXTHkxANUxNHZZOlwPfiMM8i/5CPDEjJkKt2+yMIDGTnfdEfgLQXUi0y1/kPXQUs0TRnxVcs27NlKALOkiaosoXDUjRTFmF/HurX5akxk9GPqTcGxXzSs2LYRTehd2iLrL9YtKT+RnpHi77gSjnHQ2SWFMiX+3SPtuXTFaQJT8cSr35zs6KM7sg0H7PugtxkeWn9/fD0BOhPqiArPmFA8RHKrb1eLHxh4xJqTo7Pwdv5QusNrtsaQrbswW+VedkL9qagP48MZOwPLWtU5y8="
+    file:
+      - fonticonpicker.react.zip
+    on:
+      tags: true
+      repo: fontIconPicker/react-fonticonpicker
+    skip_cleanup: true
+    overwrite: true

__tests__/intg/01_default_value.jsx

@@ -0,0 +1,145 @@
+// Copyright (c) 2018 Swashata Ghosh <swashata@wpquark.com>
+//
+// This software is released under the MIT License.
+// https://opensource.org/licenses/MIT
+
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import FontIconPicker from '../../src/js/FontIconPicker';
+import FipButton from '../../src/js/components/FipButton';
+import FipDropDownPortal from '../../src/js/components/FipDropDownPortal';
+import * as iconDefs from '../../src/docs/helpers/iconDefs';
+
+// Check internal value conversion
+describe('Default value', () => {
+	describe('When Null Converts to', () => {
+		test('string for single picker', () => {
+			// callback to test the value
+			const cb = jest.fn();
+			shallow(
+				<FontIconPicker
+					icons={iconDefs.icomoonIcons}
+					value={null}
+					onChange={cb}
+					isMulti={false}
+				/>,
+			);
+			// Check the initial value
+			expect(cb).toHaveBeenCalledTimes(1);
+			expect(cb.mock.calls[0][0]).toBe('');
+		});
+		test('array for multi picker', () => {
+			// callback to test the value
+			const cb = jest.fn();
+			shallow(
+				<FontIconPicker
+					icons={iconDefs.icomoonIcons}
+					value={null}
+					onChange={cb}
+					isMulti
+				/>,
+			);
+			// Check the initial value
+			expect(cb).toHaveBeenCalledTimes(1);
+			expect(Array.isArray(cb.mock.calls[0][0])).toBe(true);
+			expect(cb.mock.calls[0][0]).toHaveLength(0);
+		});
+	});
+
+	describe('When Not Null Converts to', () => {
+		test('string for single picker', () => {
+			// callback to test the value
+			const cb = jest.fn();
+			shallow(
+				<FontIconPicker
+					icons={iconDefs.icomoonIcons}
+					value={['foo', 'bar']}
+					onChange={cb}
+					isMulti={false}
+				/>,
+			);
+			// Check the initial value
+			expect(cb).toHaveBeenCalledTimes(1);
+			expect(cb.mock.calls[0][0]).toBe('');
+		});
+		test('array for multi picker', () => {
+			// callback to test the value
+			const cb = jest.fn();
+			shallow(
+				<FontIconPicker
+					icons={iconDefs.icomoonIcons}
+					value="foo"
+					onChange={cb}
+					isMulti
+				/>,
+			);
+			// Check the initial value
+			expect(cb).toHaveBeenCalledTimes(1);
+			expect(Array.isArray(cb.mock.calls[0][0])).toBe(true);
+			expect(cb.mock.calls[0][0]).toHaveLength(0);
+		});
+	});
+
+	describe('Calls onChange on Parent', () => {
+		test('for single picker', () => {
+			const cb = jest.fn();
+			shallow(
+				<FontIconPicker
+					icons={iconDefs.icomoonIcons}
+					value={iconDefs.icomoonIcons['Other Icons'][0]}
+					onChange={cb}
+					isMulti={false}
+				/>,
+			);
+			// Check the initial value
+			expect(cb).toHaveBeenCalledTimes(1);
+		});
+		test('for multi picker', () => {
+			const cb = jest.fn();
+			shallow(
+				<FontIconPicker
+					icons={iconDefs.icomoonIcons}
+					value={iconDefs.icomoonIcons['Other Icons'][0]}
+					onChange={cb}
+					isMulti
+				/>,
+			);
+			// Check the initial value
+			expect(cb).toHaveBeenCalledTimes(1);
+		});
+	});
+
+	describe('Retains Correct Values', () => {
+		test('for single picker', () => {
+			const cb = jest.fn();
+			const value = iconDefs.icomoonIcons['Other Icons'][0];
+			shallow(
+				<FontIconPicker
+					icons={iconDefs.icomoonIcons}
+					value={value}
+					onChange={cb}
+					isMulti={false}
+				/>,
+			);
+			// Check the initial value
+			expect(cb).toHaveBeenCalledTimes(1);
+			expect(cb.mock.calls[0][0]).toBe(value);
+		});
+		test('for multi picker', () => {
+			const cb = jest.fn();
+			const value = iconDefs.icomoonIcons['Other Icons'];
+			shallow(
+				<FontIconPicker
+					icons={iconDefs.icomoonIcons}
+					value={value}
+					onChange={cb}
+					isMulti
+				/>,
+			);
+			// Check the initial value
+			expect(cb).toHaveBeenCalledTimes(1);
+			expect(cb.mock.calls[0][0]).toEqual(value);
+		});
+	});
+});

__tests__/intg/02_icon_and_search.jsx

@@ -0,0 +1,68 @@
+// Copyright (c) 2018 Swashata Ghosh <swashata@wpquark.com>
+//
+// This software is released under the MIT License.
+// https://opensource.org/licenses/MIT
+
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import FontIconPicker from '../../src/js/FontIconPicker';
+import FipIconContainer from '../../src/js/components/FipIconContainer';
+import * as iconDefs from '../../src/docs/helpers/iconDefs';
+
+describe('Icon & Search Source', () => {
+	describe('In FontIconPicker Component', () => {
+		test('get passed as props', () => {
+			const icons = ['foo', 'bar'];
+			const search = ['Foo', 'Bar'];
+			const wrapper = shallow(
+				<FontIconPicker
+					icons={icons}
+					search={search}
+					onChange={jest.fn()}
+					renderUsing="class"
+				/>,
+			);
+			expect(wrapper.instance().props.icons).toEqual(icons);
+			expect(wrapper.instance().props.search).toEqual(search);
+		});
+
+		test('search can be null', () => {
+			const icons = ['foo', 'bar'];
+			const wrapper = shallow(
+				<FontIconPicker
+					icons={icons}
+					search={null}
+					onChange={jest.fn()}
+					renderUsing="class"
+				/>,
+			);
+			expect(wrapper.instance().props.icons).toEqual(icons);
+			expect(wrapper.instance().props.search).toBe(null);
+		});
+	});
+
+	describe('In FontIconContainer Component', () => {
+		test('icons populate search if null', () => {
+			const icons = ['foo', 'bar'];
+			const props = {
+				categories: null,
+				currentCategory: null,
+				isMulti: false,
+				icons,
+				search: null,
+				value: '',
+				currentSearch: '',
+				handleChangeValue: jest.fn(),
+				currentPage: 0,
+				iconsPerPage: 20,
+				handleChangePage: jest.fn(),
+				renderIcon: jest.fn(),
+				noIconPlaceholder: '',
+			};
+			const wrapper = shallow(<FipIconContainer {...props} />);
+			expect(wrapper.state('iconView')).toEqual(icons);
+			expect(wrapper.state('titleView')).toEqual(icons);
+		});
+	});
+});

__tests__/intg/03_dropdown_button.jsx

@@ -0,0 +1,89 @@
+// Copyright (c) 2018 Swashata Ghosh <swashata@wpquark.com>
+//
+// This software is released under the MIT License.
+// https://opensource.org/licenses/MIT
+
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+
+import FontIconPicker from '../../src/js/FontIconPicker';
+import FipButton from '../../src/js/components/FipButton';
+import * as iconDefs from '../../src/docs/helpers/iconDefs';
+
+describe('Clicking Button', () => {
+	test('changes class', () => {
+		// Just a callback
+		const cb = () => null;
+		const wrapper = shallow(
+			<FontIconPicker icons={iconDefs.icomoonIcons} onChange={cb} />,
+		);
+		expect(
+			wrapper.find(FipButton).hasClass('rfipbtn--open'),
+		).not.toBeTruthy();
+		expect(wrapper.find(FipButton).hasClass('rfipbtn--close')).toBeTruthy();
+		wrapper.find(FipButton).simulate('click');
+		expect(wrapper.find(FipButton).hasClass('rfipbtn--open')).toBeTruthy();
+		expect(
+			wrapper.find(FipButton).hasClass('rfipbtn--close'),
+		).not.toBeTruthy();
+	});
+
+	test('mounts portal', () => {
+		const cb = () => null;
+		const wrapper = shallow(
+			<FontIconPicker
+				icons={iconDefs.icomoonIcons.Devices}
+				onChange={cb}
+			/>,
+		);
+		expect(wrapper.render().find('.rfipdropdown')).toHaveLength(0);
+		wrapper.find(FipButton).simulate('click');
+		expect(wrapper.render().find('.rfipdropdown')).toHaveLength(1);
+	});
+});
+
+// Check delete on dropdown button
+describe('Clicking Delete', () => {
+	describe('On Multi Picker', () => {
+		test('deletes from value array', () => {
+			const [valOne, valTwo] = iconDefs.fontelloIcons.Others;
+			const wrapper = mount(
+				<FontIconPicker
+					icons={iconDefs.fontelloIcons.Others}
+					onChange={jest.fn()}
+					isMulti
+					renderUsing="class"
+					value={[valOne, valTwo]}
+				/>,
+			);
+			expect(wrapper.state('value')).toEqual([valOne, valTwo]);
+			// Now delete
+			wrapper
+				.find('.rfipbtn__del')
+				.at(0)
+				.simulate('click');
+			expect(wrapper.state('value')).toEqual([valTwo]);
+		});
+	});
+	describe('On Single Picker', () => {
+		test('sets value to empty string', () => {
+			const [valOne] = iconDefs.fontelloIcons.Others;
+			const wrapper = mount(
+				<FontIconPicker
+					icons={iconDefs.fontelloIcons.Others}
+					onChange={jest.fn()}
+					isMulti={false}
+					renderUsing="class"
+					value={valOne}
+				/>,
+			);
+			expect(wrapper.state('value')).toBe(valOne);
+			// Now delete
+			wrapper
+				.find('.rfipbtn__del')
+				.at(0)
+				.simulate('click');
+			expect(wrapper.state('value')).toBe('');
+		});
+	});
+});

__tests__/intg/04_search_options.jsx

@@ -0,0 +1,44 @@
+// Copyright (c) 2018 Swashata Ghosh <swashata@wpquark.com>
+//
+// This software is released under the MIT License.
+// https://opensource.org/licenses/MIT
+import React from 'react';
+import { mount } from 'enzyme';
+
+import FontIconPicker from '../../src/js/FontIconPicker';
+import FipButton from '../../src/js/components/FipButton';
+import FipSearch from '../../src/js/components/FipSearch';
+import * as iconDefs from '../../src/docs/helpers/iconDefs';
+
+describe('Search Option', () => {
+	test('shows up on showSearch', () => {
+		const [valOne] = iconDefs.fontelloIcons.Others;
+		const wrapper = mount(
+			<FontIconPicker
+				icons={iconDefs.fontelloIcons.Others}
+				onChange={jest.fn()}
+				isMulti={false}
+				renderUsing="class"
+				value={valOne}
+				showSearch
+			/>,
+		);
+		wrapper.find(FipButton).simulate('click');
+		expect(wrapper.find(FipSearch)).toHaveLength(1);
+	});
+	test('does not show up without showSearch', () => {
+		const [valOne] = iconDefs.fontelloIcons.Others;
+		const wrapper = mount(
+			<FontIconPicker
+				icons={iconDefs.fontelloIcons.Others}
+				onChange={jest.fn()}
+				isMulti={false}
+				renderUsing="class"
+				value={valOne}
+				showSearch={false}
+			/>,
+		);
+		wrapper.find(FipButton).simulate('click');
+		expect(wrapper.find(FipSearch)).toHaveLength(0);
+	});
+});