Merge pull request #532 from UKHSA-Internal/bug/page-links-landing-page

Bug/page links landing page

src/app/utils/cms.utils.spec.tsx

@@ -45,16 +45,13 @@ describe('Displaying a section from the cms home page', () => {
  test('renders a heading that links to the topic page', () => {
  render(renderSection(mockSectionWithLink))
  expect(screen.getByRole('heading', { level: 2, name: 'COVID-19' })).toBeInTheDocument()
- expect(screen.getByRole('link', { name: 'COVID-19' })).toHaveAttribute(
- 'href',
- 'http://localhost:3000/topics/covid-19'
- )
+ expect(screen.getByRole('link', { name: 'COVID-19' })).toHaveAttribute('href', '/topics/covid-19')
 
  render(renderSection(mockSectionWithLongHeading))
  expect(screen.getByRole('heading', { level: 2, name: 'Other respiratory viruses' })).toBeInTheDocument()
  expect(screen.getByRole('link', { name: 'Other respiratory viruses' })).toHaveAttribute(
  'href',
- 'http://localhost:3000/topics/other-respiratory-viruses'
+ '/topics/other-respiratory-viruses'
  )
  })
 

src/app/utils/cms.utils.tsx

@@ -11,6 +11,7 @@ import { Card, Tabs, TabsContent, TabsList, TabsTrigger } from '@/app/components
 import { List } from '@/app/components/ui/ukhsa/List/List'
 import { ListItemArrow, ListItemArrowLink, ListItemArrowParagraph } from '@/app/components/ui/ukhsa/List/ListItemArrow'
 import { MiniMapCard } from '@/app/components/ui/ukhsa/MiniMap/MiniMapCard'
+import { getPath } from '@/app/utils/cms/slug'
 
 import {
  ButtonExternal,
@@ -44,7 +45,7 @@ export const renderSection = ({
  >
  <h2 className="govuk-heading-l govuk-!-margin-bottom-4">
  {pageLink ? (
- <Link href={pageLink} className="govuk-link--no-visited-state">
+ <Link href={getPath(pageLink)} className="govuk-link--no-visited-state">
  {heading}
  </Link>
  ) : (
@@ -190,7 +191,7 @@ export const renderCard = ({ id, type, value }: z.infer<typeof CardTypes>) => (
  aria-labelledby={`chart-row-card-heading-${snakeCase(card.value.title)}`}
  className="ukhsa-chart-card relative flex flex-col bg-[var(--colour-chart-background)] no-underline transition-colors duration-200 ukhsa-focus hover:bg-[var(--colour-chart-background-hover)] focus:bg-[var(--colour-chart-background-hover)]"
  >
- <Link href={card.value.topic_page}>
+ <Link href={getPath(card.value.topic_page)}>
  <h3 id={`chart-row-card-heading-${snakeCase(card.value.title)}`} className="govuk-heading-m mb-1">
  {card.value.title}
  </h3>
@@ -258,7 +259,7 @@ export const renderCompositeBlock = ({ id, type, value }: CompositeBody[number])
  {value.map(({ id, value }) => (
  <ListItem key={id} spacing="m">
  <ListItemArrow>
- <ListItemArrowLink href={value.page}>{value.title}</ListItemArrowLink>
+ <ListItemArrowLink href={getPath(value.page)}>{value.title}</ListItemArrowLink>
  <ListItemArrowParagraph>{value.sub_title}</ListItemArrowParagraph>
  </ListItemArrow>
  </ListItem>

src/app/utils/cms/slug.spec.ts

@@ -2,7 +2,7 @@
 
 import { Slug } from '@/app/types'
 
-import { extractRootSlug, getPathSegments } from './slug'
+import { extractRootSlug, getPath, getPathSegments } from './slug'
 
 // Define the test suite for the extractRootSlug function
 describe('extractRootSlug', () => {
@@ -69,3 +69,30 @@ describe('getPathSegments', () => {
  expect(getPathSegments(url)).toEqual<Slug>(['access-our-data'])
  })
 })
+
+describe('getPath', () => {
+ test('handle url with single path segment', () => {
+ const url = 'https://dev.ukhsa-dashboard.data.gov.uk/access-our-data/'
+ expect(getPath(url)).toEqual<string>('/access-our-data')
+ })
+
+ test('handle url with multiple path segments', () => {
+ const url = 'https://dev.ukhsa-dashboard.data.gov.uk/outbreaks/measles'
+ expect(getPath(url)).toEqual<string>('/outbreaks/measles')
+ })
+
+ test('handle unexpected values', () => {
+ const url = ''
+ expect(getPath(url)).toEqual<string>('/')
+ })
+
+ test('handle URLs without trailing slash', () => {
+ const url = 'https://dev.ukhsa-dashboard.data.gov.uk/access-our-data'
+ expect(getPath(url)).toEqual<string>('/access-our-data')
+ })
+
+ test('handle root URLs', () => {
+ const url = 'https://dev.ukhsa-dashboard.data.gov.uk/'
+ expect(getPath(url)).toEqual<string>('/')
+ })
+})

src/app/utils/cms/slug.ts

@@ -12,3 +12,8 @@ export function getPathSegments(url: string): Slug {
  const segments = path.split('/').filter((segment) => segment.length > 0)
  return segments
 }
+
+export function getPath(url: string) {
+ const pathSegments = getPathSegments(url)
+ return `/${pathSegments.join('/')}`
+}