-
Notifications
You must be signed in to change notification settings - Fork 24
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2995 from uktrade/fix/DT-1790-persist-search-term
Fix/DT-1790 Persist search term to the data catalogue page
- Loading branch information
Showing
6 changed files
with
137 additions
and
35 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| import { datacutWithLinks } from "../../fixtures/datasets"; | ||
| export const endpoints = { | ||
| recentItems: "/api/v2/recent_items/*", | ||
| recentCollections: "/api/v2/collections/*", | ||
| recentTools: "/api/v2/recent_tools/*", | ||
| yourBookmarks: "/api/v2/your_bookmarks/*", | ||
| } as const; | ||
|
|
||
| const assertEndPointIsNotCalled = (pathnameToAssert: string): void => { | ||
| cy.get("@GET.all").then((XHRRequests) => { | ||
| XHRRequests.map(({ request: { url } }) => { | ||
| const { pathname } = new URL(url); | ||
| expect(pathname).not.equal(pathnameToAssert); | ||
| }); | ||
| }); | ||
| }; | ||
|
|
||
| describe("Homepage search", () => { | ||
| beforeEach(() => { | ||
| cy.intercept({ method: "GET", path: "*" }).as("GET"); | ||
| cy.intercept(endpoints.recentItems, { results: [] }); | ||
| cy.intercept(endpoints.recentCollections, { results: [] }); | ||
| cy.intercept(endpoints.recentTools, { results: [] }); | ||
| cy.intercept(endpoints.yourBookmarks, { results: [] }); | ||
| cy.intercept("/find_suggested_searches?query=data", [ | ||
| { | ||
| name: "Data cut - links", | ||
| type: "", | ||
| url: "", | ||
| }, | ||
| ]); | ||
| cy.visit("/"); | ||
| cy.findByTestId("search-input").find("input").as("searchInputField"); | ||
| cy.findByTestId("search-input").next("input").as("searchButton"); | ||
| }); | ||
|
|
||
| it("should show a search bar with a link to getting started", () => { | ||
| cy.findByRole("heading", { | ||
| level: 1, | ||
| name: "Search Data Workspace", | ||
| }) | ||
| .parent() | ||
| .findByRole("link", { name: "Getting started as a new user" }) | ||
| .should("have.attr", "href", "/welcome"); | ||
| }); | ||
|
|
||
| context("when a user visits the first time", () => { | ||
| it("should NOT show search suggestions on page load", () => { | ||
| cy.findByRole("heading", { level: 3, name: "Suggested searches" }).should( | ||
| "not.exist" | ||
| ); | ||
| }); | ||
|
|
||
| it("should NOT call the suggested search endpoint when a query param is present", () => { | ||
| cy.visit("/?q=data"); | ||
| assertEndPointIsNotCalled("/datasets/find_suggested_searches"); | ||
| }); | ||
| }); | ||
|
|
||
| context("when a user searches for a dataset", () => { | ||
| it("should persist the search query to the data catalogue page and NOT show suggested searches", () => { | ||
| cy.get("@searchInputField").type("Data cut - links"); | ||
| cy.get("@searchButton").click(); | ||
| cy.get("@searchInputField").should("have.value", "Data cut - links"); | ||
| cy.findByRole("heading", { level: 3, name: "Suggested searches" }).should( | ||
| "not.exist" | ||
| ); | ||
| }); | ||
| }); | ||
| context("when a user revisits the homepage after viewing a dataset", () => { | ||
| it("should show suggested searches when typing", () => { | ||
| cy.visit(`/datasets/${datacutWithLinks}`); | ||
| cy.visit("/"); | ||
| cy.get("@searchInputField").type("Data"); | ||
| cy.findByRole("heading", { level: 3, name: "Suggested searches" }).should( | ||
| "exist" | ||
| ); | ||
| }); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
61 changes: 40 additions & 21 deletions
61
dataworkspace/dataworkspace/templates/partials/search_bar.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,28 +1,47 @@ | ||
| {% load waffle_tags %} | ||
| <h1 class="search-field__header govuk-heading-l">Search Data Workspace</h1> | ||
| {% if subTitle %} | ||
| <p class="govuk-body-l"> | ||
| {{subTitle}} | ||
| </p> | ||
| <p class="govuk-body-l">{{subTitle}}</p> | ||
| {% endif %} | ||
| <div class="search-field"> | ||
| {% flag ACCESSIBLE_AUTOCOMPLETE_FLAG %} | ||
| <div class="app-site-search" data-module="app-search"> | ||
| <label class="govuk-visually-hidden" for="app-site-search__input">Search by dataset name or description</label> | ||
| <div class="search-field-wrapper" id="my-autocomplete-container"></div> | ||
| <input class="search-field__submit" type="submit" value="Search"> | ||
| {% flag ACCESSIBLE_AUTOCOMPLETE_FLAG %} | ||
| <div class="app-site-search" data-module="app-search"> | ||
| <label class="govuk-visually-hidden" for="app-site-search__input" | ||
| >Search by dataset name or description</label | ||
| > | ||
| <div | ||
| class="search-field-wrapper" | ||
| id="my-autocomplete-container" | ||
| data-test="search-input" | ||
| ></div> | ||
| <input | ||
| class="search-field__submit" | ||
| type="submit" | ||
| value="Search" | ||
| data-test="search-submit" | ||
| /> | ||
| </div> | ||
| {% if gettingStartedLink %} | ||
| <p class="govuk-body search-field__footer-link"> | ||
| <a href="/welcome" class="search-field__footer__link" | ||
| >Getting started as a new user</a | ||
| > | ||
| </p> | ||
| {% endif %} {% else %} | ||
| <div class="search-field-wrapper govuk-!-padding-bottom-6"> | ||
| <input | ||
| type="text" | ||
| name="q" | ||
| id="search" | ||
| title="Search" | ||
| class="govuk-input search-field__item search-field__input js-class-toggle" | ||
| value="{{ query }}" | ||
| aria-controls="search-summary-accessible-hint-wrapper" | ||
| placeholder="Search by dataset name or description" | ||
| /> | ||
| <div class="search-field-submit-wrapper search-field__item"> | ||
| <input class="search-field__submit" type="submit" value="Search" /> | ||
| </div> | ||
| {% if gettingStartedLink %} | ||
| <p class="govuk-body search-field__footer-link"> | ||
| <a href="/welcome" class="search-field__footer__link">Getting started as a new user</a> | ||
| </p> | ||
| {% endif %} | ||
| {% else %} | ||
| <div class="search-field-wrapper govuk-!-padding-bottom-6"> | ||
| <input type="text" name="q" id="search" title="Search" class="govuk-input search-field__item search-field__input js-class-toggle" value="{{ query }}" aria-controls="search-summary-accessible-hint-wrapper" placeholder="Search by dataset name or description"> | ||
| <div class="search-field-submit-wrapper search-field__item"> | ||
| <input class="search-field__submit" type="submit" value="Search"> | ||
| </div> | ||
| </div> | ||
| {% endflag %} | ||
| </div> | ||
| {% endflag %} | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters