test(@dpc-sdp/ripple-ui-core): adding component tests

dpc-sdp · Jun 23, 2023 · 030817a · 030817a
1 parent a368de2
commit 030817a
Show file tree

Hide file tree

Showing 16 changed files with 580 additions and 225 deletions.
diff --git a/packages/ripple-ui-core/cypress/support/component.ts b/packages/ripple-ui-core/cypress/support/component.ts
@@ -20,12 +20,16 @@
 // require('./commands')
 
 import { mount } from 'cypress/vue'
-import { h } from 'vue'
+import { h, provide } from 'vue'
 import { RplIconSprite } from '@dpc-sdp/ripple-ui-core/vue'
 // Ensure global styles are loaded
 import '@dpc-sdp/ripple-ui-core/style'
+import { rplEventBus } from '@dpc-sdp/ripple-ui-core'
 
 const RplAppWrapper = {
+  setup() {
+    provide('$rplEvent', rplEventBus)
+  },
   components: { RplIconSprite },
   template: `<div style="margin: 1rem;">
     <RplIconSprite style="display: none;" />

diff --git a/packages/ripple-ui-core/src/components/alert/RplAlert.cy.ts b/packages/ripple-ui-core/src/components/alert/RplAlert.cy.ts
@@ -1,5 +1,5 @@
 import RplAlert from './RplAlert.vue'
-import { rplEventBus } from './../../index.js'
+import { rplEventBus as rplEvent } from './../../index.js'
 
 const baseProps = {
   variant: 'information',
@@ -14,25 +14,29 @@ const baseProps = {
 describe('RplAlert', () => {
   it('mounts', () => {
     cy.mount(RplAlert, {
-      props: {
-        ...baseProps
-      }
+      props: baseProps
     })
   })
-  xit('calls dismiss when clicked', () => {
-    let fired = false
-    const handler = () => {
-      fired = !fired
-    }
-    rplEventBus.on('rpl-alert/dismiss', handler)
+
+  it('fires dismiss event when cleared', () => {
+    let dismissed = false
+    const onDismiss = () => (dismissed = true)
+
     cy.mount(RplAlert, {
       props: {
         ...baseProps,
-        dismissed: fired
+        onDismiss
       }
     })
-    cy.get('[data-cy="dismiss"]')
-    cy.wrap(fired).should('be.true')
-    rplEventBus.off('rpl-alert/dismiss', handler)
+
+    rplEvent.on('rpl-alert/dismiss', onDismiss)
+
+    cy.get('.rpl-alert__btn-close').click()
+
+    cy.wait(50).then(() => {
+      cy.wrap(dismissed).should('be.true')
+    })
+
+    rplEvent.off('rpl-alert/dismiss', onDismiss)
   })
 })
diff --git a/packages/ripple-ui-core/src/components/data-table/RplDataTable.cy.ts b/packages/ripple-ui-core/src/components/data-table/RplDataTable.cy.ts
@@ -0,0 +1,29 @@
+import RplDataTable from './RplDataTable.vue'
+import { RplDataTableColumns, RplDataTableItems } from './fixtures/sample'
+
+const props = {
+  columns: RplDataTableColumns,
+  items: RplDataTableItems
+}
+
+describe('RplDataTable', () => {
+  it('mounts', () => {
+    cy.mount(RplDataTable, { props })
+  })
+
+  it('toggles the display of more information', () => {
+    cy.mount(RplDataTable, { props })
+
+    cy.get('.rpl-data-table__row').first().as('row')
+    cy.get('@row').find('.rpl-data-table__toggle').as('toggle')
+    cy.get('@row').find('.rpl-data-table__details').as('details')
+
+    cy.get('@details').should('be.hidden')
+    cy.get('@toggle').should('contain.text', 'More info')
+
+    cy.get('@toggle').click()
+
+    cy.get('@details').should('be.visible')
+    cy.get('@toggle').should('contain.text', 'Less info')
+  })
+})
diff --git a/packages/ripple-ui-core/src/components/data-table/RplDataTable.stories.mdx b/packages/ripple-ui-core/src/components/data-table/RplDataTable.stories.mdx
@@ -5,6 +5,7 @@ import {
   ArgsTable
 } from '@storybook/addon-docs'
 import RplDataTable from './RplDataTable.vue'
+import { RplDataTableColumns, RplDataTableItems } from './fixtures/sample'
 import { a11yStoryCheck } from './../../../stories/interactions.js'
 
 export const SingleTemplate = (args) => ({
@@ -31,41 +32,8 @@ export const SingleTemplate = (args) => ({
     args={{
       caption: "Optional table caption",
       footer: "Optional table footer",
-      columns: [
-        "Column 1",
-        "Column 2",
-        "Column 3",
-        "Column 4"
-      ],
-      items: [
-        [
-          "R1 - C1",
-          "R1 - C2",
-          "R1 - C3",
-          "R1 - C4",
-          [
-            "<p><strong>R1 test heading</strong></p><p>R1 test content</p>"
-          ]
-        ],
-        [
-          "R2 - C1",
-          "R2 - C2",
-          "R2 - C3",
-          "R2 - C4",
-          [
-            "<p><strong>R2 test heading</strong></p><p>R2 test content</p>"
-          ]
-        ],
-        [
-          "R3 - C1",
-          "R3 - C2",
-          "R3 - C3",
-          "R3 - C4",
-          [
-            "R3 test content text only"
-          ]
-        ]
-      ],
+      columns: RplDataTableColumns,
+      items: RplDataTableItems,
       headingType: {
         vertical: true
       },

diff --git a/packages/ripple-ui-core/src/components/data-table/fixtures/sample.ts b/packages/ripple-ui-core/src/components/data-table/fixtures/sample.ts
@@ -0,0 +1,24 @@
+export const RplDataTableColumns = [
+  'Column 1',
+  'Column 2',
+  'Column 3',
+  'Column 4'
+]
+
+export const RplDataTableItems = [
+  [
+    'R1 - C1',
+    'R1 - C2',
+    'R1 - C3',
+    'R1 - C4',
+    ['<p><strong>R1 test heading</strong></p><p>R1 test content</p>']
+  ],
+  [
+    'R2 - C1',
+    'R2 - C2',
+    'R2 - C3',
+    'R2 - C4',
+    ['<p><strong>R2 test heading</strong></p><p>R2 test content</p>']
+  ],
+  ['R3 - C1', 'R3 - C2', 'R3 - C3', 'R3 - C4', ['R3 test content text only']]
+]
diff --git a/packages/ripple-ui-core/src/components/footer/RplFooter.cy.ts b/packages/ripple-ui-core/src/components/footer/RplFooter.cy.ts
@@ -0,0 +1,27 @@
+import RplFooter from './RplFooter.vue'
+import { RplFooterLinks } from './fixtures/sample'
+import { bpMin } from '../../lib/breakpoints'
+
+const props = {
+  nav: RplFooterLinks
+}
+
+describe('RplFooter', () => {
+  it('mounts', () => {
+    cy.mount(RplFooter, { props })
+  })
+
+  it('allows menus to be opened on small screens', () => {
+    cy.viewport(bpMin.s, 1000).mount(RplFooter, { props })
+
+    cy.get('.rpl-footer-nav-section__header-inner-button').first().as('button')
+
+    cy.get('@button').click()
+
+    cy.get('@button')
+      .invoke('attr', 'aria-controls')
+      .then((id) => {
+        cy.get(`#${id}`).should('be.visible')
+      })
+  })
+})
diff --git a/packages/ripple-ui-core/src/components/footer/RplFooter.stories.mdx b/packages/ripple-ui-core/src/components/footer/RplFooter.stories.mdx
@@ -6,6 +6,7 @@ import {
 } from '@storybook/addon-docs'
 import RplFooter from './RplFooter.vue'
 import { RplFooterVariants } from './constants'
