Merge pull request #1078 from dpc-sdp/feature/maybe-use-relative-links

feat: make links relative to avoid full refresh
dpc-sdp · Mar 27, 2024 · 38d0eef · 38d0eef
2 parents 82f74c4 + c391b84
commit 38d0eef
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 5 deletions.
diff --git a/examples/nuxt-app/test/features/landingpage/home.feature b/examples/nuxt-app/test/features/landingpage/home.feature
@@ -1,6 +1,7 @@
 Feature: Home page
 
   Example of mocked page
+
   Background:
     Given the page endpoint for path "/" returns fixture "/landingpage/home" with status 200
     And the site endpoint returns fixture "/site/reference" with status 200
@@ -15,6 +16,12 @@ Feature: Home page
   Scenario: Hero header
     Then the hero title should be "Test landing page title"
     Then the hero intro text should be "Test landing page title introduction text"
+    And the hero should display the following items
+      | text               | url                                               |
+      | Test link 1        | /embedded-video-test                              |
+      | Test link 2        | /sdpta-statistics-grid-eight-landing-page-fixture |
+      | Test link 3        | /sdpta-accordion-landing-page-fixture             |
+      | Test link external | https://www.vic.gov.au/                           |
 
   @mockserver
   Scenario: Hero acknowledgement

diff --git a/examples/nuxt-app/test/features/search-listing/grants.feature b/examples/nuxt-app/test/features/search-listing/grants.feature
@@ -18,8 +18,8 @@ Feature: Grants collection
     And the search network request should be called with the "/search-listing/grants/request" fixture
     And the grant search listing results should have following items:
       | title                                | url                                                       | updated             | content                                                                                                                                            | audience                          | amount            | status                    |
-      | THIS IS A TEST                       | https://localhost:3000/tc-9b-grant-page-closed            | Updated: 9 May 2023 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt sit amet ligula sit amet lacinia. In a leo nec tortor aliquet faucibus. | Business                          | $11,326 - $26,494 | Closed                    |
-      | TC-9a Grant Simple Test - Date Range | https://localhost:3000/tc-9a-grant-simple-test-date-range | Updated: 9 May 2023 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt sit amet ligula sit amet lacinia. In a leo nec tortor aliquet faucibus. | Not-for-profit groups, government | $11,326 - $26,494 | Open, closing in 163 days |
+      | THIS IS A TEST                       | /tc-9b-grant-page-closed            | Updated: 9 May 2023 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt sit amet ligula sit amet lacinia. In a leo nec tortor aliquet faucibus. | Business                          | $11,326 - $26,494 | Closed                    |
+      | TC-9a Grant Simple Test - Date Range | /tc-9a-grant-simple-test-date-range | Updated: 9 May 2023 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt sit amet ligula sit amet lacinia. In a leo nec tortor aliquet faucibus. | Not-for-profit groups, government | $11,326 - $26,494 | Open, closing in 163 days |
 
   @mockserver
   Example: Grant status filter - Open

diff --git a/examples/nuxt-app/test/fixtures/landingpage/home.json b/examples/nuxt-app/test/fixtures/landingpage/home.json
@@ -109,6 +109,10 @@
         {
           "text": "Test link 3",
           "url": "/sdpta-accordion-landing-page-fixture"
+        },
+        {
+          "text": "Test link external",
+          "url": "https://www.vic.gov.au/"
         }
       ],
       "more": {

diff --git a/packages/nuxt-ripple/components/global/RplLink.vue b/packages/nuxt-ripple/components/global/RplLink.vue
@@ -3,11 +3,21 @@ interface IRplLinkProps {
   url: string
 }
 
-withDefaults(defineProps<IRplLinkProps>(), {})
+const props = withDefaults(defineProps<IRplLinkProps>(), {})
+
+const { $app_origin } = useNuxtApp()
+
+const link = computed(() => {
+  if ($app_origin && props.url?.startsWith($app_origin)) {
+    return props.url.replace($app_origin, '')
+  }
+
+  return props.url
+})
 </script>
 
 <template>
-  <NuxtLink ref="link" :href="url">
+  <NuxtLink ref="link" :href="link">
     <slot />
   </NuxtLink>
 </template>
diff --git a/packages/ripple-test-utils/step_definitions/content-types/landing-page.ts b/packages/ripple-test-utils/step_definitions/content-types/landing-page.ts
@@ -1,4 +1,4 @@
-import { Then } from '@badeball/cypress-cucumber-preprocessor'
+import { Then, DataTable } from '@badeball/cypress-cucumber-preprocessor'
 
 Then('the landing page component with ID {int} should exist', (id: number) => {
   cy.get(`[data-component-id="${id}"]`).should('exist')
@@ -27,6 +27,22 @@ Then('the hero intro text should be {string}', (introText: string) => {
   cy.get('[data-cy="hero-summary"]').should('have.text', introText)
 })
 
+Then('the hero should display the following items', (dataTable: DataTable) => {
+  const table = dataTable.hashes()
+
+  cy.get(`.rpl-header-links__list a`).as('links')
+
+  table.forEach((row, i: number) => {
+    cy.get('@links')
+      .eq(i)
+      .then((item) => {
+        cy.wrap(item).as('item')
+        cy.get('@item').should('contain', row.text)
+        cy.get('@item').should('have.attr', 'href', row.url)
+      })
+  })
+})
+
 Then(
   'the {string} campaign title should be {string}',
   (campaign: string, title: string) => {