V2Wizard/Registration: Add request assertion tests

We need to start using `undefined` as the default state for when a value
has not been defined. Previously we had used things like `’’` for string
typed values. But this causes problems later when generating the request
we send to image-builder. Using `undefined` is explicit and will make
generating the requests much easier (as we don’t need to check for `’’`,
determine the intent, and convert it to undefined if necessary).
Explicit is better than implicit.

With that in mind, tests have been added to ensure that the correct
request is sent to the API for every option on the Registration step.
This is facilitated using a new `spyOnRequest()` function. In the
future, we will have similar tests for the rest of the steps.

A few other minor things:

1. We need to get the `store` using `useStore()`
for when we later call `store.getState()` because the tests use a different
store that is configured in the renderer than the one we were importing.

2. In the wizardSlice, a new type RegistrationType is added that provides
additional type safety instead of using `string`.

src/test/Components/CreateImageWizardV2/steps/Registration/Registration.test.tsx

@@ -0,0 +1,207 @@
+import { screen } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+
+import { CREATE_BLUEPRINT } from '../../../../../constants';
+import {
+  CreateBlueprintRequest,
+  ImageRequest,
+} from '../../../../../store/imageBuilderApi';
+import { clickNext } from '../../../../testUtils';
+import {
+  enterBlueprintName,
+  render,
+  saveBlueprint,
+  spyOnRequest,
+} from '../../wizardTestUtils';
+
+jest.mock('@redhat-cloud-services/frontend-components/useChrome', () => ({
+  useChrome: () => ({
+    auth: {
+      getUser: () => {
+        return {
+          identity: {
+            internal: {
+              org_id: 5,
+            },
+          },
+        };
+      },
+    },
+    isBeta: () => false,
+    isProd: () => true,
+    getEnvironment: () => 'prod',
+  }),
+}));
+
+const goToRegistrationStep = async () => {
+  const bareMetalCheckBox = await screen.findByRole('checkbox', {
+    name: /bare metal installer checkbox/i,
+  });
+  await userEvent.click(bareMetalCheckBox);
+  await clickNext();
+};
+
+const selectActivationKey = async () => {
+  const activationKeyDropdown = await screen.findByRole('textbox', {
+    name: 'Select activation key',
+  });
+  await userEvent.click(activationKeyDropdown);
+  const activationKey = await screen.findByRole('option', {
+    name: 'name0',
+  });
+  await userEvent.click(activationKey);
+};
+
+const clickShowAdditionalConnectionOptions = async () => {
+  const link = await screen.findByText('Show additional connection options');
+  await userEvent.click(link);
+};
+
+const deselectEnableRemoteRemediations = async () => {
+  const checkBox = await screen.findByRole('checkbox', {
+    name: 'Enable remote remediations and system management with automation',
+  });
+  await userEvent.click(checkBox);
+};
+
+const deselectPredictiveAnalytics = async () => {
+  const checkBox = await screen.findByRole('checkbox', {
+    name: 'Enable predictive analytics and management capabilities',
+  });
+  await userEvent.click(checkBox);
+};
+
+const clickRegisterLater = async () => {
+  const radioButton = await screen.findByRole('radio', {
+    name: 'Register later',
+  });
+  await userEvent.click(radioButton);
+};
+
+const goToReviewStep = async () => {
+  await clickNext();
+  await clickNext();
+  await clickNext();
+  await enterBlueprintName();
+  await clickNext();
+};
+
+describe('registration request generated correctly', () => {
+  const imageRequest: ImageRequest = {
+    architecture: 'x86_64',
+    image_type: 'image-installer',
+    upload_request: {
+      options: {},
+      type: 'aws.s3',
+    },
+  };
+
+  const blueprintRequest: CreateBlueprintRequest = {
+    name: 'Red Velvet',
+    description: '',
+    distribution: 'rhel-93',
+    image_requests: [imageRequest],
+    customizations: {},
+  };
+
+  test('register + insights + rhc', async () => {
+    await render();
+    await goToRegistrationStep();
+    await selectActivationKey();
+    await goToReviewStep();
+
+    const receivedRequestPromise = spyOnRequest(CREATE_BLUEPRINT);
+    await saveBlueprint();
+    const receivedRequest = await receivedRequestPromise;
+
+    const expectedSubscription = {
+      'activation-key': 'name0',
+      insights: true,
+      rhc: true,
+      organization: 5,
+      'server-url': 'subscription.rhsm.redhat.com',
+      'base-url': 'https://cdn.redhat.com/',
+    };
+    const expectedRequest = {
+      ...blueprintRequest,
+      customizations: { subscription: expectedSubscription },
+    };
+
+    expect(receivedRequest).toEqual(expectedRequest);
+  });
+
+  test('register + insights', async () => {
+    await render();
+    await goToRegistrationStep();
+    await clickShowAdditionalConnectionOptions();
+    await deselectEnableRemoteRemediations();
+    await selectActivationKey();
+    await goToReviewStep();
+
+    const receivedRequestPromise = spyOnRequest(CREATE_BLUEPRINT);
+    await saveBlueprint();
+    const receivedRequest = await receivedRequestPromise;
+
+    const expectedSubscription = {
+      'activation-key': 'name0',
+      insights: true,
+      rhc: false,
+      organization: 5,
+      'server-url': 'subscription.rhsm.redhat.com',
+      'base-url': 'https://cdn.redhat.com/',
+    };
+    const expectedRequest = {
+      ...blueprintRequest,
+      customizations: { subscription: expectedSubscription },
+    };
+
+    expect(receivedRequest).toEqual(expectedRequest);
+  });
+
+  test('register', async () => {
+    await render();
+    await goToRegistrationStep();
+    await clickShowAdditionalConnectionOptions();
+    await deselectPredictiveAnalytics();
+    await selectActivationKey();
+    await goToReviewStep();
+
+    const receivedRequestPromise = spyOnRequest(CREATE_BLUEPRINT);
+    await saveBlueprint();
+    const receivedRequest = await receivedRequestPromise;
+
+    const expectedSubscription = {
+      'activation-key': 'name0',
+      insights: false,
+      rhc: false,
+      organization: 5,
+      'server-url': 'subscription.rhsm.redhat.com',
+      'base-url': 'https://cdn.redhat.com/',
+    };
+    const expectedRequest = {
+      ...blueprintRequest,
+      customizations: { subscription: expectedSubscription },
+    };
+
+    expect(receivedRequest).toEqual(expectedRequest);
+  });
+
+  test('register Later', async () => {
+    await render();
+    await goToRegistrationStep();
+    await clickShowAdditionalConnectionOptions();
+    await clickRegisterLater();
+    await goToReviewStep();
+
+    const receivedRequestPromise = spyOnRequest(CREATE_BLUEPRINT);
+    await saveBlueprint();
+    const receivedRequest = await receivedRequestPromise;
+
+    const expectedRequest = {
+      ...blueprintRequest,
+      customizations: {},
+    };
+
+    expect(receivedRequest).toEqual(expectedRequest);
+  });
+});

