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

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

1 files changed, 55 insertions, 0 deletions

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);
+  });
+});