From d53f010cc92f1fcb9580ca770766790e783e28a5 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Sun, 16 Aug 2020 17:57:54 +0900 Subject: Fix Completion.test --- .../console/components/console/Completion.test.tsx | 259 +++++++++++++++------ .../components/console/CompletionItem.test.tsx | 21 ++ .../components/console/CompletionTitle.test.tsx | 15 ++ 3 files changed, 225 insertions(+), 70 deletions(-) create mode 100644 test/console/components/console/CompletionItem.test.tsx create mode 100644 test/console/components/console/CompletionTitle.test.tsx (limited to 'test') 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", () => { ).root; - // const children = root.findByType('ul').children as Array; - const children = root.findByType("ul").children as Array; - 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", () => { ).root; - const children = root.findByType("ul").children as Array; - 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", () => { ).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", () => { ).root; - let children = root.findByType("ul").children as Array; - 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( ).root; - children = root.findByType("ul").children as Array; - 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; - 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( ); - - children = root.findByType("ul").children as Array; - 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( ); - - children = root.findByType("ul").children as Array; - 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; - 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( ); - - children = root.findByType("ul").children as Array; - 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( ); - - children = root.findByType("ul").children as Array; - 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( ); - - children = root.findByType("ul").children as Array; - 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( + + ).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( + + ).root; + + const li = root.findByType("li"); + expect(li.children).to.deep.equal(["Fruits"]); + }); +}); -- cgit v1.2.3