From 808344eecfedd04149551867724e46a7988c45a0 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Tue, 30 Apr 2019 09:03:01 +0900 Subject: [PATCH] Fix React Component tests --- karma.conf.js | 1 + .../components/form/BlacklistForm.jsx | 11 +- src/settings/components/form/KeymapsForm.jsx | 10 +- src/settings/components/form/SearchForm.jsx | 6 +- .../components/console/Completion.test.jsx | 168 ++++++++++++++++++ .../components/console/completion.test.jsx | 138 -------------- .../components/form/BlacklistForm.test.jsx | 92 ++++++++++ .../components/form/KeymapsForm.test.jsx | 64 +++++++ .../components/form/PropertiesForm.test.jsx | 104 +++++++++++ .../components/form/SearchEngineForm.test.jsx | 128 +++++++++++++ .../components/form/blacklist-form.test.jsx | 81 --------- .../components/form/keymaps-form.test.jsx | 52 ------ .../components/form/properties-form.test.jsx | 85 --------- .../form/search-engine-form.test.jsx | 103 ----------- test/settings/components/ui/input.test.jsx | 71 +++++--- 15 files changed, 620 insertions(+), 494 deletions(-) create mode 100644 test/console/components/console/Completion.test.jsx delete mode 100644 test/console/components/console/completion.test.jsx create mode 100644 test/settings/components/form/BlacklistForm.test.jsx create mode 100644 test/settings/components/form/KeymapsForm.test.jsx create mode 100644 test/settings/components/form/PropertiesForm.test.jsx create mode 100644 test/settings/components/form/SearchEngineForm.test.jsx delete mode 100644 test/settings/components/form/blacklist-form.test.jsx delete mode 100644 test/settings/components/form/keymaps-form.test.jsx delete mode 100644 test/settings/components/form/properties-form.test.jsx delete mode 100644 test/settings/components/form/search-engine-form.test.jsx diff --git a/karma.conf.js b/karma.conf.js index 5e69f9e..32da469 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -29,6 +29,7 @@ module.exports = function (config) { singleRun: true, webpack: { + mode: 'development', devtool: 'inline-source-map', resolve: webpackConfig.resolve, module: webpackConfig.module diff --git a/src/settings/components/form/BlacklistForm.jsx b/src/settings/components/form/BlacklistForm.jsx index 7dad9ee..cee04bd 100644 --- a/src/settings/components/form/BlacklistForm.jsx +++ b/src/settings/components/form/BlacklistForm.jsx @@ -7,14 +7,9 @@ import PropTypes from 'prop-types'; class BlacklistForm extends React.Component { render() { - let value = this.props.value; - if (!value) { - value = []; - } - return
{ - value.map((url, index) => { + this.props.value.map((url, index) => { return
{ keymaps.fields.map((group, index) => { @@ -19,7 +15,7 @@ class KeymapsForm extends React.Component { group.map((field) => { let name = field[0]; let label = field[1]; - let value = values[name]; + let value = this.props.value[name] || ''; return { + let completions = [{ + name: "Fruit", + items: [{ caption: "apple" }, { caption: "banana" }, { caption: "cherry" }], + }, { + name: "Element", + items: [{ caption: "argon" }, { caption: "boron" }, { caption: "carbon" }], + }]; + + it('renders Completion component', () => { + let root = ReactTestRenderer.create().root; + + expect(root.children).to.have.lengthOf(1); + + let children = root.children[0].children; + expect(children).to.have.lengthOf(8); + expect(children[0].props.title).to.equal('Fruit'); + expect(children[1].props.caption).to.equal('apple'); + expect(children[2].props.caption).to.equal('banana'); + expect(children[3].props.caption).to.equal('cherry'); + expect(children[4].props.title).to.equal('Element'); + expect(children[5].props.caption).to.equal('argon'); + expect(children[6].props.caption).to.equal('boron'); + expect(children[7].props.caption).to.equal('carbon'); + }); + + it('highlight current item', () => { + let root = ReactTestRenderer.create().root; + + let children = root.children[0].children; + expect(children[5].props.highlight).to.be.true; + }); + + it('does not highlight any items', () => { + let root = ReactTestRenderer.create().root; + + let children = root.children[0].children; + for (let li of children[0].children) { + expect(li.props.highlight).not.to.be.ok; + } + }); + + it('limits completion items', () => { + let root = ReactTestRenderer.create().root; + + let children = root.children[0].children; + expect(children).to.have.lengthOf(3); + + expect(children[0].props.title).to.equal('Fruit'); + expect(children[1].props.caption).to.equal('apple'); + expect(children[2].props.caption).to.equal('banana'); + + root = ReactTestRenderer.create().root; + + children = root.children[0].children; + expect(children[1].props.highlight).to.be.true; + }) + + it('scrolls up to down with select', () => { + let component = ReactTestRenderer.create(); + let instance = component.getInstance(); + let root = component.root; + + let children = root.children[0].children; + expect(children).to.have.lengthOf(3); + expect(children[0].props.title).to.equal('Fruit'); + expect(children[1].props.caption).to.equal('apple'); + expect(children[2].props.caption).to.equal('banana'); + + component.update(); + + children = root.children[0].children; + expect(children).to.have.lengthOf(3); + expect(children[0].props.caption).to.equal('apple'); + expect(children[1].props.caption).to.equal('banana'); + expect(children[2].props.caption).to.equal('cherry'); + expect(children[2].props.highlight).to.be.true; + + component.update(); + + children = root.children[0].children; + expect(children).to.have.lengthOf(3); + expect(children[0].props.caption).to.equal('cherry'); + expect(children[1].props.title).to.equal('Element'); + expect(children[2].props.caption).to.equal('argon'); + expect(children[2].props.highlight).to.be.true; + }); + + it('scrolls down to up with select', () => { + let component = ReactTestRenderer.create(); + let root = component.root; + let instance = component.getInstance(); + + let children = root.children[0].children; + expect(children).to.have.lengthOf(3); + expect(children[0].props.caption).to.equal('argon'); + expect(children[1].props.caption).to.equal('boron'); + expect(children[2].props.caption).to.equal('carbon'); + + component.update(); + + children = root.children[0].children; + expect(children[1].props.highlight).to.be.true; + + component.update(); + + children = root.children[0].children; + expect(children[0].props.highlight).to.be.true; + + component.update(); + + children = root.children[0].children; + expect(children[0].props.caption).to.equal('cherry'); + expect(children[1].props.title).to.equal('Element'); + expect(children[2].props.caption).to.equal('argon'); + expect(children[0].props.highlight).to.be.true; + }); +}); diff --git a/test/console/components/console/completion.test.jsx b/test/console/components/console/completion.test.jsx deleted file mode 100644 index 8d81ce8..0000000 --- a/test/console/components/console/completion.test.jsx +++ /dev/null @@ -1,138 +0,0 @@ -import { render } from 'react'; -import Completion from 'console/components/console/completion' - -describe("console/components/console/completion", () => { - let completions = [{ - name: "Fruit", - items: [{ caption: "apple" }, { caption: "banana" }, { caption: "cherry" }], - }, { - name: "Element", - items: [{ caption: "argon" }, { caption: "boron" }, { caption: "carbon" }], - }]; - - beforeEach(() => { - document.body.innerHTML = ''; - }); - - it('renders Completion component', () => { - let ul = render(, document.body); - - expect(ul.children).to.have.lengthOf(8); - expect(ul.children[0].textContent).to.equal('Fruit'); - expect(ul.children[1].textContent).to.equal('apple'); - expect(ul.children[2].textContent).to.equal('banana'); - expect(ul.children[3].textContent).to.equal('cherry'); - expect(ul.children[4].textContent).to.equal('Element'); - expect(ul.children[5].textContent).to.equal('argon'); - expect(ul.children[6].textContent).to.equal('boron'); - expect(ul.children[7].textContent).to.equal('carbon'); - }); - - it('highlight current item', () => { - let ul = render(, document.body); - expect(ul.children[5].className.split(' ')).to.include('vimvixen-completion-selected'); - }); - - it('does not highlight any items', () => { - let ul = render(, document.body); - for (let li of ul.children) { - expect(li.className.split(' ')).not.to.include('vimvixen-completion-selected'); - } - }); - - - it('limits completion items', () => { - let ul = render(, document.body); - expect(Array.from(ul.children).map(e => e.textContent)).to.deep.equal(['Fruit', 'apple', 'banana']); - - ul = render(, document.body, ul); - - expect(Array.from(ul.children).map(e => e.textContent)).to.deep.equal(['Fruit', 'apple', 'banana']); - expect(ul.children[1].className.split(' ')).to.include('vimvixen-completion-selected'); - }) - - it('scrolls up to down with select', () => { - let ul = render(, document.body); - - expect(Array.from(ul.children).map(e => e.textContent)).to.deep.equal(['Fruit', 'apple', 'banana']); - expect(ul.children[2].className.split(' ')).to.include('vimvixen-completion-selected'); - - ul = render(, document.body, ul); - - expect(Array.from(ul.children).map(e => e.textContent)).to.deep.equal(['apple', 'banana', 'cherry']); - expect(ul.children[2].className.split(' ')).to.include('vimvixen-completion-selected'); - - ul = render(, document.body, ul); - - expect(Array.from(ul.children).map(e => e.textContent)).to.deep.equal(['cherry', 'Element', 'argon']); - expect(ul.children[2].className.split(' ')).to.include('vimvixen-completion-selected'); - }); - - it('scrolls up to down with select', () => { - let ul = render(, document.body); - - expect(Array.from(ul.children).map(e => e.textContent)).to.deep.equal(['argon', 'boron', 'carbon']); - expect(ul.children[2].className.split(' ')).to.include('vimvixen-completion-selected'); - - ul = render(, document.body, ul); - - expect(Array.from(ul.children).map(e => e.textContent)).to.deep.equal(['argon', 'boron', 'carbon']); - expect(ul.children[1].className.split(' ')).to.include('vimvixen-completion-selected'); - - ul = render(, document.body, ul); - - expect(Array.from(ul.children).map(e => e.textContent)).to.deep.equal(['argon', 'boron', 'carbon']); - expect(ul.children[0].className.split(' ')).to.include('vimvixen-completion-selected'); - - ul = render(, document.body, ul); - - expect(Array.from(ul.children).map(e => e.textContent)).to.deep.equal(['cherry', 'Element', 'argon']); - expect(ul.children[0].className.split(' ')).to.include('vimvixen-completion-selected'); - }); -}); diff --git a/test/settings/components/form/BlacklistForm.test.jsx b/test/settings/components/form/BlacklistForm.test.jsx new file mode 100644 index 0000000..2be5d96 --- /dev/null +++ b/test/settings/components/form/BlacklistForm.test.jsx @@ -0,0 +1,92 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import ReactTestRenderer from 'react-test-renderer'; +import ReactTestUtils from 'react-dom/test-utils'; +import BlacklistForm from 'settings/components/form/BlacklistForm' + +describe("settings/form/BlacklistForm", () => { + describe('render', () => { + it('renders BlacklistForm', () => { + let root = ReactTestRenderer.create( + , + ).root; + + let children = root.children[0].children; + expect(children).to.have.lengthOf(3); + expect(children[0].children[0].props.value).to.equal('*.slack.com'); + expect(children[1].children[0].props.value).to.equal('www.google.com/maps'); + expect(children[2].props.name).to.equal('add'); + }); + + it('renders blank value', () => { + let root = ReactTestRenderer.create().root; + + let children = root.children[0].children; + expect(children).to.have.lengthOf(1); + expect(children[0].props.name).to.equal('add'); + }); + }); + + describe('onChange', () => { + let container; + + beforeEach(() => { + container = document.createElement('div'); + document.body.appendChild(container); + }); + + afterEach(() => { + document.body.removeChild(container); + container = null; + }); + + it('invokes onChange event on edit', (done) => { + ReactTestUtils.act(() => { + ReactDOM.render( { + expect(value).to.have.lengthOf(2); + expect(value).to.have.members(['gitter.im', 'www.google.com/maps*']); + done(); + }} + />, container) + }); + + let input = document.querySelectorAll('input[type=text]')[0]; + input.value = 'gitter.im'; + ReactTestUtils.Simulate.change(input); + }); + + it('invokes onChange event on delete', (done) => { + ReactTestUtils.act(() => { + ReactDOM.render( { + expect(value).to.have.lengthOf(1); + expect(value).to.have.members(['www.google.com/maps*']); + done(); + }} + />, container) + }); + + let button = document.querySelectorAll('input[type=button]')[0]; + ReactTestUtils.Simulate.click(button); + }); + + it('invokes onChange event on add', (done) => { + ReactTestUtils.act(() => { + ReactDOM.render( { + expect(value).to.have.lengthOf(2); + expect(value).to.have.members(['*.slack.com', '']); + done(); + }} + />, container); + }); + + let button = document.querySelector('input[type=button].ui-add-button'); + ReactTestUtils.Simulate.click(button); + }); + }); +}); diff --git a/test/settings/components/form/KeymapsForm.test.jsx b/test/settings/components/form/KeymapsForm.test.jsx new file mode 100644 index 0000000..6ac57c9 --- /dev/null +++ b/test/settings/components/form/KeymapsForm.test.jsx @@ -0,0 +1,64 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import ReactTestRenderer from 'react-test-renderer'; +import ReactTestUtils from 'react-dom/test-utils'; +import KeymapsForm from 'settings/components/form/KeymapsForm' + +describe("settings/form/KeymapsForm", () => { + describe('render', () => { + it('renders keymap fields', () => { + let root = ReactTestRenderer.create().root + + let inputj = root.findByProps({ id: 'scroll.vertically?{"count":1}' }); + let inputk = root.findByProps({ id: 'scroll.vertically?{"count":-1}' }); + + expect(inputj.props.value).to.equal('j'); + expect(inputk.props.value).to.equal('k'); + }); + + it('renders blank value', () => { + let root = ReactTestRenderer.create().root; + + let inputj = root.findByProps({ id: 'scroll.vertically?{"count":1}' }); + let inputk = root.findByProps({ id: 'scroll.vertically?{"count":-1}' }); + + expect(inputj.props.value).to.be.empty; + expect(inputk.props.value).to.be.empty; + }); + }); + + describe('onChange event', () => { + let container; + + beforeEach(() => { + container = document.createElement('div'); + document.body.appendChild(container); + }); + + afterEach(() => { + document.body.removeChild(container); + container = null; + }); + + it('invokes onChange event on edit', (done) => { + ReactTestUtils.act(() => { + ReactDOM.render( { + expect(value['scroll.vertically?{"count":1}']).to.equal('jjj'); + done(); + }} />, container); + }); + + let input = document.getElementById('scroll.vertically?{"count":1}'); + input.value = 'jjj'; + ReactTestUtils.Simulate.change(input); + }); + }); +}); diff --git a/test/settings/components/form/PropertiesForm.test.jsx b/test/settings/components/form/PropertiesForm.test.jsx new file mode 100644 index 0000000..80f60d2 --- /dev/null +++ b/test/settings/components/form/PropertiesForm.test.jsx @@ -0,0 +1,104 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import ReactTestRenderer from 'react-test-renderer'; +import ReactTestUtils from 'react-dom/test-utils'; +import PropertiesForm from 'settings/components/form/PropertiesForm' + +describe("settings/form/PropertiesForm", () => { + describe('render', () => { + it('renders PropertiesForm', () => { + let types = { + mystr: 'string', + mynum: 'number', + mybool: 'boolean', + empty: 'string', + } + let value = { + mystr: 'abc', + mynum: 123, + mybool: true, + }; + + let root = ReactTestRenderer.create( + , + ).root + + let input = root.findByProps({ name: 'mystr' }); + expect(input.props.type).to.equals('text'); + expect(input.props.value).to.equal('abc'); + + input = root.findByProps({ name: 'mynum' }); + expect(input.props.type).to.equals('number'); + expect(input.props.value).to.equal(123); + + input = root.findByProps({ name: 'mybool' }); + expect(input.props.type).to.equals('checkbox'); + expect(input.props.value).to.equal(true); + }); + }); + + describe('onChange', () => { + let container; + + beforeEach(() => { + container = document.createElement('div'); + document.body.appendChild(container); + }); + + afterEach(() => { + document.body.removeChild(container); + container = null; + }); + + it('invokes onChange event on text changed', (done) => { + ReactTestUtils.act(() => { + ReactDOM.render( { + expect(value).to.have.property('myvalue', 'abcd'); + done(); + }} + />, container); + }); + + let input = document.querySelector('input[name=myvalue]'); + input.value = 'abcd' + ReactTestUtils.Simulate.change(input); + }); + + it('invokes onChange event on number changeed', (done) => { + ReactTestUtils.act(() => { + ReactDOM.render( { + expect(value).to.have.property('myvalue', 1234); + done(); + }} + />, container); + }); + + let input = document.querySelector('input[name=myvalue]'); + input.value = '1234' + ReactTestUtils.Simulate.change(input); + }); + + it('invokes onChange event on checkbox changed', (done) => { + ReactTestUtils.act(() => { + ReactDOM.render( { + expect(value).to.have.property('myvalue', true); + done(); + }} + />, container); + }); + + let input = document.querySelector('input[name=myvalue]'); + input.checked = true; + ReactTestUtils.Simulate.change(input); + }); + }); +}); diff --git a/test/settings/components/form/SearchEngineForm.test.jsx b/test/settings/components/form/SearchEngineForm.test.jsx new file mode 100644 index 0000000..06822f2 --- /dev/null +++ b/test/settings/components/form/SearchEngineForm.test.jsx @@ -0,0 +1,128 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import ReactTestRenderer from 'react-test-renderer'; +import ReactTestUtils from 'react-dom/test-utils'; +import SearchForm from 'settings/components/form/SearchForm' + +describe("settings/form/SearchForm", () => { + describe('render', () => { + it('renders SearchForm', () => { + let root = ReactTestRenderer.create().root; + + let names = root.findAllByProps({ name: 'name' }); + expect(names).to.have.lengthOf(2); + expect(names[0].props.value).to.equal('google'); + expect(names[1].props.value).to.equal('yahoo'); + + let urls = root.findAllByProps({ name: 'url' }); + expect(urls).to.have.lengthOf(2); + expect(urls[0].props.value).to.equal('google.com'); + expect(urls[1].props.value).to.equal('yahoo.com'); + }); + + it('renders blank value', () => { + let root = ReactTestRenderer.create().root; + + let names = root.findAllByProps({ name: 'name' }); + expect(names).to.be.empty; + + let urls = root.findAllByProps({ name: 'url' }); + expect(urls).to.be.empty; + }); + + it('renders blank engines', () => { + let root = ReactTestRenderer.create( + , + ).root; + + let names = root.findAllByProps({ name: 'name' }); + expect(names).to.be.empty; + + let urls = root.findAllByProps({ name: 'url' }); + expect(urls).to.be.empty; + }); + }); + + describe('onChange event', () => { + let container; + + beforeEach(() => { + container = document.createElement('div'); + document.body.appendChild(container); + }); + + afterEach(() => { + document.body.removeChild(container); + container = null; + }); + + it('invokes onChange event on edit', (done) => { + ReactTestUtils.act(() => { + ReactDOM.render( { + expect(value.default).to.equal('louvre'); + expect(value.engines).to.have.lengthOf(2) + expect(value.engines).to.have.deep.members( + [['louvre', 'google.com'], ['yahoo', 'yahoo.com']] + ); + done(); + }} />, container); + }); + + let radio = document.querySelectorAll('input[type=radio]'); + radio.checked = true; + + let name = document.querySelector('input[name=name]'); + name.value = 'louvre'; + + ReactTestUtils.Simulate.change(name); + }); + + it('invokes onChange event on delete', (done) => { + ReactTestUtils.act(() => { + ReactDOM.render( { + expect(value.default).to.equal('yahoo'); + expect(value.engines).to.have.lengthOf(1) + expect(value.engines).to.have.deep.members( + [['yahoo', 'yahoo.com']] + ); + done(); + }} />, container); + }); + + let button = document.querySelector('input[type=button]'); + ReactTestUtils.Simulate.click(button); + }); + + it('invokes onChange event on add', (done) => { + ReactTestUtils.act(() => { + ReactDOM.render( { + expect(value.default).to.equal('yahoo'); + expect(value.engines).to.have.lengthOf(2) + expect(value.engines).to.have.deep.members( + [['google', 'google.com'], ['', '']], + ); + done(); + }} />, container); + }); + + let button = document.querySelector('input[type=button].ui-add-button'); + ReactTestUtils.Simulate.click(button); + }); + }); +}); diff --git a/test/settings/components/form/blacklist-form.test.jsx b/test/settings/components/form/blacklist-form.test.jsx deleted file mode 100644 index 40067d0..0000000 --- a/test/settings/components/form/blacklist-form.test.jsx +++ /dev/null @@ -1,81 +0,0 @@ -import { render } from 'react'; -import BlacklistForm from 'settings/components/form/blacklist-form' - -describe("settings/form/BlacklistForm", () => { - beforeEach(() => { - document.body.innerHTML = ''; - }); - - describe('render', () => { - it('renders BlacklistForm', () => { - render(, document.body); - - let inputs = document.querySelectorAll('input[type=text]'); - expect(inputs).to.have.lengthOf(2); - expect(inputs[0].value).to.equal('*.slack.com'); - expect(inputs[1].value).to.equal('www.google.com/maps'); - }); - - it('renders blank value', () => { - render(, document.body); - - let inputs = document.querySelectorAll('input[type=text]'); - expect(inputs).to.be.empty; - }); - - it('renders blank value', () => { - render(, document.body); - - let inputs = document.querySelectorAll('input[type=text]'); - expect(inputs).to.be.empty; - }); - }); - - describe('onChange', () => { - it('invokes onChange event on edit', (done) => { - render( { - expect(value).to.have.lengthOf(2) - .and.have.members(['gitter.im', 'www.google.com/maps*']); - - done(); - }} - />, document.body); - - let input = document.querySelectorAll('input[type=text]')[0]; - input.value = 'gitter.im'; - input.dispatchEvent(new Event('change')) - }); - - it('invokes onChange event on delete', (done) => { - render( { - expect(value).to.have.lengthOf(1) - .and.have.members(['www.google.com/maps*']); - - done(); - }} - />, document.body); - - let button = document.querySelectorAll('input[type=button]')[0]; - button.click(); - }); - - it('invokes onChange event on add', (done) => { - render( { - expect(value).to.have.lengthOf(2) - .and.have.members(['*.slack.com', '']); - - done(); - }} - />, document.body); - - let button = document.querySelector('input[type=button].ui-add-button'); - button.click(); - }); - }); -}); diff --git a/test/settings/components/form/keymaps-form.test.jsx b/test/settings/components/form/keymaps-form.test.jsx deleted file mode 100644 index 79d8d20..0000000 --- a/test/settings/components/form/keymaps-form.test.jsx +++ /dev/null @@ -1,52 +0,0 @@ -import { render } from 'react'; -import KeymapsForm from 'settings/components/form/keymaps-form' - -describe("settings/form/KeymapsForm", () => { - beforeEach(() => { - document.body.innerHTML = ''; - }); - - describe('render', () => { - it('renders KeymapsForm', () => { - render(, document.body); - - let inputj = document.getElementById('scroll.vertically?{"count":1}'); - let inputk = document.getElementById('scroll.vertically?{"count":-1}'); - - expect(inputj.value).to.equal('j'); - expect(inputk.value).to.equal('k'); - }); - - it('renders blank value', () => { - render(, document.body); - - let inputj = document.getElementById('scroll.vertically?{"count":1}'); - let inputk = document.getElementById('scroll.vertically?{"count":-1}'); - - expect(inputj.value).to.be.empty; - expect(inputk.value).to.be.empty; - }); - }); - - describe('onChange event', () => { - it('invokes onChange event on edit', (done) => { - render( { - expect(value['scroll.vertically?{"count":1}']).to.equal('jjj'); - - done(); - }} />, document.body); - - let input = document.getElementById('scroll.vertically?{"count":1}'); - input.value = 'jjj'; - input.dispatchEvent(new Event('change')) - }); - }); -}); diff --git a/test/settings/components/form/properties-form.test.jsx b/test/settings/components/form/properties-form.test.jsx deleted file mode 100644 index 171dcb6..0000000 --- a/test/settings/components/form/properties-form.test.jsx +++ /dev/null @@ -1,85 +0,0 @@ -import { render } from 'react'; -import PropertiesForm from 'settings/components/form/properties-form' - -describe("settings/form/PropertiesForm", () => { - beforeEach(() => { - document.body.innerHTML = ''; - }); - - describe('render', () => { - it('renders PropertiesForm', () => { - let types = { - mystr: 'string', - mynum: 'number', - mybool: 'boolean', - empty: 'string', - } - let value = { - mystr: 'abc', - mynum: 123, - mybool: true, - }; - render(, document.body); - - let strInput = document.querySelector('input[name=mystr]'); - let numInput = document.querySelector('input[name=mynum]'); - let boolInput = document.querySelector('input[name=mybool]'); - let emptyInput = document.querySelector('input[name=empty]'); - - expect(strInput.type).to.equals('text'); - expect(strInput.value).to.equal('abc'); - expect(numInput.type).to.equals('number'); - expect(numInput.value).to.equal('123'); - expect(boolInput.type).to.equals('checkbox'); - expect(boolInput.checked).to.be.true; - expect(emptyInput.type).to.equals('text'); - expect(emptyInput.value).to.be.empty; - }); - }); - - describe('onChange', () => { - it('invokes onChange event on text changed', (done) => { - render( { - expect(value).to.have.property('myvalue', 'abcd'); - done(); - }} - />, document.body); - - let input = document.querySelector('input[name=myvalue]'); - input.value = 'abcd' - input.dispatchEvent(new Event('change')) - }); - - it('invokes onChange event on number changeed', (done) => { - render( { - expect(value).to.have.property('myvalue', 1234); - done(); - }} - />, document.body); - - let input = document.querySelector('input[name=myvalue]'); - input.value = '1234' - input.dispatchEvent(new Event('change')) - }); - - it('invokes onChange event on checkbox changed', (done) => { - render( { - expect(value).to.have.property('myvalue', true); - done(); - }} - />, document.body); - - let input = document.querySelector('input[name=myvalue]'); - input.click(); - }); - }); -}); diff --git a/test/settings/components/form/search-engine-form.test.jsx b/test/settings/components/form/search-engine-form.test.jsx deleted file mode 100644 index d1cbb30..0000000 --- a/test/settings/components/form/search-engine-form.test.jsx +++ /dev/null @@ -1,103 +0,0 @@ -import { render } from 'react'; -import SearchForm from 'settings/components/form/search-form' - -describe("settings/form/SearchForm", () => { - beforeEach(() => { - document.body.innerHTML = ''; - }); - - describe('render', () => { - it('renders SearchForm', () => { - render(, document.body); - - let names = document.querySelectorAll('input[name=name]'); - expect(names).to.have.lengthOf(2); - expect(names[0].value).to.equal('google'); - expect(names[1].value).to.equal('yahoo'); - - let urls = document.querySelectorAll('input[name=url]'); - expect(urls).to.have.lengthOf(2); - expect(urls[0].value).to.equal('google.com'); - expect(urls[1].value).to.equal('yahoo.com'); - }); - - it('renders blank value', () => { - render(, document.body); - - let names = document.querySelectorAll('input[name=name]'); - let urls = document.querySelectorAll('input[name=url]'); - expect(names).to.have.lengthOf(0); - expect(urls).to.have.lengthOf(0); - }); - - it('renders blank engines', () => { - render(, document.body); - - let names = document.querySelectorAll('input[name=name]'); - let urls = document.querySelectorAll('input[name=url]'); - expect(names).to.have.lengthOf(0); - expect(urls).to.have.lengthOf(0); - }); - }); - - describe('onChange event', () => { - it('invokes onChange event on edit', (done) => { - render( { - expect(value.default).to.equal('louvre'); - expect(value.engines).to.have.lengthOf(2) - .and.have.deep.members([['louvre', 'google.com'], ['yahoo', 'yahoo.com']]) - - done(); - }} />, document.body); - - let radio = document.querySelectorAll('input[type=radio]'); - radio.checked = true; - - let name = document.querySelector('input[name=name]'); - name.value = 'louvre'; - name.dispatchEvent(new Event('change')) - }); - - it('invokes onChange event on delete', (done) => { - render( { - expect(value.default).to.equal('yahoo'); - expect(value.engines).to.have.lengthOf(1) - .and.have.deep.members([['yahoo', 'yahoo.com']]) - - done(); - }} />, document.body); - - let button = document.querySelector('input[type=button]'); - button.click(); - }); - - it('invokes onChange event on add', (done) => { - render( { - expect(value.default).to.equal('yahoo'); - expect(value.engines).to.have.lengthOf(2) - .and.have.deep.members([['google', 'google.com'], ['', '']]) - - done(); - }} />, document.body); - - let button = document.querySelector('input[type=button].ui-add-button'); - button.click(); - }); - }); -}); diff --git a/test/settings/components/ui/input.test.jsx b/test/settings/components/ui/input.test.jsx index db12bf8..432efcb 100644 --- a/test/settings/components/ui/input.test.jsx +++ b/test/settings/components/ui/input.test.jsx @@ -1,14 +1,28 @@ -import { render } from 'react'; -import Input from 'settings/components/ui/input' +import React from 'react'; +import ReactDOM from 'react-dom'; +import ReactTestUtils from 'react-dom/test-utils'; +import Input from 'settings/components/ui/Input' describe("settings/ui/Input", () => { + let container; + beforeEach(() => { - document.body.innerHTML = ''; + container = document.createElement('div'); + document.body.appendChild(container); + }); + + afterEach(() => { + document.body.removeChild(container); + container = null; }); context("type=text", () => { it('renders text input', () => { - render(, document.body) + ReactTestUtils.act(() => { + ReactDOM.render( + , + container); + }); let label = document.querySelector('label'); let input = document.querySelector('input'); @@ -19,20 +33,26 @@ describe("settings/ui/Input", () => { }); it('invoke onChange', (done) => { - render( { - expect(e.target.value).to.equal('newvalue'); - done(); - }}/>, document.body); + ReactTestUtils.act(() => { + ReactDOM.render( { + expect(e.target.value).to.equal('newvalue'); + done(); + }}/>, container); + }); let input = document.querySelector('input'); input.value = 'newvalue'; - input.dispatchEvent(new Event('change')) + ReactTestUtils.Simulate.change(input); }); }); context("type=radio", () => { it('renders radio button', () => { - render(, document.body) + ReactTestUtils.act(() => { + ReactDOM.render( + , + container); + }); let label = document.querySelector('label'); let input = document.querySelector('input'); @@ -43,20 +63,27 @@ describe("settings/ui/Input", () => { }); it('invoke onChange', (done) => { - render( { - expect(e.target.checked).to.be.true; - done(); - }}/>, document.body); + ReactTestUtils.act(() => { + ReactDOM.render( { + expect(e.target.checked).to.be.true; + done(); + }}/>, + container); + }); let input = document.querySelector('input'); input.checked = true; - input.dispatchEvent(new Event('change')) + ReactTestUtils.Simulate.change(input); }); }); context("type=textarea", () => { it('renders textarea button', () => { - render(, document.body) + ReactTestUtils.act(() => { + ReactDOM.render( + , + container); + }); let label = document.querySelector('label'); let textarea = document.querySelector('textarea'); @@ -69,14 +96,16 @@ describe("settings/ui/Input", () => { }); it('invoke onChange', (done) => { - render( { - expect(e.target.value).to.equal('newvalue'); - done(); - }}/>, document.body); + ReactTestUtils.act(() => { + ReactDOM.render( { + expect(e.target.value).to.equal('newvalue'); + done(); + }}/>, container); + }); let input = document.querySelector('textarea'); input.value = 'newvalue' - input.dispatchEvent(new Event('change')) + ReactTestUtils.Simulate.change(input); }); }); });