diff --git a/examples/nuxt-app/test/features/site/theme.feature b/examples/nuxt-app/test/features/site/theme.feature index c87c36d2da..45410946ba 100644 --- a/examples/nuxt-app/test/features/site/theme.feature +++ b/examples/nuxt-app/test/features/site/theme.feature @@ -54,3 +54,17 @@ Feature: Site theme And the page endpoint for path "/" returns fixture "/landingpage/image-banner" with status 200 Given I visit the page "/" Then the last updated date should not be displayed + + @mockserver + Scenario: Default behaviour for long link titles in the primary navigation + Given the site endpoint returns fixture "/site/primary-nav-wrap" with status 200 + And the page endpoint for path "/" returns fixture "/landingpage/image-banner" with status 200 + Given I visit the page "/" + Then the primary nav links should wrap + + @mockserver + Scenario: Feature flag to force multi-line links to render on a single line in the primary navigation + Given the site endpoint returns fixture "/site/primary-nav-nowrap" with status 200 + And the page endpoint for path "/" returns fixture "/landingpage/image-banner" with status 200 + Given I visit the page "/" + Then the primary nav links should not wrap diff --git a/examples/nuxt-app/test/fixtures/site/primary-nav-nowrap.json b/examples/nuxt-app/test/fixtures/site/primary-nav-nowrap.json new file mode 100644 index 0000000000..0d8cffdf35 --- /dev/null +++ b/examples/nuxt-app/test/fixtures/site/primary-nav-nowrap.json @@ -0,0 +1,44 @@ +{ + "name": "Test site for neutral theme", + "acknowledgementHeader": "Test hero acknowledgement", + "acknowledgementFooter": "Test footer acknowledgement", + "socialImages": { + "twitter": {}, + "og": {} + }, + "siteLogo": { + "href": "/", + "src": "https://placehold.co/140x40", + "altText": "" + }, + "featureFlags": { + "primaryNavNowrap": true + }, + "menus": { + "menuMain": [ + { + "text": "This link has an excessively long title", + "url": "/demo-landing-page", + "uuid": "29bc9750-a335-455e-9e9a-4166c0bd73df", + "parent": null, + "weight": 0 + }, + { + "text": "Another random link", + "url": "/demo-landing-page", + "uuid": "04e44b77-20df-4a73-b0d1-cf2d3d614754", + "parent": null, + "weight": 0 + } + ], + "menuFooter": [ + { + "text": "Demo Landing Page", + "url": "/demo-landing-page", + "uuid": "04e44b77-20df-4a73-b0d1-cf2d3d614754", + "parent": null, + "weight": 0 + } + ] + } +} diff --git a/examples/nuxt-app/test/fixtures/site/primary-nav-wrap.json b/examples/nuxt-app/test/fixtures/site/primary-nav-wrap.json new file mode 100644 index 0000000000..0d133a87fe --- /dev/null +++ b/examples/nuxt-app/test/fixtures/site/primary-nav-wrap.json @@ -0,0 +1,41 @@ +{ + "name": "Test site for neutral theme", + "acknowledgementHeader": "Test hero acknowledgement", + "acknowledgementFooter": "Test footer acknowledgement", + "socialImages": { + "twitter": {}, + "og": {} + }, + "siteLogo": { + "href": "/", + "src": "https://placehold.co/140x40", + "altText": "" + }, + "menus": { + "menuMain": [ + { + "text": "This link has an excessively long title", + "url": "/demo-landing-page", + "uuid": "29bc9750-a335-455e-9e9a-4166c0bd73df", + "parent": null, + "weight": 0 + }, + { + "text": "Another random link", + "url": "/demo-landing-page", + "uuid": "04e44b77-20df-4a73-b0d1-cf2d3d614754", + "parent": null, + "weight": 0 + } + ], + "menuFooter": [ + { + "text": "Demo Landing Page", + "url": "/demo-landing-page", + "uuid": "04e44b77-20df-4a73-b0d1-cf2d3d614754", + "parent": null, + "weight": 0 + } + ] + } +} 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 5ca9672a9a..c0a041b15b 100644 --- a/packages/ripple-test-utils/step_definitions/common/shared-elements.ts +++ b/packages/ripple-test-utils/step_definitions/common/shared-elements.ts @@ -58,6 +58,17 @@ Then('the last updated date should not be displayed', () => { cy.get(`[data-cy="updated-date"]`).should('not.exist') }) +Then('the primary nav links should wrap', () => { + cy.get('.rpl-primary-nav__nav-bar-actions-list--nowrap').should('not.exist') +}) + +Then('the primary nav links should not wrap', () => { + cy.get('.rpl-primary-nav__nav-bar-actions-list').should( + 'have.class', + 'rpl-primary-nav__nav-bar-actions-list--nowrap' + ) +}) + Then( 'the page should have the following topic tags', (dataTable: DataTable) => {