refactor: Updated Contact Us Page (#362)

frontend/e2e/pages/contact.ts

@@ -8,31 +8,36 @@ export const contact_page = async (page: Page) => {
   const contactUsLink = page.getByRole('link', { name: 'Contact Us' })
   await contactUsLink.click()
 
+  // Test main heading
   await expect(
-    page.getByRole('heading', {
-      name: 'Contact Us',
-    }),
+    page.getByRole('heading', { name: 'Contact us', level: 1 }),
   ).toBeVisible()
+
+  // Test section headers using the new class
   await expect(
-    page.getByRole('heading', {
-      name: 'Organic matter',
-    }),
+    page.locator('.link-section-header', { hasText: 'Organic matter' }),
   ).toBeVisible()
+
   await expect(
-    page.getByRole('heading', {
-      name: 'Authorizations',
-    }),
+    page.locator('.link-section-header', { hasText: 'Authorizations' }),
   ).toBeVisible()
 
   await expect(
-    page.getByRole('heading', {
-      name: 'Report natural resource violations',
+    page.locator('.link-section-header', {
+      hasText: 'Report natural resource violations',
     }),
   ).toBeVisible()
 
+  // Test Need general help section
   await expect(
-    page.getByRole('link', {
-      name: '[email protected]',
-    }),
+    page.getByRole('heading', { name: 'Need general help?' }),
+  ).toBeVisible()
+
+  // Test link sections are present
+  await expect(page.locator('.link-section')).toHaveCount(3)
+
+  // Test a sample link is visible
+  await expect(
+    page.getByRole('link', { name: '[email protected]' }),
   ).toBeVisible()
 }

frontend/src/pages/authorizationDetails/ContactSection.tsx

@@ -62,7 +62,7 @@ export function ContactSection({ authNumber }: Readonly<Props>) {
                 color: 'var(--typography-color-link)',
               }}
             >
-              WasteDischargeApplicationInquiries@gov.bc.ca
+              ENVCIA@gov.bc.ca
             </a>
           </Stack>
         </Stack>

frontend/src/pages/contactUs/ContactUs.test.tsx

@@ -4,18 +4,54 @@ import { render } from '@/test-utils'
 import { ContactUs } from './ContactUs'
 
 describe('Test suite for ContactUs', () => {
-  it('should render ContactUs', () => {
+  it('should render ContactUs page with all sections and content', () => {
     render(<ContactUs />, {
       withRouter: true,
     })
 
-    screen.getByRole('heading', { name: 'Contact Us' })
-    screen.getByRole('heading', { name: 'Organic matter' })
-    screen.getByRole('heading', { name: 'Authorizations' })
-    screen.getByRole('heading', { name: 'Report natural resource violations' })
-    const listItems = screen.getAllByRole('listitem')
-    expect(listItems).toHaveLength(5)
+    // Test main heading structure
+    expect(
+      screen.getByRole('heading', { name: 'Contact us', level: 1 }),
+    ).toBeInTheDocument()
+
+    // Test section headings
+    expect(
+      screen.getByText('Organic matter', { selector: '.link-section-header' }),
+    ).toBeInTheDocument()
+    expect(
+      screen.getByText('Authorizations', { selector: '.link-section-header' }),
+    ).toBeInTheDocument()
+    expect(
+      screen.getByText('Report natural resource violations', {
+        selector: '.link-section-header',
+      }),
+    ).toBeInTheDocument()
+    expect(
+      screen.getByRole('heading', { name: 'Need general help?' }),
+    ).toBeInTheDocument()
+
+    // Test links
     const links = screen.getAllByRole('link')
-    expect(links).toHaveLength(5)
+    expect(links).toHaveLength(6) // All email and web links
+
+    // Verify link destinations
+    expect(links[0]).toHaveAttribute(
+      'href',
+      'mailto:[email protected]',
+    )
+    expect(links[1]).toHaveAttribute('href', 'mailto:[email protected]')
+    expect(links[2]).toHaveAttribute(
+      'href',
+      'https://forms.gov.bc.ca/environment/wda-enquiry/',
+    )
+    expect(links[3]).toHaveAttribute('href', 'tel:18779527277')
+    expect(links[4]).toHaveAttribute(
+      'href',
+      'https://forms.gov.bc.ca/environment/rapp/',
+    )
+    expect(links[5]).toHaveAttribute(
+      'href',
+      'https://www2.gov.bc.ca/gov/content/home/get-help-with-government-services',
+    )
   })
 })