test: add error and loading state tests for TargetEnvironment

- Test loading spinner displays while fetching architectures
- Test error alert displays when fetching architectures fails
- Add setupErrorHandler to mock fetch rejections

Author: kingsleyzissou

src/Components/CreateImageWizard/steps/ImageOutput/tests/TargetEnvironment.test.tsx

@@ -13,6 +13,7 @@ import {
   createCustomArchitecturesHandler,
   createDefaultFetchHandler,
   mockArchitecturesWithNetworkInstaller,
+  setupErrorHandler,
 } from './mocks';
 
 fetchMock.enableMocks();
@@ -211,4 +212,26 @@ describe('TargetEnvironment', () => {
       expect(networkInstallerCheckbox).toBeEnabled();
     });
   });
+
+  describe('Loading and error states', () => {
+    test('displays loading spinner while fetching architectures', async () => {
+      fetchMock.mockResponse(() => new Promise(() => {}));
+
+      renderTargetEnvironment();
+
+      expect(
+        await screen.findByText(/loading target environments/i),
+      ).toBeInTheDocument();
+    });
+
+    test('displays error alert when fetching architectures fails', async () => {
+      setupErrorHandler();
+
+      renderTargetEnvironment();
+
+      expect(
+        await screen.findByText(/couldn't be loaded/i),
+      ).toBeInTheDocument();
+    });
+  });
 });

src/Components/CreateImageWizard/steps/ImageOutput/tests/mocks/handlers.ts

@@ -27,3 +27,11 @@ export const createCustomArchitecturesHandler = (
 ): FetchHandler => {
   return composeHandlers(createArchitecturesHandler({ architectures }));
 };
+
+export const setupErrorHandler = (
+  message: string = 'Internal Server Error',
+): void => {
+  fetchMock.resetMocks();
+  fetchMock.enableMocks();
+  fetchMock.mockReject(new Error(message));
+};

src/test/Components/CreateImageWizard/steps/ImageOutput/ImageOutput.test.tsx

@@ -1,12 +1,9 @@
-import type { Router as RemixRouter } from '@remix-run/router';
-import { screen } from '@testing-library/react';
-import { http, HttpResponse } from 'msw';
-
-import {
-  EDIT_BLUEPRINT,
-  IMAGE_BUILDER_API,
-  RHEL_10,
-} from '../../../../../constants';
+// NOTE: Ready for migration
+// These edit mode tests verify the round-trip: API Response → mapRequestToState() →
+// Redux State → mapRequestFromState() → API Request. They could be replaced by unit
+// tests for the request mapper functions (mapRequestToState/mapRequestFromState) which
+// would be faster and more focused than full integration tests.
+import { EDIT_BLUEPRINT } from '../../../../../constants';
 import { mockBlueprintIds } from '../../../../fixtures/blueprints';
 import {
   aarch64CreateBlueprintRequest,
@@ -15,35 +12,11 @@ import {
   rhel9CreateBlueprintRequest,
   x86_64CreateBlueprintRequest,
 } from '../../../../fixtures/editMode';
-import { server } from '../../../../mocks/server';
 import {
   interceptEditBlueprintRequest,
-  renderCreateMode,
   renderEditMode,
 } from '../../wizardTestUtils';
 
-// this is a weird false positive by eslint, the var is being used
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-let router: RemixRouter | undefined = undefined;
-
-describe('Step Image output', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-    router = undefined;
-  });
-
-  test('alert gets rendered when fetching target environments fails', async () => {
-    server.use(
-      http.get(`${IMAGE_BUILDER_API}/architectures/${RHEL_10}`, () => {
-        return new HttpResponse(null, { status: 404 });
-      }),
-    );
-
-    await renderCreateMode();
-    await screen.findByText(/Couldn't fetch target environments/);
-  });
-});
-
 describe('Image output edit mode', () => {
   beforeEach(() => {
     vi.clearAllMocks();