Merge pull request #869 from UKHSA-Internal/feature/CDD-3084-error-page

Feature/cdd 3084 error page

Author: luketowell

e2e/fixtures/pages/auth/auth-error.fixture.ts

@@ -0,0 +1,123 @@
+import { expect, Locator, type Page } from '@playwright/test'
+
+export class AuthErrorPage {
+  readonly page: Page
+  readonly heading: Locator
+  readonly errorLine: Locator
+  readonly errorText: Locator
+  readonly subText: Locator
+  readonly backButton: Locator
+  readonly errorBorder: Locator
+  readonly relatedLinksSidebar: Locator
+  readonly relatedLinksFooter: Locator
+  readonly announcements: Locator
+
+  constructor(page: Page) {
+    this.page = page
+    this.heading = this.page.locator('main').getByRole('heading', { level: 1 })
+    this.errorLine = this.page.locator('.text-red').first()
+    this.errorText = this.page.locator('.border-l-red').locator('[data-testid="rich-text"]').first()
+    this.subText = this.page.locator('main').locator('[data-testid="rich-text"]').nth(1)
+    this.backButton = this.page.getByRole('link', { name: /back/i })
+    this.errorBorder = this.page.locator('.border-l-\\[9px\\].border-l-red')
+    this.relatedLinksSidebar = this.page.locator('.govuk-grid-column-one-quarter-from-desktop')
+    this.relatedLinksFooter = this.page.locator('main > div:last-child')
+    this.announcements = this.page.locator('[data-testid="announcements"]')
+  }
+
+  async goto(slug: string = 'authentication-error') {
+    await this.page.goto(`/${slug}`)
+  }
+
+  async isAuthErrorPage(slug: string = 'authentication-error') {
+    await expect(this.page).toHaveURL(new RegExp(`/${slug}/?$`))
+  }
+
+  async checkHeadingExists(expectedText: string) {
+    await expect(this.heading).toBeVisible()
+    await expect(this.heading).toHaveText(expectedText)
+  }
+
+  async checkErrorLineExists(expectedText: string) {
+    await expect(this.errorLine).toBeVisible()
+    await expect(this.errorLine).toHaveText(expectedText)
+  }
+
+  async checkErrorTextExists() {
+    await expect(this.errorText).toBeVisible()
+  }
+
+  async checkSubTextExists() {
+    await expect(this.subText).toBeVisible()
+  }
+
+  async checkBackButtonExists() {
+    await expect(this.backButton).toBeVisible()
+  }
+
+  async checkBackButtonHasCorrectHref() {
+    await expect(this.backButton).toHaveAttribute('href', '/start')
+  }
+
+  async clickBackButton() {
+    await this.backButton.click()
+  }
+
+  async checkErrorBorderStyling() {
+    await expect(this.errorBorder).toBeVisible()
+    await expect(this.errorBorder).toHaveClass(/border-l-\[9px\]/)
+    await expect(this.errorBorder).toHaveClass(/border-l-red/)
+    await expect(this.errorBorder).toHaveClass(/pl-9/)
+  }
+
+  async checkRelatedLinksSidebarExists() {
+    await expect(this.relatedLinksSidebar).toBeVisible()
+  }
+
+  async checkRelatedLinksSidebarNotExists() {
+    await expect(this.relatedLinksSidebar).not.toBeVisible()
+  }
+
+  async checkRelatedLinksFooterExists() {
+    const footerLinks = this.page.locator('[data-testid="related-links-footer"]')
+    await expect(footerLinks).toBeVisible()
+  }
+
+  async checkRelatedLinksFooterNotExists() {
+    const footerLinks = this.page.locator('[data-testid="related-links-footer"]')
+    await expect(footerLinks).not.toBeVisible()
+  }
+
+  async checkAnnouncementsExist() {
+    await expect(this.announcements).toBeVisible()
+  }
+
+  async checkAnnouncementsCount(expectedCount: number) {
+    const announcements = this.page.locator('[role="alert"]')
+    await expect(announcements).toHaveCount(expectedCount)
+  }
+
+  async hasMainContent() {
+    await expect(this.page.locator('main')).toBeVisible()
+  }
+
+  async checkBackButtonIcon() {
+    const svg = this.backButton.locator('svg')
+    await expect(svg).toBeVisible()
+    await expect(svg).toHaveAttribute('width', '20')
+    await expect(svg).toHaveAttribute('height', '20')
+  }
+
+  async checkPageContainsText(text: string) {
+    await expect(this.page.locator('main')).toContainText(text)
+  }
+
+  async checkRelatedLinksCount(count: number) {
+    const links = this.page.locator('[data-testid*="related-links"] a')
+    await expect(links).toHaveCount(count)
+  }
+
+  async clickRelatedLink(linkText: string) {
+    await this.page.getByRole('link', { name: linkText }).click()
+  }
+}

