Update tests

web/app/components/header/toolbar.hbs

@@ -7,6 +7,7 @@
         </h4>
         <ol class="facets flex w-full items-center">
           {{#each this.facets as |facet|}}
+            {{log "facet" facet}}
             <li class="shrink-0">
               <Header::FacetDropdown
                 data-test-facet={{facet.name}}

web/app/components/header/toolbar.ts

@@ -152,19 +152,24 @@ export default class ToolbarComponent extends Component<ToolbarComponentSignatur
     let facetArray: FacetArrayItem[] = [];
 
     Object.entries(this.args.facets).forEach(([key, value]) => {
-      // Sort the values alphabetically
       const name = key as FacetName;
-      const values = Object.fromEntries(Object.entries(value).sort());
 
-      switch (key) {
+      // Sort the values alphabetically
+      const values = value
+        ? Object.fromEntries(Object.entries(value).sort())
+        : null;
+
+      switch (name) {
         case FacetName.Owners:
           // We handle this with a text input
           break;
         case FacetName.Status:
-          facetArray.push({
-            name,
-            values: this.statuses,
-          });
+          if (values) {
+            facetArray.push({
+              name,
+              values: this.statuses,
+            });
+          }
           break;
         default:
           facetArray.push({
@@ -175,7 +180,12 @@ export default class ToolbarComponent extends Component<ToolbarComponentSignatur
       }
     });
 
-    const order = ["docType", "status", "product", "owners"];
+    const order = [
+      FacetName.DocType,
+      FacetName.Status,
+      FacetName.Product,
+      FacetName.Owners,
+    ];
 
     facetArray.sort((a, b) => {
       return order.indexOf(a.name) - order.indexOf(b.name);

web/mirage/config.ts

@@ -6,6 +6,7 @@ import algoliaHosts from "./algolia/hosts";
 import { ProjectStatus } from "hermes/types/project-status";
 import { HITS_PER_PAGE } from "hermes/services/algolia";
 import { assert as emberAssert } from "@ember/debug";
+import { FacetName } from "hermes/components/header/toolbar";
 
 import {
   TEST_WEB_CONFIG,
@@ -45,6 +46,7 @@ export default function (mirageConfig) {
         let facets = requestBody?.facets ?? [];
 
         if (requestBody) {
+          console.log("requestBody", requestBody);
           const { facetQuery, query } = requestBody;
           let { facetFilters } = requestBody;
 
@@ -145,21 +147,48 @@ export default function (mirageConfig) {
               );
             }
           } else if (facetQuery) {
-            // Product/area search
-            let facetMatch = docModels.filter((doc) => {
-              return doc.attrs.product
-                .toLowerCase()
-                .includes(facetQuery.toLowerCase());
-            })[0];
-            if (facetMatch) {
-              return new Response(
-                200,
-                {},
-                { facetHits: [{ value: facetMatch.attrs.product }] },
-              );
-            } else {
-              return new Response(200, {}, { facetHits: [] });
+            /**
+             * Get the FacetName from the request.
+             * At this point `request.params["*"]` looks like:
+             * "index-name/facets/owners/query"
+             */
+            const facetName = request.params["*"].split("/")[2];
+            let facetHits: Array<{ value: string }> = [];
+
+            console.log(facetName, facetQuery);
+
+            switch (facetName) {
+              case FacetName.Owners:
+                let ownerMatches = docModels.filter((doc) => {
+                  return doc.attrs.owners[0].includes(facetQuery);
+                });
+
+                facetHits = ownerMatches.map((doc) => {
+                  return { value: doc.attrs.owners[0] };
+                });
+                break;
+
+              case FacetName.Product:
+                let uniqueProducts: string[] = [];
+                let productMatches = docModels.filter((doc) => {
+                  console.log("doc.attrs.product", doc.attrs.product);
+                  return doc.attrs.product
+                    .toLowerCase()
+                    .includes(facetQuery.toLowerCase());
+                });
+
+                productMatches.forEach((doc) => {
+                  if (!uniqueProducts.includes(doc.attrs.product)) {
+                    uniqueProducts.push(doc.attrs.product);
+                  }
+                });
+
+                facetHits = uniqueProducts.map((product) => {
+                  return { value: product };
+                });
+                break;
             }
+            return new Response(200, {}, { facetHits });
           } else if (query !== undefined) {
             /**
              * A query exists, but may be empty.
@@ -806,7 +835,6 @@ export default function (mirageConfig) {
       // Query via the PeopleSelect
       this.post("/people", (schema, request) => {
         let query: string = JSON.parse(request.requestBody).query;
-
         // Search everyone's first emailAddress for matches
         let matches: Collection<unknown> = schema["google/people"].where(
           (person) => {

web/tests/integration/components/header/toolbar-test.ts

@@ -1,10 +1,16 @@
 import { module, test } from "qunit";
 import { setupRenderingTest } from "ember-qunit";
-import { TestContext, click, findAll, render } from "@ember/test-helpers";
+import { click, fillIn, findAll, render } from "@ember/test-helpers";
 import { hbs } from "ember-cli-htmlbars";
 import { FacetDropdownGroups, FacetDropdownObjects } from "hermes/types/facets";
 import { FacetLabel } from "hermes/helpers/get-facet-label";
 import { SearchScope } from "hermes/routes/authenticated/results";
+import { MirageTestContext, setupMirage } from "ember-cli-mirage/test-support";
+import {
+  authenticateTestUser,
+  TEST_USER_EMAIL,
+  TEST_USER_NAME,
+} from "hermes/mirage/utils";
 
 // Filter buttons
 const TOGGLE = "[data-test-facet-dropdown-toggle]";
@@ -16,27 +22,29 @@ const DROPDOWN_ITEM = "[data-test-facet-dropdown-link]";
 const POPOVER = "[data-test-facet-dropdown-popover]";
 const CHECK = "[data-test-x-dropdown-list-checkable-item-check]";
 const LIST_ITEM_VALUE = "[data-test-x-dropdown-list-item-value]";
+const OWNER_MATCH = "[data-test-x-dropdown-list-item-link-to]";
 
 const FACETS = {
   docType: {
     RFC: { count: 1, isSelected: false },
   },
-  owners: {
-    ["[email protected]"]: { count: 8, isSelected: false },
-  },
   product: { Labs: { count: 9, isSelected: false } },
   status: {
     Approved: { count: 3, isSelected: false },
   },
+  owners: {
+    ["[email protected]"]: { count: 8, isSelected: false },
+  },
 };
 
-interface ToolbarTestContext extends TestContext {
+interface ToolbarTestContext extends MirageTestContext {
   facets: FacetDropdownGroups;
   scope: SearchScope;
 }
 
 module("Integration | Component | header/toolbar", function (hooks) {
   setupRenderingTest(hooks);
+  setupMirage(hooks);
 
   test("it handles status values correctly", async function (assert) {
     const STATUS_NAMES = [
@@ -81,18 +89,18 @@ module("Integration | Component | header/toolbar", function (hooks) {
     );
   });
 
-  test("it renders undefined facets disabled", async function (assert) {
+  test("undefined statuses are hidden", async function (this: ToolbarTestContext, assert) {
     this.set("facets", { ...FACETS, status: undefined });
 
     await render<ToolbarTestContext>(hbs`
       <Header::Toolbar @facets={{this.facets}} />
     `);
 
-    assert.dom(DOC_TYPE_TOGGLE).isNotDisabled();
-    assert.dom(PRODUCT_TOGGLE).isNotDisabled();
-    assert.dom(OWNERS_INPUT).isNotDisabled();
+    assert.dom(DOC_TYPE_TOGGLE).exists();
+    assert.dom(PRODUCT_TOGGLE).exists();
+    assert.dom(OWNERS_INPUT).exists();
 
-    assert.dom(STATUS_TOGGLE).isDisabled("the empty status facet is disabled");
+    assert.dom(STATUS_TOGGLE).doesNotExist("the empty status facet is hidden");
   });
 
   test("the order of the facets is correct", async function (this: ToolbarTestContext, assert) {
@@ -134,4 +142,24 @@ module("Integration | Component | header/toolbar", function (hooks) {
     assert.dom(secondItem).containsText("RFC").containsText("1");
     assert.dom(`${secondItem} ${CHECK}`).hasClass("invisible");
   });
+
+  test("owners can be searched", async function (this: ToolbarTestContext, assert) {
+    authenticateTestUser(this);
+
+    this.server.create("document", {
+      status: "Approved",
+    });
+
+    this.set("facets", FACETS);
+
+    await render<ToolbarTestContext>(hbs`
+      <Header::Toolbar @facets={{this.facets}} />
+    `);
+
+    await fillIn(OWNERS_INPUT, TEST_USER_EMAIL);
+
+    assert
+      .dom(OWNER_MATCH)
+      .containsText(TEST_USER_NAME, "the owner's name is displayed");
+  });
 });