feat(@dpc-sdp/ripple-ui-core): consistent font size, check if links s…

…hould collapse, add tests
dpc-sdp · Oct 14, 2024 · 6b0ea3d · 6b0ea3d
1 parent f17fb75
commit 6b0ea3d
Show file tree

Hide file tree

Showing 6 changed files with 136 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 }
       ]"
     >