[FIX] Use correct data on Info Screen (#211)

hms-dbmi · Sep 27, 2024 · 028ad27 · 028ad27
1 parent 9772450
commit 028ad27
Show file tree

Hide file tree

Showing 3 changed files with 108 additions and 8 deletions.
diff --git a/src/lib/components/explorer/ResultInfoComponent.svelte b/src/lib/components/explorer/ResultInfoComponent.svelte
@@ -15,7 +15,7 @@
         <ProgressRadial />
       </div>
     {:then searchResultDetail}
-      <section class="flex flex-col w-3/4 p-4">
+      <section data-testid="variable-info" class="flex flex-col w-3/4 p-4">
         <h3 class="text-primary-500">Variable Information</h3>
         <div class="w-full flex flex-row justify-between">
           <div><span class="font-bold">Name:</span> {searchResultDetail.display}</div>
@@ -25,21 +25,30 @@
         <div><span class="font-bold">Description:</span> {searchResultDetail.description}</div>
       </section>
       {#if searchResultDetail.table}
-        <section class="flex flex-col w-3/4 p-4">
+        <section data-testid="dataset-info" class="flex flex-col w-3/4 p-4">
           <h3 class="text-primary-500">Dataset Information</h3>
           <div class="w-full flex flex-row justify-between">
-            <div><span class="font-bold mb-1">Name:</span> {searchResultDetail.display}</div>
-            <div><span class="font-bold">Accession:</span> {searchResultDetail.name}</div>
+            <div><span class="font-bold mb-1">Name:</span> {searchResultDetail.table.display}</div>
+            <div><span class="font-bold">Accession:</span> {searchResultDetail.table.name}</div>
+          </div>
+          <div>
+            <span class="font-bold">Description:</span>
+            {searchResultDetail.table.description}
           </div>
-          <div><span class="font-bold">Description:</span> {searchResultDetail.description}</div>
         </section>
       {/if}
       {#if searchResultDetail.study}
-        <section class="flex flex-col w-3/4 p-4">
+        <section data-testid="study-info" class="flex flex-col w-3/4 p-4">
           <h3 class="text-primary-500">Study Information</h3>
           <div class="w-full flex flex-col">
-            <div><span class="font-bold mb-1">Study Name:</span> {searchResultDetail.display}</div>
-            <div><span class="font-bold">Study Accession:</span> {searchResultDetail.name}</div>
+            <div>
+              <span class="font-bold mb-1">Study Name:</span>
+              {searchResultDetail.study.display}
+            </div>
+            <div>
+              <span class="font-bold">Study Accession:</span>
+              {searchResultDetail.study.name}
+            </div>
           </div>
         </section>
       {/if}

diff --git a/tests/mock-data.ts b/tests/mock-data.ts
@@ -328,6 +328,7 @@ export const detailResponseCat = {
   conceptPath: '\\SOMEDATA\\questionnaire\\disease\\Any family with heart attack?\\',
   name: 'heart_test',
   display: 'Any family with heart attack?',
+  studyAcronym: 'TDS',
   dataset: 'test_data_set',
   allowFiltering: true,
   description: 'Do you have a history of heart attack? Including extended family?',
@@ -337,6 +338,41 @@ export const detailResponseCat = {
     values: ['Yes', 'No', "Don't know"],
     description: 'Do you have a history of heart attack? Including extended family?',
   },
+  table: {
+    type: 'Categorical',
+    conceptPath: '\\SOMEDATA\\questionnaire\\',
+    name: 'some_name_for_the_table',
+    display: 'some_name_for_the_table',
+    dataset: 'test_data_set',
+    description: 'Some table description',
+    values: [],
+    allowFiltering: true,
+    studyAcronym: 'TDS',
+    children: null,
+    meta: {
+      description: 'Some table description',
+      stigmatized: false,
+    },
+    table: null,
+    study: null,
+  },
+  study: {
+    type: 'Categorical',
+    conceptPath: '\\SOMEDATA\\',
+    name: 'SOMEDATA',
+    display: 'SOMEDATA Display',
+    dataset: 'test_data_set',
+    description: 'SOMEDATA Description',
+    values: [],
+    allowFiltering: true,
+    studyAcronym: 'TDS',
+    children: null,
+    meta: {
+      stigmatized: 'false',
+    },
+    table: null,
+    study: null,
+  },
 };
 
 export const detailResponseCatSameDataset = {

diff --git a/tests/routes/explorer/test.ts b/tests/routes/explorer/test.ts
@@ -121,6 +121,61 @@ test.describe('explorer', () => {
         await infoIcon.click();
         await expect(infoPanel).not.toBeVisible();
       });
+      test('Clicking the info icon opens the info panel with the correct information', async ({
+        page,
+      }) => {
+        // Given
+
+        await page.route('*/**/picsure/query/sync', async (route: Route) =>
+          route.fulfill({ body: '9999' }),
+        );
+        await page.route(
+          '*/**/picsure/proxy/dictionary-api/concepts/detail/' + mockData.content[0].dataset,
+          async (route: Route) => route.fulfill({ json: detailResponseCat }),
+        );
+        await page.goto('/explorer?search=somedata');
+
+        // When
+        await expect(page.locator('tbody')).toBeVisible();
+        const tableBody = page.locator('tbody');
+        const firstRow = tableBody.locator('tr').first();
+        const infoIcon = firstRow.locator('td').last().locator('button').first();
+        await expect(infoIcon).toBeVisible();
+        await infoIcon.click();
+
+        // Then
+        const infoPanel = tableBody.locator('tr.expandable-row').first();
+        await expect(infoPanel).toBeVisible();
+        const variableInfo = infoPanel.getByTestId('variable-info');
+        await expect(variableInfo).toBeVisible();
+        // Check Variable Information
+        await expect(variableInfo.getByText('Variable Information')).toBeVisible();
+        await expect(variableInfo.getByText('Name: ' + detailResponseCat.display)).toBeVisible();
+        await expect(variableInfo.getByText('Accession: ' + detailResponseCat.name)).toBeVisible();
+        await expect(variableInfo.getByText('Type: ' + detailResponseCat.type)).toBeVisible();
+        await expect(
+          variableInfo.getByText('Description: ' + detailResponseCat.description),
+        ).toBeVisible();
+
+        // Check Dataset Information
+        await expect(infoPanel.getByText('Dataset Information')).toBeVisible();
+        await expect(infoPanel.getByText('Name: ' + detailResponseCat.table.display)).toBeVisible();
+        await expect(
+          infoPanel.getByText('Accession: ' + detailResponseCat.table.name),
+        ).toBeVisible();
+        await expect(
+          infoPanel.getByText('Description: ' + detailResponseCat.table.description),
+        ).toBeVisible();
+
+        // Check Study Information
+        await expect(infoPanel.getByText('Study Information')).toBeVisible();
+        await expect(
+          infoPanel.getByText('Study Name: ' + detailResponseCat.study.display),
+        ).toBeVisible();
+        await expect(
+          infoPanel.getByText('Study Accession: ' + detailResponseCat.study.name),
+        ).toBeVisible();
+      });
     });
     test.describe('Filter Actions', () => {
       test('Clicking the filter button opens and then closes the filter panel', async ({