From 33a4994240d652261ee2720493a894b99f3d83b6 Mon Sep 17 00:00:00 2001 From: David Featherston Date: Mon, 22 Jul 2024 09:51:29 +1000 Subject: [PATCH] test(nuxt-app): adding tests for analytics events --- .../landingpage/page-components.feature | 58 ++++++++++++++-- .../features/publication/publication.feature | 4 ++ .../test/features/site/analytics.feature | 14 ++++ .../test/fixtures/landingpage/home.json | 19 ++++++ .../publication/sample-publication-page.json | 2 +- .../publication/sample-publication.json | 2 +- .../step_definitions/common/index.ts | 1 + .../common/shared-elements.ts | 4 ++ .../step_definitions/common/site/analytics.ts | 25 +++++++ .../step_definitions/components/accordion.ts | 7 ++ .../step_definitions/components/index.ts | 1 + .../components/media-embed.ts | 66 +++++++++++++++++++ .../components/media-embed/RplMediaEmbed.vue | 2 +- 13 files changed, 197 insertions(+), 8 deletions(-) create mode 100644 examples/nuxt-app/test/features/site/analytics.feature create mode 100644 packages/ripple-test-utils/step_definitions/common/site/analytics.ts create mode 100644 packages/ripple-test-utils/step_definitions/components/media-embed.ts diff --git a/examples/nuxt-app/test/features/landingpage/page-components.feature b/examples/nuxt-app/test/features/landingpage/page-components.feature index 355ffaa933..6001bcc557 100644 --- a/examples/nuxt-app/test/features/landingpage/page-components.feature +++ b/examples/nuxt-app/test/features/landingpage/page-components.feature @@ -17,6 +17,12 @@ Feature: Home page | Accordion #1 | Test rich text content #1 | | Accordion #2 | Test rich text content #2 | And the accordion with ID "972" should display the description "Test accordion description" + When I click the accordion item "Accordion #1" in accordion with ID "accordion-972" + When I click the accordion item "Accordion #1" in accordion with ID "accordion-972" + Then the dataLayer should include the following events + | event | element_id | element_text | name | component | + | open_accordion | accordion-972-970 | Accordion #1 | Test accordion title | rpl-accordion | + | close_accordion | accordion-972-970 | Accordion #1 | Test accordion title | rpl-accordion | @mockserver Scenario: Page component - Accordion (Open/close all) @@ -25,6 +31,10 @@ Feature: Home page When I click the close all button on accordion with ID "accordion-972" Then all accordion items in accordion ID "accordion-972" should be hidden + And the dataLayer should include the following events + | event | element_id | element_text | name | component | + | open_accordion_all | accordion-972 | Open all | Test accordion title | rpl-accordion | + | close_accordion_all | accordion-972 | Close all | Test accordion title | rpl-accordion | @mockserver Scenario: Page component - Promo card @@ -54,7 +64,6 @@ Feature: Home page | displayStyle | title | content | image | | featured | Nav card (featured) | Sample description | /placeholders/medium.png | - @mockserver Scenario: Page component - Key dates card Then a key dates card with ID "988" should exist with the title "Key calendar dates" @@ -68,10 +77,10 @@ Feature: Home page Scenario: Page component - Timeline Then a timeline with ID "992" should exist with the title "Test timeline title" Then a timeline with ID "992" should exist with the following items - | title | date | summary | url | image | - | Milestone 1 title | 2 June to 11 November | Milestone 1 summary field | /test-destination-1 | /placeholders/small.png | - | Milestone 2 title | 4 October to 17 November | Milestone 2 summary field | /test-destination-2 | | - | Milestone 3 title | | Milestone 3 text | | | + | title | date | summary | url | image | + | Milestone 1 title | 2 June to 11 November | Milestone 1 summary field | /test-destination-1 | /placeholders/small.png | + | Milestone 2 title | 4 October to 17 November | Milestone 2 summary field | /test-destination-2 | | + | Milestone 3 title | | Milestone 3 text | | | @mockserver Scenario: Page component - Call to action @@ -106,6 +115,11 @@ Feature: Home page Then the active slide on "1155" should be "1" And the pagination button "Previous" on "1155" should be disabled + And the dataLayer should include the following events + | event | element_id | element_text | component | + | paginate_next | page-component-1155 | Next | rpl-card-carousel | + | paginate_prev | page-component-1155 | Previous | rpl-card-carousel | + @mockserver Scenario: Page component - Media Gallery Given a media gallery with ID "1056" should exist with the following gallery items @@ -124,6 +138,10 @@ Feature: Home page And the pagination button "Next" on "1056" should be disabled When I click the button "Previous" on the component with ID "1056" Then the active slide on "1056" should be "2" + And the dataLayer should include the following events + | event | element_id | element_text | label | component | + | paginate_next | page-component-1056 | Next | Media title two | rpl-media-gallery | + | paginate_prev | page-component-1056 | Previous | Media title two | rpl-media-gallery | @mockserver Scenario: Page component - Media Gallery (Modal) @@ -131,6 +149,10 @@ Feature: Home page Then the "media-gallery" modal should be "visible" When I click the "media-gallery" modal button "Close" Then the "media-gallery" modal should be "hidden" + And the dataLayer should include the following events + | event | element_id | element_text | label | component | + | enter_fullscreen | page-component-1056 | View 'Media title one' fullscreen | Media title one | rpl-media-gallery | + | exit_fullscreen | page-component-1056 | Close | Media title one | rpl-media-gallery | @mockserver Scenario: Page component - Data Table @@ -157,3 +179,29 @@ Feature: Home page | title | content | image | url | | Card one | Card one summary | /placeholders/medium.png | /landing-page-cc-2 | | Card two | Card two summary | /placeholders/medium.png | https://google.com/ | + + @mockserver + Scenario: Page component - Complex image/Media Embed + Given a media embed with ID "1951" should exist + Then the media embed image for "1951" should be "/placeholders/medium.png" + When I click the action "More info" for media embed "1951" + Then the extra data for media embed "1951" should be visible + When I click the action "More info" for media embed "1951" + Then the extra data for media embed "1951" should be hidden + + When I click the action "Fullscreen" for media embed "1951" + Then the "media-embed" modal should be "visible" + When I click the "media-embed" modal button "Close" + Then the "media-embed" modal should be "hidden" + + And the dataLayer should include the following events + | event | element_id | element_text | label | component | + | open_data | page-component-1951 | More info | Complex image | rpl-media-embed | + | close_data | page-component-1951 | More info | Complex image | rpl-media-embed | + | enter_fullscreen | page-component-1951 | Fullscreen | Complex image | rpl-media-embed | + | exit_fullscreen | page-component-1951 | Close | Complex image | rpl-media-embed | + + When I trigger a click for the action "Download it" on the media embed "1951" + Then the dataLayer should include the following events + | event | element_id | element_text | label | file_name | file_extension | type | component | + | file_download | page-component-1951 | Download it | Complex image | medium.png | png | image | rpl-media-embed | diff --git a/examples/nuxt-app/test/features/publication/publication.feature b/examples/nuxt-app/test/features/publication/publication.feature index a2b006ed7e..1b83d5d2d1 100644 --- a/examples/nuxt-app/test/features/publication/publication.feature +++ b/examples/nuxt-app/test/features/publication/publication.feature @@ -26,6 +26,10 @@ Feature: Publication page | title | url | type | size | | Victorian Skills Plan Implementation Update October 2023 | /sites/default/files/2023-10/16686-VSA-Implementation-Plan-Section_FA_Digital.pdf | pdf | 4.61 MB | | Print full document | /victorian-skills-plan-2023-implementation-update/print-all | | | + When I click on the document "Victorian Skills Plan Implementation Update October 2023" + Then the dataLayer should include the following events + | event | element_text | file_name | file_extension | file_size | component | + | file_download | Victorian Skills Plan Implementation Update October 2023 | 16686-VSA-Implementation-Plan-Section_FA_Digital.pdf | pdf | 4.61 MB | rpl-file | @mockserver Example: Publication child diff --git a/examples/nuxt-app/test/features/site/analytics.feature b/examples/nuxt-app/test/features/site/analytics.feature new file mode 100644 index 0000000000..694c88aaab --- /dev/null +++ b/examples/nuxt-app/test/features/site/analytics.feature @@ -0,0 +1,14 @@ +Feature: Analytics + + Background: + Given the site endpoint returns fixture "/site/reference" with status 200 + + @mockserver + Scenario: DataLayer events + Given the site endpoint returns fixture "/site/reference" with status 200 + And the page endpoint for path "/" returns fixture "/landingpage/home" with status 200 + Given I visit the page "/" + + Then the dataLayer should include the following events + | event | page_title | page_url | content_type | + | routeChange | Demo Landing Page | / | landing_page | diff --git a/examples/nuxt-app/test/fixtures/landingpage/home.json b/examples/nuxt-app/test/fixtures/landingpage/home.json index ada9c00fd0..f2e982bbd0 100644 --- a/examples/nuxt-app/test/fixtures/landingpage/home.json +++ b/examples/nuxt-app/test/fixtures/landingpage/home.json @@ -907,6 +907,25 @@ } ] } + }, + { + "uuid": "5cb51ee5-a63f-433e-92a6-017b92ce37fe", + "component": "TideLandingPageMediaEmbed", + "id": "1951", + "props": { + "title": "Complex image", + "caption": "Source by the Department", + "src": "/placeholders/medium.png", + "dataLabel": "More info", + "dataContent": "

