From 6b0ea3d748f28a57405a676068fa65269aec41a3 Mon Sep 17 00:00:00 2001 From: David Featherston Date: Mon, 14 Oct 2024 16:31:15 +1100 Subject: [PATCH] feat(@dpc-sdp/ripple-ui-core): consistent font size, check if links should collapse, add tests --- .../test/features/site/feature-flags.feature | 20 +++++ .../test/features/sitemap/sitemap.feature | 3 +- .../test/fixtures/site/shared-elements.json | 18 +++- .../common/shared-elements.ts | 8 +- .../breadcrumbs/RplBreadcrumbs.cy.ts | 83 +++++++++++++++++++ .../components/breadcrumbs/RplBreadcrumbs.vue | 13 +-- 6 files changed, 136 insertions(+), 9 deletions(-) create mode 100644 packages/ripple-ui-core/src/components/breadcrumbs/RplBreadcrumbs.cy.ts diff --git a/examples/nuxt-app/test/features/site/feature-flags.feature b/examples/nuxt-app/test/features/site/feature-flags.feature index beee6eb0f7..e3e3ac6fd6 100644 --- a/examples/nuxt-app/test/features/site/feature-flags.feature +++ b/examples/nuxt-app/test/features/site/feature-flags.feature @@ -134,3 +134,23 @@ Feature: Site feature flags | X (formerly Twitter) | true | | LinkedIn | true | | WhatsApp | true | + + @mockserver + Scenario: Feature flags can collapse site breadcrumbs + Given I load the site fixture with "/site/shared-elements" + And the feature flag "breadcrumbsCollapseInnerLinks" is set to "true" + And the site endpoint returns the loaded fixture + And the page endpoint for path "/level-4-item-1" returns fixture "/landingpage/home" with status 200 + Given I visit the page "/level-4-item-1" + Then the breadcrumbs should have the following items + | text | url | + | Home | / | + | Level 3 - Item 2 | /level-3-item-2 | + + When I expand the breadcrumbs + Then the breadcrumbs should have the following items + | text | url | + | Home | / | + | Level 1 - Item 1 | /level-1-item-1 | + | Level 2 - Item 1 | /level-2-item-1 | + | Level 3 - Item 2 | /level-3-item-2 | diff --git a/examples/nuxt-app/test/features/sitemap/sitemap.feature b/examples/nuxt-app/test/features/sitemap/sitemap.feature index 3c85c0c63b..cb1fcf5523 100644 --- a/examples/nuxt-app/test/features/sitemap/sitemap.feature +++ b/examples/nuxt-app/test/features/sitemap/sitemap.feature @@ -12,6 +12,7 @@ Feature: Sitemap | Level 2 - Item 1 | | Level 3 - Item 1 | | Level 3 - Item 2 | + | Level 4 - Item 1 | + | Level 4 - Item 2 | | Level 2 - Item 2 | | Level 1 - Item 2 | - diff --git a/examples/nuxt-app/test/fixtures/site/shared-elements.json b/examples/nuxt-app/test/fixtures/site/shared-elements.json index 4a4c9fa138..f52a2834b9 100644 --- a/examples/nuxt-app/test/fixtures/site/shared-elements.json +++ b/examples/nuxt-app/test/fixtures/site/shared-elements.json @@ -86,7 +86,23 @@ "url": "/level-3-item-2", "id": "e239b5d2-54f4-4d1e-8ce2-5b5cfc9a2c29", "parent": "36b23e56-103b-4fcc-8005-d7f1403c6ded", - "weight": 16 + "weight": 16, + "items": [ + { + "text": "Level 4 - Item 1", + "url": "/level-4-item-1", + "id": "b484de04-8faa-4246-adc1-70c8a56b2c22", + "parent": "46b24e56-104b-4fcc-8005-d7f1404c6ded", + "weight": 15 + }, + { + "text": "Level 4 - Item 2", + "url": "/level-4-item-2", + "id": "e249b5d2-54f4-4d1e-8ce2-5b5cfc9a2c29", + "parent": "46b24e56-104b-4fcc-8005-d7f1404c6ded", + "weight": 16 + } + ] } ] }, 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 fd02e0e30f..6cd7232a32 100644 --- a/packages/ripple-test-utils/step_definitions/common/shared-elements.ts +++ b/packages/ripple-test-utils/step_definitions/common/shared-elements.ts @@ -22,7 +22,9 @@ Then( cy.get(`[data-cy="breadcrumbs"]`).as('component') cy.get('@component').within(() => { - cy.get(`.rpl-breadcrumbs__item`).as('items') + cy.get( + `.rpl-breadcrumbs__item:not(.rpl-breadcrumbs__item--collapsed)` + ).as('items') }) cy.get('@items').should('have.length', table.length) @@ -47,6 +49,10 @@ Then('the breadcrumbs should not exist', () => { cy.get(`[data-cy="breadcrumbs"]`).should('not.exist') }) +Then('I expand the breadcrumbs', () => { + cy.get(`.rpl-breadcrumbs__collapse-link-trigger`).click() +}) + Then( 'the last updated date text should read {string}', (updatedDateText: string) => { diff --git a/packages/ripple-ui-core/src/components/breadcrumbs/RplBreadcrumbs.cy.ts b/packages/ripple-ui-core/src/components/breadcrumbs/RplBreadcrumbs.cy.ts new file mode 100644 index 0000000000..e1add157e3 --- /dev/null +++ b/packages/ripple-ui-core/src/components/breadcrumbs/RplBreadcrumbs.cy.ts @@ -0,0 +1,83 @@ +import RplBreadcrumbs from './RplBreadcrumbs.vue' +import { bpMin } from '../../lib/breakpoints' + +const items = [ + { text: 'Home', url: '/' }, + { text: 'About the VIC Government', url: '#' }, + { text: 'The state government', url: '#' }, + { text: 'Victoria is the state', url: '#' }, + { text: 'VIC government data', url: '#' } +] + +const props = { items } + +describe('RplBreadcrumbs', () => { + it('mounts', () => { + cy.mount(RplBreadcrumbs, { props }) + }) + + it('displays all breadcrumbs', () => { + cy.viewport(bpMin.xl, 1000) + cy.mount(RplBreadcrumbs, { props }) + + cy.get( + '.rpl-breadcrumbs__item:not(.rpl-breadcrumbs__item--collapsed)' + ).should('have.length', 5) + }) + + it('collapsed breadcrumbs can be toggled', () => { + cy.viewport(bpMin.xl, 1000) + cy.mount(RplBreadcrumbs, { props: { ...props, collapse: true } }) + + cy.get( + '.rpl-breadcrumbs__item:not(.rpl-breadcrumbs__item--collapsed)' + ).should('have.length', 2) + + cy.get('.rpl-breadcrumbs__collapse-link-trigger').click() + + cy.get( + '.rpl-breadcrumbs__item:not(.rpl-breadcrumbs__item--collapsed)' + ).should('have.length', 4) + }) + + it(`a custom number can be set to manage collapsed breadcrumbs (won't collapse)`, () => { + cy.viewport(bpMin.xl, 1000) + cy.mount(RplBreadcrumbs, { + props: { + ...props, + collapse: true, + displayBeforeCollapse: 4 + } + }) + + cy.get( + '.rpl-breadcrumbs__item:not(.rpl-breadcrumbs__item--collapsed)' + ).should('have.length', 4) + + cy.get('.rpl-breadcrumbs__collapse-link-trigger').should('not.exist') + }) + + it(`a custom number can be set to manage collapsed breadcrumbs (will collapse)`, () => { + cy.viewport(bpMin.xl, 1000) + cy.mount(RplBreadcrumbs, { + props: { + ...props, + items: [...props.items, { text: 'Another item', url: '#' }], + collapse: true, + displayBeforeCollapse: 4 + } + }) + + cy.get( + '.rpl-breadcrumbs__item:not(.rpl-breadcrumbs__item--collapsed)' + ).should('have.length', 2) + + cy.get('.rpl-breadcrumbs__collapse-link-trigger').should('exist') + + cy.get('.rpl-breadcrumbs__collapse-link-trigger').click() + + cy.get( + '.rpl-breadcrumbs__item:not(.rpl-breadcrumbs__item--collapsed)' + ).should('have.length', 5) + }) +}) diff --git a/packages/ripple-ui-core/src/components/breadcrumbs/RplBreadcrumbs.vue b/packages/ripple-ui-core/src/components/breadcrumbs/RplBreadcrumbs.vue index f57bf16496..b2ade0ed53 100644 --- a/packages/ripple-ui-core/src/components/breadcrumbs/RplBreadcrumbs.vue +++ b/packages/ripple-ui-core/src/components/breadcrumbs/RplBreadcrumbs.vue @@ -55,10 +55,12 @@ const handleClick = (item, index) => { const initialCollapseInnerLinks = props.collapse || breadcrumbsCollapseInnerLinks! -const collapseInnerLinks = ref() -collapseInnerLinks.value = initialCollapseInnerLinks - ? props.displayBeforeCollapse - : 0 +const collapseInnerLinks = ref( + initialCollapseInnerLinks && + props.items.length - 1 > props.displayBeforeCollapse + ? props.displayBeforeCollapse + : 0 +) const firstItem = (index: number) => index === 0 const lastItem = (index: number) => index === props.items.length - 1 @@ -82,8 +84,7 @@ const toggleCollapsed = () => { v-if="items.length > 0" :class="[ 'rpl-breadcrumbs__items', - { 'rpl-type-p-small': initialCollapseInnerLinks }, - { 'rpl-type-p': !initialCollapseInnerLinks }, + 'rpl-type-p-small', { 'rpl-breadcrumbs__items--collapsed': collapseInnerLinks } ]" >