+import { RplFooterLinks } from './fixtures/sample'
 import { a11yStoryCheck } from './../../../stories/interactions.js'
 import { bpMin } from '../../lib/breakpoints'
 
@@ -28,147 +29,7 @@ export const SingleTemplate = (args) => ({
   }}
   args={{
   variant: 'default',
-  nav: [
-    {
-      text: 'Your Services',
-      url: '#',
-      items: [
-        {
-          text: 'Grants awards and assistance',
-          url: '#'
-        },
-        {
-          text: 'Law and safety',
-          url: '#'
-        },
-        {
-          text: 'Business and Industry',
-          url: '#'
-        },
-        {
-          text: 'Jobs and the Workplace',
-          url: '#'
-        },
-        {
-          text: 'Transport and Traffic',
-          url: '#'
-        },
-        {
-          text: 'Education',
-          url: '#'
-        },
-        {
-          text: 'Housing and Property',
-          url: '#'
-        },
-        {
-          text: 'Health',
-          url: '#'
-        },
-        {
-          text: 'Community',
-          url: '#'
-        },
-        {
-          text: 'Art, Culture and Sport',
-          url: '#'
-        },
-        {
-          text: 'Environment and Water',
-          url: '#'
-        }
-      ]
-    },
-    {
-      text: 'News',
-      url: '#'
-    },
-    {
-      text: 'About VIC Government - A very long title to test wrapping behaviour',
-      url: '#',
-      items: [
-        {
-          text: 'Grants awards and assistance',
-          url: '#'
-        },
-        {
-          text: 'Law and safety',
-          url: '#'
-        },
-        {
-          text: 'Business and Industry ',
-          url: '#'
-        },
-        {
-          text: 'Jobs and the Workplace',
-          url: '#'
-        },
-        {
-          text: 'Transport and Traffic',
-          url: '#'
-        },
-        {
-          text: 'Education',
-          url: '#'
-        },
-        {
-          text: 'Housing and Property',
-          url: '#'
-        },
-        {
-          text: 'Health',
-          url: '#'
-        },
-        {
-          text: 'Community',
-          url: '#'
-        },
-        {
-          text: 'Art, Culture and Sport',
-          url: '#'
-        },
-        {
-          text: 'Environment and Water',
-          url: '#'
-        }
-      ]
-    },
-    {
-      text: 'Events',
-      url: '#'
-    },
-    {
-      text: 'Connect with us',
-      url: '',
-      items: [
-        {
-          text: 'DFFH Twitter',
-          url: '#',
-          icon: 'icon-twitter'
-        },
-        {
-          text: 'DH Twitter',
-          url: '#',
-          icon: 'icon-twitter'
-        },
-        {
-          text: 'DFFH LinkedIn',
-          url: '#',
-          icon: 'icon-linkedin'
-        },
-        {
-          text: 'DFFH Facebook',
-          url: '#',
-          icon: 'icon-facebook'
-        },
-        {
-          text: 'Youtube',
-          url: '#',
-          icon: 'icon-youtube'
-        }
-      ]
-    }
-  ],
+  nav: RplFooterLinks,
   links: [
     {
       text: 'Privacy',