Add tests

hms-dbmi · Nov 14, 2024 · 90e601f · 90e601f
1 parent 7d768dd
commit 90e601f
Show file tree

Hide file tree

Showing 3 changed files with 139 additions and 2 deletions.
diff --git a/src/lib/components/explorer/FacetItem.svelte b/src/lib/components/explorer/FacetItem.svelte
@@ -97,7 +97,12 @@
 
 <label data-testId={`facet-${facet.name}-label`} for={facet.name} class="m-1">
   {#if facet?.children !== undefined && facet?.children?.length > 0}
-    <button type="button" class="arrow-button" on:click={toggleOpen}>
+    <button
+      type="button"
+      class="arrow-button"
+      data-testId={`facet-${facet.name}-arrow`}
+      on:click={toggleOpen}
+    >
       <i class="fa-solid {open ? 'fa-angle-down' : 'fa-angle-right'}"></i>
     </button>
   {/if}
@@ -117,7 +122,7 @@
   >
 </label>
 {#if open && facetsToDisplay !== undefined && facetsToDisplay?.length > 0}
-  <div class="flex flex-col ml-4">
+  <div class="flex flex-col ml-4" data-testId={`facet-${facet.name}-children`}>
     {#each facetsToDisplay as child}
       <svelte:self facet={child} {facetCategory} facetParent={facet} {textFilterValue} />
     {/each}

diff --git a/tests/mock-data.ts b/tests/mock-data.ts
@@ -697,6 +697,95 @@ export const facetsResponse = [
   },
 ];
 
+export const nestedFacetsResponse = [...facetsResponse,
+  {
+    name: 'nested_category',
+    display: 'Nested Category',
+    description: 'Nested Category Description',
+    facets: [
+      {
+        name: 'nested_facet',
+        display: 'Nested Facet',
+        description: 'Nested Facet Description',
+        count: 8,
+        children: [
+          {
+            name: 'nested_facet_child',
+            display: 'Nested Facet Child',
+            description: 'Nested Facet Child Description',
+            count: 2,
+            children: null,
+          },
+          {
+            name: 'nested_facet_child_2',
+            display: 'Nested Facet Child 2',
+            description: 'Nested Facet Child 2 Description',
+            count: 5,
+            children: null,
+          },
+          {
+            name: 'nested_facet_child_3',
+            display: 'Nested Facet Child 3',
+            description: 'Nested Facet Child 3 Description',
+            count: 1,
+            children: null,
+          },
+        ],
+      },
+      {
+        name: 'nested_facet_2',
+        display: 'Nested Facet 2',
+        description: 'Nested Facet 2 Description',
+        count: 1,
+        children: null,
+      },
+      {
+        name: 'nested_facet_3',
+        display: 'Nested Facet 3',
+        description: 'Nested Facet 3 Description',
+        count: 10,
+        children: [
+          {
+            name: 'nested_facet_child_4',
+            display: 'Nested Facet Child 4',
+            description: 'Nested Facet Child 4 Description',
+            count: 1,
+            children: null,
+          },
+          {
+            name: 'nested_facet_child_5',
+            display: 'Nested Facet Child 5',
+            description: 'Nested Facet Child 5 Description',
+            count: 1,
+            children: null,
+          },
+          {
+            name: 'nested_facet_child_6',
+            display: 'Nested Facet Child 6',
+            description: 'Nested Facet Child 6 Description',
+            count: 5,
+            children: null,
+          },
+          {
+            name: 'nested_facet_child_7',
+            display: 'Nested Facet Child 7',
+            description: 'Nested Facet Child 7 Description',
+            count: 3,
+            children: null,
+          },
+        ],
+      },
+      {
+        name: 'nested_facet_4',
+        display: 'Nested Facet 4',
+        description: 'Nested Facet 4 Description',
+        count: 300,
+        children: null,
+      },
+    ],
+  },
+];
+
 const _application = {
   app1: {
     uuid: 'a1234',

diff --git a/tests/routes/explorer/facets/test.ts b/tests/routes/explorer/facets/test.ts
@@ -5,6 +5,7 @@ import {
   facetsResponse,
   searchResultPath,
   facetResultPath,
+  nestedFacetsResponse,
 } from '../../../mock-data';
 
 const MAX_FACETS_TO_SHOW = 5;
@@ -495,4 +496,46 @@ test.describe('Facet & search', () => {
     // Then
     await expect(spanInInput).toContainText(facetsResponse[0].facets[0].count.toString());
   });
+
+});
+
+test.describe('Nested Facets', () => {
+  test('Nested facets are displayed', async ({ page }) => {
+    // Given
+    await page.route(searchResultPath, async (route: Route) =>
+      route.fulfill({ json: searchResults }),
+    );
+    await page.route(facetResultPath, async (route: Route) =>
+      route.fulfill({ json: nestedFacetsResponse }),
+    );
+    await page.goto('/explorer?search=age');
+
+    // When
+    const nestedCategory = page.getByText('Nested Category');
+    const nestedFacetArrow = page.getByTestId('facet-nested_facet-arrow');
+
+    // Then
+    await expect(nestedCategory).toBeVisible();
+    await expect(nestedFacetArrow).toBeVisible();
+  });
+  test('Nested facets are toggleable', async ({ page }) => {
+    // Given
+    await page.route(searchResultPath, async (route: Route) =>
+      route.fulfill({ json: searchResults }),
+    );
+    await page.route(facetResultPath, async (route: Route) =>
+      route.fulfill({ json: nestedFacetsResponse }),
+    );
+    await page.goto('/explorer?search=age');
+
+    // When
+    const nestedFacetArrow = page.getByTestId('facet-nested_facet-arrow');
+    await nestedFacetArrow.click();
+
+    // Then
+    const nestedFacetChildren = page.getByTestId('facet-nested_facet-children');
+    await expect(nestedFacetChildren).toBeVisible();
+    await nestedFacetArrow.click();
+    await expect(nestedFacetChildren).not.toBeVisible();
+  });
 });