feat(@dpc-sdp/ripple-tide-search): add view results event to custom c…

…ollections make event label also consider location inputs
dpc-sdp · Jan 31, 2025 · 8147c19 · 8147c19
1 parent 4857cda
commit 8147c19
Show file tree

Hide file tree

Showing 6 changed files with 1,144 additions and 2 deletions.
diff --git a/examples/nuxt-app/test/features/landingpage/custom-collection.feature b/examples/nuxt-app/test/features/landingpage/custom-collection.feature
@@ -18,6 +18,37 @@ Feature: Custom Collection
     And the "cslReq" network request should be made to the elasticsearch endpoint
     And the search listing layout should be "table"
 
+  @mockserver
+  Scenario: Custom collection emits search related events for analytics
+    Given the page endpoint for path "/custom-collection" returns fixture "/landingpage/custom-collection/page" with status 200
+    And the search network request is stubbed with fixture "/landingpage/custom-collection/response" and status 200
+
+    When I visit the page "/custom-collection"
+    And I wait 400 milliseconds
+    Then I type "the" into the custom collection input
+    Then I toggle the content collection filters
+    When I click the search listing dropdown field labelled "Topics"
+    And I click the option labelled "Another Demo Topic" in the selected dropdown
+    When I click the search listing dropdown field labelled "Topics"
+    And I submit the search filters
+    And I wait 400 milliseconds
+    Then I clear the search filters
+    Then I toggle the content collection filters
+    And I click 'next' in the pagination controls
+    And I wait 400 milliseconds
+
+    Then the dataLayer should include the following events
+      | event                | name                   | element_id          | element_text         | filters                  | count | label | component              | index |
+      | view_search_results  | Test custom collection | page-component-4470 |                      |                          | 282   |       | tide-custom-collection | 1     |
+      | open_filters         | Test custom collection | page-component-4470 | Filters              |                          |       | the   | tide-custom-collection |       |
+      | search               | Test custom collection | page-component-4470 | Apply search filters | topic=Another+Demo+Topic |       | the   | tide-custom-collection |       |
+      | view_search_results  | Test custom collection | page-component-4470 |                      | topic=Another+Demo+Topic | 282   | the   | tide-custom-collection | 1     |
+      | clear_search_filters | Test custom collection | page-component-4470 | Clear search filters | topic=Another+Demo+Topic | 282   | the   | tide-custom-collection |       |
+      | view_search_results  | Test custom collection | page-component-4470 |                      |                          | 282   |       | tide-custom-collection | 1     |
+      | close_filters        | Test custom collection | page-component-4470 | Filters              |                          |       |       | tide-custom-collection |       |
+      | paginate_next        | Test custom collection | page-component-4470 | Next                 |                          | 282   |       | tide-custom-collection | 2     |
+      | view_search_results  | Test custom collection | page-component-4470 |                      |                          | 282   |       | tide-custom-collection | 2     |
+
   @mockserver
   Scenario: Default page - default form theme
     Given the page endpoint for path "/custom-collection-theme-default" returns fixture "/landingpage/custom-collection/form-theme-default" with status 200

diff --git a/examples/nuxt-app/test/features/search-listing/analytics.feature b/examples/nuxt-app/test/features/search-listing/analytics.feature
@@ -5,6 +5,37 @@ Feature: Search listing - Analytics
     And the search autocomplete request is stubbed with "/search-listing/suggestions/none" fixture
     And I am using a "macbook-16" device
 
