Wizard: Add Kernel name input

This adds a kernel name input.

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

@@ -2,9 +2,15 @@ import type { Router as RemixRouter } from '@remix-run/router';
 import { screen, waitFor } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 
+import { CREATE_BLUEPRINT } from '../../../../../constants';
 import {
+  blueprintRequest,
   clickBack,
   clickNext,
+  enterBlueprintName,
+  getNextButton,
+  interceptBlueprintRequest,
+  openAndDismissSaveAndBuildModal,
   verifyCancelButton,
 } from '../../wizardTestUtils';
 import { clickRegisterLater, renderCreateMode } from '../../wizardTestUtils';
@@ -31,6 +37,29 @@ const goToKernelStep = async () => {
   await clickNext(); // Kernel
 };
 
+const goToReviewStep = async () => {
+  await clickNext(); // First boot script
+  await clickNext(); // Details
+  await enterBlueprintName();
+  await clickNext(); // Review
+};
+
+const enterKernelName = async (kernelName: string) => {
+  const user = userEvent.setup();
+  const kernelNameInput = await screen.findByPlaceholderText(
+    /Add a kernel name/i
+  );
+  await waitFor(() => user.type(kernelNameInput, kernelName));
+};
+
+const clearKernelName = async () => {
+  const user = userEvent.setup();
+  const kernelNameInput = await screen.findByPlaceholderText(
+    /Add a kernel name/i
+  );
+  await waitFor(() => user.clear(kernelNameInput));
+};
+
 describe('Step Kernel', () => {
   beforeEach(() => {
     vi.clearAllMocks();
@@ -58,8 +87,60 @@ describe('Step Kernel', () => {
     await goToKernelStep();
     await verifyCancelButton(router);
   });
+
+  test('validation works', async () => {
+    await renderCreateMode();
+    await goToKernelStep();
+
+    // with empty kernel name input
+    const nextButton = await getNextButton();
+    expect(nextButton).toBeEnabled();
+
+    // invalid name
+    await enterKernelName('INVALID/NAME');
+    expect(nextButton).toBeDisabled();
+    await clickNext(); // dummy click to blur and render error (doesn't render when pristine)
+    await screen.findByText(/Invalid kernel name/);
+
+    // valid name
+    await clearKernelName();
+    await enterKernelName('valid-kernel-name');
+    expect(nextButton).toBeEnabled();
+    expect(screen.queryByText(/Invalid kernel name/)).not.toBeInTheDocument();
+  });
+});
+
+describe('Kernel request generated correctly', () => {
+  beforeEach(async () => {
+    vi.clearAllMocks();
+  });
+
+  test('with valid kernel name', async () => {
+    await renderCreateMode();
+    await goToKernelStep();
+    await enterKernelName('kernel-name');
+    await goToReviewStep();
+    // informational modal pops up in the first test only as it's tied
+    // to a 'imageBuilder.saveAndBuildModalSeen' variable in localStorage
+    await openAndDismissSaveAndBuildModal();
+    const receivedRequest = await interceptBlueprintRequest(CREATE_BLUEPRINT);
+
+    const expectedRequest = {
+      ...blueprintRequest,
+      customizations: {
+        kernel: {
+          name: 'kernel-name',
+        },
+      },
+    };
+
+    await waitFor(() => {
+      expect(receivedRequest).toEqual(expectedRequest);
+    });
+  });
 });
 
 // TO DO 'Kernel step' -> 'revisit step button on Review works'
-// TO DO 'Kernel request generated correctly'
+// TO DO 'Kernel request generated correctly' -> 'with valid kernel append'
+// TO DO 'Kernel request generated correctly' -> 'with valid kernel name and kernel append'
 // TO DO 'Kernel edit mode'