Merge pull request #248 from ueokande/gui-settings

GUI Settings

3 files changed, 239 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();
+    });
+  });
+});