diff options
Diffstat (limited to 'test/settings/components/form')
8 files changed, 388 insertions, 321 deletions
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( + <BlacklistForm value={['*.slack.com', 'www.google.com/maps']} />, + ).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(<BlacklistForm />).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(<BlacklistForm + value={['*.slack.com', 'www.google.com/maps*']} + onChange={value => { + 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(<BlacklistForm + value={['*.slack.com', 'www.google.com/maps*']} + onChange={value => { + 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(<BlacklistForm + value={['*.slack.com']} + onChange={value => { + 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(<KeymapsForm value={{ + 'scroll.vertically?{"count":1}': 'j', + 'scroll.vertically?{"count":-1}': 'k', + }} />).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(<KeymapsForm />).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(<KeymapsForm + value={{ + 'scroll.vertically?{"count":1}': 'j', + 'scroll.vertically?{"count":-1}': 'k', + }} + onChange={value => { + 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( + <PropertiesForm types={types} value={value} />, + ).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(<PropertiesForm + types={{ 'myvalue': 'string' }} + value={{ 'myvalue': 'abc' }} + onChange={value => { + 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(<PropertiesForm + types={{ 'myvalue': 'number' }} + value={{ '': 123 }} + onChange={value => { + 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(<PropertiesForm + types={{ 'myvalue': 'boolean' }} + value={{ 'myvalue': false }} + onChange={value => { + 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(<SearchForm value={{ + default: 'google', + engines: [['google', 'google.com'], ['yahoo', 'yahoo.com']], + }} />).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(<SearchForm />).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( + <SearchForm value={{ default: 'google' }} />, + ).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(<SearchForm + value={{ + default: 'google', + engines: [['google', 'google.com'], ['yahoo', 'yahoo.com']] + }} + onChange={value => { + 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(<SearchForm value={{ + default: 'yahoo', + engines: [['louvre', 'google.com'], ['yahoo', 'yahoo.com']] + }} + onChange={value => { + 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(<SearchForm value={{ + default: 'yahoo', + engines: [['google', 'google.com']] + }} + onChange={value => { + 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 1c46943..0000000 --- a/test/settings/components/form/blacklist-form.test.jsx +++ /dev/null @@ -1,81 +0,0 @@ -import { h, render } from 'preact'; -import BlacklistForm from 'settings/components/form/blacklist-form' - -describe("settings/form/BlacklistForm", () => { - beforeEach(() => { - document.body.innerHTML = ''; - }); - - describe('render', () => { - it('renders BlacklistForm', () => { - render(<BlacklistForm value={['*.slack.com', 'www.google.com/maps']} />, 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(<BlacklistForm />, document.body); - - let inputs = document.querySelectorAll('input[type=text]'); - expect(inputs).to.be.empty; - }); - - it('renders blank value', () => { - render(<BlacklistForm />, document.body); - - let inputs = document.querySelectorAll('input[type=text]'); - expect(inputs).to.be.empty; - }); - }); - - describe('onChange', () => { - it('invokes onChange event on edit', (done) => { - render(<BlacklistForm - value={['*.slack.com', 'www.google.com/maps*']} - onChange={value => { - 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(<BlacklistForm - value={['*.slack.com', 'www.google.com/maps*']} - onChange={value => { - 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(<BlacklistForm - value={['*.slack.com']} - onChange={value => { - 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 55edf8c..0000000 --- a/test/settings/components/form/keymaps-form.test.jsx +++ /dev/null @@ -1,52 +0,0 @@ -import { h, render } from 'preact'; -import KeymapsForm from 'settings/components/form/keymaps-form' - -describe("settings/form/KeymapsForm", () => { - beforeEach(() => { - document.body.innerHTML = ''; - }); - - describe('render', () => { - it('renders KeymapsForm', () => { - render(<KeymapsForm value={{ - 'scroll.vertically?{"count":1}': 'j', - 'scroll.vertically?{"count":-1}': 'k', - }} />, 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(<KeymapsForm />, 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(<KeymapsForm - value={{ - 'scroll.vertically?{"count":1}': 'j', - 'scroll.vertically?{"count":-1}': 'k', - }} - onChange={value => { - 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 0efe382..0000000 --- a/test/settings/components/form/properties-form.test.jsx +++ /dev/null @@ -1,85 +0,0 @@ -import { h, render } from 'preact'; -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(<PropertiesForm types={types} value={value} />, 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(<PropertiesForm - types={{ 'myvalue': 'string' }} - value={{ 'myvalue': 'abc' }} - onChange={value => { - 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(<PropertiesForm - types={{ 'myvalue': 'number' }} - value={{ '': 123 }} - onChange={value => { - 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(<PropertiesForm - types={{ 'myvalue': 'boolean' }} - value={{ 'myvalue': false }} - onChange={value => { - 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 c52419d..0000000 --- a/test/settings/components/form/search-engine-form.test.jsx +++ /dev/null @@ -1,103 +0,0 @@ -import { h, render } from 'preact'; -import SearchForm from 'settings/components/form/search-form' - -describe("settings/form/SearchForm", () => { - beforeEach(() => { - document.body.innerHTML = ''; - }); - - describe('render', () => { - it('renders SearchForm', () => { - render(<SearchForm value={{ - default: 'google', - engines: [['google', 'google.com'], ['yahoo', 'yahoo.com']], - }} />, 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(<SearchForm />, 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(<SearchForm value={{ default: 'google' }} />, 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(<SearchForm - value={{ - default: 'google', - engines: [['google', 'google.com'], ['yahoo', 'yahoo.com']] - }} - onChange={value => { - 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(<SearchForm value={{ - default: 'yahoo', - engines: [['louvre', 'google.com'], ['yahoo', 'yahoo.com']] - }} - onChange={value => { - 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(<SearchForm value={{ - default: 'yahoo', - engines: [['google', 'google.com']] - }} - onChange={value => { - 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(); - }); - }); -}); |