1 files changed, 80 insertions, 54 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);
     });
   });