aboutsummaryrefslogtreecommitdiff
path: root/test/settings/components
diff options
context:
space:
mode:
Diffstat (limited to 'test/settings/components')
-rw-r--r--test/settings/components/form/BlacklistForm.test.tsx20
-rw-r--r--test/settings/components/form/SearchEngineForm.test.tsx10
-rw-r--r--test/settings/components/ui/Radio.test.tsx56
-rw-r--r--test/settings/components/ui/Text.test.tsx55
-rw-r--r--test/settings/components/ui/TextArea.test.tsx63
-rw-r--r--test/settings/components/ui/input.test.tsx146
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);
- });
- });
-});
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-16 16:45:03 +0000