diff options
Diffstat (limited to 'test')
-rw-r--r-- | test/settings/components/form/blacklist-form.test.jsx | 82 | ||||
-rw-r--r-- | test/settings/components/form/keymaps-form.test.jsx | 53 | ||||
-rw-r--r-- | test/settings/components/form/search-engine-form.test.jsx | 104 | ||||
-rw-r--r-- | test/settings/components/ui/input.test.jsx | 83 | ||||
-rw-r--r-- | test/shared/settings/values.test.js | 114 |
5 files changed, 436 insertions, 0 deletions
diff --git a/test/settings/components/form/blacklist-form.test.jsx b/test/settings/components/form/blacklist-form.test.jsx new file mode 100644 index 0000000..95f5cde --- /dev/null +++ b/test/settings/components/form/blacklist-form.test.jsx @@ -0,0 +1,82 @@ +import { expect } from 'chai'; +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 new file mode 100644 index 0000000..e9f9359 --- /dev/null +++ b/test/settings/components/form/keymaps-form.test.jsx @@ -0,0 +1,53 @@ +import { expect } from 'chai'; +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/search-engine-form.test.jsx b/test/settings/components/form/search-engine-form.test.jsx new file mode 100644 index 0000000..9600cae --- /dev/null +++ b/test/settings/components/form/search-engine-form.test.jsx @@ -0,0 +1,104 @@ +import { expect } from 'chai'; +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(); + }); + }); +}); diff --git a/test/settings/components/ui/input.test.jsx b/test/settings/components/ui/input.test.jsx new file mode 100644 index 0000000..98f2cef --- /dev/null +++ b/test/settings/components/ui/input.test.jsx @@ -0,0 +1,83 @@ +import { expect } from 'chai'; +import { h, render } from 'preact'; +import Input from 'settings/components/ui/input' + +describe("settings/ui/Input", () => { + beforeEach(() => { + document.body.innerHTML = ''; + }); + + context("type=text", () => { + it('renders text input', () => { + render(<Input type='text' name='myname' label='myfield' value='myvalue'/>, document.body) + + let label = document.querySelector('label'); + let input = document.querySelector('input'); + expect(label.textContent).to.contain('myfield'); + expect(input.type).to.contain('text'); + expect(input.name).to.contain('myname'); + expect(input.value).to.contain('myvalue'); + }); + + it('invoke onChange', (done) => { + render(<Input type='text' name='myname' label='myfield' value='myvalue' onChange={(e) => { + expect(e.target.value).to.equal('newvalue'); + done(); + }}/>, document.body); + + let input = document.querySelector('input'); + input.value = 'newvalue'; + input.dispatchEvent(new Event('change')) + }); + }); + + context("type=radio", () => { + it('renders radio button', () => { + render(<Input type='radio' name='myname' label='myfield' value='myvalue'/>, document.body) + + let label = document.querySelector('label'); + let input = document.querySelector('input'); + expect(label.textContent).to.contain('myfield'); + expect(input.type).to.contain('radio'); + expect(input.name).to.contain('myname'); + expect(input.value).to.contain('myvalue'); + }); + + it('invoke onChange', (done) => { + render(<Input type='text' name='radio' label='myfield' value='myvalue' onChange={(e) => { + expect(e.target.checked).to.be.true; + done(); + }}/>, document.body); + + let input = document.querySelector('input'); + input.checked = true; + input.dispatchEvent(new Event('change')) + }); + }); + + context("type=textarea", () => { + it('renders textarea button', () => { + render(<Input type='textarea' name='myname' label='myfield' value='myvalue' error='myerror' />, document.body) + + let label = document.querySelector('label'); + let textarea = document.querySelector('textarea'); + let error = document.querySelector('.settings-ui-input-error'); + expect(label.textContent).to.contain('myfield'); + expect(textarea.nodeName).to.contain('TEXTAREA'); + expect(textarea.name).to.contain('myname'); + expect(textarea.value).to.contain('myvalue'); + expect(error.textContent).to.contain('myerror'); + }); + + it('invoke onChange', (done) => { + render(<Input type='textarea' name='myname' label='myfield' value='myvalue' onChange={(e) => { + expect(e.target.value).to.equal('newvalue'); + done(); + }}/>, document.body); + + let input = document.querySelector('textarea'); + input.value = 'newvalue' + input.dispatchEvent(new Event('change')) + }); + }); +}); diff --git a/test/shared/settings/values.test.js b/test/shared/settings/values.test.js new file mode 100644 index 0000000..2632cd7 --- /dev/null +++ b/test/shared/settings/values.test.js @@ -0,0 +1,114 @@ +import { expect } from 'chai'; +import * as values from 'shared/settings/values'; + +describe("settings values", () => { + describe('valueFromJson', () => { + it('return object from json string', () => { + let json = `{ + "keymaps": { "0": {"type": "scroll.home"}}, + "search": { "default": "google", "engines": { "google": "https://google.com/search?q={}" }}, + "blacklist": [ "*.slack.com"] + }`; + let value = values.valueFromJson(json); + + expect(value.keymaps).to.deep.equal({ 0: {type: "scroll.home"}}); + expect(value.search).to.deep.equal({ default: "google", engines: { google: "https://google.com/search?q={}"} }); + expect(value.blacklist).to.deep.equal(["*.slack.com"]); + }); + }); + + describe('valueFromForm', () => { + it('returns value from form', () => { + let form = { + keymaps: { + 'scroll.vertically?{"count":1}': 'j', + 'scroll.home': '0', + }, + search: { + default: 'google', + engines: [['google', 'https://google.com/search?q={}']], + }, + blacklist: ['*.slack.com'], + }; + let value = values.valueFromForm(form); + + expect(value.keymaps).to.have.deep.property('j', { type: "scroll.vertically", count: 1 }); + expect(value.keymaps).to.have.deep.property('0', { type: "scroll.home" }); + expect(JSON.stringify(value.search)).to.deep.equal(JSON.stringify({ default: "google", engines: { google: "https://google.com/search?q={}"} })); + expect(value.search).to.deep.equal({ default: "google", engines: { google: "https://google.com/search?q={}"} }); + expect(value.blacklist).to.deep.equal(["*.slack.com"]); + }); + + it('convert from empty form', () => { + let form = {}; + let value = values.valueFromForm(form); + expect(value).to.not.have.key('keymaps'); + expect(value).to.not.have.key('search'); + expect(value).to.not.have.key('blacklist'); + }); + + it('override keymaps', () => { + let form = { + keymaps: { + 'scroll.vertically?{"count":1}': 'j', + 'scroll.vertically?{"count":-1}': 'j', + } + }; + let value = values.valueFromForm(form); + + expect(value.keymaps).to.have.key('j'); + }); + + it('override search engine', () => { + let form = { + search: { + default: 'google', + engines: [ + ['google', 'https://google.com/search?q={}'], + ['google', 'https://google.co.jp/search?q={}'], + ] + } + }; + let value = values.valueFromForm(form); + + expect(value.search.engines).to.have.property('google', 'https://google.co.jp/search?q={}'); + }); + }); + + describe('jsonFromValue', () => { + }); + + describe('formFromValue', () => { + it('convert empty value to form', () => { + let value = {}; + let form = values.formFromValue(value); + + expect(value).to.not.have.key('keymaps'); + expect(value).to.not.have.key('search'); + expect(value).to.not.have.key('blacklist'); + }); + + it('convert value to form', () => { + let value = { + keymaps: { + j: { type: 'scroll.vertically', count: 1 }, + JJ: { type: 'scroll.vertically', count: 100 }, + 0: { type: 'scroll.home' }, + }, + search: { default: 'google', engines: { google: 'https://google.com/search?q={}' }}, + blacklist: [ '*.slack.com'] + }; + let allowed = ['scroll.vertically?{"count":1}', 'scroll.home' ]; + let form = values.formFromValue(value, allowed); + + expect(form.keymaps).to.have.property('scroll.vertically?{"count":1}', 'j'); + expect(form.keymaps).to.not.have.property('scroll.vertically?{"count":100}'); + expect(form.keymaps).to.have.property('scroll.home', '0'); + expect(Object.keys(form.keymaps)).to.have.lengthOf(2); + expect(form.search).to.have.property('default', 'google'); + expect(form.search).to.have.deep.property('engines', [['google', 'https://google.com/search?q={}']]); + expect(form.blacklist).to.have.lengthOf(1); + expect(form.blacklist).to.include('*.slack.com'); + }); + }); +}); |