From 030817a08a79bdd4593989684f7685a97e459fcc Mon Sep 17 00:00:00 2001 From: David Featherston Date: Fri, 23 Jun 2023 17:08:37 +1000 Subject: [PATCH] test(@dpc-sdp/ripple-ui-core): adding component tests --- .../cypress/support/component.ts | 6 +- .../src/components/alert/RplAlert.cy.ts | 32 ++-- .../components/data-table/RplDataTable.cy.ts | 29 ++++ .../data-table/RplDataTable.stories.mdx | 38 +---- .../components/data-table/fixtures/sample.ts | 24 +++ .../src/components/footer/RplFooter.cy.ts | 27 ++++ .../components/footer/RplFooter.stories.mdx | 143 +----------------- .../src/components/footer/fixtures/sample.ts | 141 +++++++++++++++++ .../media-embed/RplMediaEmbed.cy.ts | 38 +++++ .../media-gallery/RplMediaGallery.cy.ts | 27 ++++ .../components/pagination/RplPagination.cy.ts | 45 ++++++ .../primary-nav/RplPrimaryNav.cy.ts | 80 ++++++++++ .../src/components/tabs/RplTabs.cy.ts | 34 +++++ .../vertical-nav/RplVerticalNav.cy.ts | 34 +++++ .../vertical-nav/RplVerticalNav.stories.mdx | 36 +---- .../vertical-nav/fixtures/sample.ts | 71 +++++++++ 16 files changed, 580 insertions(+), 225 deletions(-) create mode 100644 packages/ripple-ui-core/src/components/data-table/RplDataTable.cy.ts create mode 100644 packages/ripple-ui-core/src/components/data-table/fixtures/sample.ts create mode 100644 packages/ripple-ui-core/src/components/footer/RplFooter.cy.ts create mode 100644 packages/ripple-ui-core/src/components/footer/fixtures/sample.ts create mode 100644 packages/ripple-ui-core/src/components/media-embed/RplMediaEmbed.cy.ts create mode 100644 packages/ripple-ui-core/src/components/media-gallery/RplMediaGallery.cy.ts create mode 100644 packages/ripple-ui-core/src/components/pagination/RplPagination.cy.ts create mode 100644 packages/ripple-ui-core/src/components/primary-nav/RplPrimaryNav.cy.ts create mode 100644 packages/ripple-ui-core/src/components/tabs/RplTabs.cy.ts create mode 100644 packages/ripple-ui-core/src/components/vertical-nav/RplVerticalNav.cy.ts create mode 100644 packages/ripple-ui-core/src/components/vertical-nav/fixtures/sample.ts diff --git a/packages/ripple-ui-core/cypress/support/component.ts b/packages/ripple-ui-core/cypress/support/component.ts index 619e4d90ab..0f828e2f25 100644 --- 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: `
diff --git a/packages/ripple-ui-core/src/components/alert/RplAlert.cy.ts b/packages/ripple-ui-core/src/components/alert/RplAlert.cy.ts index d326e91643..676b0b5242 100644 --- 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 new file mode 100644 index 0000000000..a283ca3e5e --- /dev/null +++ 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 index c7802a1353..2934f5e00b 100644 --- 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", - [ - "

R1 test heading

R1 test content

" - ] - ], - [ - "R2 - C1", - "R2 - C2", - "R2 - C3", - "R2 - C4", - [ - "

R2 test heading

R2 test content

" - ] - ], - [ - "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 new file mode 100644 index 0000000000..30a089a3e1 --- /dev/null +++ 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', + ['

R1 test heading

R1 test content

'] + ], + [ + 'R2 - C1', + 'R2 - C2', + 'R2 - C3', + 'R2 - C4', + ['

R2 test heading

R2 test content

'] + ], + ['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 new file mode 100644 index 0000000000..7b3da17f41 --- /dev/null +++ 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 index 0b48e22c7a..6e02828178 100644 --- 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', diff --git a/packages/ripple-ui-core/src/components/footer/fixtures/sample.ts b/packages/ripple-ui-core/src/components/footer/fixtures/sample.ts new file mode 100644 index 0000000000..007959cb41 --- /dev/null +++ b/packages/ripple-ui-core/src/components/footer/fixtures/sample.ts @@ -0,0 +1,141 @@ +export const RplFooterLinks = [ + { + 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' + } + ] + } +] diff --git a/packages/ripple-ui-core/src/components/media-embed/RplMediaEmbed.cy.ts b/packages/ripple-ui-core/src/components/media-embed/RplMediaEmbed.cy.ts new file mode 100644 index 0000000000..4a813555a4 --- /dev/null +++ b/packages/ripple-ui-core/src/components/media-embed/RplMediaEmbed.cy.ts @@ -0,0 +1,38 @@ +import RplMediaEmbed from './RplMediaEmbed.vue' + +const props = { + title: 'Media title', + variant: 'complex', + type: 'image', + src: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7', + dataContent: 'Content', + allowFullscreen: true +} + +describe('RplMediaEmbed', () => { + it('mounts', () => { + cy.mount(RplMediaEmbed, { props }) + }) + + it('toggles the display of more information', () => { + cy.mount(RplMediaEmbed, { props }) + + cy.get('.rpl-media-embed__view-data-toggle').as('toggle') + cy.get('.rpl-media-embed__view-data-content').as('content') + + cy.get('@toggle').should('contain.text', "View 'Media title' data") + cy.get('@content').should('be.hidden') + + cy.get('@toggle').click() + + cy.get('@toggle').should('contain.text', "Close 'Media title' data") + cy.get('@content').should('be.visible') + }) + + it('display an image fullscreen', () => { + cy.mount(RplMediaEmbed, { props }) + + cy.get('.rpl-media-embed__fullscreen-button').click() + cy.document().get('.rpl-media-embed__modal').should('be.visible') + }) +}) diff --git a/packages/ripple-ui-core/src/components/media-gallery/RplMediaGallery.cy.ts b/packages/ripple-ui-core/src/components/media-gallery/RplMediaGallery.cy.ts new file mode 100644 index 0000000000..d060454005 --- /dev/null +++ b/packages/ripple-ui-core/src/components/media-gallery/RplMediaGallery.cy.ts @@ -0,0 +1,27 @@ +import RplMediaGallery from './RplMediaGallery.vue' + +const props = { + items: [ + { + title: 'Media title', + alt: 'Alt text', + thumbnail: + 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7', + image: + 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' + } + ] +} + +describe('RplMediaGallery', () => { + it('mounts', () => { + cy.mount(RplMediaGallery, { props }) + }) + + it('display a gallery fullscreen', () => { + cy.mount(RplMediaGallery, { props }) + + cy.get('.rpl-media-gallery__button').click() + cy.document().get('.rpl-media-gallery__modal').should('be.visible') + }) +}) diff --git a/packages/ripple-ui-core/src/components/pagination/RplPagination.cy.ts b/packages/ripple-ui-core/src/components/pagination/RplPagination.cy.ts new file mode 100644 index 0000000000..a4cddd1b89 --- /dev/null +++ b/packages/ripple-ui-core/src/components/pagination/RplPagination.cy.ts @@ -0,0 +1,45 @@ +import RplPagination from './RplPagination.vue' + +const baseProps = { + totalPages: 3, + currentPage: 1, + contentType: 'page' +} + +const current = '[aria-current="true"]' +const next = `[aria-label="Go to next ${baseProps.contentType}"]` +const prev = `[aria-label="Go to previous ${baseProps.contentType}"]` + +describe('RplPagination', () => { + it('mounts', () => { + cy.mount(RplPagination, { props: baseProps }) + }) + + it('navigate to the next page', () => { + cy.mount(RplPagination, { props: baseProps }) + + cy.get(current).should('contain', 1) + cy.get(next).click() + cy.get(current).should('contain', 2) + }) + + it('navigate to the previous page', () => { + cy.mount(RplPagination, { props: { ...baseProps, currentPage: 3 } }) + + cy.get(current).should('contain', 3) + cy.get(prev).click() + cy.get(current).should('contain', 2) + }) + + it('hide and show next/prev buttons', () => { + cy.mount(RplPagination, { props: { ...baseProps, totalPages: 2 } }) + + cy.get(next).should('exist') + cy.get(prev).should('not.exist') + + cy.get(next).click() + + cy.get(prev).should('exist') + cy.get(next).should('not.exist') + }) +}) diff --git a/packages/ripple-ui-core/src/components/primary-nav/RplPrimaryNav.cy.ts b/packages/ripple-ui-core/src/components/primary-nav/RplPrimaryNav.cy.ts new file mode 100644 index 0000000000..0744cadc67 --- /dev/null +++ b/packages/ripple-ui-core/src/components/primary-nav/RplPrimaryNav.cy.ts @@ -0,0 +1,80 @@ +import RplPrimaryNav from './RplPrimaryNav.vue' +import { RplPrimaryNavItems } from './fixtures/sample' +import { bpMin } from '../../lib/breakpoints' + +const props = { + primaryLogo: { + href: '#', + altText: 'Logo', + src: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' + }, + items: RplPrimaryNavItems +} + +describe('RplPrimaryNav', () => { + it('mounts', () => { + cy.mount(RplPrimaryNav, { props }) + }) + + context('Mobile', () => { + it('toggles menu when menu button is clicked', () => { + cy.viewport(bpMin.s, 1000) + cy.mount(RplPrimaryNav, { props }) + + cy.get( + '.rpl-primary-nav__nav-bar-mobile-menu-toggle-container .rpl-primary-nav__nav-bar-action--toggle' + ).as('toggle') + + cy.get('@toggle').click() + cy.get('.rpl-primary-nav__mega-menu').should('be.visible') + + cy.get('@toggle').click() + cy.get('.rpl-primary-nav__mega-menu').should('not.exist') + }) + }) + + context('Desktop', () => { + beforeEach(() => { + cy.viewport(bpMin.l, 1000) + cy.mount(RplPrimaryNav, { props }) + }) + + it('toggles the menu items submenu', () => { + cy.get( + '.rpl-primary-nav__nav-bar-item .rpl-primary-nav__nav-bar-action--toggle' + ) + .first() + .as('toggle') + + cy.get('@toggle').click() + cy.get('.rpl-primary-nav__mega-menu').should('be.visible') + + cy.get('@toggle').click() + cy.get('.rpl-primary-nav__mega-menu').should('not.exist') + }) + + it('navigates through mega menu sub levels', () => { + const level = (val) => `.rpl-primary-nav__mega-menu-list--level-${val}` + const levelToggle = (val) => + `${level(val)} .rpl-primary-nav__mega-menu-action--toggle` + + cy.get( + '.rpl-primary-nav__nav-bar-item .rpl-primary-nav__nav-bar-action--toggle' + ) + .first() + .click() + + cy.get(levelToggle(2)).first().click() + cy.get(level(3)).should('exist') + + cy.get(levelToggle(3)).first().click() + cy.get(level(4)).should('exist') + + cy.get(levelToggle(3)).first().click() + cy.get(level(4)).should('not.exist') + + cy.get(levelToggle(2)).first().click() + cy.get(level(3)).should('not.exist') + }) + }) +}) diff --git a/packages/ripple-ui-core/src/components/tabs/RplTabs.cy.ts b/packages/ripple-ui-core/src/components/tabs/RplTabs.cy.ts new file mode 100644 index 0000000000..b27cfd458a --- /dev/null +++ b/packages/ripple-ui-core/src/components/tabs/RplTabs.cy.ts @@ -0,0 +1,34 @@ +import RplTabs from './RplTabs.vue' + +const baseProps = { + tabs: [ + { + title: 'One', + key: 'one' + }, + { + title: 'Two', + key: 'two' + } + ] +} + +describe('RplTabs', () => { + it('mounts', () => { + cy.mount(RplTabs, { props: baseProps }) + }) + + it('switches tabs when clicked', () => { + cy.mount(RplTabs, { props: baseProps }) + + cy.get('.rpl-tab--active').should('contain', 'One') + cy.get('.rpl-tab button').contains('Two').click() + cy.get('.rpl-tab--active').should('contain', 'Two') + }) + + it('sets the correct default tab', () => { + cy.mount(RplTabs, { props: { ...baseProps, activeTab: 'two' } }) + + cy.get('.rpl-tab--active').should('contain', 'Two') + }) +}) diff --git a/packages/ripple-ui-core/src/components/vertical-nav/RplVerticalNav.cy.ts b/packages/ripple-ui-core/src/components/vertical-nav/RplVerticalNav.cy.ts new file mode 100644 index 0000000000..5587699b02 --- /dev/null +++ b/packages/ripple-ui-core/src/components/vertical-nav/RplVerticalNav.cy.ts @@ -0,0 +1,34 @@ +import RplVerticalNav from './RplVerticalNav.vue' +import { RplVerticalNavItems } from './fixtures/sample' + +const props = { + title: 'Vertical Nav', + items: RplVerticalNavItems +} + +describe('RplVerticalNav', () => { + it('mounts', () => { + cy.mount(RplVerticalNav, { props }) + }) + + it('displays the active menu as open', () => { + cy.mount(RplVerticalNav, { props }) + + cy.get('.rpl-vertical-nav__list-item') + .first() + .find('.rpl-expandable') + .should('be.visible') + }) + + it('toggles the display on nav items', () => { + cy.mount(RplVerticalNav, { props }) + + cy.get('.rpl-vertical-nav__list-item').first().as('item') + + cy.get('@item').find('.rpl-vertical-nav__toggle').click() + cy.get('@item').find('.rpl-expandable').should('be.hidden') + + cy.get('@item').find('.rpl-vertical-nav__toggle').click() + cy.get('@item').find('.rpl-expandable').should('be.visible') + }) +}) diff --git a/packages/ripple-ui-core/src/components/vertical-nav/RplVerticalNav.stories.mdx b/packages/ripple-ui-core/src/components/vertical-nav/RplVerticalNav.stories.mdx index 2be4b97834..9dfd7aff24 100644 --- a/packages/ripple-ui-core/src/components/vertical-nav/RplVerticalNav.stories.mdx +++ b/packages/ripple-ui-core/src/components/vertical-nav/RplVerticalNav.stories.mdx @@ -5,6 +5,7 @@ import { ArgsTable } from '@storybook/addon-docs' import RplVerticalNav from './RplVerticalNav.vue' +import { RplVerticalNavItems } from './fixtures/sample' import { a11yStoryCheck } from './../../../stories/interactions.js' export const SingleTemplate = (args) => ({ @@ -33,40 +34,7 @@ export const SingleTemplate = (args) => ({ play={a11yStoryCheck} args={{ title: 'Section name', - items: [ - { id: '1', text: 'First level', active: true, items: [ - { id: '2', text: 'First level repeat', url: '#' }, - { id: '3', text: 'Second level', url: '#', items: [ - { id: '4', text: 'Third level link with some text that will need to wrap', url: '#', items: [ - { id: '5', text: 'Fourth level', url: '#' } - ]} - ]}, - { id: '6', text: 'Second level active', url: '#', active: true }, - { id: '7', text: 'Second level', url: '#' } - ]}, - { id: '8', text: 'First level', items: [ - { id: '9', text: 'First level repeat', url: '#' }, - { id: '10', text: 'Second level', url: '#', items: [ - { id: '11', text: 'Third level link with some text that will need to wrap', url: '#', items: [ - { id: '12', text: 'Fourth level', url: '#' } - ]} - ]}, - { id: '13', text: 'Second level', url: '#' }, - { id: '14', text: 'Second level', url: '#' } - ]}, - { id: '15', text: 'First level no children', url: '#' }, - { id: '16', text: 'First level no children active', url: '#', active: true }, - { id: '17', text: 'First level', items: [ - { id: '18', text: 'First level repeat', url: '#' }, - { id: '19', text: 'Second level', url: '#', items: [ - { id: '20', text: 'Third level link with some text that will need to wrap', url: '#', items: [ - { id: '21', text: 'Fourth level', url: '#' } - ]} - ]}, - { id: '22', text: 'Second level', url: '#' }, - { id: '23', text: 'Second level', url: '#' } - ]}, - ] + items: RplVerticalNavItems }} > {SingleTemplate.bind()} diff --git a/packages/ripple-ui-core/src/components/vertical-nav/fixtures/sample.ts b/packages/ripple-ui-core/src/components/vertical-nav/fixtures/sample.ts new file mode 100644 index 0000000000..4b6f847925 --- /dev/null +++ b/packages/ripple-ui-core/src/components/vertical-nav/fixtures/sample.ts @@ -0,0 +1,71 @@ +export const RplVerticalNavItems = [ + { + id: '1', + text: 'First level', + active: true, + items: [ + { id: '2', text: 'First level repeat', url: '#' }, + { + id: '3', + text: 'Second level', + url: '#', + items: [ + { + id: '4', + text: 'Third level link with some text that will need to wrap', + url: '#', + items: [{ id: '5', text: 'Fourth level', url: '#' }] + } + ] + }, + { id: '6', text: 'Second level active', url: '#', active: true }, + { id: '7', text: 'Second level', url: '#' } + ] + }, + { + id: '8', + text: 'First level', + items: [ + { id: '9', text: 'First level repeat', url: '#' }, + { + id: '10', + text: 'Second level', + url: '#', + items: [ + { + id: '11', + text: 'Third level link with some text that will need to wrap', + url: '#', + items: [{ id: '12', text: 'Fourth level', url: '#' }] + } + ] + }, + { id: '13', text: 'Second level', url: '#' }, + { id: '14', text: 'Second level', url: '#' } + ] + }, + { id: '15', text: 'First level no children', url: '#' }, + { id: '16', text: 'First level no children active', url: '#', active: true }, + { + id: '17', + text: 'First level', + items: [ + { id: '18', text: 'First level repeat', url: '#' }, + { + id: '19', + text: 'Second level', + url: '#', + items: [ + { + id: '20', + text: 'Third level link with some text that will need to wrap', + url: '#', + items: [{ id: '21', text: 'Fourth level', url: '#' }] + } + ] + }, + { id: '22', text: 'Second level', url: '#' }, + { id: '23', text: 'Second level', url: '#' } + ] + } +]