diff --git a/components/page/FilterBar/index.js b/components/page/FilterBar/index.js index 291ffbfc..2dd7d98b 100644 --- a/components/page/FilterBar/index.js +++ b/components/page/FilterBar/index.js @@ -146,7 +146,7 @@ const FilterBar = ({ filterType, setLiveRegionMessage }) => { /> )} - + {t(`search-clear`)} diff --git a/components/templates/SearchPage/index.js b/components/templates/SearchPage/index.js index b59b01a3..44d5c270 100644 --- a/components/templates/SearchPage/index.js +++ b/components/templates/SearchPage/index.js @@ -1,6 +1,5 @@ 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"; @@ -8,11 +7,11 @@ import DynamicComponentFactory from "@/components/factories/DynamicComponentFact 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 ( - - - - <h1>{title}</h1> - {keyphrase && <h1>"{keyphrase}"</h1>} - - + + + + + <h1>{title}</h1> + {keyphrase && <h1>"{keyphrase}"</h1>} + + - {dynamicComponent && ( - - )} + {dynamicComponent && ( + + )} + ); } diff --git a/cypress/e2e/filtering.cy.js b/cypress/e2e/filtering.cy.js index dd9f5e30..2588016b 100644 --- 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 new file mode 100644 index 00000000..e2857697 --- /dev/null +++ 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"); + }); + }); +});