Merge pull request #1417 from dpc-sdp/feature/complex-search-plus

[SD-556] search listing sidebar filters
dpc-sdp · Jan 21, 2025 · 2e22bb5 · 2e22bb5
2 parents eecf798 + a8cecde
commit 2e22bb5
Show file tree

Hide file tree

Showing 36 changed files with 1,300 additions and 281 deletions.
diff --git a/examples/nuxt-app/test/features/landingpage/custom-collection.feature b/examples/nuxt-app/test/features/landingpage/custom-collection.feature
@@ -120,6 +120,33 @@ Feature: Custom Collection
     Then the custom collection component results count should read "Displaying 1-20 of 282 results"
     And only the search filters should be visible
 
+  @mockserver
+  Example: Should show filters on load when showFiltersOnLoad is set
+    Given I load the page fixture with "/landingpage/custom-collection/form-theme-default"
+    And the custom collection config has "showFiltersOnLoad" set to "true"
+    And the search network request is stubbed with fixture "/landingpage/custom-collection/response" and status 200
+    Then the page endpoint for path "/filters-on-load" returns the loaded fixture
+
+    When I visit the page "/filters-on-load"
+    Then the custom collection filters should be open
+
+    When I toggle the content collection filters
+    Then the custom collection filters should not be open
+
+  @mockserver
+  Example: Should collapse filters on mobile load when showFiltersOnLoad is set
+    Given I am using a "iphone-x" device
+    Then I load the page fixture with "/landingpage/custom-collection/form-theme-default"
+    And the custom collection config has "showFiltersOnLoad" set to "true"
+    And the search network request is stubbed with fixture "/landingpage/custom-collection/response" and status 200
+    Then the page endpoint for path "/filters-on-load" returns the loaded fixture
+
+    When I visit the page "/filters-on-load"
+    Then the custom collection filters should not be open
+
+    When I toggle the content collection filters
+    Then the custom collection filters should be open
+
   @mockserver
   Example: Should hide results count when hideResultsCount is set
     Given I load the page fixture with "/landingpage/custom-collection/page"

diff --git a/examples/nuxt-app/test/features/search-listing/filters.feature b/examples/nuxt-app/test/features/search-listing/filters.feature
@@ -15,6 +15,21 @@ Feature: Search listing - Filter
     When I visit the page "/filters"
     Then the search listing filters section should be open
 
+    When I toggle the search listing filters section
+    Then the search listing filters section should not be open
+
+  @mockserver
+  Example: Filter collapsed open on mobile page load
+    Given I am using a "iphone-x" device
+    Then the page endpoint for path "/filters" returns fixture "/search-listing/filters/filters-open" with status 200
+    And the search network request is stubbed with fixture "/search-listing/filters/response" and status 200
+
+    When I visit the page "/filters"
+    Then the search listing filters section should not be open
+
+    When I toggle the search listing filters section
+    Then the search listing filters section should be open
+
   @mockserver
   Example: Raw filter - Should reflect the value from the URL
     Given the page endpoint for path "/filters" returns fixture "/search-listing/filters/page" with status 200
@@ -218,6 +233,7 @@ Feature: Search listing - Filter
     Then the search listing dropdown field labelled "Terms filter example" should have the value "Purple"
     Then the search listing dropdown field labelled "Custom function filter example" should have the value "Open"
     And the search listing checkbox field labelled "Show archived content" should be checked
+    And the search listing checkbox field labelled "Weekdays" should be checked
 
     When I clear the search filters
 

diff --git a/examples/nuxt-app/test/features/search-listing/no-results.feature b/examples/nuxt-app/test/features/search-listing/no-results.feature
@@ -13,10 +13,12 @@ Feature: No results
     And the search network request is stubbed with fixture "/search-listing/errors/response-empty" and status 200
     When I visit the page "/search-list-grid"
     Then the search listing page should have 0 results
+    And the no results component should display "Sorry! We couldn't find any matches"
 
   @mockserver
   Example: Empty response with custom component
     Given the page endpoint for path "/search-list-custom" returns fixture "/search-listing/no-results/page" with status 200
     And the search network request is stubbed with fixture "/search-listing/errors/response-empty" and status 200
     When I visit the page "/search-list-custom"
     Then the search listing page should have 0 results
+    And the no results component should display "This is a custom component"
diff --git a/examples/nuxt-app/test/features/search-listing/search-query.feature b/examples/nuxt-app/test/features/search-listing/search-query.feature
@@ -4,6 +4,29 @@ Feature: Search Queries
     Given the site endpoint returns fixture "/site/reference" with status 200
     And I am using a "macbook-16" device
 
