bug: clear/change search not working

lsst-epo · Aug 13, 2024 · af53abc · af53abc
1 parent a0fd7cb
commit af53abc
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 15 deletions.
diff --git a/components/page/FilterBar/index.js b/components/page/FilterBar/index.js
@@ -146,7 +146,7 @@ const FilterBar = ({ filterType, setLiveRegionMessage }) => {
             />
           </Styled.FilterSearch>
         )}
-        <Styled.Clear onClick={handleReset}>
+        <Styled.Clear onClick={handleReset} data-cy="clear">
           <IconComposer icon="cancel" />
           {t(`search-clear`)}
         </Styled.Clear>

diff --git a/components/templates/SearchPage/index.js b/components/templates/SearchPage/index.js
@@ -1,18 +1,17 @@
 import PropTypes from "prop-types";
 import styled from "styled-components";
-import { useTranslation } from "react-i18next";
 import Body from "@/global/Body";
 import Breadcrumbs from "@/components/page/Breadcrumbs";
 import { Container } from "@rubin-epo/epo-react-lib";
 import DynamicComponentFactory from "@/components/factories/DynamicComponentFactory";
 import FilterBar from "@/components/page/FilterBar";
 import { usePathData } from "@/lib/utils";
 import { BREAK_PHABLET } from "@/styles/globalStyles";
+import { FilterParamsProvider } from "@/contexts/FilterParams";
 
 export default function SearchPage({
   data: { description, dynamicComponent, id, title, uri },
 }) {
-  const { t } = useTranslation();
   const bodyProps = {
     description,
     title,
@@ -30,17 +29,22 @@ export default function SearchPage({
   return (
     <Body {...bodyProps}>
       <Breadcrumbs breadcrumbs={[pageLink]} />
-      <FilterBar filterType={dynamicComponent} />
-      <Container bgColor="white" className="c-page-header">
-        <Title>
-          <h1>{title}</h1>
-          {keyphrase && <h1>&quot;{keyphrase}&quot;</h1>}
-        </Title>
-      </Container>
+      <FilterParamsProvider>
+        <FilterBar filterType={dynamicComponent} />
+        <Container bgColor="white" className="c-page-header">
+          <Title>
+            <h1>{title}</h1>
+            {keyphrase && <h1>&quot;{keyphrase}&quot;</h1>}
+          </Title>
+        </Container>
 
-      {dynamicComponent && (
-        <DynamicComponentFactory componentType={dynamicComponent} pageId={id} />
-      )}
+        {dynamicComponent && (
+          <DynamicComponentFactory
+            componentType={dynamicComponent}
+            pageId={id}
+          />
+        )}
+      </FilterParamsProvider>
     </Body>
   );
 }

diff --git a/cypress/e2e/filtering.cy.js b/cypress/e2e/filtering.cy.js
@@ -4,7 +4,7 @@ describe("Filtering dynamic data", () => {
     // so we must tell it to visit our website with the `cy.visit()` command.
     // Since we want to visit the same URL at the start of all our tests,
     // we include it in our beforeEach function so that it runs before each test
-    cy.visit("/calendar");
+    cy.visit("/news");
   });
 
   it("Should show all filtered items", () => {
@@ -21,7 +21,7 @@ describe("Filtering dynamic data", () => {
   });
   it("Should show selected filter", () => {
     const dropdownId = "filter-dropdown";
-    const filter = "Education Event";
+    const filter = "News Post";
 
     cy.get(`[aria-controls="${dropdownId}"]`).click();
     cy.get(`[id="${dropdownId}"]`).should("be.visible");

diff --git a/cypress/e2e/search.cy.js b/cypress/e2e/search.cy.js
@@ -0,0 +1,30 @@
+describe("Search page", () => {
+  beforeEach(() => {
+    // Cypress starts out with a blank slate for each test
+    // so we must tell it to visit our website with the `cy.visit()` command.
+    // Since we want to visit the same URL at the start of all our tests,
+    // we include it in our beforeEach function so that it runs before each test
+    cy.visit("/search");
+  });
+
+  it("Searching from filter input yields results", () => {
+    cy.get("#filterSearchInput").type("press release{enter}");
+    cy.intercept("http://localhost:3000/search?search=press+release").as(
+      "search"
+    );
+    cy.on("url:changed", (newUrl) => {
+      expect(newUrl).to.contain("?search=press+release");
+    });
+    cy.get("ul li").its("length").should("be.gte", 1);
+  });
+  it("Clear button resets search", () => {
+    cy.get("[data-cy='clear']").click();
+    cy.intercept("http://localhost:3000/search?search=press+release").as(
+      "search"
+    );
+    cy.on("url:changed", (newUrl) => {
+      cy.get("#filterSearchInput").should("have.value", "");
+      expect(newUrl).to.be("http://localhost:3000/search");
+    });
+  });
+});