dpc-sdp · dylankelly · May 24, 2024 · May 23, 2024
diff --git a/.github/workflows/nuxt.yml b/.github/workflows/nuxt.yml
@@ -65,6 +65,7 @@ jobs:
           NUXT_PUBLIC_TIDE_BASE_URL: 'https://test.base.url/'
           NUXT_PUBLIC_TIDE_SITE: 'TEST_SITE'
           NUXT_PUBLIC_API_URL: 'http://localhost:3001'
+          NUXT_PUBLIC_TIDE_APP_SEARCH_ENGINE_NAME: 'TEST_ENGINE'
           API_PORT: '3001'
           LOG_LEVEL: 'debug'
           # DEBUG: '@cypress/github-action'

diff --git a/examples/nuxt-app/package.json b/examples/nuxt-app/package.json
@@ -17,8 +17,8 @@
     "mockserver": "node ./../../packages/nuxt-ripple-cli/dist/commands/index.js mock ./test/fixtures -S ./test/fixtures/site/reference.json -R mock-routes.json",
     "cy:open": "cypress open --e2e --browser electron",
     "cy:run": "cypress run",
-    "test:ci": "NUXT_PUBLIC_API_URL=http://localhost:3001 API_PORT=3001 start-test start tcp:3000 'cy:run'",
-    "test:integration": "NUXT_PUBLIC_TIDE_SITE=TEST_SITE NUXT_PUBLIC_TIDE_BASE_URL=https://test.base.url/ NUXT_PUBLIC_API_URL=http://localhost:3001 API_PORT=3001 start-test dev tcp:3000 'cy:open'"
+    "test:ci": "NUXT_PUBLIC_TIDE_SITE=TEST_SITE NUXT_PUBLIC_TIDE_APP_SEARCH_ENGINE_NAME=TEST_ENGINE NUXT_PUBLIC_API_URL=http://localhost:3001 API_PORT=3001 start-test start tcp:3000 'cy:run'",
+    "test:integration": "NUXT_PUBLIC_TIDE_SITE=TEST_SITE NUXT_PUBLIC_TIDE_APP_SEARCH_ENGINE_NAME=TEST_ENGINE NUXT_PUBLIC_TIDE_BASE_URL=https://test.base.url/ NUXT_PUBLIC_API_URL=http://localhost:3001 API_PORT=3001 start-test dev tcp:3000 'cy:open'"
   },
   "dependencies": {
     "@dpc-sdp/nuxt-ripple": "workspace:*",

diff --git a/examples/nuxt-app/test/features/site/search.feature b/examples/nuxt-app/test/features/site/search.feature
@@ -0,0 +1,28 @@
+Feature: Site search
+
+  Background:
+    Given the site endpoint returns fixture "/site/reference" with status 200
+
+  @mockserver
+  Example: Display and manage site search results
+    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?q=demo"
+    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"
+
+    When I toggle the search listing filters section
+    And I click the search listing dropdown field labelled "Select a topic"
+    Then I click the option labelled "Education" in the selected dropdown
+    Then I click the search listing dropdown field labelled "Select a topic"
+    And I submit the search filters
+    Then the filters toggle should show 1 applied filters
+    And the URL should reflect that the current active filters are as follows:
+      | id                    | value            |
+      | filters[0][field]     | field_topic_name |
+      | filters[0][values][0] | Education        |
+    And the network request "siteSearchReq" should be called with the "/site/search-request" fixture
+
+    When I clear the search filters
+    Then the filters toggle should show 0 applied filters
+    And the search input should have the value ""
diff --git a/examples/nuxt-app/test/fixtures/site/search-request.json b/examples/nuxt-app/test/fixtures/site/search-request.json
@@ -0,0 +1,79 @@
+{
+  "query": "demo",
+  "filters": {
+    "all": [
+      {
+        "any": [
+          {
+            "field_topic_name": "Education"
+          }
+        ]
+      },
+      {
+        "any": [
+          {
+            "field_node_site": "TEST_SITE"
+          }
+        ]
+      },
+      {
+        "any": [
+          {
+            "type": [
+              "landing_page",
+              "event",
+              "grant",
+              "news",
+              "publication",
+              "publication_page",
+              "tide_search_listing"
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  "search_fields": {
+    "title": {
+      "weight": 10
+    },
+    "body": {},
+    "field_paragraph_body": {},
+    "field_landing_page_summary": {},
+    "summary_processed": {},
+    "field_paragraph_summary": {},
+    "field_event_details_event_locality": {}
+  },
+  "result_fields": {
+    "title": {
+      "raw": {
+        "size": 150
+      }
+    },
+    "field_landing_page_summary": {
+      "snippet": {
+        "size": 150,
+        "fallback": true
+      }
+    },
+    "summary_processed": {
+      "snippet": {
+        "size": 150,
+        "fallback": true
+      }
+    },
+    "changed": {
+      "raw": {}
+    },
+    "url": {
+      "raw": {}
+    },
+    "type": {
+      "raw": {}
+    }
+  },
+  "page": {
+    "size": 10,
+    "current": 1
+  }
+}
diff --git a/examples/nuxt-app/test/fixtures/site/search-response.json b/examples/nuxt-app/test/fixtures/site/search-response.json
@@ -0,0 +1,150 @@
+{
+  "meta": {
+    "alerts": [],
+    "warnings": [],
+    "precision": 2,
+    "engine": {
+      "name": "content-vic-production",
+      "type": "elasticsearch"
+    },
+    "page": {
+      "current": 1,
+      "total_pages": 1,
+      "total_results": 4,
+      "size": 10
+    },
+    "request_id": "3940dd8bb5a8a54484a2487ffb5fa272"
+  },
+  "results": [
+    {
+      "field_landing_page_summary": {
+        "snippet": "Explore local TAFE and training providers across Melbourne’s south-eastern region"
+      },
+      "title": {
+        "raw": ["TAFE and training providers in Melbourne’s south-east"]
+      },
+      "type": { "raw": ["landing_page"] },
+      "url": {
+        "raw": [
+          "/site-4/tafes-training-providers-melbourne-south-eastern-region"
+        ]
+      },
+      "changed": { "raw": ["2024-05-23T02:59:08+00:00"] },
+      "_meta": {
+        "engine": "content-vic-production",
+        "score": 1.0,
+        "id": "entity:node/37241:en"
+      },
+      "id": { "raw": "entity:node/37241:en" }
+    },
+    {
+      "field_landing_page_summary": {
+        "snippet": "With TAFE, it&#39;s now easier than ever to learn new skills for your chosen career or retrain to get the job of your dreams"
+      },
+      "title": { "raw": ["Time for a career change?"] },
+      "type": { "raw": ["landing_page"] },
+      "url": { "raw": ["/site-4/career-change"] },
+      "changed": { "raw": ["2024-05-23T00:06:15+00:00"] },
+      "_meta": {
+        "engine": "content-vic-production",
+        "score": 1.0,
+        "id": "entity:node/38798:en"
+      },
+      "id": { "raw": "entity:node/38798:en" }
+    },
+    {
+      "field_landing_page_summary": {
+        "snippet": "The Camps, Sports and Excursions Fund provides payments for eligible students to attend school camps, excursions, and sports and outdoor education"
+      },
+      "title": { "raw": ["Camps, Sports and Excursions Fund"] },
+      "type": { "raw": ["grant"] },
+      "url": { "raw": ["/site-4/camps-sports-and-excursions-fund"] },
+      "changed": { "raw": ["2024-05-23T04:49:38+00:00"] },
+      "_meta": {
+        "engine": "content-vic-production",
+        "score": 1.0,
+        "id": "entity:node/24023:en"
+      },
+      "id": { "raw": "entity:node/24023:en" }
+    },
+    {
+      "field_landing_page_summary": {
+        "snippet": "This program aims to enhance the quality of the movement environment in early childhood education settings"
+      },
+      "title": { "raw": ["Movement Environment Rating Scale (MOVERS)"] },
+      "type": { "raw": ["landing_page"] },
+      "url": { "raw": ["/site-4/movement-environment-rating-scale-movers"] },
+      "changed": { "raw": ["2024-03-01T08:25:05+00:00"] },
+      "_meta": {
+        "engine": "content-vic-production",
+        "score": 1.0,
+        "id": "entity:node/30713:en"
+      },
+      "id": { "raw": "entity:node/30713:en" }
+    },
+    {
+      "field_landing_page_summary": {
+        "snippet": "Learn more about our sponsors"
+      },
+      "title": { "raw": ["Sponsors of the 2024 Victorian Training Awards"] },
+      "type": { "raw": ["landing_page"] },
+      "url": { "raw": ["/site-4/2024-victorian-training-award-sponsors"] },
+      "changed": { "raw": ["2024-05-23T05:11:21+00:00"] },
+      "_meta": {
+        "engine": "content-vic-production",
+        "score": 1.0,
+        "id": "entity:node/17913:en"
+      },
+      "id": { "raw": "entity:node/17913:en" }
+    }
+  ],
+  "facets": {
+    "field_topic_name": [
+      {
+        "type": "value",
+        "data": [
+          {
+            "value": "Education",
+            "count": 2548
+          },
+          {
+            "value": "Governance",
+            "count": 775
+          },
+          {
+            "value": "Equality",
+            "count": 740
+          },
+          {
+            "value": "Communities",
+            "count": 692
+          },
+          {
+            "value": "Health & social support",
+            "count": 600
+          },
+          {
+            "value": "Traffic & transport",
+            "count": 313
+          },
+          {
+            "value": "Environment, water & energy",
+            "count": 302
+          },
+          {
+            "value": "Law & justice",
+            "count": 263
+          },
+          {
+            "value": "Business & the workplace",
+            "count": 170
+          },
+          {
+            "value": "Jobs & careers",
+            "count": 165
+          }
+        ]
+      }
+    ]
+  }
+}
diff --git a/packages/ripple-test-utils/step_definitions/common/mocks.ts b/packages/ripple-test-utils/step_definitions/common/mocks.ts
@@ -257,6 +257,15 @@ Then(
   }
 )
 
+Then(
+  'the network request {string} should be called with the {string} fixture',
+  (alias: string, requestFixture: string) => {
+    cy.fixture(requestFixture).then((fixture) => {
+      cy.get(`@${alias}`).its('request.body').should('deep.equal', fixture)
+    })
+  }
+)
+
 Then(
   'the search aggregation request should be called with the {string} fixture',
   (requestFixture: string) => {

diff --git a/packages/ripple-tide-search/components/TideSearchPage.vue b/packages/ripple-tide-search/components/TideSearchPage.vue
@@ -101,9 +101,16 @@ const {
 )
 
 const filtersExpanded = ref(false)
-const toggleFiltersLabel = 'Refine search'
 const submitFiltersLabel = 'Apply search filters'
 
+const toggleFiltersLabel = computed(() => {
+  let label = 'Refine search'
+
+  return searchState.value?.filters?.length
+    ? `${label} (${searchState.value.filters.length})`
+    : label
+})
+
 const baseEvent = () => ({
   contextId: props.id,
   name: props.pageTitle,
@@ -251,7 +258,9 @@ watch(
               :title="pageTitle"
               @submit="handleFilterSubmit"
             >
-              <div class="rpl-grid rpl-grid--no-row-gap tide-search-filters">
+              <div
+                class="rpl-grid rpl-grid--no-row-gap rpl-u-margin-t-6 tide-search-filters"
+              >
                 <div
                   v-for="filter in filtersConfig"
                   :key="filter.field"
@@ -312,6 +321,7 @@ watch(
                 <RplResultListingItem
                   v-for="(result, idx) in results"
                   :key="`result-${idx}-${result.id}`"
+                  data-component-type="search-result"
                 >
                   <component :is="result.component" v-bind="result.props" />
                 </RplResultListingItem>