Ex eiusmod quis pariatur ipsum exercitation est velit eu magna.

", + "fullscreenLabel": "Fullscreen", + "downloadUrl": "/placeholders/medium.png", + "downloadLabel": "Download it", + "type": "image", + "variant": "complex", + "allowFullscreen": true, + "showTitle": true + } } ], "meta": { diff --git a/examples/nuxt-app/test/fixtures/publication/sample-publication-page.json b/examples/nuxt-app/test/fixtures/publication/sample-publication-page.json index 5d54128761..ea2462aafd 100644 --- a/examples/nuxt-app/test/fixtures/publication/sample-publication-page.json +++ b/examples/nuxt-app/test/fixtures/publication/sample-publication-page.json @@ -127,7 +127,7 @@ "documents": [ { "name": "Victorian Skills Plan Implementation Update October 2023", - "url": "https://master.content.vic.gov.au/sites/default/files/2023-10/16686-VSA-Implementation-Plan-Section_FA_Digital.pdf", + "url": "/sites/default/files/2023-10/16686-VSA-Implementation-Plan-Section_FA_Digital.pdf", "size": "4.61 MB", "extension": "pdf", "id": "64b1b6fc-083d-4570-8b0e-5f54a756a80c" diff --git a/examples/nuxt-app/test/fixtures/publication/sample-publication.json b/examples/nuxt-app/test/fixtures/publication/sample-publication.json index bbe43d6238..dfa0fd8916 100644 --- a/examples/nuxt-app/test/fixtures/publication/sample-publication.json +++ b/examples/nuxt-app/test/fixtures/publication/sample-publication.json @@ -199,7 +199,7 @@ "documents": [ { "name": "Victorian Skills Plan Implementation Update October 2023", - "url": "https://master.content.vic.gov.au/sites/default/files/2023-10/16686-VSA-Implementation-Plan-Section_FA_Digital.pdf", + "url": "/sites/default/files/2023-10/16686-VSA-Implementation-Plan-Section_FA_Digital.pdf", "size": "4.61 MB", "extension": "pdf", "id": "64b1b6fc-083d-4570-8b0e-5f54a756a80c" diff --git a/packages/ripple-test-utils/step_definitions/common/index.ts b/packages/ripple-test-utils/step_definitions/common/index.ts index b914f08684..b0342dfe77 100644 --- a/packages/ripple-test-utils/step_definitions/common/index.ts +++ b/packages/ripple-test-utils/step_definitions/common/index.ts @@ -2,6 +2,7 @@ import './navigation' import './mocks' import './site/alerts' import './site/theme' +import './site/analytics' import './shared-elements' import './sitemap' import './languages' diff --git a/packages/ripple-test-utils/step_definitions/common/shared-elements.ts b/packages/ripple-test-utils/step_definitions/common/shared-elements.ts index d28b2e372a..a5dd12bcc5 100644 --- a/packages/ripple-test-utils/step_definitions/common/shared-elements.ts +++ b/packages/ripple-test-utils/step_definitions/common/shared-elements.ts @@ -266,3 +266,7 @@ Then('the in page navigation should include', (dataTable: DataTable) => { }) }) }) + +Given('I click on the document {string}', (label: string) => { + cy.contains('.rpl-document__link', label).trigger('click') +}) diff --git a/packages/ripple-test-utils/step_definitions/common/site/analytics.ts b/packages/ripple-test-utils/step_definitions/common/site/analytics.ts new file mode 100644 index 0000000000..bb3bf741e0 --- /dev/null +++ b/packages/ripple-test-utils/step_definitions/common/site/analytics.ts @@ -0,0 +1,25 @@ +import { DataTable, Then } from '@badeball/cypress-cucumber-preprocessor' + +Then( + 'the dataLayer should include the following events', + (dataTable: DataTable) => { + const table = dataTable.hashes() + + table.forEach((row) => { + cy.window().then((window) => { + const dataLayer = window.dataLayer + + const event = dataLayer.find((i) => i.event === row.event) + + const updatedRow = Object.entries(row).reduce((acc, [key, value]) => { + return { + ...acc, + [key]: value + } + }, {}) + + cy.wrap(event).should('include', updatedRow) + }) + }) + } +) diff --git a/packages/ripple-test-utils/step_definitions/components/accordion.ts b/packages/ripple-test-utils/step_definitions/components/accordion.ts index 553a2e68c2..7d1d9dbb83 100644 --- a/packages/ripple-test-utils/step_definitions/components/accordion.ts +++ b/packages/ripple-test-utils/step_definitions/components/accordion.ts @@ -43,6 +43,13 @@ Then( } ) +Then( + 'I click the accordion item {string} in accordion with ID {string}', + (text: string, id: string) => { + cy.get(`#${id}`).contains('button', text).click() + } +) + When( 'I click the open all button on accordion with ID {string}', (id: string) => { diff --git a/packages/ripple-test-utils/step_definitions/components/index.ts b/packages/ripple-test-utils/step_definitions/components/index.ts index 9628c9c333..ce7c381f0e 100644 --- a/packages/ripple-test-utils/step_definitions/components/index.ts +++ b/packages/ripple-test-utils/step_definitions/components/index.ts @@ -7,6 +7,7 @@ import './intro-banner' import './key-dates' import './maps' import './media-gallery' +import './media-embed' import './modals' import './promo-card' import './nav-card' diff --git a/packages/ripple-test-utils/step_definitions/components/media-embed.ts b/packages/ripple-test-utils/step_definitions/components/media-embed.ts new file mode 100644 index 0000000000..129fcbe60e --- /dev/null +++ b/packages/ripple-test-utils/step_definitions/components/media-embed.ts @@ -0,0 +1,66 @@ +import { Given, Then } from '@badeball/cypress-cucumber-preprocessor' + +Given('a media embed with ID {string} should exist', (id: string) => { + cy.get(`[data-component-id="${id}"]`).as('component') + cy.get('@component').should('exist') + cy.get(`@component`).should( + 'have.attr', + 'data-component-type', + 'TideLandingPageMediaEmbed' + ) +}) + +Then( + 'I click the action {string} for media embed {string}', + (label: string, id: string) => { + cy.get(`[data-component-id="${id}"]`).as('component') + + cy.get('@component').within(() => { + cy.contains('.rpl-media-embed__action', label).click() + }) + } +) + +Then( + 'I trigger a click for the action {string} on the media embed {string}', + (label: string, id: string) => { + cy.get(`[data-component-id="${id}"]`).as('component') + + cy.get('@component').within(() => { + cy.contains('.rpl-media-embed__action', label).trigger('click') + }) + } +) + +Then( + 'the media embed image for {string} should be {string}', + (id: string, image: string) => { + cy.get(`[data-component-id="${id}"]`).as('component') + + cy.get('@component').within(() => { + cy.get('.rpl-media-embed__image').should('have.attr', 'src', image) + }) + } +) + +Then( + 'the extra data for media embed {string} should be visible', + (id: string) => { + cy.get(`[data-component-id="${id}"]`).as('component') + + cy.get('@component').within(() => { + cy.get('.rpl-media-embed__view-data-content').should('be.visible') + }) + } +) + +Then( + 'the extra data for media embed {string} should be hidden', + (id: string) => { + cy.get(`[data-component-id="${id}"]`).as('component') + + cy.get('@component').within(() => { + cy.get('.rpl-media-embed__view-data-content').should('be.hidden') + }) + } +) diff --git a/packages/ripple-ui-core/src/components/media-embed/RplMediaEmbed.vue b/packages/ripple-ui-core/src/components/media-embed/RplMediaEmbed.vue index 5bf8a3fd88..fb7df56982 100644 --- a/packages/ripple-ui-core/src/components/media-embed/RplMediaEmbed.vue +++ b/packages/ripple-ui-core/src/components/media-embed/RplMediaEmbed.vue @@ -138,7 +138,7 @@ const toggleFullscreen = (event) => { 'viewFullscreen', { action: isFullScreenOpen.value ? 'enter' : 'exit', - text: event?.label || fullscreenContentLabel.value, + text: event?.text || fullscreenContentLabel.value, label: props.title, type: props.type },