diff options
Diffstat (limited to 'test')
-rw-r--r-- | test/settings/components/form/BlacklistForm.test.tsx | 20 | ||||
-rw-r--r-- | test/settings/components/form/SearchEngineForm.test.tsx | 10 | ||||
-rw-r--r-- | test/settings/components/ui/Radio.test.tsx | 56 | ||||
-rw-r--r-- | test/settings/components/ui/Text.test.tsx | 55 | ||||
-rw-r--r-- | test/settings/components/ui/TextArea.test.tsx | 63 | ||||
-rw-r--r-- | test/settings/components/ui/input.test.tsx | 146 |
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); - }); - }); -}); |