From 7e2c2476ef02c6bd040ba2cfdc4ec66efe560dc6 Mon Sep 17 00:00:00 2001
From: Shin'ya Ueoka <ueokande@i-beam.org>
Date: Sun, 26 Nov 2017 11:24:48 +0900
Subject: add BlacklistForm test

---
 .../components/form/blacklist-form.test.jsx        | 82 ++++++++++++++++++++++
 1 file changed, 82 insertions(+)
 create mode 100644 test/settings/components/form/blacklist-form.test.jsx

(limited to 'test/settings/components/form')

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();
+    });
+  });
+});
-- 
cgit v1.2.3


From 0967304ebe713bc24078b20ac3a710fd42f2f611 Mon Sep 17 00:00:00 2001
From: Shin'ya Ueoka <ueokande@i-beam.org>
Date: Sun, 26 Nov 2017 12:18:12 +0900
Subject: add SearchForm test

---
 src/settings/components/form/search-form.jsx       |  18 ++--
 .../components/form/search-engine-form.test.jsx    | 104 +++++++++++++++++++++
 2 files changed, 115 insertions(+), 7 deletions(-)
 create mode 100644 test/settings/components/form/search-engine-form.test.jsx

(limited to 'test/settings/components/form')

diff --git a/src/settings/components/form/search-form.jsx b/src/settings/components/form/search-form.jsx
index 9bafb8d..98b0655 100644
--- a/src/settings/components/form/search-form.jsx
+++ b/src/settings/components/form/search-form.jsx
@@ -10,10 +10,9 @@ class SearchForm extends Component {
     if (!value) {
       value = { default: '', engines: []};
     }
-    let {
-      default: defaultEngine,
-      engines
-    } = value;
+    if (!value.engines) {
+      value.engines = [];
+    }
 
     return <div className='form-search-form'>
       <div className='form-search-form-header'>
@@ -22,7 +21,7 @@ class SearchForm extends Component {
         <div className='column-option'>Default</div>
       </div>
       {
-        engines.map((engine, index) => {
+        value.engines.map((engine, index) => {
           return <div key={index} className='form-search-form-row'>
             <input data-index={index} type='text' name='name'
               className='column-name' value={engine[0]}
@@ -33,7 +32,7 @@ class SearchForm extends Component {
               onChange={this.bindValue.bind(this)} />
             <div className='column-option'>
               <input data-index={index} type='radio' name='default'
-                checked={defaultEngine === engine[0]}
+                checked={value.default === engine[0]}
                 onChange={this.bindValue.bind(this)} />
               <DeleteButton data-index={index} name='delete'
                 onClick={this.bindValue.bind(this)} />
@@ -50,12 +49,17 @@ class SearchForm extends Component {
       return;
     }
 
+    let value = this.props.value;
     let name = e.target.name;
     let index = e.target.getAttribute('data-index');
-    let next = Object.assign({}, this.props.value);
+    let next = Object.assign({}, {
+      default: value.default,
+      engines: value.engines ? value.engines.slice() : [],
+    });
 
     if (name === 'name') {
       next.engines[index][0] = e.target.value;
+      next.default = this.props.value.engines[index][0];
     } else if (name === 'url') {
       next.engines[index][1] = e.target.value;
     } else if (name === 'default') {
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();
+    });
+  });
+});
-- 
cgit v1.2.3


From 705c47bc6379a8d1fea4f775a6af98c97d4eab81 Mon Sep 17 00:00:00 2001
From: Shin'ya Ueoka <ueokande@i-beam.org>
Date: Sun, 26 Nov 2017 12:34:49 +0900
Subject: add KeymapsForm test

---
 src/settings/components/form/keymaps-form.jsx      |  6 ++-
 .../settings/components/form/keymaps-form.test.jsx | 53 ++++++++++++++++++++++
 2 files changed, 58 insertions(+), 1 deletion(-)
 create mode 100644 test/settings/components/form/keymaps-form.test.jsx

(limited to 'test/settings/components/form')

diff --git a/src/settings/components/form/keymaps-form.jsx b/src/settings/components/form/keymaps-form.jsx
index 8e93c3f..f64320c 100644
--- a/src/settings/components/form/keymaps-form.jsx
+++ b/src/settings/components/form/keymaps-form.jsx
@@ -58,6 +58,10 @@ const KeyMapFields = [
 class KeymapsForm extends Component {
 
   render() {
+    let values = this.props.value;
+    if (!values) {
+      values = {};
+    }
     return <div className='keymap-fields'>
       {
         KeyMapFields.map((group, index) => {
@@ -66,7 +70,7 @@ class KeymapsForm extends Component {
               group.map((field) => {
                 let name = field[0];
                 let label = field[1];
-                let value = this.props.value[name];
+                let value = values[name];
                 return <Input
                   type='text' id={name} name={name} key={name}
                   label={label} value={value}
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'))
+    });
+  });
+});
-- 
cgit v1.2.3