Merge pull request #576 from ueokande/move-to-react

Move to React

9 files changed, 438 insertions, 342 deletions

diff --git a/test/settings/components/form/BlacklistForm.test.jsx b/test/settings/components/form/BlacklistForm.test.jsx
new file mode 100644
index 0000000..2be5d96
--- /dev/null
+++ b/test/settings/components/form/BlacklistForm.test.jsx
@@ -0,0 +1,92 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import ReactTestRenderer from 'react-test-renderer';
+import ReactTestUtils from 'react-dom/test-utils';
+import BlacklistForm from 'settings/components/form/BlacklistForm'
+
+describe("settings/form/BlacklistForm", () => {
+  describe('render', () => {
+    it('renders BlacklistForm', () => {
+      let root = ReactTestRenderer.create(
+        <BlacklistForm value={['*.slack.com', 'www.google.com/maps']} />,
+      ).root;
+
+      let 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');
+    });
+
+    it('renders blank value', () => {
+      let root = ReactTestRenderer.create(<BlacklistForm />).root;
+
+      let children = root.children[0].children;
+      expect(children).to.have.lengthOf(1);
+      expect(children[0].props.name).to.equal('add');
+    });
+  });
+
+  describe('onChange', () => {
+    let container;
+
+    beforeEach(() => {
+      container = document.createElement('div');
+      document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+      document.body.removeChild(container);
+      container = null;
+    });
+
+    it('invokes onChange event on edit', (done) => {
+      ReactTestUtils.act(() => {
+        ReactDOM.render(<BlacklistForm
+          value={['*.slack.com', 'www.google.com/maps*']}
+          onChange={value => {
+            expect(value).to.have.lengthOf(2);
+            expect(value).to.have.members(['gitter.im', 'www.google.com/maps*']);
+            done();
+          }}
+        />, container)
+      });
+
+      let input = document.querySelectorAll('input[type=text]')[0];
+      input.value = 'gitter.im';
+      ReactTestUtils.Simulate.change(input);
+    });
+
+    it('invokes onChange event on delete', (done) => {
+      ReactTestUtils.act(() => {
+        ReactDOM.render(<BlacklistForm
+          value={['*.slack.com', 'www.google.com/maps*']}
+          onChange={value => {
+            expect(value).to.have.lengthOf(1);
+            expect(value).to.have.members(['www.google.com/maps*']);
+            done();
+          }}
+        />, container)
+      });
+
+      let button = document.querySelectorAll('input[type=button]')[0];
+      ReactTestUtils.Simulate.click(button);
+    });
+
+    it('invokes onChange event on add', (done) => {
+      ReactTestUtils.act(() => {
+        ReactDOM.render(<BlacklistForm
+          value={['*.slack.com']}
+          onChange={value => {
+            expect(value).to.have.lengthOf(2);
+            expect(value).to.have.members(['*.slack.com', '']);
+            done();
+          }}
+        />, container);
+      });
+
+      let button = document.querySelector('input[type=button].ui-add-button');
+      ReactTestUtils.Simulate.click(button);
+    });
+  });
+});
diff --git a/test/settings/components/form/KeymapsForm.test.jsx b/test/settings/components/form/KeymapsForm.test.jsx
new file mode 100644
index 0000000..6ac57c9
--- /dev/null
+++ b/test/settings/components/form/KeymapsForm.test.jsx
@@ -0,0 +1,64 @@
+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 'settings/components/form/KeymapsForm'
+
+describe("settings/form/KeymapsForm", () => {
+  describe('render', () => {
+    it('renders keymap fields', () => {
+      let root = ReactTestRenderer.create(<KeymapsForm value={{
+        'scroll.vertically?{"count":1}': 'j',
+        'scroll.vertically?{"count":-1}': 'k',
+      }} />).root
+
+      let inputj = root.findByProps({ id: 'scroll.vertically?{"count":1}' });
+      let inputk = root.findByProps({ id: 'scroll.vertically?{"count":-1}' });
+
+      expect(inputj.props.value).to.equal('j');
+      expect(inputk.props.value).to.equal('k');
+    });
+
+    it('renders blank value', () => {
+      let root = ReactTestRenderer.create(<KeymapsForm />).root;
+
+      let inputj = root.findByProps({ id: 'scroll.vertically?{"count":1}' });
+      let inputk = root.findByProps({ id: 'scroll.vertically?{"count":-1}' });
+
+      expect(inputj.props.value).to.be.empty;
+      expect(inputk.props.value).to.be.empty;
+    });
+  });
+
+  describe('onChange event', () => {
+    let container;
+
+    beforeEach(() => {
+      container = document.createElement('div');
+      document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+      document.body.removeChild(container);
+      container = null;
+    });
+
+    it('invokes onChange event on edit', (done) => {
+      ReactTestUtils.act(() => {
+        ReactDOM.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();
+          }} />, container);
+      });
+
+      let input = document.getElementById('scroll.vertically?{"count":1}');
+      input.value = 'jjj';
+      ReactTestUtils.Simulate.change(input);
+    });
+  });
+});
diff --git a/test/settings/components/form/PropertiesForm.test.jsx b/test/settings/components/form/PropertiesForm.test.jsx
new file mode 100644
index 0000000..80f60d2
--- /dev/null
+++ b/test/settings/components/form/PropertiesForm.test.jsx
@@ -0,0 +1,104 @@
+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'
+
+describe("settings/form/PropertiesForm", () => {
+  describe('render', () => {
+    it('renders PropertiesForm', () => {
+      let types = {
+        mystr: 'string',
+        mynum: 'number',
+        mybool: 'boolean',
+        empty: 'string',
+      }
+      let value = {
+        mystr: 'abc',
+        mynum: 123,
+        mybool: true,
+      };
+
+      let root = ReactTestRenderer.create(
+        <PropertiesForm types={types} value={value} />,
+      ).root
+
+      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');
+      expect(input.props.value).to.equal(123);
+
+      input = root.findByProps({ name: 'mybool' });
+      expect(input.props.type).to.equals('checkbox');
+      expect(input.props.value).to.equal(true);
+    });
+  });
+
+  describe('onChange', () => {
+    let container;
+
+    beforeEach(() => {
+      container = document.createElement('div');
+      document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+      document.body.removeChild(container);
+      container = null;
+    });
+
+    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);
+      });
+
+      let input = document.querySelector('input[name=myvalue]');
+      input.value = 'abcd'
+      ReactTestUtils.Simulate.change(input);
+    });
+
+    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);
+      });
+
+      let input = document.querySelector('input[name=myvalue]');
+      input.value = '1234'
+      ReactTestUtils.Simulate.change(input);
+    });
+
+    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);
+      });
+
+      let input = document.querySelector('input[name=myvalue]');
+      input.checked = true;
+      ReactTestUtils.Simulate.change(input);
+    });
+  });
+});
diff --git a/test/settings/components/form/SearchEngineForm.test.jsx b/test/settings/components/form/SearchEngineForm.test.jsx
new file mode 100644
index 0000000..06822f2
--- /dev/null
+++ b/test/settings/components/form/SearchEngineForm.test.jsx
@@ -0,0 +1,128 @@
+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'
+
+describe("settings/form/SearchForm", () => {
+  describe('render', () => {
+    it('renders SearchForm', () => {
+      let root = ReactTestRenderer.create(<SearchForm value={{
+        default: 'google',
+        engines: [['google', 'google.com'], ['yahoo', 'yahoo.com']],
+      }} />).root;
+
+      let 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');
+
+      let 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');
+    });
+
+    it('renders blank value', () => {
+      let root = ReactTestRenderer.create(<SearchForm />).root;
+
+      let names = root.findAllByProps({ name: 'name' });
+      expect(names).to.be.empty;
+
+      let urls = root.findAllByProps({ name: 'url' });
+      expect(urls).to.be.empty;
+    });
+
+    it('renders blank engines', () => {
+      let root = ReactTestRenderer.create(
+        <SearchForm value={{ default: 'google' }} />,
+      ).root;
+
+      let names = root.findAllByProps({ name: 'name' });
+      expect(names).to.be.empty;
+
+      let urls = root.findAllByProps({ name: 'url' });
+      expect(urls).to.be.empty;
+    });
+  });
+
+  describe('onChange event', () => {
+    let container;
+
+    beforeEach(() => {
+      container = document.createElement('div');
+      document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+      document.body.removeChild(container);
+      container = null;
+    });
+
+    it('invokes onChange event on edit', (done) => {
+      ReactTestUtils.act(() => {
+        ReactDOM.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)
+            expect(value.engines).to.have.deep.members(
+              [['louvre', 'google.com'], ['yahoo', 'yahoo.com']]
+            );
+            done();
+          }} />, container);
+      });
+
+      let radio = document.querySelectorAll('input[type=radio]');
+      radio.checked = true;
+
+      let name = document.querySelector('input[name=name]');
+      name.value = 'louvre';
+
+      ReactTestUtils.Simulate.change(name);
+    });
+
+    it('invokes onChange event on delete', (done) => {
+      ReactTestUtils.act(() => {
+        ReactDOM.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)
+            expect(value.engines).to.have.deep.members(
+              [['yahoo', 'yahoo.com']]
+            );
+            done();
+          }} />, container);
+      });
+
+      let button = document.querySelector('input[type=button]');
+      ReactTestUtils.Simulate.click(button);
+    });
+
+    it('invokes onChange event on add', (done) => {
+      ReactTestUtils.act(() => {
+        ReactDOM.render(<SearchForm value={{
+          default: 'yahoo',
+            engines: [['google', 'google.com']]
+          }}
+          onChange={value => {
+            expect(value.default).to.equal('yahoo');
+            expect(value.engines).to.have.lengthOf(2)
+            expect(value.engines).to.have.deep.members(
+              [['google', 'google.com'], ['', '']],
+            );
+            done();
+          }} />, container);
+      });
+
+      let button = document.querySelector('input[type=button].ui-add-button');
+      ReactTestUtils.Simulate.click(button);
+    });
+  });
+});
diff --git a/test/settings/components/form/blacklist-form.test.jsx b/test/settings/components/form/blacklist-form.test.jsx
deleted file mode 100644
index 1c46943..0000000
--- a/test/settings/components/form/blacklist-form.test.jsx
+++ /dev/null
@@ -1,81 +0,0 @@
-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
deleted file mode 100644
index 55edf8c..0000000
--- a/test/settings/components/form/keymaps-form.test.jsx
+++ /dev/null
@@ -1,52 +0,0 @@
-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/properties-form.test.jsx b/test/settings/components/form/properties-form.test.jsx
deleted file mode 100644
index 0efe382..0000000
--- a/test/settings/components/form/properties-form.test.jsx
+++ /dev/null
@@ -1,85 +0,0 @@
-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();
-    });
-  });
-});
diff --git a/test/settings/components/form/search-engine-form.test.jsx b/test/settings/components/form/search-engine-form.test.jsx
deleted file mode 100644
index c52419d..0000000
--- a/test/settings/components/form/search-engine-form.test.jsx
+++ /dev/null
@@ -1,103 +0,0 @@
-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();
-    });
-  });
-});
diff --git a/test/settings/components/ui/input.test.jsx b/test/settings/components/ui/input.test.jsx
index 0711bba..432efcb 100644
--- a/test/settings/components/ui/input.test.jsx
+++ b/test/settings/components/ui/input.test.jsx
@@ -1,14 +1,28 @@
-import { h, render } from 'preact';
-import Input from 'settings/components/ui/input'
+import React from 'react';
+import ReactDOM from 'react-dom';
+import ReactTestUtils from 'react-dom/test-utils';
+import Input from 'settings/components/ui/Input'
 
 describe("settings/ui/Input", () => {
+  let container;
+
   beforeEach(() => {
-    document.body.innerHTML = '';
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    container = null;
   });
 
   context("type=text", () => {
     it('renders text input', () => {
-      render(<Input type='text' name='myname' label='myfield' value='myvalue'/>, document.body)
+      ReactTestUtils.act(() => {
+        ReactDOM.render(
+          <Input type='text' name='myname' label='myfield' value='myvalue'/>,
+          container);
+      });
 
       let label = document.querySelector('label');
       let input = document.querySelector('input');
@@ -19,20 +33,26 @@ describe("settings/ui/Input", () => {
     });
 
     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);
+      ReactTestUtils.act(() => {
+        ReactDOM.render(<Input type='text' name='myname' label='myfield' value='myvalue' onChange={(e) => {
+          expect(e.target.value).to.equal('newvalue');
+          done();
+        }}/>, container);
+      });
 
       let input = document.querySelector('input');
       input.value = 'newvalue';
-      input.dispatchEvent(new Event('change'))
+      ReactTestUtils.Simulate.change(input);
     });
   });
 
   context("type=radio", () => {
     it('renders radio button', () => {
-      render(<Input type='radio' name='myname' label='myfield' value='myvalue'/>, document.body)
+      ReactTestUtils.act(() => {
+        ReactDOM.render(
+          <Input type='radio' name='myname' label='myfield' value='myvalue'/>,
+          container);
+      });
 
       let label = document.querySelector('label');
       let input = document.querySelector('input');
@@ -43,20 +63,27 @@ describe("settings/ui/Input", () => {
     });
 
     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);
+      ReactTestUtils.act(() => {
+        ReactDOM.render(<Input type='text' name='radio' label='myfield' value='myvalue' onChange={(e) => {
+          expect(e.target.checked).to.be.true;
+          done();
+        }}/>,
+        container);
+      });
 
       let input = document.querySelector('input');
       input.checked = true;
-      input.dispatchEvent(new Event('change'))
+      ReactTestUtils.Simulate.change(input);
     });
   });
 
   context("type=textarea", () => {
     it('renders textarea button', () => {
-      render(<Input type='textarea' name='myname' label='myfield' value='myvalue' error='myerror' />, document.body)
+      ReactTestUtils.act(() => {
+        ReactDOM.render(
+          <Input type='textarea' name='myname' label='myfield' value='myvalue' error='myerror' />,
+          container);
+      });
 
       let label = document.querySelector('label');
       let textarea = document.querySelector('textarea');
@@ -69,14 +96,16 @@ describe("settings/ui/Input", () => {
     });
 
     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);
+      ReactTestUtils.act(() => {
+        ReactDOM.render(<Input type='textarea' name='myname' label='myfield' value='myvalue' onChange={(e) => {
+          expect(e.target.value).to.equal('newvalue');
+          done();
+        }}/>, container);
+      });
 
       let input = document.querySelector('textarea');
       input.value = 'newvalue'
-      input.dispatchEvent(new Event('change'))
+      ReactTestUtils.Simulate.change(input);
     });
   });
 });