[ALS-7813] Fix bug where user gets stuck when 401ed (#301)

hms-dbmi · Nov 20, 2024 · 11680f5 · 11680f5
1 parent 2d7a392
commit 11680f5
Show file tree

Hide file tree

Showing 5 changed files with 193 additions and 17 deletions.
diff --git a/src/lib/components/explorer/Explorer.svelte b/src/lib/components/explorer/Explorer.svelte
@@ -45,8 +45,9 @@
     doDisableTour();
     isLoading.set(true);
     try {
-      const results = await search($searchTerm, $selectedFacets, state);
-      return results;
+      return await search($searchTerm, $selectedFacets, state);
+    } catch (e) {
+      return [];
     } finally {
       isLoading.set(false);
     }

diff --git a/src/lib/stores/Search.ts b/src/lib/stores/Search.ts
@@ -16,23 +16,26 @@ async function search(searchTerm: string, facets: Facet[], state?: State): Promi
     state?.setTotalRows(0);
     return [];
   }
-  try {
-    const search = searchDictionary(searchTerm.trim(), facets, {
-      pageNumber: state?.pageNumber ? state?.pageNumber - 1 : 0,
-      pageSize: state?.rowsPerPage,
-    });
-    loading.set(search);
-    const response = await search;
-    state?.setTotalRows(response.totalElements);
-    return response.content;
-  } catch (e) {
+  const search = searchDictionary(searchTerm.trim(), facets, {
+    pageNumber: state?.pageNumber ? state?.pageNumber - 1 : 0,
+    pageSize: state?.rowsPerPage,
+  });
+  loading.set(search);
+  const response = await search.catch((e) => {
     console.error(e);
+    state?.setTotalRows(0);
+    error.set(
+      'An error occurred while searching. If the problem persists, please contact an administrator.',
+    );
+    throw e;
+  });
+  if (!response) {
     error.set(
       'An error occurred while searching. If the problem persists, please contact an administrator.',
     );
-    state?.setTotalRows(0);
-    return [];
   }
+  state?.setTotalRows(response?.totalElements ?? 0);
+  return response?.content ?? [];
 }
 
 async function updateFacets(facetsToUpdate: Facet[]) {

diff --git a/tests/mock-data.ts b/tests/mock-data.ts
@@ -520,6 +520,63 @@ export const detailResponseNum = {
     description: 'Age',
   },
 };
+
+export const facetResponseWithZeroCount = [
+  {
+    name: 'things_that_use_consents',
+    display: 'Consented Things',
+    description: 'This is a description',
+    facets: [
+      {
+        name: 'thing1',
+        display: 'Thing 1',
+        description: 'Thing 1',
+        count: 0,
+      },
+      {
+        name: 'thing2',
+        display: 'Thing 2',
+        description: 'Thing 2',
+        count: 1,
+      },
+    ],
+  },
+  {
+    name: 'another_category_name',
+    display: 'Another Category Name',
+    description: 'Hello World',
+    facets: [
+      {
+        name: 'facet1',
+        display: 'Facet 1',
+        description: 'facet1 full name',
+        count: 0,
+        children: null,
+        category: 'another_category_name',
+        meta: null,
+      },
+      {
+        name: 'facet2',
+        display: 'Facet 2',
+        description: 'facet2 full name',
+        count: 0,
+        children: null,
+        category: 'another_category_name',
+        meta: null,
+      },
+      {
+        name: 'facet3',
+        display: 'This is a really long facet name for testing',
+        description: 'facet3 full name',
+        count: 0,
+        children: null,
+        category: 'another_category_name',
+        meta: null,
+      },
+    ],
+  },
+];
+
 export const facetsResponse = [
   {
     name: 'study_ids_dataset_ids',
@@ -634,6 +691,15 @@ export const facetsResponse = [
         category: 'study_ids_dataset_ids',
         meta: null,
       },
+      {
+        name: 'Empty',
+        display: 'Empty',
+        description: 'Empty',
+        count: 0,
+        children: null,
+        category: 'study_ids_dataset_ids',
+        meta: null,
+      },
     ],
   },
   {
@@ -695,6 +761,40 @@ export const facetsResponse = [
       },
     ],
   },
+  {
+    name: 'another_category_name_empty',
+    display: 'Empty Category',
+    description: 'Hello World',
+    facets: [
+      {
+        name: 'facet1',
+        display: 'Facet 1',
+        description: 'facet1 full name',
+        count: 0,
+        children: null,
+        category: 'another_category_name_empty',
+        meta: null,
+      },
+      {
+        name: 'facet2',
+        display: 'Facet 2',
+        description: 'facet2 full name',
+        count: 0,
+        children: null,
+        category: 'another_category_name_empty',
+        meta: null,
+      },
+      {
+        name: 'facet3',
+        display: 'This is a really long facet name for testing',
+        description: 'facet3 full name',
+        count: 0,
+        children: null,
+        category: 'another_category_name_empty',
+        meta: null,
+      },
+    ],
+  },
 ];
 
 export const nestedFacetsResponse = [

diff --git a/tests/routes/explorer/facets/test.ts b/tests/routes/explorer/facets/test.ts
@@ -132,7 +132,8 @@ test.describe('Facet Categories', () => {
       if (numFacets > MAX_FACETS_TO_SHOW) {
         expect(facetItems).toHaveLength(MAX_FACETS_TO_SHOW);
       } else {
-        expect(facetItems).toHaveLength(facetsResponse[i].facets.length);
+        const facetsToExpect = facetsResponse[i].facets.filter((facet) => facet.count > 0);
+        expect(facetItems).toHaveLength(facetsToExpect.length);
       }
     }
   });