src/test/Components/CreateImageWizardV2/wizardTestUtils.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+
+import { screen } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import { MockedRequest } from 'msw';
+
+import CreateImageWizard from '../../../Components/CreateImageWizardV2/CreateImageWizard';
+import { server } from '../../mocks/server';
+import { renderCustomRoutesWithReduxRouter } from '../../testUtils';
+
+export function spyOnRequest(pathname: string) {
+  return new Promise((resolve) => {
+    const listener = async (req: MockedRequest) => {
+      if (req.url.pathname === pathname) {
+        const requestData = await req.clone().json();
+        resolve(requestData);
+        // Cleanup listener after successful intercept
+        server.events.removeListener('request:match', listener);
+      }
+    };
+
+    server.events.on('request:match', listener);
+  });
+}
+
+const routes = [
+  {
+    path: 'insights/image-builder/*',
+    element: <div />,
+  },
+  {
+    path: 'insights/image-builder/imagewizard/:composeId?',
+    element: <CreateImageWizard />,
+  },
+];
+
+export const render = async () => {
+  await renderCustomRoutesWithReduxRouter('imagewizard', {}, routes);
+};
+
+export const enterBlueprintName = async () => {
+  const blueprintName = await screen.findByRole('textbox', {
+    name: /blueprint name/i,
+  });
+  await userEvent.type(blueprintName, 'Red Velvet');
+};
+
+export const saveBlueprint = async () => {
+  const saveButton = await screen.findByRole('button', {
+    name: 'Save',
+  });
+  await userEvent.click(saveButton);
+  const saveChangesButton = await screen.findByRole('menuitem', {
+    name: 'Save changes',
+  });
+  await userEvent.click(saveChangesButton);
+};