Fix e2e tests

chanzuckerberg · May 6, 2022 · ac6d67c · ac6d67c
1 parent 47213d5
commit ac6d67c
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 11 deletions.
diff --git a/frontend/tests/pages/home/filter.test.ts b/frontend/tests/pages/home/filter.test.ts
@@ -36,14 +36,14 @@ const CATEGORY_FILTERS = new Set<FilterKey>(['imageModality', 'workflowStep']);
 
 async function clickOnFilterButton(filterKey: FilterKey) {
   const filterButton = await page.$(
-    `[data-testid=pluginFilter][data-filter=${filterKey}]`,
+    `[data-testid=pluginFilter][data-filter=${filterKey}]:visible`,
   );
   await filterButton?.click();
 }
 
 async function getOptions(labels: string[]) {
   const labelSet = new Set(labels);
-  const optionNodes = await page.$$('[role=tooltip] [role=option]');
+  const optionNodes = await page.$$('[role=tooltip] [role=option]:visible');
 
   interface OptionResult {
     label: string;
@@ -71,11 +71,13 @@ async function getOptions(labels: string[]) {
 
 async function getChips(filterKey: FilterKey, labels: string[]) {
   const labelSet = new Set(labels);
-  const chipNodes = await page.$$(`[data-filter=${filterKey}] .MuiChip-root`);
+  const chipNodes = await page.$$(
+    `[data-filter=${filterKey}] .MuiChip-root:visible`,
+  );
   const result: string[] = [];
 
   for (const node of chipNodes) {
-    const labelNode = await node.$('.MuiChip-label');
+    const labelNode = await node.$('.MuiChip-label:visible');
     const label = await labelNode?.textContent();
     if (label && labelSet.has(label)) {
       result.push(label);
@@ -149,14 +151,15 @@ async function testPluginFilter({
   async function testClearAll() {
     await page.goto(getSearchUrl(...params));
     await openAccordion();
+    await page.waitForTimeout(500);
     let chipLabels = await getChips(filterKey, options);
     expect(chipLabels).toEqual(options);
 
     const filterType: FilterType = isCategoryFilter
       ? 'category'
       : 'requirement';
     await page.click(
-      `[data-testid=clearAllButton][data-filter-type=${filterType}]`,
+      `[data-testid=clearAllButton][data-filter-type=${filterType}]:visible`,
     );
 
     chipLabels = await getChips(filterKey, options);

diff --git a/frontend/tests/pages/home/pagination.test.ts b/frontend/tests/pages/home/pagination.test.ts
@@ -12,6 +12,7 @@ function hasPageQueryParameter(pageValue: number) {
 async function getResultNames() {
   const nameNodes = await getSearchResultNames();
   const names = await Promise.all(nameNodes.map((node) => node.textContent()));
+
   return names;
 }
 
@@ -160,6 +161,7 @@ describe('Plugin Pagination', () => {
     await page.waitForNavigation();
     await page.goBack();
     await page.waitForNavigation();
+    await page.waitForTimeout(500);
     await testResults({
       page: 2,
       totalPages: 3,

diff --git a/frontend/tests/pages/home/search.test.ts b/frontend/tests/pages/home/search.test.ts
@@ -46,7 +46,7 @@ describe('Plugin Search', () => {
 
   it('should clear query when clicking on app bar home link', async () => {
     await page.goto(getSearchUrl([SearchQueryParams.Search, 'video']));
-    await page.click('[data-testid=appBarHome]');
+    await page.click('[data-testid=appBarHome]:visible');
     await expect(await getFirstSearchResultName()).not.toHaveText(
       'napari_video',
     );
@@ -62,7 +62,8 @@ describe('Plugin Search', () => {
       [SearchQueryParams.Sort, SearchSortType.Relevance],
     );
     expect(page.url()).toEqual(expectedUrl);
-    await expect(await getFirstSearchResultName()).toHaveText('napari_video');
+    await page.waitForTimeout(500);
+    await expect(await getFirstSearchResultName()).toMatchText('napari_video');
   });
 
   it('should maintain search query when navigating back', async () => {
@@ -74,6 +75,7 @@ describe('Plugin Search', () => {
 
     await page.goBack();
     await page.waitForNavigation();
+    await page.waitForTimeout(500);
 
     expect(getQueryParameterValues(SearchQueryParams.Search)).toContain(query);
     await expect(await getFirstSearchResultName()).toHaveText('napari_video');

diff --git a/frontend/tests/pages/home/sort.test.ts b/frontend/tests/pages/home/sort.test.ts
@@ -52,7 +52,7 @@ async function testPluginSort({
     await page.goto(getSearchUrl());
     await maybeOpenAccordion(AccordionTitle.Sort);
     await preTestRadios?.();
-    await clickOnRadio(`input[value=${sortType}]`);
+    await clickOnRadio(`input[value=${sortType}]:visible`);
     await testSortResults();
   }
 
@@ -94,7 +94,7 @@ describe('Plugin Sort', () => {
         // Select different radio first because the `sort` parameter is not
         // populated on initial load.
         await clickOnRadio(
-          `[data-testid=sortByRadio][data-sort-type=${SearchSortType.PluginName}]`,
+          `[data-testid=sortByRadio][data-sort-type=${SearchSortType.PluginName}]:visible`,
         );
       },
 

diff --git a/frontend/tests/pages/home/utils.ts b/frontend/tests/pages/home/utils.ts
@@ -5,11 +5,11 @@ import { breakpoints } from '@/theme';
  * @returns The first search result name.
  */
 export function getFirstSearchResultName() {
-  return page.$('[data-testid=searchResultName]');
+  return page.$('[data-testid=searchResultName]:visible');
 }
 
 export function getSearchResultNames() {
-  return page.$$('[data-testid=searchResultName]');
+  return page.$$('[data-testid=searchResultName]:visible');
 }
 
 /**