Fix Completion.test

3 files changed, 225 insertions, 70 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"]);
+  });
+});