diff --git a/examples/nuxt-app/test/features/landingpage/home.feature b/examples/nuxt-app/test/features/landingpage/home.feature index a32ac8eb3e..f76236fd26 100644 --- a/examples/nuxt-app/test/features/landingpage/home.feature +++ b/examples/nuxt-app/test/features/landingpage/home.feature @@ -59,143 +59,3 @@ Feature: Home page Given the page endpoint for path "/search/cats" returns fixture "/landingpage/home" with status 200 Then a search banner with ID "1911" should exist with the placeholder "Test search placeholder" Then in a search banner with ID "1911", searching for "cats" should take me to "/search/cats" - - @mockserver - Scenario: Page component - Basic text - Then a wysiwyg content area with ID "969" should exist with the content "Here is some sample rich text content" - - @mockserver - Scenario: Page component - Accordion - Then an accordion with ID "972" should exist with title "Test accordion title" and have the following accordion items - | title | content | - | Accordion #1 | Test rich text content #1 | - | Accordion #2 | Test rich text content #2 | - - @mockserver - Scenario: Page component - Accordion (Open/close all) - When I click the open all button on accordion with ID "accordion-972" - Then all accordion items in accordion ID "accordion-972" should be visible - - 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 - - @mockserver - Scenario: Page component - Promo card - Then a promo card with ID "976" should exist with the following properties - | displayStyle | title | content | image | - | noImage | Promo card (noImage) | Sample description | | - - Then a promo card with ID "977" should exist with the following properties - | displayStyle | title | content | image | - | thumbnail | Promo card (thumbnail) | Sample description | https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Melbourne-tram.jpg | - - Then a promo card with ID "978" should exist with the following properties - | displayStyle | title | content | image | - | profile | Promo card (profile) | Sample description | https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Melbourne-tram.jpg | - - @mockserver - Scenario: Page component - Nav card - Then a nav card with ID "981" should exist with the following properties - | displayStyle | title | content | image | - | noImage | Nav card (noImage) | Sample description | | - - Then a nav card with ID "982" should exist with the following properties - | displayStyle | title | content | image | - | thumbnail | Nav card (thumbnail) | Sample description | https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Melbourne-tram.jpg | - - Then a nav card with ID "983" should exist with the following properties - | displayStyle | title | content | image | - | featured | Nav card (featured) | Sample description | https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Melbourne-tram.jpg | - - - @mockserver - Scenario: Page component - Key dates card - Then a key dates card with ID "988" should exist with the title "Key calendar dates" - Then a key dates card with ID "988" should exist with the following dates - | title | date | summary | - | An event | 12th October 2022 | Summary of an event | - | Another event | 13th October 2022 | Summary of another event | - Then a key dates card with ID "988" should exist with cta text "Test CTA text" and link to "/test-cta-link" - - @mockserver - 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 | https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/VicFleet-Police-car-on-road.jpg | - | 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 - Then a call to action with ID "1024" should exist with the following properties - | title | summary | ctaText | image | - | Test call to action title | This is the description | Test CTA text | https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Two-men-working-in-hi-vis-clothing.jpg | - - @mockserver - Scenario: Page component - Stats grid - Then a stats grid with ID "1028" should exist with the following items - | label | value | - | Label 1 | Value 1 | - | Label 2 | Value 2 | - - @mockserver - Scenario: Page component - Card carousel - Given a card carousel with ID "1155" should exist with the following promo cards - | title | date | content | url | image | - | Sample title | 1 Dec to 31 Dec | Sample Card Summary | /sample-page | https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Aerial-shot-of-new-housing-development.jpg | - | Promotion title | 3 Nov 2022 | Promotion Card summary | /promo-page | https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Engage-Vic-photo-hero.jpeg | - And the card carousel with ID "1155" should contain a key dates card with the title "Key calendar dates" and the following entries - | title | subtitle | content | - | April 16th | Key subtitle 1 | Key content 1 | - | December 1st | Key subtitle 2 | Key content 2 | - - @mockserver - Scenario: Page component - Card carousel (Slider) - When I click the button "Next" on the component with ID "1155" - Then the active slide on "1155" should be "2" - And the pagination button "Next" on "1155" should be disabled - When I click the button "Previous" on the component with ID "1155" - Then the active slide on "1155" should be "1" - And the pagination button "Previous" on "1155" should be disabled - - @mockserver - Scenario: Page component - Media Gallery - Given a media gallery with ID "1056" should exist with the following gallery items - | title | caption | image | - | Media title one | The first media caption | https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/2018-19-State-Budget.jpg | - | Media title two | The second media caption | https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Aerial-shot-of-new-housing-development.jpg | - | Media title three | The third media caption | https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Bendigo-Hospital.jpg | - - @mockserver - Scenario: Page component - Media Gallery (Slider) - Given the pagination button "Previous" on "1056" should be disabled - When I click the button "Next" on the component with ID "1056" - Then the active slide on "1056" should be "2" - When I click the button "Next" on the component with ID "1056" - Then the active slide on "1056" should be "3" - 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" - - @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" - - @mockserver - Scenario: Page component - Data Table - Then a data table with ID "1936" should exist with the following structure - | type | cell-one | cell-two | cell-three | - | th | Row One Column One | Row One Column Two | Row One Column Three | - | td | Row Two Column One | Row Two Column Two | Row Two Column Three | - | td | Row Three Column One | Row Three Column Two | Row Three Column Three | - - @mockserver - Scenario: Page component - Category Grid i.e. compact cards - Then a category grid with ID "7052" should exist with the following cards - | title | content | image | url | - | Card one | Card one summary | https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Aerial-shot-of-new-housing-development.jpg | /landing-page-cc-2 | - | Card two | Card two summary | https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/2018-19-State-Budget.jpg | https://google.com/ | diff --git a/examples/nuxt-app/test/features/landingpage/page-components.feature b/examples/nuxt-app/test/features/landingpage/page-components.feature new file mode 100644 index 0000000000..19a3637078 --- /dev/null +++ b/examples/nuxt-app/test/features/landingpage/page-components.feature @@ -0,0 +1,158 @@ +Feature: Home page + + Example of mocked page + Background: + Given the page endpoint for path "/" returns fixture "/landingpage/home" with status 200 + And the site endpoint returns fixture "/site/reference" with status 200 + Given I visit the page "/" + + @mockserver + Scenario: Page component - Basic text + Then a wysiwyg content area with ID "969" should exist with the content "Here is some sample rich text content" + + @mockserver + Scenario: Page component - Accordion + Then an accordion with ID "972" should exist with title "Test accordion title" and have the following accordion items + | title | content | + | Accordion #1 | Test rich text content #1 | + | Accordion #2 | Test rich text content #2 | + + @mockserver + Scenario: Page component - Accordion (Open/close all) + When I click the open all button on accordion with ID "accordion-972" + Then all accordion items in accordion ID "accordion-972" should be visible + + 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 + + @mockserver + Scenario: Page component - Promo card + Then a promo card with ID "976" should exist with the following properties + | displayStyle | title | content | image | + | noImage | Promo card (noImage) | Sample description | | + + Then a promo card with ID "977" should exist with the following properties + | displayStyle | title | content | image | + | thumbnail | Promo card (thumbnail) | Sample description | https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Melbourne-tram.jpg | + + Then a promo card with ID "978" should exist with the following properties + | displayStyle | title | content | image | + | profile | Promo card (profile) | Sample description | https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Melbourne-tram.jpg | + + @mockserver + Scenario: Page component - Nav card + Then a nav card with ID "981" should exist with the following properties + | displayStyle | title | content | image | + | noImage | Nav card (noImage) | Sample description | | + + Then a nav card with ID "982" should exist with the following properties + | displayStyle | title | content | image | + | thumbnail | Nav card (thumbnail) | Sample description | https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Melbourne-tram.jpg | + + Then a nav card with ID "983" should exist with the following properties + | displayStyle | title | content | image | + | featured | Nav card (featured) | Sample description | https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Melbourne-tram.jpg | + + + @mockserver + Scenario: Page component - Key dates card + Then a key dates card with ID "988" should exist with the title "Key calendar dates" + Then a key dates card with ID "988" should exist with the following dates + | title | date | summary | + | An event | 12th October 2022 | Summary of an event | + | Another event | 13th October 2022 | Summary of another event | + Then a key dates card with ID "988" should exist with cta text "Test CTA text" and link to "/test-cta-link" + + @mockserver + 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 | https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/VicFleet-Police-car-on-road.jpg | + | 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 + Then a call to action with ID "1024" should exist with the following properties + | title | summary | ctaText | image | + | Test call to action title | This is the description | Test CTA text | https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Two-men-working-in-hi-vis-clothing.jpg | + + @mockserver + Scenario: Page component - Stats grid + Then a stats grid with ID "1028" should exist with the following items + | label | value | + | Label 1 | Value 1 | + | Label 2 | Value 2 | + + @mockserver + Scenario: Page component - Card carousel + Given a card carousel with ID "1155" should exist with the following promo cards + | title | date | content | url | image | + | Sample title | 1 Dec to 31 Dec | Sample Card Summary | /sample-page | https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Aerial-shot-of-new-housing-development.jpg | + | Promotion title | 3 Nov 2022 | Promotion Card summary | /promo-page | https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Engage-Vic-photo-hero.jpeg | + And the card carousel with ID "1155" should contain a key dates card with the title "Key calendar dates" and the following entries + | title | subtitle | content | + | April 16th | Key subtitle 1 | Key content 1 | + | December 1st | Key subtitle 2 | Key content 2 | + + @mockserver + Scenario: Page component - Card carousel (Slider) + When I click the button "Next" on the component with ID "1155" + Then the active slide on "1155" should be "2" + And the pagination button "Next" on "1155" should be disabled + When I click the button "Previous" on the component with ID "1155" + Then the active slide on "1155" should be "1" + And the pagination button "Previous" on "1155" should be disabled + + @mockserver + Scenario: Page component - Media Gallery + Given a media gallery with ID "1056" should exist with the following gallery items + | title | caption | image | + | Media title one | The first media caption | https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/2018-19-State-Budget.jpg | + | Media title two | The second media caption | https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Aerial-shot-of-new-housing-development.jpg | + | Media title three | The third media caption | https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Bendigo-Hospital.jpg | + + @mockserver + Scenario: Page component - Media Gallery (Slider) + Given the pagination button "Previous" on "1056" should be disabled + When I click the button "Next" on the component with ID "1056" + Then the active slide on "1056" should be "2" + When I click the button "Next" on the component with ID "1056" + Then the active slide on "1056" should be "3" + 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" + + @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" + + @mockserver + Scenario: Page component - Data Table + Given a data table with ID "1936" + Then it should have a heading + And have 3 rows and 3 columns + | type | cell-one | cell-two | cell-three | + | th | Row One Column One | Row One Column Two | Row One Column Three | + | td | Row Two Column One | Row Two Column Two | Row Two Column Three | + | td | Row Three Column One | Row Three Column Two | Row Three Column Three | + + @mockserver + Scenario: Page component - Data Table without headings + Given a data table with ID "1937" + Then it should have no heading + And have 2 rows and 3 columns + | type | cell-one | cell-two | cell-three | + | td | Row Two Column One | Row Two Column Two | Row Two Column Three | + | td | Row Three Column One | Row Three Column Two | Row Three Column Three | + + @mockserver + Scenario: Page component - Category Grid i.e. compact cards + Then a category grid with ID "7052" should exist with the following cards + | title | content | image | url | + | Card one | Card one summary | https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Aerial-shot-of-new-housing-development.jpg | /landing-page-cc-2 | + | Card two | Card two summary | https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/2018-19-State-Budget.jpg | https://google.com/ | diff --git a/examples/nuxt-app/test/fixtures/landingpage/home.json b/examples/nuxt-app/test/fixtures/landingpage/home.json index f3362b1e6d..9771b0b57b 100644 --- a/examples/nuxt-app/test/fixtures/landingpage/home.json +++ b/examples/nuxt-app/test/fixtures/landingpage/home.json @@ -697,6 +697,27 @@ ] } }, + { + "component": "TideLandingPageDataTable", + "id": "1937", + "props": { + "caption": "", + "headingType": { + "horizontal": false, + "vertical": false + }, + "orientation": "row", + "columns": [], + "items": [ + ["Row Two Column One", "Row Two Column Two", "Row Two Column Three"], + [ + "Row Three Column One", + "Row Three Column Two", + "Row Three Column Three" + ] + ] + } + }, { "component": "TideLandingPageCategoryGrid", "id": "7052", diff --git a/packages/ripple-test-utils/step_definitions/components/data-table.ts b/packages/ripple-test-utils/step_definitions/components/data-table.ts index c57b60348c..b16980216a 100644 --- a/packages/ripple-test-utils/step_definitions/components/data-table.ts +++ b/packages/ripple-test-utils/step_definitions/components/data-table.ts @@ -1,19 +1,22 @@ -import { Then, DataTable } from '@badeball/cypress-cucumber-preprocessor' +import { Then, Given, DataTable } from '@badeball/cypress-cucumber-preprocessor' + +Given('a data table with ID {string}', (id: string) => { + cy.get(`[data-component-id="${id}"]`).as('component') + cy.get('@component') + .should('exist') + .should('have.attr', 'data-component-type', 'TideLandingPageDataTable') +}) Then( - 'a data table with ID {string} should exist with the following structure', - (id: string, dataTable: DataTable) => { + 'have {int} rows and {int} columns', + (rowCount: number, colCount: number, dataTable: DataTable) => { const table = dataTable.hashes() - cy.get(`[data-component-id="${id}"]`).as('component') - cy.get('@component') - .should('exist') - .should('have.attr', 'data-component-type', 'TideLandingPageDataTable') cy.get('@component').within(() => { cy.get(`table tr`).as('rows') }) - cy.get('@rows').should('have.length', 3) + cy.get('@rows').should('have.length', rowCount) table.forEach((row, i: number) => { cy.get('@rows') @@ -21,7 +24,7 @@ Then( .then((item) => { cy.wrap(item).as('item') cy.get('@item').find(row.type).as('cell') - cy.get('@cell').should('have.length', 3) + cy.get('@cell').should('have.length', colCount) cy.get('@cell').eq(0).should('contain', row['cell-one']) cy.get('@cell').eq(1).should('contain', row['cell-two']) cy.get('@cell').eq(2).should('contain', row['cell-three']) @@ -29,3 +32,15 @@ Then( }) } ) + +Then('it should have a heading', () => { + cy.get('@component').within(() => { + cy.get('table thead tr').should('exist') + }) +}) + +Then('it should have no heading', () => { + cy.get('@component').within(() => { + cy.get('table thead tr').should('not.exist') + }) +}) diff --git a/packages/ripple-ui-core/src/components/data-table/RplDataTable.vue b/packages/ripple-ui-core/src/components/data-table/RplDataTable.vue index f9abe95f49..e621e46f1e 100644 --- a/packages/ripple-ui-core/src/components/data-table/RplDataTable.vue +++ b/packages/ripple-ui-core/src/components/data-table/RplDataTable.vue @@ -61,7 +61,7 @@ const mappedItems = computed(() => { caption }} - +