Merge pull request #838 from ueokande/form-styled-components

Use styled-components instead of vanilla CSS/SCSS in option

6 files changed, 191 insertions, 159 deletions

diff --git a/test/settings/components/form/BlacklistForm.test.tsx b/test/settings/components/form/BlacklistForm.test.tsx
index e34802a..8727c59 100644
--- a/test/settings/components/form/BlacklistForm.test.tsx
+++ b/test/settings/components/form/BlacklistForm.test.tsx
@@ -17,16 +17,16 @@ describe("settings/form/BlacklistForm", () => {
         />
       ).root;
 
-      const rows = root.findAllByProps({
-        className: "form-blacklist-form-row",
-      });
+      const rows = root
+        .findAllByType("div")
+        .filter((instance) => instance.props.role === "listitem");
       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(rows[0].findByProps({ name: "url" }).props.value).to.equal(
+        "*.slack.com"
+      );
+      expect(rows[1].findByProps({ name: "url" }).props.value).to.equal(
+        "www.google.com/maps"
+      );
 
       expect(() => root.findByType(AddButton)).not.throw();
     });
@@ -113,7 +113,7 @@ describe("settings/form/BlacklistForm", () => {
       });
 
       const button = document.querySelector(
-        "input[type=button].ui-add-button"
+        "input[type=button][name=add]"
       ) as HTMLButtonElement;
       ReactTestUtils.Simulate.click(button);
     });
diff --git a/test/settings/components/form/SearchEngineForm.test.tsx b/test/settings/components/form/SearchEngineForm.test.tsx
index 5f835cc..7b10274 100644
--- a/test/settings/components/form/SearchEngineForm.test.tsx
+++ b/test/settings/components/form/SearchEngineForm.test.tsx
@@ -21,12 +21,16 @@ describe("settings/form/SearchForm", () => {
         />
       ).root;
 
-      const names = root.findAllByProps({ name: "name" });
+      const names = root
+        .findAllByType("input")
+        .filter((instance) => instance.props.name === "name");
       expect(names).to.have.lengthOf(2);
       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
+        .findAllByType("input")
+        .filter((instance) => instance.props.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");
@@ -139,7 +143,7 @@ describe("settings/form/SearchForm", () => {
       });
 
       const button = document.querySelector(
-        "input[type=button].ui-add-button"
+        "input[type=button][name=add]"
       ) as HTMLInputElement;
       ReactTestUtils.Simulate.click(button);
     });
