From cdac3ea32cce7b52e2a8089efe8f5dbd1a8fb035 Mon Sep 17 00:00:00 2001
From: richie <richie.soshan@ni.com>
Date: Wed, 15 Jan 2025 15:36:59 +0530
Subject: [PATCH] feat(ProductQueryEditor): add placeholders and enhance test
 coverage for user interactions

---
 .../product/components/ProductQueryEditor.tsx |  3 +-
 .../components/productQueryEditor.test.tsx    | 69 +++++++++++++++++--
 2 files changed, 65 insertions(+), 7 deletions(-)

diff --git a/src/datasources/product/components/ProductQueryEditor.tsx b/src/datasources/product/components/ProductQueryEditor.tsx
index af41f9e4..8e331a90 100644
--- a/src/datasources/product/components/ProductQueryEditor.tsx
+++ b/src/datasources/product/components/ProductQueryEditor.tsx
@@ -58,10 +58,10 @@ export function ProductQueryEditor({ query, onChange, onRunQuery, datasource }:
               <InlineField label="OrderBy" labelWidth={18} tooltip={tooltips.orderBy}>
                 <Select
                   options={OrderBy as SelectableValue[]}
+                  placeholder='Select field to order by'
                   onChange={onOrderByChange}
                   value={query.orderBy}
                   defaultValue={query.orderBy}
-                  width={25}
                 />
               </InlineField>
               <InlineField label="Descending" tooltip={tooltips.descending}>
@@ -77,6 +77,7 @@ export function ProductQueryEditor({ query, onChange, onRunQuery, datasource }:
                 maxWidth={40}
                 defaultValue={query.recordCount}
                 onCommitChange={recordCountChange}
+                placeholder='Enter record count'
               />
             </InlineField>
           </div>
diff --git a/src/datasources/product/components/productQueryEditor.test.tsx b/src/datasources/product/components/productQueryEditor.test.tsx
index ca737455..0f085dbf 100644
--- a/src/datasources/product/components/productQueryEditor.test.tsx
+++ b/src/datasources/product/components/productQueryEditor.test.tsx
@@ -3,14 +3,71 @@ import { ProductDataSource } from "../ProductDataSource";
 import { ProductQueryEditor } from "./ProductQueryEditor";
 import { screen, waitFor } from "@testing-library/react";
 import { ProductQuery } from "../types";
+import { select } from "react-select-event";
+import userEvent from "@testing-library/user-event";
 
 const render = setupRenderer(ProductQueryEditor, ProductDataSource);
+let onChange: jest.Mock<any, any>
+let properties: HTMLElement
+let orderBy: HTMLElement
+let descending: HTMLElement
+let recordCount: HTMLElement
 
-it('renders with query default controls', async () => {
-    render({} as ProductQuery);
+describe('ProductQueryEditor', () => {
+    beforeEach(async() => {
+        [onChange] = render({ refId: '', properties: [], orderBy: undefined} as ProductQuery);
+        await waitFor(() => properties = screen.getAllByRole('combobox')[0]);
+        orderBy = screen.getAllByRole('combobox')[1];
+        descending = screen.getByRole('checkbox');
+        recordCount = screen.getByRole('textbox');
+    });
+
+    it('renders with query default ', async () => {
+        expect(properties).toBeInTheDocument();
+        expect(properties).not.toBeNull();
+
+        expect(orderBy).toBeInTheDocument();
+        expect(orderBy).toHaveAccessibleDescription('Select field to order by');
+
+        expect(descending).toBeInTheDocument();
+        expect(descending).not.toBeChecked();
+
+        expect(recordCount).toBeInTheDocument();
+        expect(recordCount).toHaveValue('1000');
+    });
+
+    it('updates when user makes changes', async () => {    
+        //User changes properties       
+        await select(properties, "id", { container: document.body });
+        await waitFor(() => {
+            expect(onChange).toHaveBeenCalledWith(
+                expect.objectContaining({ properties: ["id"] })
+            )
+        });
+        
+        //User changes order by
+        await select(orderBy, "ID", { container: document.body });
+        await waitFor(() => {
+            expect(onChange).toHaveBeenCalledWith(
+                expect.objectContaining({ orderBy: "ID" })
+            )
+        });
     
-    await waitFor(() => expect(screen.getAllByText('Properties').length).toBe(1));
-    await waitFor(() => expect(screen.getAllByText('Records to Query').length).toBe(1));
-    await waitFor(() => expect(screen.getAllByText('Descending').length).toBe(1));
-    await waitFor(() => expect(screen.getAllByText('OrderBy').length).toBe(1));
+        //User changes descending checkbox
+        await userEvent.click(descending);
+        await waitFor(() => {
+            expect(onChange).toHaveBeenCalledWith(
+                expect.objectContaining({ descending: true })
+            )
+        });
+        
+        //User changes record count
+        await userEvent.clear(recordCount);
+        await userEvent.type(recordCount, '500{Enter}');
+        await waitFor(() => {
+            expect(onChange).toHaveBeenCalledWith(
+                expect.objectContaining({ recordCount: 500 })
+            )
+        });
+    });
 });
\ No newline at end of file