test: ✅ long menu title feature flag

dpc-sdp · Aug 12, 2024 · 9b6a42f · 9b6a42f
1 parent b67cab7
commit 9b6a42f
Show file tree

Hide file tree

Showing 4 changed files with 110 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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) => {