Fix: Add an explicit error-path test for failed consent fetch

Author: rashmithachamikara

portal/frontend/src/__tests__/ConsentRegistryPage.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react'
+import { cleanup, render, screen } from '@testing-library/react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { AcrylicOrangeTheme, CssBaseline, OxygenUIThemeProvider } from '@wso2/oxygen-ui'
 import { I18nextProvider } from 'react-i18next'
@@ -9,7 +9,33 @@ import i18n from '../i18n/i18n'
 
 const fetchMock = vi.fn()
 
+function createQueryClient(): QueryClient {
+  return new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  })
+}
+
+function renderConsentRegistryPage(queryClient: QueryClient): void {
+  render(
+    <OxygenUIThemeProvider theme={AcrylicOrangeTheme}>
+      <CssBaseline />
+      <I18nextProvider i18n={i18n}>
+        <QueryClientProvider client={queryClient}>
+          <MemoryRouter>
+            <ConsentRegistryPage />
+          </MemoryRouter>
+        </QueryClientProvider>
+      </I18nextProvider>
+    </OxygenUIThemeProvider>,
+  )
+}
+
 afterEach(() => {
+  cleanup()
   fetchMock.mockReset()
   vi.unstubAllGlobals()
 })
@@ -46,31 +72,34 @@ describe('ConsentRegistryPage', () => {
       }),
     })
 
-    const queryClient = new QueryClient({
-      defaultOptions: {
-        queries: {
-          retry: false,
-        },
-      },
-    })
+    const queryClient = createQueryClient()
 
-    render(
-      <OxygenUIThemeProvider theme={AcrylicOrangeTheme}>
-        <CssBaseline />
-        <I18nextProvider i18n={i18n}>
-          <QueryClientProvider client={queryClient}>
-            <MemoryRouter>
-              <ConsentRegistryPage />
-            </MemoryRouter>
-          </QueryClientProvider>
-        </I18nextProvider>
-      </OxygenUIThemeProvider>,
-    )
+    renderConsentRegistryPage(queryClient)
 
     expect(await screen.findByRole('heading', { name: 'All Consents' })).toBeInTheDocument()
     expect(screen.getByLabelText('Consent filters')).toBeInTheDocument()
     expect(await screen.findByRole('table', { name: 'Consent registry table' })).toBeInTheDocument()
     expect(await screen.findByText('Client: Tesco_Bank_v1')).toBeInTheDocument()
     expect(await screen.findByText('#CON-8291')).toBeInTheDocument()
   })
+
+  it('shows an error message when consent fetch fails', async () => {
+    vi.stubGlobal('fetch', fetchMock)
+    fetchMock.mockResolvedValue({
+      ok: false,
+      status: 500,
+      json: async () => ({
+        code: 'INTERNAL_SERVER_ERROR',
+        message: 'Something went wrong.',
+      }),
+    })
+
+    const queryClient = createQueryClient()
+
+    renderConsentRegistryPage(queryClient)
+
+    expect(await screen.findByRole('heading', { name: 'All Consents' })).toBeInTheDocument()
+    expect(await screen.findByText('Unable to load consents right now.')).toBeInTheDocument()
+    expect(screen.queryByRole('table', { name: 'Consent registry table' })).not.toBeInTheDocument()
+  })
 })