From e90cf895add023240e4aed700db76cb4b38595a5 Mon Sep 17 00:00:00 2001
From: Shin'ya Ueoka <ueokande@i-beam.org>
Date: Sun, 26 Nov 2017 09:43:43 +0900
Subject: add input test

---
 test/settings/components/ui/input.test.jsx | 83 ++++++++++++++++++++++++++++++
 1 file changed, 83 insertions(+)
 create mode 100644 test/settings/components/ui/input.test.jsx

(limited to 'test/settings')

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


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')

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')

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')

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


From 86df54067f8a105264a6816e115fd65efa75fb5b Mon Sep 17 00:00:00 2001
From: Shin'ya Ueoka <ueokande@i-beam.org>
Date: Fri, 5 Jan 2018 22:54:36 +0900
Subject: Add PropertiesForm

---
 src/settings/components/form/properties-form.jsx   | 60 +++++++++++++++
 src/settings/components/form/properties-form.scss  | 12 +++
 src/settings/components/index.jsx                  | 10 +++
 .../components/form/properties-form.test.jsx       | 86 ++++++++++++++++++++++
 4 files changed, 168 insertions(+)
 create mode 100644 src/settings/components/form/properties-form.jsx
 create mode 100644 src/settings/components/form/properties-form.scss
 create mode 100644 test/settings/components/form/properties-form.test.jsx

(limited to 'test/settings')

diff --git a/src/settings/components/form/properties-form.jsx b/src/settings/components/form/properties-form.jsx
new file mode 100644
index 0000000..55c8512
--- /dev/null
+++ b/src/settings/components/form/properties-form.jsx
@@ -0,0 +1,60 @@
+import './properties-form.scss';
+import { h, Component } from 'preact';
+
+class PropertiesForm extends Component {
+
+  render() {
+    let types = this.props.types;
+    let value = this.props.value;
+    if (!value) {
+      value = {};
+    }
+
+    return <div className='form-properties-form'>
+      {
+        Object.keys(types).map((name) => {
+          let type = types[name];
+          let inputType = null;
+          if (type === 'string') {
+            inputType = 'text';
+          } else if (type === 'number') {
+            inputType = 'number';
+          } else if (type === 'boolean') {
+            inputType = 'checkbox';
+          }
+          return <div key={name} className='form-properties-form-row'>
+            <label>
+              <span className='column-name'>{name}</span>
+              <input type={inputType} name={name}
+                className='column-input'
+                value={value[name] ? value[name] : ''}
+                onChange={this.bindValue.bind(this)}
+                checked={value[name]}
+              />
+            </label>
+          </div>;
+        })
+      }
+    </div>;
+  }
+
+  bindValue(e) {
+    if (!this.props.onChange) {
+      return;
+    }
+
+    let name = e.target.name;
+    let next = Object.assign({}, this.props.value);
+    if (e.target.type.toLowerCase() === 'checkbox') {
+      next[name] = e.target.checked;
+    } else if (e.target.type.toLowerCase() === 'number') {
+      next[name] = Number(e.target.value);
+    } else {
+      next[name] = e.target.value;
+    }
+
+    this.props.onChange(next);
+  }
+}
+
+export default PropertiesForm;
diff --git a/src/settings/components/form/properties-form.scss b/src/settings/components/form/properties-form.scss
new file mode 100644
index 0000000..7c9e167
--- /dev/null
+++ b/src/settings/components/form/properties-form.scss
@@ -0,0 +1,12 @@
+.form-properties-form {
+  &-row {
+    .column-name {
+      display: inline-block;
+      min-width: 5rem;
+      font-weight: bold;
+    }
+    .column-input {
+      line-height: 2.2rem;
+    }
+  }
+}
diff --git a/src/settings/components/index.jsx b/src/settings/components/index.jsx
index 074c4c7..c41aa6b 100644
--- a/src/settings/components/index.jsx
+++ b/src/settings/components/index.jsx
@@ -4,6 +4,8 @@ import Input from './ui/input';
 import SearchForm from './form/search-form';
 import KeymapsForm from './form/keymaps-form';
 import BlacklistForm from './form/blacklist-form';
+import PropertiesForm from './form/properties-form';
+import PropertyTypes from 'shared/settings/property-types';
 import * as settingActions from 'settings/actions/setting';
 import * as validator from 'shared/settings/validator';
 import * as settingsValues from 'shared/settings/values';
@@ -65,6 +67,14 @@ class SettingsComponent extends Component {
           onChange={value => this.bindForm('blacklist', value)}
         />
       </fieldset>
+      <fieldset>
+        <legend>Properties</legend>
+        <PropertiesForm
+          types={PropertyTypes}
+          value={this.state.settings.form.properties}
+          onChange={value => this.bindForm('properties', value)}
+        />
+      </fieldset>
     </div>;
   }
 
diff --git a/test/settings/components/form/properties-form.test.jsx b/test/settings/components/form/properties-form.test.jsx
new file mode 100644
index 0000000..4807361
--- /dev/null
+++ b/test/settings/components/form/properties-form.test.jsx
@@ -0,0 +1,86 @@
+import { expect } from 'chai';
+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();
+    });
+  });
+});
-- 
cgit v1.2.3