diff options
Diffstat (limited to 'test')
-rw-r--r-- | test/console/components/console/Completion.test.tsx | 259 | ||||
-rw-r--r-- | test/console/components/console/CompletionItem.test.tsx | 21 | ||||
-rw-r--r-- | test/console/components/console/CompletionTitle.test.tsx | 15 | ||||
-rw-r--r-- | test/console/components/console/Message.test.tsx | 27 | ||||
-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 |
10 files changed, 443 insertions, 229 deletions
diff --git a/test/console/components/console/Completion.test.tsx b/test/console/components/console/Completion.test.tsx index 921720b..0e4e21f 100644 --- a/test/console/components/console/Completion.test.tsx +++ b/test/console/components/console/Completion.test.tsx @@ -1,11 +1,11 @@ import React from "react"; import Completion from "../../../../src/console/components/console/Completion"; -import ReactTestRenderer, { ReactTestInstance } from "react-test-renderer"; +import ReactTestRenderer from "react-test-renderer"; import { expect } from "chai"; import CompletionTitle from "../../../../src/console/components/console/CompletionTitle"; import CompletionItem from "../../../../src/console/components/console/CompletionItem"; -describe("console/components/console/completion", () => { +describe("console/components/console/completion/Completion", () => { const completions = [ { name: "Fruit", @@ -30,27 +30,19 @@ describe("console/components/console/completion", () => { <Completion completions={completions} size={30} select={-1} /> ).root; - // const children = root.findByType('ul').children as Array<ReactTestInstance>; - const children = root.findByType("ul").children as Array<ReactTestInstance>; - expect(children).to.have.lengthOf(8); - expect(children.map((e) => e.type)).to.deep.equal([ - CompletionTitle, - CompletionItem, - CompletionItem, - CompletionItem, - CompletionTitle, - CompletionItem, - CompletionItem, - CompletionItem, - ]); - expect(children[0].props.title).to.equal("Fruit"); - expect(children[1].props.caption).to.equal("apple"); - expect(children[2].props.caption).to.equal("banana"); - expect(children[3].props.caption).to.equal("cherry"); - expect(children[4].props.title).to.equal("Element"); - expect(children[5].props.caption).to.equal("argon"); - expect(children[6].props.caption).to.equal("boron"); - expect(children[7].props.caption).to.equal("carbon"); + const groups = root.findAllByProps({ role: "group" }); + expect(groups).to.have.lengthOf(2); + + groups.forEach((group, i) => { + const title = group.findByType(CompletionTitle); + expect(title.props.title).to.equal(completions[i].name); + + const items = group.findAllByType(CompletionItem); + expect(items).to.have.lengthOf(completions[i].items.length); + items.forEach((item, j) => { + expect(item.props.caption).to.equal(completions[i].items[j].caption); + }); + }); }); it("highlight current item", () => { @@ -58,8 +50,8 @@ describe("console/components/console/completion", () => { <Completion completions={completions} size={30} select={3} /> ).root; - const children = root.findByType("ul").children as Array<ReactTestInstance>; - expect(children[5].props.highlight).to.be.true; + const items = root.findAllByType(CompletionItem); + expect(items[3].props.highlight).to.be.true; }); it("does not highlight any items", () => { @@ -67,8 +59,8 @@ describe("console/components/console/completion", () => { <Completion completions={completions} size={30} select={-1} /> ).root; - const children = root.findByType("ul").findAllByType(CompletionItem); - expect(children.every((e) => e.props.highlight === false)).to.be.true; + const items = root.findAllByType(CompletionItem); + expect(items.every((item) => item.props.highlight === false)).to.be.true; }); it("limits completion items", () => { @@ -76,19 +68,35 @@ describe("console/components/console/completion", () => { <Completion completions={completions} size={3} select={-1} /> ).root; - let children = root.findByType("ul").children as Array<ReactTestInstance>; - expect(children).to.have.lengthOf(3); + const showns = root + .findAllByProps({ role: "group" }) + .map((group) => + [ + group.findByType(CompletionTitle).props.shown, + group.findAllByType(CompletionItem).map((item) => item.props.shown), + ].flat() + ) + .flat(); - expect(children[0].props.title).to.equal("Fruit"); - expect(children[1].props.caption).to.equal("apple"); - expect(children[2].props.caption).to.equal("banana"); + expect(showns).to.deep.equal([ + true, + true, + true, + false, + false, + false, + false, + false, + ]); root = ReactTestRenderer.create( <Completion completions={completions} size={3} select={0} /> ).root; - children = root.findByType("ul").children as Array<ReactTestInstance>; - expect(children[1].props.highlight).to.be.true; + const items = root + .findAllByType(CompletionItem) + .map((item) => item.props.shown); + expect(items[1]).to.be.true; }); it("scrolls up to down with select", () => { @@ -97,33 +105,76 @@ describe("console/components/console/completion", () => { ); const root = component.root; - let children = root.findByType("ul").children as Array<ReactTestInstance>; - expect(children).to.have.lengthOf(3); - expect(children[0].props.title).to.equal("Fruit"); - expect(children[1].props.caption).to.equal("apple"); - expect(children[2].props.caption).to.equal("banana"); + let items = root.findAllByType(CompletionItem); + let showns = root + .findAllByProps({ role: "group" }) + .map((group) => + [ + group.findByType(CompletionTitle).props.shown, + group.findAllByType(CompletionItem).map((item) => item.props.shown), + ].flat() + ) + .flat(); + expect(showns).to.deep.equal([ + true, + true, + true, + false, + false, + false, + false, + false, + ]); component.update( <Completion completions={completions} size={3} select={2} /> ); - - children = root.findByType("ul").children as Array<ReactTestInstance>; - expect(children).to.have.lengthOf(3); - expect(children[0].props.caption).to.equal("apple"); - expect(children[1].props.caption).to.equal("banana"); - expect(children[2].props.caption).to.equal("cherry"); - expect(children[2].props.highlight).to.be.true; + items = root.findAllByType(CompletionItem); + showns = root + .findAllByProps({ role: "group" }) + .map((group) => + [ + group.findByType(CompletionTitle).props.shown, + group.findAllByType(CompletionItem).map((item) => item.props.shown), + ].flat() + ) + .flat(); + expect(showns).to.deep.equal([ + false, + true, + true, + true, + false, + false, + false, + false, + ]); + expect(items[2].props.highlight).to.be.true; component.update( <Completion completions={completions} size={3} select={3} /> ); - - children = root.findByType("ul").children as Array<ReactTestInstance>; - expect(children).to.have.lengthOf(3); - expect(children[0].props.caption).to.equal("cherry"); - expect(children[1].props.title).to.equal("Element"); - expect(children[2].props.caption).to.equal("argon"); - expect(children[2].props.highlight).to.be.true; + items = root.findAllByType(CompletionItem); + showns = root + .findAllByProps({ role: "group" }) + .map((group) => + [ + group.findByType(CompletionTitle).props.shown, + group.findAllByType(CompletionItem).map((item) => item.props.shown), + ].flat() + ) + .flat(); + expect(showns).to.deep.equal([ + false, + false, + false, + true, + true, + true, + false, + false, + ]); + expect(items[3].props.highlight).to.be.true; }); it("scrolls down to up with select", () => { @@ -132,34 +183,102 @@ describe("console/components/console/completion", () => { ); const root = component.root; - let children = root.findByType("ul").children as Array<ReactTestInstance>; - expect(children).to.have.lengthOf(3); - expect(children[0].props.caption).to.equal("argon"); - expect(children[1].props.caption).to.equal("boron"); - expect(children[2].props.caption).to.equal("carbon"); + let items = root.findAllByType(CompletionItem); + let showns = root + .findAllByProps({ role: "group" }) + .map((group) => + [ + group.findByType(CompletionTitle).props.shown, + group.findAllByType(CompletionItem).map((item) => item.props.shown), + ].flat() + ) + .flat(); + + expect(showns).to.deep.equal([ + false, + false, + false, + false, + false, + true, + true, + true, + ]); + expect(items[5].props.highlight).to.be.true; component.update( <Completion completions={completions} size={3} select={4} /> ); - - children = root.findByType("ul").children as Array<ReactTestInstance>; - expect(children[1].props.highlight).to.be.true; + items = root.findAllByType(CompletionItem); + showns = root + .findAllByProps({ role: "group" }) + .map((group) => + [ + group.findByType(CompletionTitle).props.shown, + group.findAllByType(CompletionItem).map((item) => item.props.shown), + ].flat() + ) + .flat(); + expect(showns).to.deep.equal([ + false, + false, + false, + false, + false, + true, + true, + true, + ]); + expect(items[4].props.highlight).to.be.true; component.update( <Completion completions={completions} size={3} select={3} /> ); - - children = root.findByType("ul").children as Array<ReactTestInstance>; - expect(children[0].props.highlight).to.be.true; + items = root.findAllByType(CompletionItem); + showns = root + .findAllByProps({ role: "group" }) + .map((group) => + [ + group.findByType(CompletionTitle).props.shown, + group.findAllByType(CompletionItem).map((item) => item.props.shown), + ].flat() + ) + .flat(); + expect(showns).to.deep.equal([ + false, + false, + false, + false, + false, + true, + true, + true, + ]); + expect(items[3].props.highlight).to.be.true; component.update( <Completion completions={completions} size={3} select={2} /> ); - - children = root.findByType("ul").children as Array<ReactTestInstance>; - expect(children[0].props.caption).to.equal("cherry"); - expect(children[1].props.title).to.equal("Element"); - expect(children[2].props.caption).to.equal("argon"); - expect(children[0].props.highlight).to.be.true; + items = root.findAllByType(CompletionItem); + showns = root + .findAllByProps({ role: "group" }) + .map((group) => + [ + group.findByType(CompletionTitle).props.shown, + group.findAllByType(CompletionItem).map((item) => item.props.shown), + ].flat() + ) + .flat(); + expect(showns).to.deep.equal([ + false, + false, + false, + true, + true, + true, + false, + false, + ]); + expect(items[2].props.highlight).to.be.true; }); }); diff --git a/test/console/components/console/CompletionItem.test.tsx b/test/console/components/console/CompletionItem.test.tsx new file mode 100644 index 0000000..3a4b1f2 --- /dev/null +++ b/test/console/components/console/CompletionItem.test.tsx @@ -0,0 +1,21 @@ +import React from "react"; +import ReactTestRenderer from "react-test-renderer"; +import { expect } from "chai"; +import CompletionItem from "../../../../src/console/components/console/CompletionItem"; + +describe("console/components/console/completion/CompletionItem", () => { + it("renders a CompletionItem", () => { + const root = ReactTestRenderer.create( + <CompletionItem + shown={true} + highlight={false} + caption="twitter" + url="https://twitter.com/" + /> + ).root; + const spans = root.findAllByType("span"); + expect(spans).to.have.lengthOf(2); + expect(spans[0].children).to.deep.equal(["twitter"]); + expect(spans[1].children).to.deep.equal(["https://twitter.com/"]); + }); +}); diff --git a/test/console/components/console/CompletionTitle.test.tsx b/test/console/components/console/CompletionTitle.test.tsx new file mode 100644 index 0000000..d8cc411 --- /dev/null +++ b/test/console/components/console/CompletionTitle.test.tsx @@ -0,0 +1,15 @@ +import React from "react"; +import ReactTestRenderer from "react-test-renderer"; +import { expect } from "chai"; +import CompletionTitle from "../../../../src/console/components/console/CompletionTitle"; + +describe("console/components/console/completion/CompletionTitle", () => { + it("renders a CompletionTitle", () => { + const root = ReactTestRenderer.create( + <CompletionTitle title="Fruits" shown={true} /> + ).root; + + const li = root.findByType("li"); + expect(li.children).to.deep.equal(["Fruits"]); + }); +}); diff --git a/test/console/components/console/Message.test.tsx b/test/console/components/console/Message.test.tsx new file mode 100644 index 0000000..f8f950a --- /dev/null +++ b/test/console/components/console/Message.test.tsx @@ -0,0 +1,27 @@ +import React from "react"; +import ReactTestRenderer from "react-test-renderer"; +import { expect } from "chai"; +import Message from "../../../../src/console/components/console/Message"; + +describe("console/components/console/completion/Message", () => { + it("renders an information message", () => { + const root = ReactTestRenderer.create(<Message mode="info">Hello!</Message>) + .root; + + const p = root.findByType("p"); + + expect(p.props["role"]).to.equal("status"); + expect(p.children).to.deep.equal(["Hello!"]); + }); + + it("renders an error message", () => { + const root = ReactTestRenderer.create( + <Message mode="error">Hello!</Message> + ).root; + + const p = root.findByType("p"); + + expect(p.props["role"]).to.equal("alert"); + expect(p.children).to.deep.equal(["Hello!"]); + }); +}); 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); - }); - }); -}); |