public/locales/en/auth.json

@@ -1,6 +1,7 @@
 {
   "signOutButton": "Sign out",
   "signInButton": "Sign in",
+  "backButtonText": "Back",
   "startPage": {
     "signOutBannerTitle": "Success",
     "signOutBannerHeading": "You've been signed out",

src/api/requests/cms/getPage.spec.ts

@@ -13,7 +13,7 @@ beforeEach(() => {
   jest.clearAllMocks()
 })
 
-test('Returns a full page from thge cms by id', async () => {
+test('Returns a full page from the cms by id', async () => {
   jest.mocked(client).mockResolvedValueOnce({ data: dashboardMock, status: 200 })
 
   const result = await getPage(dashboardMock.id)

src/api/requests/cms/getPage.ts

@@ -25,6 +25,7 @@ type PageTypeToDataMap = {
   [PageType.MetricsParent]: typeof WithMetricsParentData
   [PageType.MetricsChild]: typeof WithMetricsChildData
   [PageType.Acknowledgement]: typeof WithAcknowledgementData
+  [PageType.AuthError]: typeof WithErrorData
 }
 
 const SharedPageData = z.object({
@@ -186,6 +187,17 @@ const WithAcknowledgementData = SharedPageData.omit({
   seo_priority: z.coerce.number().or(fallback(0.5)).optional(),
 })
 
+const WithErrorData = SharedPageData.extend({
+  error_line: z.string(),
+  error_text: z.string(),
+  sub_text: z.string(),
+  meta: Meta.extend({
+    type: z.literal('error.ErrorPage'),
+  }),
+  related_links: RelatedLinks,
+  related_links_layout: RelatedLinksLayout.or(fallback<RelatedLinksLayout>('Sidebar')),
+})
+
 export const responseSchema = z.union([
   WithLandingData,
   withFeedbackData,
@@ -198,6 +210,7 @@ export const responseSchema = z.union([
   WithMetricsParentData,
   WithMetricsChildData,
   WithAcknowledgementData,
+  WithErrorData,
 ])
 
 /**

src/api/requests/cms/getPages.ts

@@ -41,6 +41,7 @@ export enum PageType {
   MetricsParent = 'metrics_documentation.MetricsDocumentationParentPage',
   MetricsChild = 'metrics_documentation.MetricsDocumentationChildEntry',
   Acknowledgement = 'acknowledgement.AcknowledgementPage',
+  AuthError = 'error.ErrorPage',
 }
 
 const page = z.object({
@@ -107,7 +108,7 @@ export const metricsChildResponseSchema = responseSchema.extend({
         })
       ),
       is_public: z.boolean(),
-      page_classification: DataClassification.or(fallback(undefined))
+      page_classification: DataClassification.or(fallback(undefined)),
     })
   ),
 })

src/app/(auth)/auth/error/layout.tsx

@@ -1,7 +1,5 @@
-import React from 'react'
+import { redirect } from 'next/navigation'
 
-import ErrorMessage from '@/app/components/ui/ukhsa/ErrorMessage/ErrorMessage'
-
-export default async function Page() {
-  return <ErrorMessage />
+export default function Page() {
+  redirect('/authentication-error')
 }

src/app/(auth)/auth/error/page.tsx

@@ -4,6 +4,7 @@ import { ComponentType } from 'react'
 
 import { PageType } from '@/api/requests/cms/getPages'
 import AcknowledgementPage from '@/app/components/cms/pages/Acknowledgement'
+import AuthErrorPage from '@/app/components/cms/pages/AuthError'
 import CompositePage from '@/app/components/cms/pages/Composite'
 import FeedbackPage from '@/app/components/cms/pages/Feedback'
 import LandingPage from '@/app/components/cms/pages/Landing'
@@ -52,6 +53,7 @@ const PageComponents: Record<PageType, ComponentType<PageComponentBaseProps>> =
   [PageType.WhatsNewParent]: WhatsNewParentPage,
   [PageType.WhatsNewChild]: WhatsNewChildPage,
   [PageType.Acknowledgement]: AcknowledgementPage,
+  [PageType.AuthError]: AuthErrorPage,
 }
 
 /**

src/app/(cms)/[[...slug]]/page.tsx

@@ -11,6 +11,7 @@ exports[`test sitemap function that builds a list of URLs for search engines 1`]
   "/access-our-data/what-is-an-api",
   "/accessibility-statement/",
   "/acknowledgement/",
+  "/authentication-error/",
   "/browse",
   "/bulk-downloads/",
   "/compliance/",