diff options
Diffstat (limited to 'test')
| -rw-r--r-- | test/content/navigates.test.js | 6 | ||||
| -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 | 
6 files changed, 439 insertions, 3 deletions
| diff --git a/test/content/navigates.test.js b/test/content/navigates.test.js index d8a3316..f1f0741 100644 --- a/test/content/navigates.test.js +++ b/test/content/navigates.test.js @@ -53,7 +53,7 @@ describe('navigates module', () => {      ));      it('navigates to <a> elements whose text matches "previous"', testPrev( -      '<a href="#dummy">preview</a><a href="#prev">go to previous</a>' +      '<a href="#dummy">previously</a><a href="#prev">previous page</a>'      ));      it('navigates to <a> elements whose decoded text matches "<<"', testPrev( @@ -119,11 +119,11 @@ describe('navigates module', () => {      ));      it('prefers link[rel~=next] to a[rel~=next]', testNext( -      '<a rel="next" href="#dummy">click me<><link rel="next" href="#next" />' +      '<a rel="next" href="#dummy">click me</a><link rel="next" href="#next" />'      ));      it('prefers a[rel~=next] to a::text(pattern)', testNext( -      '<a href="#dummy">go to next</a><a rel="next" href="#next">click me</a>' +      '<a href="#dummy">next page</a><a rel="next" href="#next">click me</a>'      ));    }); 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'); +    }); +  }); +}); | 
