Skip to content

Commit

Permalink
test(nuxt-app): adding tests for analytics events
Browse files Browse the repository at this point in the history
  • Loading branch information
David Featherston committed Jul 21, 2024
1 parent 91dcb0b commit 33a4994
Show file tree
Hide file tree
Showing 13 changed files with 197 additions and 8 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand 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
Expand Down Expand Up @@ -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"
Expand All @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -124,13 +138,21 @@ 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)
When I click the button "View 'Media title one' fullscreen" on the component with ID "1056"
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
Expand All @@ -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 |
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
14 changes: 14 additions & 0 deletions examples/nuxt-app/test/features/site/analytics.feature
Original file line number Diff line number Diff line change
@@ -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 |
19 changes: 19 additions & 0 deletions examples/nuxt-app/test/fixtures/landingpage/home.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": "<p>Ex eiusmod quis pariatur ipsum exercitation est velit eu magna.</p>",
"fullscreenLabel": "Fullscreen",
"downloadUrl": "/placeholders/medium.png",
"downloadLabel": "Download it",
"type": "image",
"variant": "complex",
"allowFullscreen": true,
"showTitle": true
}
}
],
"meta": {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import './navigation'
import './mocks'
import './site/alerts'
import './site/theme'
import './site/analytics'
import './shared-elements'
import './sitemap'
import './languages'
Original file line number Diff line number Diff line change
Expand Up @@ -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')
})
Original file line number Diff line number Diff line change
@@ -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)
})
})
}
)
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down
Original file line number Diff line number Diff line change
@@ -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')
})
}
)
Original file line number Diff line number Diff line change
Expand Up @@ -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
},
Expand Down

0 comments on commit 33a4994

Please sign in to comment.