From c287d97fb4308dbd39fbf0b42ddc60725fbf0ea2 Mon Sep 17 00:00:00 2001
From: James <Jamestp19@gmail.com>
Date: Fri, 6 Sep 2024 10:03:08 -0400
Subject: [PATCH] [FIX] Add ids for tour (#162)

---
 src/lib/components/explorer/AddFilter.svelte |   2 +
 src/lib/components/tour/ExplorerTour.svelte  | 342 ++++++++++---------
 tests/mock-data.ts                           |  63 ++++
 tests/routes/explorer/tour/test.ts           |  44 ++-
 4 files changed, 279 insertions(+), 172 deletions(-)

diff --git a/src/lib/components/explorer/AddFilter.svelte b/src/lib/components/explorer/AddFilter.svelte
index 02f6c337..a1207859 100644
--- a/src/lib/components/explorer/AddFilter.svelte
+++ b/src/lib/components/explorer/AddFilter.svelte
@@ -154,6 +154,7 @@
           <label class="flex-auto flex-col">
             <span>Min: {min}</span>
             <input
+              id="min"
               data-testid="min-input"
               type="text"
               placeholder="Enter value or leave blank for variable min"
@@ -164,6 +165,7 @@
           <label class="flex-auto flex-col">
             <span>Max: {max}</span>
             <input
+              id="max"
               data-testid="max-input"
               type="text"
               placeholder="Enter value or leave blank for variable max"
diff --git a/src/lib/components/tour/ExplorerTour.svelte b/src/lib/components/tour/ExplorerTour.svelte
index 7ec97dcb..a4827ab0 100644
--- a/src/lib/components/tour/ExplorerTour.svelte
+++ b/src/lib/components/tour/ExplorerTour.svelte
@@ -42,193 +42,195 @@
     clearExports();
   }
 