@@ -186,7 +187,8 @@ test.describe('Facet Categories', () => {
         await expect(moreButton).toBeVisible();
         await moreButton.click();
         const facetItems = await page.locator('.accordion-panel').nth(i).locator('label').all();
-        expect(facetItems).toHaveLength(facetsResponse[i].facets.length);
+        const facetsToExpect = facetsResponse[i].facets.filter((facet) => facet.count > 0);
+        expect(facetItems).toHaveLength(facetsToExpect.length);
       }
     }
   });

diff --git a/tests/routes/explorer/test.ts b/tests/routes/explorer/test.ts
@@ -1,5 +1,5 @@
 import { expect, type Route } from '@playwright/test';
-import { test, mockApiFail } from '../../custom-context';
+import { test, mockApiFail, getUserTest } from '../../custom-context';
 import {
   conceptsDetailPath,
   detailResForAge,
@@ -11,6 +11,8 @@ import {
   facetsResponse,
   searchResults as mockData,
   searchResultPath,
+  picsureUser,
+  facetResponseWithZeroCount,
 } from '../../mock-data';
 import { type SearchResult } from '../../../src/lib/models/Search';
 import { createCategoricalFilter, createNumericFilter } from '../../../src/lib/models/Filter';
@@ -22,6 +24,56 @@ test.beforeEach(async ({ page }) => {
   );
 });
 
+const userTest = getUserTest(picsureUser);
+
+userTest.describe('Explorer for authenticated users', () => {
+  userTest('Has filters, and searchbar', async ({ page }) => {
+    // Given
+    await page.goto('/explorer');
+
+    // Then
+    await expect(page.locator('#search-bar')).toBeVisible();
+    await expect(page.locator('#facet-side-bar')).toBeVisible();
+  });
+  userTest(
+    'Has filters, and searchbar when a search is from the landing page',
+    async ({ page }) => {
+      // Given
+      await page.goto('/');
+      await page.getByTestId('search-box').fill('somedata');
+      await page.locator('#search-button').click();
+
+      // Then
+      await expect(page.locator('#search-bar')).toBeVisible();
+      await expect(page.locator('#facet-side-bar')).toBeVisible();
+    },
+  );
+  userTest('Has filters, and searchbar when a search is from the url', async ({ page }) => {
+    // Given
+    await page.goto('/explorer?search=somedata');
+
+    // Then
+    await expect(page.locator('#search-bar')).toBeVisible();
+    await expect(page.locator('#facet-side-bar')).toBeVisible();
+  });
+  userTest('Facets with zero count are hidden', async ({ page }) => {
+    await page.route(facetResultPath, async (route: Route) =>
+      route.fulfill({ json: facetResponseWithZeroCount }),
+    );
+    // Given
+    await page.goto('/explorer?search=somedata');
+
+    // Then
+    await expect(page.locator('#facet-side-bar')).toBeVisible();
+    expect(
+      page
+        .getByTestId('accordion-item')
+        .first()
+        .getByTestId(`facet-${facetResponseWithZeroCount[0].name}-label`),
+    ).not.toBeVisible();
+  });
+});
+
 test.describe('explorer', () => {
   test('Has filters, and searchbar', async ({ page }) => {
     // Given
@@ -31,6 +83,24 @@ test.describe('explorer', () => {
     await expect(page.locator('#search-bar')).toBeVisible();
     await expect(page.locator('#facet-side-bar')).toBeVisible();
   });
+  test('Has filters, and searchbar when a search is from the landing page', async ({ page }) => {
+    // Given
+    await page.goto('/');
+    await page.getByTestId('search-box').fill('somedata');
+    await page.locator('#search-button').click();
+
+    // Then
+    await expect(page.locator('#search-bar')).toBeVisible();
+    await expect(page.locator('#facet-side-bar')).toBeVisible();
+  });
+  test('Has filters, and searchbar when a search is from the url', async ({ page }) => {
+    // Given
+    await page.goto('/explorer?search=somedata');
+
+    // Then
+    await expect(page.locator('#search-bar')).toBeVisible();
+    await expect(page.locator('#facet-side-bar')).toBeVisible();
+  });
   test('Has search result table when search is executed', async ({ page }) => {
     // Given
     await page.route('*/**/picsure/query/sync', async (route: Route) =>