Fix Completion.test

5 files changed, 243 insertions, 92 deletions

diff --git a/e2e/lib/Console.ts b/e2e/lib/Console.ts
index 2c128d1..2d397c6 100644
--- a/e2e/lib/Console.ts
+++ b/e2e/lib/Console.ts
@@ -1,7 +1,11 @@
 import { WebDriver, By, Key } from "selenium-webdriver";
 
+export type CompletionGroups = {
+  name: string;
+  items: Array<CompletionItem>;
+};
+
 export type CompletionItem = {
-  type: string;
   text: string;
   highlight: boolean;
 };
@@ -25,9 +29,7 @@ export class Console {
   }
 
   async execCommand(command: string): Promise<void> {
-    const input = await this.webdriver.findElement(
-      By.css("input.vimvixen-console-command-input")
-    );
+    const input = await this.webdriver.findElement(By.css("input"));
     await input.sendKeys(command, Key.ENTER);
   }
 
@@ -52,27 +54,20 @@ export class Console {
 
   getCompletions(): Promise<CompletionItem[]> {
     return this.webdriver.executeScript(() => {
-      const items = document.querySelectorAll(
-        ".vimvixen-console-completion > li"
-      );
-      if (items.length === 0) {
+      const groups = document.querySelectorAll("[role=group]");
+      if (groups.length === 0) {
         throw new Error("completion items not found");
       }
 
-      const objs = [];
-      for (const li of Array.from(items)) {
-        if (li.classList.contains("vimvixen-console-completion-title")) {
-          objs.push({ type: "title", text: li.textContent!.trim() });
-        } else if (li.classList.contains("vimvixen-console-completion-item")) {
-          const highlight = li.classList.contains(
-            "vimvixen-completion-selected"
-          );
-          objs.push({ type: "item", text: li.textContent!.trim(), highlight });
-        } else {
-          throw new Error(`unexpected class: ${li.className}`);
-        }
-      }
-      return objs;
+      return Array.from(groups).map((group) => ({
+        name: group.textContent!.trim(),
+        items: Array.from(group.querySelectorAll("[role=menuitem]")).map(
+          (item) => ({
+            text: item.textContent!.trim(),
+            highlight: item.getAttribute("aria-selected") === "true",
+          })
+        ),
+      }));
     });
   }
 
diff --git a/src/console/components/console/Completion.tsx b/src/console/components/console/Completion.tsx
index 56c5de3..09ae278 100644
--- a/src/console/components/console/Completion.tsx
+++ b/src/console/components/console/Completion.tsx
@@ -89,6 +89,7 @@ class Completion extends React.Component<Props, State> {
             caption={item.caption}
             url={item.url}
             highlight={itemIndex === this.props.select}
+            aria-selected={itemIndex === this.props.select}
             role="menuitem"
           />
         );
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"]);
+  });
+});