+  @mockserver
+  Example: Listing emits search related events for analytics
+    Given the page endpoint for path "/search-listing" returns fixture "/search-listing/filters/page-simple" with status 200
+    And the search network request is stubbed with fixture "/search-listing/filters/response-large" and status 200
+
+    When I visit the page "/search-listing"
+    And I wait 400 milliseconds
+    Then I type "the" into the search input
+    And I toggle the search listing filters section
+    Then I click the search listing dropdown field labelled "Term filter example"
+    And I click the option labelled "Blue" in the selected dropdown
+    And I click the search listing dropdown field labelled "Term filter example"
+    And I submit the search filters
+    And I wait 400 milliseconds
+    Then I clear the search filters
+    And I toggle the search listing filters section
+    And I click 'next' in the pagination controls
+    And I wait 400 milliseconds
+
+    Then the dataLayer should include the following events
+      | event                | name           | form_id             | element_text         | filters         | count | label | component           | index |
+      | view_search_results  | Simple listing | tide-search-listing |                      |                 | 133   |       | tide-search-listing | 1     |
+      | open_filters         | Simple listing | tide-search-listing | Filters              |                 |       | the   | tide-search-listing |       |
+      | search               | Simple listing | tide-search-listing | Apply search filters | termFilter=Blue |       | the   | tide-search-listing |       |
+      | view_search_results  | Simple listing | tide-search-listing |                      | termFilter=Blue | 133   | the   | tide-search-listing | 1     |
+      | clear_search_filters | Simple listing | tide-search-listing | Clear search filters | termFilter=Blue | 133   | the   | tide-search-listing |       |
+      | view_search_results  | Simple listing | tide-search-listing |                      |                 | 133   |       | tide-search-listing | 1     |
+      | close_filters        | Simple listing | tide-search-listing | Filters              |                 |       |       | tide-search-listing |       |
+      | paginate_next        | Simple listing | tide-search-listing | Next                 |                 | 133   |       | tide-search-listing | 2     |
+      | view_search_results  | Simple listing | tide-search-listing |                      |                 | 133   |       | tide-search-listing | 2     |
+
   @mockserver
   Example: Filters emit data for analytics
     Given the page endpoint for path "/filters" returns fixture "/search-listing/filters/page" with status 200

diff --git a/examples/nuxt-app/test/fixtures/landingpage/custom-collection/page.json b/examples/nuxt-app/test/fixtures/landingpage/custom-collection/page.json
@@ -93,6 +93,7 @@
       "id": "4470",
       "props": {
         "id": "4470",
+        "title": "Test custom collection",
         "searchListingConfig": {
           "resultsPerPage": 20,
           "formTheme": "default",

diff --git a/examples/nuxt-app/test/fixtures/search-listing/filters/page-simple.json b/examples/nuxt-app/test/fixtures/search-listing/filters/page-simple.json
@@ -0,0 +1,77 @@
+{
+  "title": "Simple listing",
+  "changed": "2022-11-02T12:47:29+11:00",
+  "created": "2022-11-02T12:47:29+11:00",
+  "type": "tide_search_listing",
+  "nid": "11dede11-10c0-111e1-1100-000000000330",
+  "showTopicTags": true,
+  "summary": "",
+  "config": {
+    "searchListingConfig": {
+      "resultsPerPage": 10
+    },
+    "queryConfig": {
+      "multi_match": {
+        "query": "{{query}}",
+        "fields": [
+          "title^3",
+          "field_landing_page_summary^2",
+          "body",
+          "field_paragraph_body",
+          "summary_processed"
+        ]
+      }
+    },
+    "results": {
+      "layout": {
+        "component": "TideSearchResultsList"
+      },
+      "item": {
+        "grant": {
+          "component": "TideGrantSearchResult"
+        }
+      }
+    },
+    "globalFilters": [
+      { "terms": { "type": ["grant"] } },
+      { "terms": { "field_node_site": [8888] } }
+    ],
+    "userFilters": [
+      {
+        "id": "termFilter",
+        "component": "TideSearchFilterDropdown",
+        "filter": {
+          "type": "term",
+          "value": "termFilter.keyword"
+        },
+        "aggregations": {
+          "field": "termFilter",
+          "source": "taxonomy"
+        },
+        "props": {
+          "id": "termFilter",
+          "label": "Term filter example",
+          "placeholder": "Select a colour",
+          "multiple": true,
+          "options": [
+            {
+              "id": "1",
+              "label": "Red",
+              "value": "Red"
+            },
+            {
+              "id": "2",
+              "label": "Green",
+              "value": "Green"
+            },
+            {
+              "id": "3",
+              "label": "Blue",
+              "value": "Blue"
+            }
+          ]
+        }
+      }
+    ]
+  }
+}