4 files changed, 303 insertions, 214 deletions

diff --git a/test/settings/components/form/BlacklistForm.test.tsx b/test/settings/components/form/BlacklistForm.test.tsx
index 6c329ff..e34802a 100644
--- a/test/settings/components/form/BlacklistForm.test.tsx
+++ b/test/settings/components/form/BlacklistForm.test.tsx
@@ -1,94 +1,120 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import ReactTestRenderer from 'react-test-renderer';
-import ReactTestUtils from 'react-dom/test-utils';
-import { expect } from 'chai'
+import React from "react";
+import ReactDOM from "react-dom";
+import ReactTestRenderer from "react-test-renderer";
+import ReactTestUtils from "react-dom/test-utils";
+import { expect } from "chai";
 
-import BlacklistForm from '../../../../src/settings/components/form/BlacklistForm'
-import Blacklist from '../../../../src/shared/settings/Blacklist';
+import BlacklistForm from "../../../../src/settings/components/form/BlacklistForm";
+import Blacklist from "../../../../src/shared/settings/Blacklist";
+import AddButton from "../../../../src/settings/components/ui/AddButton";
 
 describe("settings/form/BlacklistForm", () => {
-  describe('render', () => {
-    it('renders BlacklistForm', () => {
+  describe("render", () => {
+    it("renders BlacklistForm", () => {
       const root = ReactTestRenderer.create(
-        <BlacklistForm value={Blacklist.fromJSON(['*.slack.com', 'www.google.com/maps'])} />,
+        <BlacklistForm
+          value={Blacklist.fromJSON(["*.slack.com", "www.google.com/maps"])}
+        />
       ).root;
 
-      const children = root.children[0].children;
-      expect(children).to.have.lengthOf(3);
-      expect(children[0].children[0].props.value).to.equal('*.slack.com');
-      expect(children[1].children[0].props.value).to.equal('www.google.com/maps');
-      expect(children[2].props.name).to.equal('add');
+      const rows = root.findAllByProps({
+        className: "form-blacklist-form-row",
+      });
+      expect(rows).to.have.lengthOf(2);
+      expect(
+        rows[0].findByProps({ className: "column-url" }).props.value
+      ).to.equal("*.slack.com");
+      expect(
+        rows[1].findByProps({ className: "column-url" }).props.value
+      ).to.equal("www.google.com/maps");
+
+      expect(() => root.findByType(AddButton)).not.throw();
     });
 
-    it('renders blank value', () => {
+    it("renders blank value", () => {
       const root = ReactTestRenderer.create(<BlacklistForm />).root;
 
-      const children = root.children[0].children;
-      expect(children).to.have.lengthOf(1);
-      expect(children[0].props.name).to.equal('add');
+      const rows = root.findAllByProps({
+        className: "form-blacklist-form-row",
+      });
+      expect(rows).to.be.empty;
     });
   });
 
-  describe('onChange', () => {
-    let container;
+  describe("onChange", () => {
+    let container: HTMLDivElement;
 
     beforeEach(() => {
-      container = document.createElement('div');
+      container = document.createElement("div");
       document.body.appendChild(container);
     });
 
     afterEach(() => {
       document.body.removeChild(container);
-      container = null;
     });
 
-    it('invokes onChange event on edit', (done) => {
+    it("invokes onChange event on edit", (done) => {
       ReactTestUtils.act(() => {
-        ReactDOM.render(<BlacklistForm
-          value={Blacklist.fromJSON(['*.slack.com', 'www.google.com/maps*'])}
-          onChange={value => {
-            const urls = value.items.map(item => item.pattern);
-            expect(urls).to.have.members(['gitter.im', 'www.google.com/maps*']);
-            done();
-          }}
-        />, container)
+        ReactDOM.render(
+          <BlacklistForm
+            value={Blacklist.fromJSON(["*.slack.com", "www.google.com/maps*"])}
+            onChange={(value) => {
+              const urls = value.items.map((item) => item.pattern);
+              expect(urls).to.have.members([
+                "gitter.im",
+                "www.google.com/maps*",
+              ]);
+              done();
+            }}
+          />,
+          container
+        );
       });
 
-      const input = document.querySelectorAll('input[type=text]')[0];
-      input.value = 'gitter.im';
+      const input = document.querySelectorAll(
+        "input[type=text]"
+      )[0] as HTMLInputElement;
+      input.value = "gitter.im";
       ReactTestUtils.Simulate.change(input);
     });
 
-    it('invokes onChange event on delete', (done) => {
+    it("invokes onChange event on delete", (done) => {
       ReactTestUtils.act(() => {
-        ReactDOM.render(<BlacklistForm
-          value={Blacklist.fromJSON(['*.slack.com', 'www.google.com/maps*'])}
-          onChange={value => {
-            const urls = value.items.map(item => item.pattern);
-            expect(urls).to.have.members(['www.google.com/maps*']);
-            done();
-          }}
-        />, container)
+        ReactDOM.render(
+          <BlacklistForm
+            value={Blacklist.fromJSON(["*.slack.com", "www.google.com/maps*"])}
+            onChange={(value) => {
+              const urls = value.items.map((item) => item.pattern);
+              expect(urls).to.have.members(["www.google.com/maps*"]);
+              done();
+            }}
+          />,
+          container
+        );
       });
 
-      const button = document.querySelectorAll('input[type=button]')[0];
+      const button = document.querySelectorAll("input[type=button]")[0];
       ReactTestUtils.Simulate.click(button);
     });
 
-    it('invokes onChange event on add', (done) => {
+    it("invokes onChange event on add", (done) => {
       ReactTestUtils.act(() => {
-        ReactDOM.render(<BlacklistForm
-          value={Blacklist.fromJSON(['*.slack.com'])}
-          onChange={value => {
-            const urls = value.items.map(item => item.pattern);
-            expect(urls).to.have.members(['*.slack.com', '']);
-            done();
-          }}
-        />, container);
+        ReactDOM.render(
+          <BlacklistForm
+            value={Blacklist.fromJSON(["*.slack.com"])}
+            onChange={(value) => {
+              const urls = value.items.map((item) => item.pattern);
+              expect(urls).to.have.members(["*.slack.com", ""]);
+              done();
+            }}
+          />,
+          container
+        );
       });
 
-      const button = document.querySelector('input[type=button].ui-add-button');
+      const button = document.querySelector(
+        "input[type=button].ui-add-button"
+      ) as HTMLButtonElement;
       ReactTestUtils.Simulate.click(button);
     });
   });
diff --git a/test/settings/components/form/KeymapsForm.test.tsx b/test/settings/components/form/KeymapsForm.test.tsx
index ccc772c..1cec889 100644
--- a/test/settings/components/form/KeymapsForm.test.tsx
+++ b/test/settings/components/form/KeymapsForm.test.tsx
@@ -1,27 +1,31 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import ReactTestRenderer from 'react-test-renderer';
-import ReactTestUtils from 'react-dom/test-utils';
-import KeymapsForm from '../../../../src/settings/components/form/KeymapsForm'
-import { FormKeymaps } from 'shared/SettingData';
-import { expect } from 'chai';
+import React from "react";
+import ReactDOM from "react-dom";
+import ReactTestRenderer from "react-test-renderer";
+import ReactTestUtils from "react-dom/test-utils";
+import KeymapsForm from "../../../../src/settings/components/form/KeymapsForm";
+import { FormKeymaps } from "../../../../src/shared/SettingData";
+import { expect } from "chai";
 
 describe("settings/form/KeymapsForm", () => {
-  describe('render', () => {
-    it('renders keymap fields', () => {
-      const root = ReactTestRenderer.create(<KeymapsForm value={FormKeymaps.fromJSON({
-        'scroll.vertically?{"count":1}': 'j',
-        'scroll.vertically?{"count":-1}': 'k',
-      })} />).root
+  describe("render", () => {
+    it("renders keymap fields", () => {
+      const root = ReactTestRenderer.create(
+        <KeymapsForm
+          value={FormKeymaps.fromJSON({
+            'scroll.vertically?{"count":1}': "j",
+            'scroll.vertically?{"count":-1}': "k",
+          })}
+        />
+      ).root;
 
       const inputj = root.findByProps({ id: 'scroll.vertically?{"count":1}' });
       const inputk = root.findByProps({ id: 'scroll.vertically?{"count":-1}' });
 
-      expect(inputj.props.value).to.equal('j');
-      expect(inputk.props.value).to.equal('k');
+      expect(inputj.props.value).to.equal("j");
+      expect(inputk.props.value).to.equal("k");
     });
 
-    it('renders blank value', () => {
+    it("renders blank value", () => {
       const root = ReactTestRenderer.create(<KeymapsForm />).root;
 
       const inputj = root.findByProps({ id: 'scroll.vertically?{"count":1}' });
@@ -32,34 +36,41 @@ describe("settings/form/KeymapsForm", () => {
     });
   });
 
-  describe('onChange event', () => {
-    let container;
+  describe("onChange event", () => {
+    let container: HTMLDivElement;
 
     beforeEach(() => {
-      container = document.createElement('div');
+      container = document.createElement("div");
       document.body.appendChild(container);
     });
 
     afterEach(() => {
       document.body.removeChild(container);
-      container = null;
     });
 
-    it('invokes onChange event on edit', (done) => {
+    it("invokes onChange event on edit", (done) => {
       ReactTestUtils.act(() => {
-        ReactDOM.render(<KeymapsForm
-          value={FormKeymaps.fromJSON({
-            'scroll.vertically?{"count":1}': 'j',
-            'scroll.vertically?{"count":-1}': 'k',
-          })}
-          onChange={value => {
-            expect(value.toJSON()['scroll.vertically?{"count":1}']).to.equal('jjj');
-            done();
-          }} />, container);
+        ReactDOM.render(
+          <KeymapsForm
+            value={FormKeymaps.fromJSON({
+              'scroll.vertically?{"count":1}': "j",
+              'scroll.vertically?{"count":-1}': "k",
+            })}
+            onChange={(value) => {
+              expect(value.toJSON()['scroll.vertically?{"count":1}']).to.equal(
+                "jjj"
+              );
+              done();
+            }}
+          />,
+          container
+        );
       });
 
-      const input = document.getElementById('scroll.vertically?{"count":1}');
-      input.value = 'jjj';
+      const input = document.getElementById(
+        'scroll.vertically?{"count":1}'
+      ) as HTMLInputElement;
+      input.value = "jjj";
       ReactTestUtils.Simulate.change(input);
     });
   });
diff --git a/test/settings/components/form/PropertiesForm.test.tsx b/test/settings/components/form/PropertiesForm.test.tsx
index 4a0e25a..acf02b8 100644
--- a/test/settings/components/form/PropertiesForm.test.tsx
+++ b/test/settings/components/form/PropertiesForm.test.tsx
@@ -1,102 +1,117 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import ReactTestRenderer from 'react-test-renderer';
-import ReactTestUtils from 'react-dom/test-utils';
-import PropertiesForm from 'settings/components/form/PropertiesForm'
+import React from "react";
+import ReactDOM from "react-dom";
+import ReactTestRenderer from "react-test-renderer";
+import ReactTestUtils from "react-dom/test-utils";
+import PropertiesForm from "../../../../src/settings/components/form/PropertiesForm";
+import { expect } from "chai";
 
 describe("settings/form/PropertiesForm", () => {
-  describe('render', () => {
-    it('renders PropertiesForm', () => {
+  describe("render", () => {
+    it("renders PropertiesForm", () => {
       const types = {
-        mystr: 'string',
-        mynum: 'number',
-        mybool: 'boolean',
-        empty: 'string',
-      }
+        mystr: "string",
+        mynum: "number",
+        mybool: "boolean",
+        empty: "string",
+      };
       const values = {
-        mystr: 'abc',
+        mystr: "abc",
         mynum: 123,
         mybool: true,
       };
 
       const root = ReactTestRenderer.create(
-        <PropertiesForm types={types} value={values} />,
-      ).root
+        <PropertiesForm types={types} value={values} />
+      ).root;
 
-      let input = root.findByProps({ name: 'mystr' });
-      expect(input.props.type).to.equals('text');
-      expect(input.props.value).to.equal('abc');
+      let input = root.findByProps({ name: "mystr" });
+      expect(input.props.type).to.equals("text");
+      expect(input.props.value).to.equal("abc");
 
-      input = root.findByProps({ name: 'mynum' });
-      expect(input.props.type).to.equals('number');
+      input = root.findByProps({ name: "mynum" });
+      expect(input.props.type).to.equals("number");
       expect(input.props.value).to.equal(123);
 
-      input = root.findByProps({ name: 'mybool' });
-      expect(input.props.type).to.equals('checkbox');
+      input = root.findByProps({ name: "mybool" });
+      expect(input.props.type).to.equals("checkbox");
       expect(input.props.value).to.equal(true);
     });
   });
 
-  describe('onChange', () => {
-    let container;
+  describe("onChange", () => {
+    let container: HTMLDivElement;
 
     beforeEach(() => {
-      container = document.createElement('div');
+      container = document.createElement("div");
       document.body.appendChild(container);
     });
 
     afterEach(() => {
       document.body.removeChild(container);
-      container = null;
     });
 
-    it('invokes onChange event on text changed', (done) => {
+    it("invokes onChange event on text changed", (done) => {
       ReactTestUtils.act(() => {
-        ReactDOM.render(<PropertiesForm
-          types={{ 'myvalue': 'string' }}
-          value={{ 'myvalue': 'abc' }}
-          onChange={value => {
-            expect(value).to.have.property('myvalue', 'abcd');
-            done();
-          }}
-        />, container);
+        ReactDOM.render(
+          <PropertiesForm
+            types={{ myvalue: "string" }}
+            value={{ myvalue: "abc" }}
+            onChange={(value) => {
+              expect(value).to.have.property("myvalue", "abcd");
+              done();
+            }}
+          />,
+          container
+        );
       });
 
-      const input = document.querySelector('input[name=myvalue]');
-      input.value = 'abcd'
+      const input = document.querySelector(
+        "input[name=myvalue]"
+      ) as HTMLInputElement;
+      input.value = "abcd";
       ReactTestUtils.Simulate.change(input);
     });
 
-    it('invokes onChange event on number changeed', (done) => {
+    it("invokes onChange event on number changeed", (done) => {
       ReactTestUtils.act(() => {
-        ReactDOM.render(<PropertiesForm
-          types={{ 'myvalue': 'number' }}
-          value={{ '': 123 }}
-          onChange={value => {
-            expect(value).to.have.property('myvalue', 1234);
-            done();
-          }}
-        />, container);
+        ReactDOM.render(
+          <PropertiesForm
+            types={{ myvalue: "number" }}
+            value={{ "": 123 }}
+            onChange={(value) => {
+              expect(value).to.have.property("myvalue", 1234);
+              done();
+            }}
+          />,
+          container
+        );
       });
 
-      const input = document.querySelector('input[name=myvalue]');
-      input.value = '1234'
+      const input = document.querySelector(
+        "input[name=myvalue]"
+      ) as HTMLInputElement;
+      input.value = "1234";
       ReactTestUtils.Simulate.change(input);
     });
 
-    it('invokes onChange event on checkbox changed', (done) => {
+    it("invokes onChange event on checkbox changed", (done) => {
       ReactTestUtils.act(() => {
-        ReactDOM.render(<PropertiesForm
-          types={{ 'myvalue': 'boolean' }}
-          value={{ 'myvalue': false }}
-          onChange={value => {
-            expect(value).to.have.property('myvalue', true);
-            done();
-          }}
-        />, container);
+        ReactDOM.render(
+          <PropertiesForm
+            types={{ myvalue: "boolean" }}
+            value={{ myvalue: false }}
+            onChange={(value) => {
+              expect(value).to.have.property("myvalue", true);
+              done();
+            }}
+          />,
+          container
+        );
       });
 
-      const input = document.querySelector('input[name=myvalue]');
+      const input = document.querySelector(
+        "input[name=myvalue]"
+      ) as HTMLInputElement;
       input.checked = true;
       ReactTestUtils.Simulate.change(input);
     });
diff --git a/test/settings/components/form/SearchEngineForm.test.tsx b/test/settings/components/form/SearchEngineForm.test.tsx
index b918203..5f835cc 100644
--- a/test/settings/components/form/SearchEngineForm.test.tsx
+++ b/test/settings/components/form/SearchEngineForm.test.tsx
@@ -1,109 +1,146 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import ReactTestRenderer from 'react-test-renderer';
-import ReactTestUtils from 'react-dom/test-utils';
-import SearchForm from 'settings/components/form/SearchForm'
-import { FormSearch } from 'shared/SettingData';
+import React from "react";
+import ReactDOM from "react-dom";
+import ReactTestRenderer from "react-test-renderer";
+import ReactTestUtils from "react-dom/test-utils";
+import SearchForm from "../../../../src/settings/components/form/SearchForm";
+import { FormSearch } from "../../../../src/shared/SettingData";
+import { expect } from "chai";
 
 describe("settings/form/SearchForm", () => {
-  describe('render', () => {
-    it('renders SearchForm', () => {
-      const root = ReactTestRenderer.create(<SearchForm value={FormSearch.fromJSON({
-        default: 'google',
-        engines: [['google', 'google.com'], ['yahoo', 'yahoo.com']],
-      })} />).root;
+  describe("render", () => {
+    it("renders SearchForm", () => {
+      const root = ReactTestRenderer.create(
+        <SearchForm
+          value={FormSearch.fromJSON({
+            default: "google",
+            engines: [
+              ["google", "google.com"],
+              ["yahoo", "yahoo.com"],
+            ],
+          })}
+        />
+      ).root;
 
-      const names = root.findAllByProps({ name: 'name' });
+      const names = root.findAllByProps({ name: "name" });
       expect(names).to.have.lengthOf(2);
-      expect(names[0].props.value).to.equal('google');
-      expect(names[1].props.value).to.equal('yahoo');
+      expect(names[0].props.value).to.equal("google");
+      expect(names[1].props.value).to.equal("yahoo");
 
-      const urls = root.findAllByProps({ name: 'url' });
+      const urls = root.findAllByProps({ name: "url" });
       expect(urls).to.have.lengthOf(2);
-      expect(urls[0].props.value).to.equal('google.com');
-      expect(urls[1].props.value).to.equal('yahoo.com');
+      expect(urls[0].props.value).to.equal("google.com");
+      expect(urls[1].props.value).to.equal("yahoo.com");
     });
   });
 
-  describe('onChange event', () => {
-    let container;
+  describe("onChange event", () => {
+    let container: HTMLDivElement;
 
     beforeEach(() => {
-      container = document.createElement('div');
+      container = document.createElement("div");
       document.body.appendChild(container);
     });
 
     afterEach(() => {
       document.body.removeChild(container);
-      container = null;
     });
 
-    it('invokes onChange event on edit', (done) => {
+    it("invokes onChange event on edit", (done) => {
       ReactTestUtils.act(() => {
-        ReactDOM.render(<SearchForm
-          value={FormSearch.fromJSON({
-            default: 'google',
-              engines: [['google', 'google.com'], ['yahoo', 'yahoo.com']]
-          })}
-          onChange={value => {
-            const json = value.toJSON();
-            expect(json.default).to.equal('louvre');
-            expect(json.engines).to.have.lengthOf(2)
-            expect(json.engines).to.have.deep.members(
-              [['louvre', 'google.com'], ['yahoo', 'yahoo.com']]
-            );
-            done();
-          }} />, container);
+        ReactDOM.render(
+          <SearchForm
+            value={FormSearch.fromJSON({
+              default: "google",
+              engines: [
+                ["google", "google.com"],
+                ["yahoo", "yahoo.com"],
+              ],
+            })}
+            onChange={(value) => {
+              const json = value.toJSON();
+              expect(json.default).to.equal("louvre");
+              expect(json.engines).to.have.lengthOf(2);
+              expect(json.engines).to.have.deep.members([
+                ["louvre", "google.com"],
+                ["yahoo", "yahoo.com"],
+              ]);
+              done();
+            }}
+          />,
+          container
+        );
       });
 
-      const radio = document.querySelectorAll('input[type=radio]');
+      const radio = document.querySelector(
+        "input[type=radio]"
+      ) as HTMLInputElement;
       radio.checked = true;
 
-      const name = document.querySelector('input[name=name]');
-      name.value = 'louvre';
+      const name = document.querySelector(
+        "input[name=name]"
+      ) as HTMLInputElement;
+      name.value = "louvre";
 
       ReactTestUtils.Simulate.change(name);
     });
 
-    it('invokes onChange event on delete', (done) => {
+    it("invokes onChange event on delete", (done) => {
       ReactTestUtils.act(() => {
-        ReactDOM.render(<SearchForm value={FormSearch.fromJSON({
-            default: 'yahoo',
-            engines: [['louvre', 'google.com'], ['yahoo', 'yahoo.com']]
-          })}
-          onChange={value => {
-            const json = value.toJSON();
-            expect(json.default).to.equal('yahoo');
-            expect(json.engines).to.have.lengthOf(1)
-            expect(json.engines).to.have.deep.members(
-              [['yahoo', 'yahoo.com']]
-            );
-            done();
-          }} />, container);
+        ReactDOM.render(
+          <SearchForm
+            value={FormSearch.fromJSON({
+              default: "yahoo",
+              engines: [
+                ["louvre", "google.com"],
+                ["yahoo", "yahoo.com"],
+              ],
+            })}
+            onChange={(value) => {
+              const json = value.toJSON();
+              expect(json.default).to.equal("yahoo");
+              expect(json.engines).to.have.lengthOf(1);
+              expect(json.engines).to.have.deep.members([
+                ["yahoo", "yahoo.com"],
+              ]);
+              done();
+            }}
+          />,
+          container
+        );
       });
 
-      const button = document.querySelector('input[type=button]');
+      const button = document.querySelector(
+        "input[type=button]"
+      ) as HTMLInputElement;
       ReactTestUtils.Simulate.click(button);
     });
 
-    it('invokes onChange event on add', (done) => {
+    it("invokes onChange event on add", (done) => {
       ReactTestUtils.act(() => {
-        ReactDOM.render(<SearchForm value={FormSearch.fromJSON({
-          default: 'yahoo',
-            engines: [['google', 'google.com']]
-          })}
-          onChange={value => {
-            const json = value.toJSON();
-            expect(json.default).to.equal('yahoo');
-            expect(json.engines).to.have.lengthOf(2)
-            expect(json.engines).to.have.deep.members(
-              [['google', 'google.com'], ['', '']],
-            );
-            done();
-          }} />, container);
+        ReactDOM.render(
+          <SearchForm
+            value={FormSearch.fromJSON({
+              default: "yahoo",
+              engines: [["google", "google.com"]],
+            })}
+            onChange={(value) => {
+              const json = value.toJSON();
+              expect(json.default).to.equal("yahoo");
+              expect(json.engines).to.have.lengthOf(2);
+              expect(json.engines).to.have.deep.members([
+                ["google", "google.com"],
+                ["", ""],
+              ]);
+              done();
+            }}
+          />,
+          container
+        );
       });
 
-      const button = document.querySelector('input[type=button].ui-add-button');
+      const button = document.querySelector(
+        "input[type=button].ui-add-button"
+      ) as HTMLInputElement;
       ReactTestUtils.Simulate.click(button);
     });
   });