-  // Notes:
-  // - The object that we want to interact with must be fully loaded in the dom before the step that interracts with it,
-  // otherwise the tour can not find the element at step start time. For this reason, we're loading some things in
-  // the step before, or adding steps to open components we'll need later.
-  const tourDriver = driver({
-    showProgress: true,
-    popoverClass: 'picsure-theme',
-    overlayColor: 'rgb(var(--color-surface-400) / .7)',
-    // Although we're not using the previous button, this would be it's custom text
-    // prevBtnText: '<i class="fa-solid fa-arrow-left mr-1"></i> Previous',
-    nextBtnText: 'Next <i class="fa-solid fa-arrow-right ml-1"></i>',
-
-    // Even if previous button is disabled, navigating with the left arrow key still seems to trigger,
-    // so we'll disable it in each step.
-    showButtons: ['next', 'close'],
-    disableButtons: ['previous'],
-
-    steps: [
-      {
-        // Step 1
-        element: '#explorer-search-box',
-        popover: {
-          title: 'Search',
-          description: 'Search clinical variables of interest.',
-          onPrevClick: disablePrevious,
-        },
+  export const steps = [
+    {
+      // Step 1
+      element: '#explorer-search-box',
+      popover: {
+        title: 'Search',
+        description: 'Search clinical variables of interest.',
+        onPrevClick: disablePrevious,
       },
-      {
-        // Step 2
-        element: '#search-button',
-        popover: {
-          title: 'Search',
-          description: 'Press the Enter key or click the search icon to submit your search.',
-          onPrevClick: disablePrevious,
-        },
+    },
+    {
+      // Step 2
+      element: '#search-button',
+      popover: {
+        title: 'Search',
+        description: 'Press the Enter key or click the search icon to submit your search.',
+        onPrevClick: disablePrevious,
       },
-      {
-        // Step 3
-        element: '#ExplorerTable-table',
-        popover: {
-          title: 'Search results',
-          description:
-            'The results of the search are displayed in this area. Each row describes a different variable that matches your search result.',
-          onPrevClick: disablePrevious,
-        },
+    },
+    {
+      // Step 3
+      element: '#ExplorerTable-table',
+      popover: {
+        title: 'Search results',
+        description:
+          'The results of the search are displayed in this area. Each row describes a different variable that matches your search result.',
+        onPrevClick: disablePrevious,
       },
-      {
-        // Step 4
-        element: '[data-testid=genomic-filter-btn]',
-        popover: {
-          title: 'Add a genomic Filter',
-          description:
-            'Use the genomic filtering button to apply a filter using genomic information. \n Note* you can also search for genomic variables using the search bar.',
-          onPrevClick: disablePrevious,
-        },
+    },
+    {
+      // Step 4
+      element: '[data-testid=genomic-filter-btn]',
+      popover: {
+        title: 'Add a genomic Filter',
+        description:
+          'Use the genomic filtering button to apply a filter using genomic information. \n Note* you can also search for genomic variables using the search bar.',
+        onPrevClick: disablePrevious,
       },
-      {
-        // Step 5
-        element: '#row-0-col-2 button[title=Filter]',
-        onHighlightStarted: clickElement,
-        popover: {
-          title: 'Add a filter',
-          description:
-            'To view available filters for a variable, click on the filter icon in the row of interest.',
-          onPrevClick: disablePrevious,
-        },
+    },
+    {
+      // Step 5
+      element: '#row-0-col-2 button[title=Filter]',
+      onHighlightStarted: clickElement,
+      popover: {
+        title: 'Add a filter',
+        description:
+          'To view available filters for a variable, click on the filter icon in the row of interest.',
+        onPrevClick: disablePrevious,
       },
-      {
-        // Step 6
-        element: '#active-row-0 [data-testid=numerical-filter]',
-        popover: {
-          title: 'Add numeric filter',
-          description:
-            'To add a numeric filter, enter the min and max values you want in the filter.',
-          onPrevClick: disablePrevious,
-          onNextClick: () => {
-            const min = document.querySelector(
-              '#active-row-0 [data-testid=numerical-filter] input#min',
-            ) as HTMLInputElement;
-            const max = document.querySelector(
-              '#active-row-0 [data-testid=numerical-filter] input#max',
-            ) as HTMLInputElement;
-            min.value = '2';
-            max.value = '4';
-            tourDriver.moveNext();
-          },
+    },
+    {
+      // Step 6
+      element: '#active-row-0 [data-testid=numerical-filter]',
+      popover: {
+        title: 'Add numeric filter',
+        description:
+          'To add a numeric filter, enter the min and max values you want in the filter.',
+        onPrevClick: disablePrevious,
+        onNextClick: () => {
+          const min = document.querySelector(
+            '#active-row-0 [data-testid=numerical-filter] input#min',
+          ) as HTMLInputElement;
+          const max = document.querySelector(
+            '#active-row-0 [data-testid=numerical-filter] input#max',
+          ) as HTMLInputElement;
+          min.value = '2';
+          max.value = '4';
+          tourDriver.moveNext();
         },
       },
-      {
-        // Step 7
-        element: '#active-row-0 [data-testid=add-filter]',
-        popover: {
-          title: 'Add numeric filter',
-          description: 'Click the plus icon to add the filter',
-          onPrevClick: disablePrevious,
-          onNextClick: clickElementThenNext,
-        },
+    },
+    {
+      // Step 7
+      element: '#active-row-0 [data-testid=add-filter]',
+      popover: {
+        title: 'Add numeric filter',
+        description: 'Click the plus icon to add the filter',
+        onPrevClick: disablePrevious,
+        onNextClick: clickElementThenNext,
       },
-      {
-        // Step 8
-        element: '#sidebar-right',
-        popover: {
-          title: 'Filters added',
-          description: 'Any filters added will end up in the results sidebar.',
-        },
+    },
+    {
+      // Step 8
+      element: '#sidebar-right',
+      popover: {
+        title: 'Filters added',
+        description: 'Any filters added will end up in the results sidebar.',
       },
-      {
-        // Step 9
-        element: '#row-1-col-2 button[title=Filter]',
-        onHighlightStarted: clickElement,
-        popover: {
-          title: 'Add categorical filter',
-          description: 'You can continue to add filters.',
-          onPrevClick: disablePrevious,
-        },
+    },
+    {
+      // Step 9
+      element: '#row-1-col-2 button[title=Filter]',
+      onHighlightStarted: clickElement,
+      popover: {
+        title: 'Add categorical filter',
+        description: 'You can continue to add filters.',
+        onPrevClick: disablePrevious,
       },
-      {
-        // Step 10
-        element: '#active-row-1 #options-container',
-        popover: {
-          title: 'Add categorical filter',
-          description:
-            'To add a categorical filter, click on the options you want to include in the filter.',
-          onPrevClick: disablePrevious,
-          onNextClick: () => {
-            const firstOption = document.querySelector(
-              '#active-row-1 #options-container label:nth-child(1)',
-            ) as HTMLInputElement;
-            firstOption?.click();
-            tourDriver.moveNext();
-          },
+    },
+    {
+      // Step 10
+      element: '#active-row-1 #options-container',
+      popover: {
+        title: 'Add categorical filter',
+        description:
+          'To add a categorical filter, click on the options you want to include in the filter.',
+        onPrevClick: disablePrevious,
+        onNextClick: () => {
+          const firstOption = document.querySelector(
+            '#active-row-1 #options-container label:nth-child(1)',
+          ) as HTMLInputElement;
+          firstOption?.click();
+          tourDriver.moveNext();
         },
       },
-      {
-        // Step 11
-        element: '#active-row-1 [data-testid=add-filter]',
-        popover: {
-          title: 'Add categorical filter',
-          description: 'Click the plus icon to add the filter',
-          onPrevClick: disablePrevious,
-          onNextClick: clickElementThenNext,
-        },
+    },
+    {
+      // Step 11
+      element: '#active-row-1 [data-testid=add-filter]',
+      popover: {
+        title: 'Add categorical filter',
+        description: 'Click the plus icon to add the filter',
+        onPrevClick: disablePrevious,
+        onNextClick: clickElementThenNext,
       },
-      {
-        // Step 12
-        element: '#sidebar-right',
-        popover: {
-          title: 'Added filters',
-          description:
-            'You can view, edit, or delete previously added filters from the result sidebar.',
-          onPrevClick: disablePrevious,
-        },
+    },
+    {
+      // Step 12
+      element: '#sidebar-right',
+      popover: {
+        title: 'Added filters',
+        description:
+          'You can view, edit, or delete previously added filters from the result sidebar.',
+        onPrevClick: disablePrevious,
       },
-      {
-        // Step 13
-        element: '#row-0-col-2 button[title="Data Export"]',
-        popover: {
-          title: 'Add a varible to export',
-          description:
-            'Add a varible to exported data by clicking the export icon on the variable of interest.',
-          onPrevClick: disablePrevious,
-          onNextClick: clickElementThenNext,
-        },
+    },
+    {
+      // Step 13
+      element: '#row-0-col-2 button[title="Data Export"]',
+      popover: {
+        title: 'Add a varible to export',
+        description:
+          'Add a varible to exported data by clicking the export icon on the variable of interest.',
+        onPrevClick: disablePrevious,
+        onNextClick: clickElementThenNext,
       },
-      {
-        // Step 14
-        element: '#sidebar-right',
-        popover: {
-          title: 'Added exports',
-          description:
-            'You can view, or delete previously added variables for export from the result sidebar.',
-          onPrevClick: disablePrevious,
-        },
+    },
+    {
+      // Step 14
+      element: '#sidebar-right',
+      popover: {
+        title: 'Added exports',
+        description:
+          'You can view, or delete previously added variables for export from the result sidebar.',
+        onPrevClick: disablePrevious,
       },
-      {
-        // Step 15
-        element: '#nav-link-help',
-        onHighlighted: addHighlightClass(true),
-        onDeselected: addHighlightClass(false),
-        popover: {
-          title: 'Get help',
-          description:
-            'To learn more about these features, consult the documentation and use the information links throughout the site.',
-          onPrevClick: disablePrevious,
-        },
+    },
+    {
+      // Step 15
+      element: '#nav-link-help',
+      onHighlighted: addHighlightClass(true),
+      onDeselected: addHighlightClass(false),
+      popover: {
+        title: 'Get help',
+        description:
+          'To learn more about these features, consult the documentation and use the information links throughout the site.',
+        onPrevClick: disablePrevious,
       },
-    ],
+    },
+  ];
+
+  // Notes:
+  // - The object that we want to interact with must be fully loaded in the dom before the step that interracts with it,
+  // otherwise the tour can not find the element at step start time. For this reason, we're loading some things in
+  // the step before, or adding steps to open components we'll need later.
+  const tourDriver = driver({
+    showProgress: true,
+    popoverClass: 'picsure-theme',
+    overlayColor: 'rgb(var(--color-surface-400) / .7)',
+    // Although we're not using the previous button, this would be it's custom text
+    // prevBtnText: '<i class="fa-solid fa-arrow-left mr-1"></i> Previous',
+    nextBtnText: 'Next <i class="fa-solid fa-arrow-right ml-1"></i>',
+
+    // Even if previous button is disabled, navigating with the left arrow key still seems to trigger,
+    // so we'll disable it in each step.
+    showButtons: ['next', 'close'],
+    disableButtons: ['previous'],
+
+    steps: steps,
     onDestroyed: () => {
       resetSearch();
       selectedFacets.set([]);
diff --git a/tests/mock-data.ts b/tests/mock-data.ts
index 8b8d66c2..a45dd263 100644
--- a/tests/mock-data.ts
+++ b/tests/mock-data.ts
@@ -160,6 +160,69 @@ export const searchResults = {
   empty: false,
 };
 
+export const tourSearchResults = {
+  totalPages: 1,
+  totalElements: 3,
+  pageable: {
+    pageNumber: 0,
+    pageSize: 10,
+    sort: {
+      unsorted: true,
+      sorted: false,
+      empty: true,
+    },
+    offset: 0,
+    unpaged: false,
+    paged: true,
+  },
+  numberOfElements: 3,
+  first: true,
+  last: true,
+  size: 3,
+  content: [
+    {
+      conceptPath: '\\this\\is\\a\\age\\',
+      name: 'age1',
+      display: 'age',
+      dataset: 'test_data_set',
+      description: 'Age',
+      min: 0,
+      max: 99,
+      meta: null,
+      type: 'Continuous',
+    },
+    {
+      conceptPath: '\\phs123\\age\\',
+      name: 'AGE_CATEGORY',
+      display: 'age',
+      dataset: 'phs123',
+      description: "Participant's age (category)",
+      values: ['21', '22', '23', '24', '25'],
+      children: null,
+      meta: null,
+      type: 'Categorical',
+    },
+    {
+      conceptPath: '\\phs123\\age1\\',
+      name: 'AGE_CATEGORY',
+      display: 'age',
+      dataset: 'phs123',
+      description: "Participant's age (category)",
+      values: ['21', '22', '23', '24', '25', '26'],
+      children: null,
+      meta: null,
+      type: 'Categorical',
+    },
+  ],
+  number: 0,
+  sort: {
+    unsorted: true,
+    sorted: false,
+    empty: true,
+  },
+  empty: false,
+};
+
 export const detailResponseCat = {
   type: 'Categorical',
   conceptPath: '\\SOMEDATA\\questionnaire\\disease\\Any family with heart attack?\\',
diff --git a/tests/routes/explorer/tour/test.ts b/tests/routes/explorer/tour/test.ts
index 57a1266b..d3890348 100644
--- a/tests/routes/explorer/tour/test.ts
+++ b/tests/routes/explorer/tour/test.ts
@@ -1,6 +1,13 @@
-import { expect } from '@playwright/test';
+import { expect, type Route } from '@playwright/test';
 import { test, mockApiSuccess } from '../../../custom-context';
-import { facetResultPath, facetsResponse, detailResponseCat } from '../../../mock-data';
+import {
+  facetResultPath,
+  facetsResponse,
+  detailResponseCat,
+  searchResultPath,
+  tourSearchResults as mockData,
+  conceptsDetailPath,
+} from '../../../mock-data';
 
 test.beforeEach(async ({ page }) => {
   await mockApiSuccess(page, facetResultPath, facetsResponse);
@@ -18,6 +25,39 @@ test('Explorer tour button opens instruction modal', async ({ page }) => {
   // The
   await expect(page.getByTestId('modal')).toBeVisible();
 });
+test('Tour Finishes', async ({ page }) => {
+  // Given
+  await page.route(searchResultPath, async (route: Route) => route.fulfill({ json: mockData }));
+  await page.route(facetResultPath, async (route: Route) =>
+    route.fulfill({ json: facetsResponse }),
+  );
+  await page.route(`${conceptsDetailPath}${detailResponseCat.dataset}`, async (route: Route) =>
+    route.fulfill({ json: detailResponseCat }),
+  );
+  await page.goto('/explorer');
+  await page.getByTestId('explorer-tour-btn').click();
+  await page.getByTestId('start-explorer-tour-btn').click();
+
+  // When
+  const stepCount = await page
+    .locator('#driver-popover-content')
+    .locator('footer')
+    .locator('.driver-popover-progress-text')
+    .textContent();
+  if (!stepCount) {
+    throw new Error('Step count not found');
+  }
+  const stepCountInt = parseInt(stepCount.split(' ')[2]) || 0;
+  console.log('Step count:', stepCountInt);
+  for (let i = 0; i < stepCountInt + 1; i++) {
+    // +1 to account for the Done button
+    await page.keyboard.press('ArrowRight');
+    await page.waitForTimeout(500);
+  }
+
+  // Then
+  await expect(page.locator('#driver-popover-content')).not.toBeVisible();
+});
 test('Explorer tour starts from modal', async ({ page }) => {
   // Given
   await page.goto('/explorer');