WCMS-22492: Add a test to confirm browser URL params are updated when…

… a filter is added (#252)
GetDKAN · Sep 17, 2024 · f682488 · f682488
1 parent 38912ad
commit f682488
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 19 deletions.
diff --git a/src/components/QueryBuilder/QueryBuilder.test.jsx b/src/components/QueryBuilder/QueryBuilder.test.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { render, screen, act } from '@testing-library/react';
+import userEvent from '@testing-library/user-event'
 import '@testing-library/jest-dom';
 import QueryBuilder from './index';
 import * as resource from "../../tests/fixtures/resource.json";
@@ -35,4 +36,27 @@ describe('<QueryBuilder />', () => {
     });
     expect(screen.queryAllByRole("group")).toHaveLength(1);
   });
+  test("Updates the browser URL params when a filter is added", async () => {
+    // Actual window object doesn't seem to be working well in jest, so we are mocking
+    // the window.history.pushstate function to see that it has been called
+    window.history.pushState = jest.fn()
+    render(
+      <QueryBuilder
+        resource={resource}
+        id={"d60b31aa-bfa8-527e-9b50-6c3f972ee9a9"}
+      />);
+
+    // Update text input
+    const valueInput = screen.getByRole('textbox');
+    await act(async () => {
+      await userEvent.type(valueInput, "test");
+    });
+    expect(valueInput).toHaveValue('test');
+    // Apply the filter
+    await act(() => {
+      screen.getByRole("button", { name: "Apply filters" }).click();
+    });
+    // Check that the URL params were updated
+    expect(window.history.pushState).toHaveBeenNthCalledWith(1, {}, "", expect.stringContaining("conditions[0][property]=ndc1&conditions[0][value]=test&conditions[0][operator]=%3D"))
+  });
 });
diff --git a/src/components/QueryBuilder/index.tsx b/src/components/QueryBuilder/index.tsx
@@ -14,7 +14,6 @@ type QueryBuilderPropTypes = {
     setConditions: Function;
   };
   id: string;
-  includeSearchParams?: Boolean;
   customColumns: Array<Object>;
   isModal?: boolean;
 };
@@ -46,7 +45,7 @@ function updateQueryForDatastore(condition: ConditionType) {
   return cond;
 }
 
-const QueryBuilder = ({resource, id, includeSearchParams = true, customColumns, isModal = false}: QueryBuilderPropTypes) => {
+const QueryBuilder = ({resource, id, customColumns, isModal = false}: QueryBuilderPropTypes) => {
   const { conditions, schema, setConditions } = resource;
 
   const fields = Object.keys(schema[id].fields);
@@ -108,14 +107,12 @@ const QueryBuilder = ({resource, id, includeSearchParams = true, customColumns,
   });
 
   const updateBrowserURL = (newConditions: Array<ConditionType>) => {
-    if (includeSearchParams) {
-      const url = new URL(window.location.href);
-      const urlString = qs.stringify(
-        { conditions: newConditions },
-        { encodeValuesOnly: true, addQueryPrefix: true }
-      );
-      window.history.pushState({}, '', `${url.origin}${url.pathname}${urlString}`);
-    }
+    const url = new URL(window.location.href);
+    const urlString = qs.stringify(
+      { conditions: newConditions },
+      { encodeValuesOnly: true, addQueryPrefix: true }
+    );
+    window.history.pushState({}, '', `${url.origin}${url.pathname}${urlString}`);
   }
 
   const submitConditions = (e: Event) => {

diff --git a/src/templates/FilteredResource/QueryBuilder.jsx b/src/templates/FilteredResource/QueryBuilder.jsx
@@ -33,7 +33,7 @@ function updateQueryForDatastore(condition) {
   return cond;
 }
 
-const QueryBuilder = ({ resource, id, includeSearchParams = true, customColumns }) => {
+const QueryBuilder = ({ resource, id, customColumns }) => {
   const { conditions, schema, setConditions } = resource;
   const fields = Object.keys(schema[id].fields);
 
@@ -89,14 +89,13 @@ const QueryBuilder = ({ resource, id, includeSearchParams = true, customColumns
     setConditions(submitConditions);
     setTitleConditions(queryConditions.map((oc) => Object.assign({}, oc)));
     setConditionsChanged(false);
-    if (includeSearchParams) {
-      const url = new URL(window.location);
-      const urlString = qs.stringify(
-        { conditions: submitConditions },
-        { encodeValuesOnly: true, addQueryPrefix: true }
-      );
-      window.history.pushState({}, '', `${url.origin}${url.pathname}${urlString}`);
-    }
+
+    const url = new URL(window.location);
+    const urlString = qs.stringify(
+      { conditions: submitConditions },
+      { encodeValuesOnly: true, addQueryPrefix: true }
+    );
+    window.history.pushState({}, '', `${url.origin}${url.pathname}${urlString}`);
   };
 
   const updateCondition = (index, key, value) => {