Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

test(nuxt-app): adding tests for analytics events #1271

Merged
merged 2 commits into from
Jul 25, 2024
Merged

test(nuxt-app): adding tests for analytics events #1271

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
33a4994
test(nuxt-app): adding tests for analytics events
Jul 21, 2024
2d9bad7
Merge branch 'develop' into feature/analytics-tests
lambry Jul 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 53 additions & 5 deletions examples/nuxt-app/test/features/landingpage/page-components.feature
View file
Open in desktop
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 |
4 changes: 4 additions & 0 deletions examples/nuxt-app/test/features/publication/publication.feature
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
2 changes: 1 addition & 1 deletion examples/nuxt-app/test/fixtures/publication/sample-publication-page.json
View file
Open in desktop
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
2 changes: 1 addition & 1 deletion examples/nuxt-app/test/fixtures/publication/sample-publication.json
View file
Open in desktop
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
1 change: 1 addition & 0 deletions packages/ripple-test-utils/step_definitions/common/index.ts
View file
Open in desktop
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'
4 changes: 4 additions & 0 deletions packages/ripple-test-utils/step_definitions/common/shared-elements.ts
View file
Open in desktop
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')
})
25 changes: 25 additions & 0 deletions packages/ripple-test-utils/step_definitions/common/site/analytics.ts
View file
Open in desktop
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)
})
})
}
)
7 changes: 7 additions & 0 deletions packages/ripple-test-utils/step_definitions/components/accordion.ts
View file
Open in desktop
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
1 change: 1 addition & 0 deletions packages/ripple-test-utils/step_definitions/components/index.ts
View file
Open in desktop
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
66 changes: 66 additions & 0 deletions packages/ripple-test-utils/step_definitions/components/media-embed.ts
View file
Open in desktop
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')
})
}
)
2 changes: 1 addition & 1 deletion packages/ripple-ui-core/src/components/media-embed/RplMediaEmbed.vue
View file
Open in desktop
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
Loading