From ad6437987612dcf7db166ba274f5f583be0a1a35 Mon Sep 17 00:00:00 2001
From: Vijay Prasanna <vijayprasanna2896@gmail.com>
Date: Tue, 18 Jul 2023 09:57:22 +0530
Subject: [PATCH] console (tests): interaction tests for Native Query
 relationships

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/9831
Co-authored-by: Matthew Goodwin <49927862+m4ttheweric@users.noreply.github.com>
GitOrigin-RevId: cf488f5cc20ab77156f1e0c70ba830c3d5b6f495
---
 .../ListNativeQueryRelationships.stories.tsx  | 161 +++++++++++++++---
 .../ListNativeQueryRelationships.tsx          |   5 +-
 .../NativeQueryRelationshipWidget.stories.tsx | 120 +++++++++++++
 .../TrackNativeQueryRelationshipForm.tsx      |   3 +
 .../mocks/handlers.ts                         |  16 ++
 .../mocks/mockData.ts                         | 135 +++++++++++++++
 .../components/CardedTableFromReactTable.tsx  |  30 +++-
 .../Data/LogicalModels/mocks/metadata.ts      |   4 +-
 8 files changed, 443 insertions(+), 31 deletions(-)
 create mode 100644 frontend/libs/console/legacy-ce/src/lib/features/Data/LogicalModels/NativeQueryRelationships/components/NativeQueryRelationshipWidget.stories.tsx
 create mode 100644 frontend/libs/console/legacy-ce/src/lib/features/Data/LogicalModels/NativeQueryRelationships/mocks/handlers.ts
 create mode 100644 frontend/libs/console/legacy-ce/src/lib/features/Data/LogicalModels/NativeQueryRelationships/mocks/mockData.ts

diff --git a/frontend/libs/console/legacy-ce/src/lib/features/Data/LogicalModels/NativeQueryRelationships/components/ListNativeQueryRelationships.stories.tsx b/frontend/libs/console/legacy-ce/src/lib/features/Data/LogicalModels/NativeQueryRelationships/components/ListNativeQueryRelationships.stories.tsx
index a24ada7c8f1..ecbbe78e56f 100644
--- a/frontend/libs/console/legacy-ce/src/lib/features/Data/LogicalModels/NativeQueryRelationships/components/ListNativeQueryRelationships.stories.tsx
+++ b/frontend/libs/console/legacy-ce/src/lib/features/Data/LogicalModels/NativeQueryRelationships/components/ListNativeQueryRelationships.stories.tsx
@@ -1,34 +1,157 @@
 import { StoryObj, Meta } from '@storybook/react';
 import { ReactQueryDecorator } from '../../../../../storybook/decorators/react-query';
-import { ListNativeQueryRelationships } from './ListNativeQueryRelationships';
+import {
+  ListNativeQueryRelationships,
+  ListNativeQueryRow,
+} from './ListNativeQueryRelationships';
 import { ReduxDecorator } from '../../../../../storybook/decorators/redux-decorator';
