Wizard: Add Hostname functionality

This adds a validated hostname input and new tests.

src/test/Components/CreateImageWizard/steps/Hostname/Hostname.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';
@@ -30,6 +36,25 @@ const goToHostnameStep = async () => {
   await clickNext(); // Hostname
 };
 
+const goToReviewStep = async () => {
+  await clickNext(); // First boot script
+  await clickNext(); // Details
+  await enterBlueprintName();
+  await clickNext(); // Review
+};
+
+const enterHostname = async (hostname: string) => {
+  const user = userEvent.setup();
+  const hostnameInput = await screen.findByPlaceholderText(/Add a hostname/i);
+  await waitFor(() => user.type(hostnameInput, hostname));
+};
+
+const clearHostname = async () => {
+  const user = userEvent.setup();
+  const hostnameInput = await screen.findByPlaceholderText(/Add a hostname/i);
+  await waitFor(() => user.clear(hostnameInput));
+};
+
 describe('Step Hostname', () => {
   beforeEach(() => {
     vi.clearAllMocks();
@@ -57,8 +82,56 @@ describe('Step Hostname', () => {
     await goToHostnameStep();
     await verifyCancelButton(router);
   });
+
+  test('validation works', async () => {
+    await renderCreateMode();
+    await goToHostnameStep();
+
+    // with empty hostname input
+    const nextButton = await getNextButton();
+    expect(nextButton).toBeEnabled();
+
+    // invalid name
+    await enterHostname('-invalid-hostname-');
+    expect(nextButton).toBeDisabled();
+    await clickNext(); // dummy click to blur and render error (doesn't render when pristine)
+    await screen.findByText(/Invalid hostname/);
+
+    // valid name
+    await clearHostname();
+    await enterHostname('valid-hostname');
+    expect(nextButton).toBeEnabled();
+    expect(screen.queryByText(/Invalid hostname/)).not.toBeInTheDocument();
+  });
+});
+
+describe('Hostname request generated correctly', () => {
+  beforeEach(async () => {
+    vi.clearAllMocks();
+  });
+
+  test('with valid hostname', async () => {
+    await renderCreateMode();
+    await goToHostnameStep();
+    await enterHostname('hostname');
+    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: {
+        hostname: 'hostname',
+      },
+    };
+
+    await waitFor(() => {
+      expect(receivedRequest).toEqual(expectedRequest);
+    });
+  });
 });
 
 // TO DO 'Step Hostname' -> 'revisit step button on Review works'
-// TO DO 'Hostname request generated correctly'
 // TO DO 'Hostname edit mode'