diff --git a/test/settings/components/ui/Radio.test.tsx b/test/settings/components/ui/Radio.test.tsx
new file mode 100644
index 0000000..f929ee3
--- /dev/null
+++ b/test/settings/components/ui/Radio.test.tsx
@@ -0,0 +1,56 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import ReactTestUtils from "react-dom/test-utils";
+import Radio from "../../../../src/settings/components/ui/Radio";
+import { expect } from "chai";
+
+describe("settings/ui/Radio", () => {
+  let container: HTMLDivElement;
+
+  beforeEach(() => {
+    container = document.createElement("div");
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+  });
+
+  it("renders radio button", () => {
+    ReactTestUtils.act(() => {
+      ReactDOM.render(
+        <Radio name="myradio" label="myfield" value="myvalue" />,
+        container
+      );
+    });
+
+    const label = document.querySelector("label")!;
+    const input = document.querySelector("input")!;
+    expect(label.textContent).to.contain("myfield");
+    expect(input.type).to.contain("radio");
+    expect(input.name).to.contain("myradio");
+    expect(input.value).to.contain("myvalue");
+  });
+
+  it("invoke onChange", (done) => {
+    ReactTestUtils.act(() => {
+      ReactDOM.render(
+        <Radio
+          name="myradio"
+          type="text"
+          label="myfield"
+          value="myvalue"
+          onChange={(e) => {
+            expect((e.target as HTMLInputElement).checked).to.be.true;
+            done();
+          }}
+        />,
+        container
+      );
+    });
+
+    const input = document.querySelector("input") as HTMLInputElement;
+    input.checked = true;
+    ReactTestUtils.Simulate.change(input);
+  });
+});
diff --git a/test/settings/components/ui/Text.test.tsx b/test/settings/components/ui/Text.test.tsx
new file mode 100644
index 0000000..d5451bb
--- /dev/null
+++ b/test/settings/components/ui/Text.test.tsx
@@ -0,0 +1,55 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import ReactTestUtils from "react-dom/test-utils";
+import Text from "../../../../src/settings/components/ui/Text";
+import { expect } from "chai";
+
+describe("settings/ui/Text", () => {
+  let container: HTMLDivElement;
+
+  beforeEach(() => {
+    container = document.createElement("div");
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+  });
+
+  it("renders text input", () => {
+    ReactTestUtils.act(() => {
+      ReactDOM.render(
+        <Text name="myname" label="myfield" value="myvalue" />,
+        container
+      );
+    });
+
+    const label = document.querySelector("label")!;
+    const 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) => {
+    ReactTestUtils.act(() => {
+      ReactDOM.render(
+        <Text
+          name="myname"
+          label="myfield"
+          value="myvalue"
+          onChange={(e) => {
+            expect((e.target as HTMLInputElement).value).to.equal("newvalue");
+            done();
+          }}
+        />,
+        container
+      );
+    });
+
+    const input = document.querySelector("input")!;
+    input.value = "newvalue";
+    ReactTestUtils.Simulate.change(input);
+  });
+});
diff --git a/test/settings/components/ui/TextArea.test.tsx b/test/settings/components/ui/TextArea.test.tsx
new file mode 100644
index 0000000..232c7c0
--- /dev/null
+++ b/test/settings/components/ui/TextArea.test.tsx
@@ -0,0 +1,63 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import ReactTestUtils from "react-dom/test-utils";
+import TextArea from "../../../../src/settings/components/ui/TextArea";
+import { expect } from "chai";
+
+describe("settings/ui/TextArea", () => {
+  let container: HTMLDivElement;
+
+  beforeEach(() => {
+    container = document.createElement("div");
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+  });
+
+  it("renders textarea", () => {
+    ReactTestUtils.act(() => {
+      ReactDOM.render(
+        <TextArea
+          type="textarea"
+          name="myname"
+          label="myfield"
+          value="myvalue"
+          error="myerror"
+        />,
+        container
+      );
+    });
+
+    const label = document.querySelector("label")!;
+    const textarea = document.querySelector("textarea")!;
+    const error = document.querySelector("[role=alert]")!;
+    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) => {
+    ReactTestUtils.act(() => {
+      ReactDOM.render(
+        <TextArea
+          name="myname"
+          label="myfield"
+          value="myvalue"
+          onChange={(e) => {
+            expect((e.target as HTMLInputElement).value).to.equal("newvalue");
+            done();
+          }}
+        />,
+        container
+      );
+    });
+
+    const input = document.querySelector("textarea")!;
+    input.value = "newvalue";
+    ReactTestUtils.Simulate.change(input);
+  });
+});
diff --git a/test/settings/components/ui/input.test.tsx b/test/settings/components/ui/input.test.tsx
deleted file mode 100644
index d244d8f..0000000
--- a/test/settings/components/ui/input.test.tsx
+++ /dev/null
@@ -1,146 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import ReactTestUtils from "react-dom/test-utils";
-import Input from "../../../../src/settings/components/ui/Input";
-import { expect } from "chai";
-
-describe("settings/ui/Input", () => {
-  let container: HTMLDivElement;
-
-  beforeEach(() => {
-    container = document.createElement("div");
-    document.body.appendChild(container);
-  });
-
-  afterEach(() => {
-    document.body.removeChild(container);
-  });
-
-  context("type=text", () => {
-    it("renders text input", () => {
-      ReactTestUtils.act(() => {
-        ReactDOM.render(
-          <Input type="text" name="myname" label="myfield" value="myvalue" />,
-          container
-        );
-      });
-
-      const label = document.querySelector("label")!;
-      const 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) => {
-      ReactTestUtils.act(() => {
-        ReactDOM.render(
-          <Input
-            type="text"
-            name="myname"
-            label="myfield"
-            value="myvalue"
-            onChange={(e) => {
-              expect((e.target as HTMLInputElement).value).to.equal("newvalue");
-              done();
-            }}
-          />,
-          container
-        );
-      });
-
-      const input = document.querySelector("input")!;
-      input.value = "newvalue";
-      ReactTestUtils.Simulate.change(input);
-    });
-  });
-
-  context("type=radio", () => {
-    it("renders radio button", () => {
-      ReactTestUtils.act(() => {
-        ReactDOM.render(
-          <Input type="radio" name="myname" label="myfield" value="myvalue" />,
-          container
-        );
-      });
-
-      const label = document.querySelector("label")!;
-      const 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) => {
-      ReactTestUtils.act(() => {
-        ReactDOM.render(
-          <Input
-            type="text"
-            name="radio"
-            label="myfield"
-            value="myvalue"
-            onChange={(e) => {
-              expect((e.target as HTMLInputElement).checked).to.be.true;
-              done();
-            }}
-          />,
-          container
-        );
-      });
-
-      const input = document.querySelector("input") as HTMLInputElement;
-      input.checked = true;
-      ReactTestUtils.Simulate.change(input);
-    });
-  });
-
-  context("type=textarea", () => {
-    it("renders textarea button", () => {
-      ReactTestUtils.act(() => {
-        ReactDOM.render(
-          <Input
-            type="textarea"
-            name="myname"
-            label="myfield"
-            value="myvalue"
-            error="myerror"
-          />,
-          container
-        );
-      });
-
-      const label = document.querySelector("label")!;
-      const textarea = document.querySelector("textarea")!;
-      const 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) => {
-      ReactTestUtils.act(() => {
-        ReactDOM.render(
-          <Input
-            type="textarea"
-            name="myname"
-            label="myfield"
-            value="myvalue"
-            onChange={(e) => {
-              expect((e.target as HTMLInputElement).value).to.equal("newvalue");
-              done();
-            }}
-          />,
-          container
-        );
-      });
-
-      const input = document.querySelector("textarea")!;
-      input.value = "newvalue";
-      ReactTestUtils.Simulate.change(input);
-    });
-  });
-});