-import { nativeQueryHandlers } from '../../AddNativeQuery/mocks';
+import { handlers } from '../mocks/handlers';
+import globals from '../../../../../Globals';
+import { userEvent, within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+import { useState } from 'react';
 
 export default {
   component: ListNativeQueryRelationships,
   decorators: [
     ReactQueryDecorator(),
     ReduxDecorator({
-      tables: {},
+      tables: {
+        dataHeaders: {
+          'x-hasura-admin-secret': globals.adminSecret as any,
+        },
+      },
     }),
   ],
-  parameters: {
-    msw: nativeQueryHandlers({
-      metadataOptions: { postgres: { models: true, queries: true } },
-      trackNativeQueryResult: 'success',
-    }),
-    layout: 'fullscreen',
-  },
-  argTypes: {
-    onDeleteRow: { action: 'clicked delete' },
-    onEditRow: { action: 'clicked edit' },
-  },
 } as Meta<typeof ListNativeQueryRelationships>;
 
-export const DefaultView: StoryObj<typeof ListNativeQueryRelationships> = {
-  args: {
-    dataSourceName: 'postgres',
-    nativeQueryName: 'customer_native_query',
+export const Basic: StoryObj<typeof ListNativeQueryRelationships> = {
+  render: () => (
+    <ListNativeQueryRelationships
+      dataSourceName="chinook"
+      nativeQueryName="get_authors"
+    />
+  ),
+  parameters: {
+    msw: handlers(),
+  },
+};
+
+export const TestBasicFlow: StoryObj<typeof ListNativeQueryRelationships> = {
+  render: () => {
+    const [result, updateResult] = useState<ListNativeQueryRow>();
+
+    return (
+      <div>
+        <ListNativeQueryRelationships
+          dataSourceName="chinook"
+          nativeQueryName="get_authors"
+          onEditRow={data => updateResult(data)}
+          onDeleteRow={data => updateResult(data)}
+        />
+        <div data-testid="result">{JSON.stringify(result)}</div>
+      </div>
+    );
+  },
+  parameters: {
+    msw: handlers(),
+  },
+  name: '🧪 Basic render and edit/delete action',
+
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const nativeQueryRelationshipsTable = await canvas.findByTestId(
+      'native-query-relationships'
+    );
+
+    await expect(nativeQueryRelationshipsTable).toBeInTheDocument();
+
+    /**
+     * Check if both header and body have rendered
+     */
+    await expect(nativeQueryRelationshipsTable.children.length).toEqual(2);
+
+    const rows = await canvas.findAllByTestId(
+      /^native-query-relationships-row-.*$/
+    );
+    /**
+     * There should be two rows
+     */
+    await expect(rows.length).toEqual(2);
+    let rowValues = await canvas.findAllByTestId(
+      /^native-query-relationships-cell-0-*.*$/
+    );
+
+    /**
+     * Verify the row values
+     */
+    await expect(rowValues[0]).toHaveTextContent('articles');
+    await expect(rowValues[1]).toHaveTextContent('array');
+
+    let editButton = await within(rowValues[2]).findByTestId('edit-button');
+    await userEvent.click(editButton);
+
+    await expect(await canvas.getByTestId('result')).toHaveTextContent(
+      JSON.stringify({
+        name: 'articles',
+        using: {
+          column_mapping: { id: 'author_id' },
+          insertion_order: null,
+          remote_native_query: 'get_article',
+        },
+        type: 'array',
+      })
+    );
+
+    let deleteBtn = await within(rowValues[2]).findByTestId('delete-button');
+    await userEvent.click(deleteBtn);
+    await expect(await canvas.getByTestId('result')).toHaveTextContent(
+      JSON.stringify({
+        name: 'articles',
+        using: {
+          column_mapping: { id: 'author_id' },
+          insertion_order: null,
+          remote_native_query: 'get_article',
+        },
+        type: 'array',
+      })
+    );
+
+    rowValues = await canvas.findAllByTestId(
+      /^native-query-relationships-cell-1-*.*$/
+    );
+
+    await expect(rowValues[0]).toHaveTextContent('author_details');
+    await expect(rowValues[1]).toHaveTextContent('object');
+
+    editButton = await within(rowValues[2]).findByTestId('edit-button');
+    await userEvent.click(editButton);
+
+    await expect(await canvas.getByTestId('result')).toHaveTextContent(
+      JSON.stringify({
+        name: 'author_details',
+        using: {
+          column_mapping: { id: 'author_id' },
+          insertion_order: null,
+          remote_native_query: 'get_author_details',
+        },
+        type: 'object',
+      })
+    );
+
+    deleteBtn = await within(rowValues[2]).findByTestId('delete-button');
+    await userEvent.click(deleteBtn);
+    await expect(await canvas.getByTestId('result')).toHaveTextContent(
+      JSON.stringify({
+        name: 'author_details',
+        using: {
+          column_mapping: { id: 'author_id' },
+          insertion_order: null,
+          remote_native_query: 'get_author_details',
+        },
+        type: 'object',
+      })
+    );
   },
-  render: args => <ListNativeQueryRelationships {...args} />,
 };
diff --git a/frontend/libs/console/legacy-ce/src/lib/features/Data/LogicalModels/NativeQueryRelationships/components/ListNativeQueryRelationships.tsx b/frontend/libs/console/legacy-ce/src/lib/features/Data/LogicalModels/NativeQueryRelationships/components/ListNativeQueryRelationships.tsx
index ae2d4e51598..6b11431fdd3 100644
--- a/frontend/libs/console/legacy-ce/src/lib/features/Data/LogicalModels/NativeQueryRelationships/components/ListNativeQueryRelationships.tsx
+++ b/frontend/libs/console/legacy-ce/src/lib/features/Data/LogicalModels/NativeQueryRelationships/components/ListNativeQueryRelationships.tsx
@@ -75,6 +75,7 @@ export const ListNativeQueryRelationships = (
               onClick={() => {
                 onEditRow?.(row.original);
               }}
+              data-testid="edit-button"
             >
               Edit
             </Button>
@@ -84,6 +85,7 @@ export const ListNativeQueryRelationships = (
               onClick={() => {
                 onDeleteRow?.(row.original);
               }}
+              data-testid="delete-button"
             >
               Delete
             </Button>
@@ -104,13 +106,14 @@ export const ListNativeQueryRelationships = (
   const NativeQueryRelationshipsTable =
     useCardedTableFromReactTableWithRef<ListNativeQueryRow>();
 
-  if (isLoading) return <Skeleton count={10} />;
+  if (isLoading) return <Skeleton count={10} height={20} />;
 
   return (
     <NativeQueryRelationshipsTable
       table={relationshipsTable}
       ref={tableRef}
       noRowsMessage={'No relationships added'}
+      dataTestId="native-query-relationships"
     />
   );
 };
diff --git a/frontend/libs/console/legacy-ce/src/lib/features/Data/LogicalModels/NativeQueryRelationships/components/NativeQueryRelationshipWidget.stories.tsx b/frontend/libs/console/legacy-ce/src/lib/features/Data/LogicalModels/NativeQueryRelationships/components/NativeQueryRelationshipWidget.stories.tsx
new file mode 100644
index 00000000000..d15986ab745
--- /dev/null
+++ b/frontend/libs/console/legacy-ce/src/lib/features/Data/LogicalModels/NativeQueryRelationships/components/NativeQueryRelationshipWidget.stories.tsx
@@ -0,0 +1,120 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ReactQueryDecorator } from '../../../../../storybook/decorators/react-query';
+import { ReduxDecorator } from '../../../../../storybook/decorators/redux-decorator';
+import { NativeQueryRelationshipWidget } from './NativeQueryRelationshipWidget';
+import { userEvent, waitFor, within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+import { handlers } from '../mocks/handlers';
+import { useState } from 'react';
+import { NativeQueryRelationshipFormSchema } from '../schema';
+
+export default {
+  component: NativeQueryRelationshipWidget,
+  decorators: [
+    ReactQueryDecorator(),
+    ReduxDecorator({
+      tables: {
+        dataHeaders: {
+          'x-hasura-admin-secret': 'myadminsecretkey' as any,
+        },
+      },
+    }),
+  ],
+} as Meta<typeof NativeQueryRelationshipWidget>;
+
+export const DefaultView: StoryObj<typeof NativeQueryRelationshipWidget> = {
+  render: () => {
+    return (
+      <NativeQueryRelationshipWidget
+        fromNativeQuery="get_authors"
+        dataSourceName="chinook"
+      />
+    );
+  },
+};
+
+export const TestBasicInteraction: StoryObj<
+  typeof NativeQueryRelationshipWidget
+> = {
+  render: () => {
+    const [formValues, setFormValues] =
+      useState<NativeQueryRelationshipFormSchema>();
+    return (
+      <div>
+        <NativeQueryRelationshipWidget
+          fromNativeQuery="get_authors"
+          dataSourceName="chinook"
+          onSubmit={data => setFormValues(data)}
+        />
+        <div data-testid="result">{JSON.stringify(formValues)}</div>
+      </div>
+    );
+  },
+  parameters: {
+    msw: handlers(),
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await waitFor(
+      async () => {
+        return await expect(
+          canvas.getByLabelText('Relationship Name')
+        ).toBeInTheDocument();
+      },
+      {
+        timeout: 5000,
+      }
+    );
+
+    // console.log(await canvas.getByLabelText('Relationship Name'));
+    await userEvent.type(
+      await canvas.getByLabelText('Relationship Name'),
+      'articles'
+    );
+
+    await userEvent.selectOptions(
+      await canvas.getByLabelText('Target Native Query'),
+      'get_article'
+    );
+
+    await userEvent.selectOptions(
+      await canvas.getByLabelText('Relationship Type'),
+      'array'
+    );
+
+    await waitFor(
+      async () => {
+        return await expect(
+          canvas.getByTestId('columnMapping_source_input_0')
+        ).toBeInTheDocument();
+      },
+      {
+        timeout: 5000,
+      }
+    );
+
+    await userEvent.selectOptions(
+      await canvas.getByTestId('columnMapping_source_input_0'),
+      'id'
+    );
+
+    await userEvent.selectOptions(
+      await canvas.getByTestId('columnMapping_target_input_0'),
+      'author_id'
+    );
+
+    await userEvent.click(canvas.getByText('Add Relationship'));
+
+    await waitFor(async () => {
+      return await expect(await canvas.getByTestId('result')).toHaveTextContent(
+        JSON.stringify({
+          name: 'articles',
+          toNativeQuery: 'get_article',
+          type: 'array',
+          columnMapping: { id: 'author_id' },
+        })
+      );
+    });
+  },
+};
diff --git a/frontend/libs/console/legacy-ce/src/lib/features/Data/LogicalModels/NativeQueryRelationships/components/TrackNativeQueryRelationshipForm.tsx b/frontend/libs/console/legacy-ce/src/lib/features/Data/LogicalModels/NativeQueryRelationships/components/TrackNativeQueryRelationshipForm.tsx
index c1c739614f0..bdf92a436dd 100644
--- a/frontend/libs/console/legacy-ce/src/lib/features/Data/LogicalModels/NativeQueryRelationships/components/TrackNativeQueryRelationshipForm.tsx
+++ b/frontend/libs/console/legacy-ce/src/lib/features/Data/LogicalModels/NativeQueryRelationships/components/TrackNativeQueryRelationshipForm.tsx
@@ -28,6 +28,7 @@ export const TrackNativeQueryRelationshipForm = ({
         label="Relationship Name"
         placeholder="Name your native query relationship"
         name={'name'}
+        dataTestId="relationship_name"
       />
       <Select
         name={'toNativeQuery'}
@@ -50,11 +51,13 @@ export const TrackNativeQueryRelationshipForm = ({
         from={{
           options: fromFieldOptions,
           label: 'Source Field',
+          placeholder: 'Pick source field',
         }}
         to={{
           type: 'array',
           options: toFieldOptions,
           label: 'Target Field',
+          placeholder: 'Pick target field',
         }}
       />
     </div>
diff --git a/frontend/libs/console/legacy-ce/src/lib/features/Data/LogicalModels/NativeQueryRelationships/mocks/handlers.ts b/frontend/libs/console/legacy-ce/src/lib/features/Data/LogicalModels/NativeQueryRelationships/mocks/handlers.ts
new file mode 100644
index 00000000000..00b44939bca
--- /dev/null
+++ b/frontend/libs/console/legacy-ce/src/lib/features/Data/LogicalModels/NativeQueryRelationships/mocks/handlers.ts
@@ -0,0 +1,16 @@
+import { rest } from 'msw';
+import { mockMetadata } from './mockData';
+
+const baseUrl = 'http://localhost:8080';
+
+export const handlers = (url = baseUrl) => [
+  rest.post(`${url}/v1/metadata`, async (_req, res, ctx) => {
+    const reqBody = (await _req.json()) as Record<string, any>;
+
+    if (reqBody.type === 'export_metadata') return res(ctx.json(mockMetadata));
+
+    console.log(reqBody.type);
+
+    return res(ctx.json({}));
+  }),
+];
diff --git a/frontend/libs/console/legacy-ce/src/lib/features/Data/LogicalModels/NativeQueryRelationships/mocks/mockData.ts b/frontend/libs/console/legacy-ce/src/lib/features/Data/LogicalModels/NativeQueryRelationships/mocks/mockData.ts
new file mode 100644
index 00000000000..13bcdac3bf2
--- /dev/null
+++ b/frontend/libs/console/legacy-ce/src/lib/features/Data/LogicalModels/NativeQueryRelationships/mocks/mockData.ts
@@ -0,0 +1,135 @@
+import { Metadata } from '../../../../hasura-metadata-types';
+
+export const mockMetadata: Metadata = {
+  resource_version: 24,
+  metadata: {
+    version: 3,
+    sources: [
+      {
+        name: 'chinook',
+        kind: 'postgres',
+        tables: [],
+        native_queries: [
+          {
+            arguments: {
+              shouting_title: {
+                nullable: false,
+                type: 'boolean',
+              },
+            },
+            code: 'SELECT id, author_id, (CASE WHEN {{shouting_title}}=true THEN UPPER(title) ELSE title END) as title, content FROM article',
+            returns: 'article_model',
+            root_field_name: 'get_article',
+          },
+          {
+            arguments: {
+              shouting_name: {
+                nullable: false,
+                type: 'boolean',
+              },
+            },
+            object_relationships: [
+              {
+                name: 'author_details',
+                using: {
+                  column_mapping: {
+                    id: 'author_id',
+                  },
+                  insertion_order: null,
+                  remote_native_query: 'get_author_details',
+                },
+              },
+            ],
+            array_relationships: [
+              {
+                name: 'articles',
+                using: {
+                  column_mapping: {
+                    id: 'author_id',
+                  },
+                  insertion_order: null,
+                  remote_native_query: 'get_article',
+                },
+              },
+            ],
+            code: 'SELECT id, (CASE WHEN {{shouting_name}}=true THEN UPPER(name) ELSE name END) as name FROM author',
+            returns: 'author_model',
+            root_field_name: 'get_authors',
+          },
+        ],
+        logical_models: [
+          {
+            fields: [
+              {
+                name: 'id',
+                type: {
+                  nullable: false,
+                  scalar: 'integer',
+                },
+              },
+              {
+                name: 'author_id',
+                type: {
+                  nullable: false,
+                  scalar: 'integer',
+                },
+              },
+              {
+                name: 'title',
+                type: {
+                  nullable: false,
+                  scalar: 'text',
+                },
+              },
+              {
+                name: 'content',
+                type: {
+                  nullable: false,
+                  scalar: 'text',
+                },
+              },
+            ],
+            name: 'article_model',
+          },
+          {
+            fields: [
+              {
+                name: 'id',
+                type: {
+                  nullable: false,
+                  scalar: 'integer',
+                },
+              },
+              {
+                name: 'name',
+                type: {
+                  nullable: false,
+                  scalar: 'text',
+                },
+              },
+              {
+                name: 'articles',
+                type: {
+                  array: {
+                    logical_model: 'article_model',
+                    nullable: false,
+                  },
+                  nullable: false,
+                },
+              },
+            ],
+            name: 'author_model',
+          },
+        ],
+        configuration: {
+          connection_info: {
+            database_url:
+              'postgres://postgres:test@host.docker.internal:6001/chinook',
+            isolation_level: 'read-committed',
+            use_prepared_statements: false,
+          },
+        },
+      },
+    ],
+  },
+};
diff --git a/frontend/libs/console/legacy-ce/src/lib/features/Data/LogicalModels/components/CardedTableFromReactTable.tsx b/frontend/libs/console/legacy-ce/src/lib/features/Data/LogicalModels/components/CardedTableFromReactTable.tsx
index 63558d0e2ed..59b3c2e17db 100644
--- a/frontend/libs/console/legacy-ce/src/lib/features/Data/LogicalModels/components/CardedTableFromReactTable.tsx
+++ b/frontend/libs/console/legacy-ce/src/lib/features/Data/LogicalModels/components/CardedTableFromReactTable.tsx
@@ -5,15 +5,20 @@ import React from 'react';
 export function CardedTableFromReactTable<T>({
   table,
   noRowsMessage,
+  dataTestId,
 }: {
   table: Table<T>;
   noRowsMessage?: string;
+  dataTestId?: string;
 }) {
   return (
-    <CardedTable.Table>
+    <CardedTable.Table data-testid={`${dataTestId}`}>
       <CardedTable.TableHead>
-        {table.getHeaderGroups().map(headerGroup => (
-          <CardedTable.TableHeadRow key={headerGroup.id}>
+        {table.getHeaderGroups().map((headerGroup, index) => (
+          <CardedTable.TableHeadRow
+            key={headerGroup.id}
+            data-testid={`${dataTestId}-header-${index}`}
+          >
             {headerGroup.headers.map(header => (
               <CardedTable.TableHeadCell key={header.id}>
                 {header.isPlaceholder
@@ -28,10 +33,16 @@ export function CardedTableFromReactTable<T>({
         ))}
       </CardedTable.TableHead>
       <CardedTable.TableBody>
-        {table.getRowModel().rows.map(row => (
-          <CardedTable.TableBodyRow key={row.id}>
-            {row.getVisibleCells().map(cell => (
-              <CardedTable.TableBodyCell key={cell.id}>
+        {table.getRowModel().rows.map((row, index) => (
+          <CardedTable.TableBodyRow
+            key={row.id}
+            data-testid={`${dataTestId}-row-${index}`}
+          >
+            {row.getVisibleCells().map((cell, subIndex) => (
+              <CardedTable.TableBodyCell
+                key={cell.id}
+                data-testid={`${dataTestId}-cell-${index}-${subIndex}`}
+              >
                 {flexRender(cell.column.columnDef.cell, cell.getContext())}
               </CardedTable.TableBodyCell>
             ))}
@@ -60,13 +71,14 @@ export function CardedTableFromReactTable<T>({
 function forwardRefWrapper<T>() {
   return React.forwardRef<
     HTMLDivElement,
-    { table: Table<T>; noRowsMessage?: string }
-  >(({ table, noRowsMessage }, ref) => {
+    { table: Table<T>; noRowsMessage?: string; dataTestId?: string }
+  >(({ table, noRowsMessage, dataTestId }, ref) => {
     return (
       <div ref={ref}>
         <CardedTableFromReactTable
           table={table}
           noRowsMessage={noRowsMessage}
+          dataTestId={dataTestId}
         />
       </div>
     );
diff --git a/frontend/libs/console/legacy-ce/src/lib/features/Data/LogicalModels/mocks/metadata.ts b/frontend/libs/console/legacy-ce/src/lib/features/Data/LogicalModels/mocks/metadata.ts
index c5108b2691b..749a049090b 100644
--- a/frontend/libs/console/legacy-ce/src/lib/features/Data/LogicalModels/mocks/metadata.ts
+++ b/frontend/libs/console/legacy-ce/src/lib/features/Data/LogicalModels/mocks/metadata.ts
@@ -179,7 +179,7 @@ export const buildMetadata = ({
           kind: 'mssql',
           tables: [],
           native_queries: mssql?.queries ? testQueries.mssql : [],
-          logical_models: mssql?.models ? testModels.mssql : [],
+          logical_models: mssql?.models ? (testModels.mssql as any) : [],
           configuration: {
             connection_info: {
               connection_string: '',
@@ -191,7 +191,7 @@ export const buildMetadata = ({
           kind: 'postgres',
           tables: [],
           native_queries: postgres?.queries ? testQueries.postgres : [],
-          logical_models: postgres?.models ? testModels.postgres : [],
+          logical_models: postgres?.models ? (testModels.postgres as any) : [],
           configuration: {
             connection_info: {
               database_url: '',