+  @mockserver
+  Example: The search term is displayed after submitting a search with results
+    Given the page endpoint for path "/" returns fixture "/search-listing/search-query/page" with status 200
+    And the search network request is stubbed with fixture "/search-listing/search-query/response" and status 200
+
+    When I visit the page "/"
+    Then I type "Grant" into the search input
+    And I click the search button
+    Then the search results heading should show "Search results for 'Grant'"
+
+    When I type "Grants" into the search input
+    Then the search results heading should show "Search results for 'Grant'"
+
+  @mockserver
+  Example: The search term is not displayed after submitting a search with no results
+    Given the page endpoint for path "/" returns fixture "/search-listing/search-query/page" with status 200
+    And the search network request is stubbed with fixture "/search-listing/errors/response-empty" and status 200
+
+    When I visit the page "/"
+    Then I type "Zoo" into the search input
+    And I click the search button
+    Then the search results heading should not be displayed
+
   @mockserver
   Example: The search term query can be extended and a custom query config supplied
     Given the page endpoint for path "/" returns fixture "/search-listing/search-query/page" with status 200

diff --git a/examples/nuxt-app/test/features/search-listing/sidebar-filters.feature b/examples/nuxt-app/test/features/search-listing/sidebar-filters.feature
@@ -0,0 +1,129 @@
+Feature: Search listing - Sidebar filters
+
+  Background:
+    Given the site endpoint returns fixture "/site/reference" with status 200
+    And the search autocomplete request is stubbed with "/search-listing/suggestions/none" fixture
+
+  @mockserver
+  Example: Sidebar filters are visible open on page load (desktop)
+    Given I am using a "macbook-16" device
+    Then the page endpoint for path "/filters" returns fixture "/search-listing/filters/filters-sidebar" with status 200
+    And the search network request is stubbed with fixture "/search-listing/filters/response" and status 200
+
+    When I visit the page "/filters"
+    Then the search listing filters section should be open
+    And the search listing filters should be within the sidebar
+
+  @mockserver
+  Example: Sidebar filters are collapsed open on page load (mobile)
+    Given I am using a "iphone-x" device
+    Then the page endpoint for path "/filters" returns fixture "/search-listing/filters/filters-sidebar" with status 200
+    And the search network request is stubbed with fixture "/search-listing/filters/response" and status 200
+
+    When I visit the page "/filters"
+    Then the search listing filters section should not be open
+
+  @mockserver
+  Example: Submitting the search bar scrolls to results
+    Given the page endpoint for path "/filters" returns fixture "/search-listing/filters/filters-sidebar" with status 200
+    And the search network request is stubbed with fixture "/search-listing/search-query/response" and status 200
+
+    When I visit the page "/filters"
+    And I type "The" into the search input
+    And I click the search button
+    Then I should be scrolled to the search results with an offset of 32
+
+  @mockserver
+  Example: Sidebar filters update the URL and tally when the filters are applied
+    Given the page endpoint for path "/filters" returns fixture "/search-listing/filters/filters-sidebar" with status 200
+    And the search network request is stubbed with fixture "/search-listing/filters/response" and status 200
+
+    When I visit the page "/filters"
+    Then the search listing page should have 2 results
+    And the sidebar filters heading should show 0 applied filters
+    And the search network request should be called with the "/search-listing/filters/request-clear-empty" fixture
+
+    When I type "the" into the search input
+    And I click the search listing dropdown field labelled "Term filter example"
+    Then I click the option labelled "Blue" in the selected dropdown
+
+    When I click the search listing dropdown field labelled "Terms filter example"
+    Then I click the option labelled "Purple" in the selected dropdown
+    And I click the option labelled "Yellow" in the selected dropdown
+    And I click the search listing dropdown field labelled "Terms filter example"
+
+    When I click the search listing dropdown field labelled "Terms dependent example"
+    And I click the option labelled "Mammals" in the selected dropdown
+    When I click the search listing dropdown field labelled "Terms dependent child example"
+    And I click the option labelled "Dogs" in the selected dropdown
+    When I click the search listing dropdown field labelled "Terms dependent grandchild example"
+    And I click the option labelled "Beagle" in the selected dropdown
+    And I click the option labelled "Spaniel" in the selected dropdown
+    Then I click the search listing dropdown field labelled "Terms dependent grandchild example"
+
+    And I click the search listing checkbox field labelled "Show archived content"
+    And I click the search listing checkbox field labelled "Weekdays"
+    And I click the search listing checkbox field labelled "Weekends"
+
+    Then I enter the range from "2025-02-22" to "2026-06-03" in the date range field labelled "Date range example"
+
+    When I submit the search filters
+    Then the URL should reflect that the current active filters are as follows:
+      | id                  | value                            | index |
+      | q                   | the                              | 0     |
+      | termFilter          | Blue                             | 0     |
+      | termsFilter         | Purple                           | 0     |
+      | termsFilter         | Yellow                           | 1     |
+      | dependentFilter     | dependentFilter-1:Mammals        | 0     |
+      | dependentFilter     | dependentFilter-2:Dogs           | 1     |
+      | dependentFilter     | dependentFilter-3:Beagle,Spaniel | 2     |
+      | checkboxFilter      | Archived                         |       |
+      | checkboxFilterGroup | Weekdays                         | 0     |
+      | checkboxFilterGroup | Weekends                         | 1     |
+      | dateRangeFilter     | from:2025-02-22                  | 0     |
+      | dateRangeFilter     | to:2026-06-03                    | 1     |
+    And the sidebar filters heading should show 8 applied filters
+
+  @mockserver
+  Example: Sidebar filters reflect values from the URL
+    Given the page endpoint for path "/filters" returns fixture "/search-listing/filters/filters-sidebar" with status 200
+    And the search network request is stubbed with fixture "/search-listing/filters/response" and status 200
+
+    When I visit the page "/filters?q=the&termFilter=Blue&termsFilter=Purple&termsFilter=Yellow&dependentFilter=dependentFilter-1:Mammals&dependentFilter=dependentFilter-2:Dogs&dependentFilter=dependentFilter-3:Beagle,Spaniel&checkboxFilter=Archived&checkboxFilterGroup=Weekends&dateRangeFilter=from:2025-02-22&dateRangeFilter=to:2026-06-03"
+    And the search network request should be called with the "/search-listing/filters/request-sidebar" fixture
+    And the sidebar filters heading should show 8 applied filters
+
+    Then the search input should have the value "the"
+    Then the search listing dropdown field labelled "Term filter example" should have the value "Blue"
+    Then the search listing dropdown field labelled "Terms filter example" should have the value "Purple, Yellow"
+    Then the search listing dropdown field labelled "Terms dependent example" should have the value "Mammals"
+    Then the search listing dropdown field labelled "Terms dependent child example" should have the value "Dogs"
+    Then the search listing dropdown field labelled "Terms dependent grandchild example" should have the value "Beagle, Spaniel"
+    And the search listing checkbox field labelled "Show archived content" should be checked
+    And the search listing checkbox field labelled "Weekends" should be checked
+    And the search listing date range field labelled "Date range example" should have the values
+      | from       | to         |
+      | 2025-02-22 | 2026-06-03 |
+
+    When I clear the search filters
+    And the sidebar filters heading should show 0 applied filters
+    Then the URL should reflect that the current active filters are as follows:
+      | id                  |
+      | q                   |
+      | termFilter          |
+      | termsFilter         |
+      | dependentFilter     |
+      | checkboxFilter      |
+      | checkboxFilterGroup |
+      | dateRangeFilter     |
+    Then the search input should have the value ""
+    Then the search listing dropdown field labelled "Term filter example" should have the value "Select a colour"
+    Then the search listing dropdown field labelled "Terms filter example" should have the value "Select a colour"
+    Then the search listing dropdown field labelled "Terms dependent example" should have the value "Select a species"
+    Then the search listing dropdown field labelled "Terms dependent child example" should have the value "All sub species"
+    Then the search listing dropdown field labelled "Terms dependent grandchild example" should have the value "All sub sub species"
+    And the search listing checkbox field labelled "Show archived content" should not be checked
+    And the search listing checkbox group labelled "Checkbox group" should not have any options checked
+    And the search listing date range field labelled "Date range example" should have the values
+      | from | to |
+      |      |    |
diff --git a/examples/nuxt-app/test/features/site/search.feature b/examples/nuxt-app/test/features/site/search.feature
@@ -14,6 +14,7 @@ Feature: Site search
     Then the search listing page should have 5 results
     And the filters toggle should show 0 applied filters
     And the search input should have the value "demo"
+    Then the search results heading should show "Search results for 'demo'"
     And the search listing results count should read "Displaying 1-5 of 5 results"
     And the search listing results should have following items:
       | title                                                 | content                                                                                                                  | url                                                      | component         |
@@ -32,9 +33,13 @@ Feature: Site search
       | filters[0][values][0] | Education        |
     And the network request "siteSearchReq" should be called with the "/site/search-request" fixture
 
+    When I type "the" into the search input
+    Then the search results heading should show "Search results for 'demo'"
+
     When I clear the search filters
     Then the filters toggle should show 0 applied filters
     And the search input should have the value ""
+    And the search results heading should not be displayed
 
   @mockserver
   Example: Overrides site search content types with feature flag
@@ -55,3 +60,4 @@ Feature: Site search
     Given the "/api/tide/search/**" network request is stubbed with fixture "/site/search-response" and status 200 as alias "siteSearchReq"
     When I visit the page "/search"
     Then the search input should be have a max length of 128
+    And the search results heading should not be displayed