From d15de42a75ee0f722e8779af1ecff8b51e59c56d Mon Sep 17 00:00:00 2001
From: Shin'ya Ueoka <ueokande@i-beam.org>
Date: Sat, 25 Nov 2017 22:14:28 +0900
Subject: settings helpers

---
 test/shared/settings/values.test.js | 112 ++++++++++++++++++++++++++++++++++++
 1 file changed, 112 insertions(+)
 create mode 100644 test/shared/settings/values.test.js

(limited to 'test')

diff --git a/test/shared/settings/values.test.js b/test/shared/settings/values.test.js
new file mode 100644
index 0000000..2c222b6
--- /dev/null
+++ b/test/shared/settings/values.test.js
@@ -0,0 +1,112 @@
+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 form = values.formFromValue(value);
+
+      expect(form.keymaps).to.have.property('scroll.vertically?{"count":1}', 'j');
+      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');
+    });
+  });
+});
-- 
cgit v1.2.3


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

---
 karma.conf.js                              |  2 +
 src/settings/components/ui/input.jsx       |  5 +-
 test/settings/components/ui/input.test.jsx | 83 ++++++++++++++++++++++++++++++
 3 files changed, 86 insertions(+), 4 deletions(-)
 create mode 100644 test/settings/components/ui/input.test.jsx

(limited to 'test')

diff --git a/karma.conf.js b/karma.conf.js
index 859cee0..46a1774 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -7,11 +7,13 @@ module.exports = function (config) {
     frameworks: ['mocha'],
     files: [
       'test/**/*.test.js',
+      'test/**/*.test.jsx',
       'test/**/*.html'
     ],
 
     preprocessors: {
       'test/**/*.test.js': [ 'webpack' ],
+      'test/**/*.test.jsx': [ 'webpack' ],
       'test/**/*.html': ['html2js']
     },
 
diff --git a/src/settings/components/ui/input.jsx b/src/settings/components/ui/input.jsx
index 5138411..e99dbc7 100644
--- a/src/settings/components/ui/input.jsx
+++ b/src/settings/components/ui/input.jsx
@@ -6,10 +6,7 @@ class Input extends Component {
   renderText(props) {
     let inputClassName = props.error ? 'input-error' : '';
     return <div className='settings-ui-input'>
-      <label
-        type='text'
-        htmlFor={props.id}
-      >{ props.label }</label>
+      <label htmlFor={props.id}>{ props.label }</label>
       <input type='text' className={inputClassName} {...props} />
     </div>;
   }
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')

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

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

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