feat(ProductQueryEditor): add placeholders and enhance test coverage …

…for user interactions

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>

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 })
+            )
+        });
+    });
 });