test: Add Locale tests for keyboard drop down

This adds tests checking functionality of keyboard drop down and blueprint request with locale.

.local/share/cockpit/image-builder-frontend/blueprints/blueprint.toml

@@ -0,0 +1,3 @@
+name = "basic-example"
+description = "A basic blueprint"
+version = "0.0.1"

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

@@ -2,9 +2,18 @@ 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, EDIT_BLUEPRINT } from '../../../../../constants';
+import { mockBlueprintIds } from '../../../../fixtures/blueprints';
+import { localeCreateBlueprintRequest } from '../../../../fixtures/editMode';
 import {
+  blueprintRequest,
   clickBack,
   clickNext,
+  enterBlueprintName,
+  interceptBlueprintRequest,
+  interceptEditBlueprintRequest,
+  openAndDismissSaveAndBuildModal,
+  renderEditMode,
   verifyCancelButton,
 } from '../../wizardTestUtils';
 import { clickRegisterLater, renderCreateMode } from '../../wizardTestUtils';
@@ -29,6 +38,27 @@ const goToLocaleStep = async () => {
   await clickNext(); // Locale
 };
 
+const goToReviewStep = async () => {
+  await clickNext(); // First boot
+  await clickNext(); // Details
+  await enterBlueprintName();
+  await clickNext(); // Review
+};
+
+const searchForKeyboard = async () => {
+  const user = userEvent.setup();
+  const keyboardDropdown = await screen.findByPlaceholderText(
+    /select a keyboard/i
+  );
+  await waitFor(() => user.type(keyboardDropdown, 'us'));
+};
+
+const selectKeyboard = async () => {
+  const user = userEvent.setup();
+  const usKeyboard = await screen.findByRole('option', { name: 'us' });
+  await waitFor(() => user.click(usKeyboard));
+};
+
 describe('Step Locale', () => {
   beforeEach(() => {
     vi.clearAllMocks();
@@ -56,8 +86,63 @@ describe('Step Locale', () => {
     await goToLocaleStep();
     await verifyCancelButton(router);
   });
+
+  test('search results get sorted correctly', async () => {
+    await renderCreateMode();
+    await goToLocaleStep();
+    await searchForKeyboard();
+    const options = await screen.findAllByRole('option');
+    expect(options[0]).toHaveTextContent('us');
+    expect(options[1]).toHaveTextContent('us-acentos');
+    expect(options[2]).toHaveTextContent('us-alt-intl');
+  });
 });
 
+describe('Locale request generated correctly', () => {
+  test('with keyboard selected', async () => {
+    await renderCreateMode();
+    await goToLocaleStep();
+    await searchForKeyboard();
+    await selectKeyboard();
+    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: {
+        locale: {
+          keyboard: 'us',
+        },
+      },
+    };
+
+    await waitFor(() => {
+      expect(receivedRequest).toEqual(expectedRequest);
+    });
+  });
+});
+
+describe('Locale edit mode', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  test('edit mode works', async () => {
+    const id = mockBlueprintIds['locale'];
+    await renderEditMode(id);
+
+    // starts on review step
+    const receivedRequest = await interceptEditBlueprintRequest(
+      `${EDIT_BLUEPRINT}/${id}`
+    );
+    const expectedRequest = localeCreateBlueprintRequest;
+    expect(receivedRequest).toEqual(expectedRequest);
+  });
+});
+
+// TO DO 'with languages selected'
+// TO DO 'with languages and keyboard selected'
 // TO DO 'Step Locale' -> 'revisit step button on Review works'
-// TO DO 'Locale request generated correctly'
-// TO DO 'Locale edit mode'

src/test/fixtures/blueprints.ts

@@ -34,6 +34,7 @@ export const mockBlueprintIds = {
   repositories: '6f20ab62-37ba-4afd-9945-734919e9307b',
   packages: 'b3437c4e-f6f8-4270-8d32-323ac60bc929',
   timezone: 'c535dc6e-93b0-4592-ad29-fe46ba7dac73',
+  locale: '6e982b49-cd2e-4ad0-9962-39315a0ed9d1',
   firstBoot: 'd0a8376e-e44e-47b3-845d-30f5199a35b6',
   details: '58991b91-4b98-47e0-b26d-8d908678ddb3',
   compliance: '21571945-fe23-45e9-8afb-4aa073b8d735',
@@ -56,6 +57,7 @@ export const mockBlueprintNames = {
   repositories: 'repositories',
   packages: 'packages',
   timezone: 'timezone',
+  locale: 'locale',
   firstBoot: 'firstBoot',
   details: 'details',
   compliance: 'compliance',
@@ -78,6 +80,7 @@ export const mockBlueprintDescriptions = {
   repositories: '',
   packages: '',
   timezone: '',
+  locale: '',
   firstBoot: '',
   details: 'This is a test description for the Details step.',
   compliance: '',
@@ -276,6 +279,13 @@ export const mockGetBlueprints: GetBlueprintsApiResponse = {
       version: 1,
       last_modified_at: '2021-09-08T21:00:00.000Z',
     },
+    {
+      id: mockBlueprintIds['locale'],
+      name: mockBlueprintNames['locale'],
+      description: mockBlueprintDescriptions['locale'],
+      version: 1,
+      last_modified_at: '2021-09-08T21:00:00.000Z',
+    },
     {
       id: mockBlueprintIds['firstBoot'],
       name: mockBlueprintNames['firstBoot'],

src/test/fixtures/editMode.ts

@@ -433,12 +433,30 @@ export const timezoneCreateBlueprintRequest: CreateBlueprintRequest = {
   },
 };
 
+export const localeCreateBlueprintRequest: CreateBlueprintRequest = {
+  ...baseCreateBlueprintRequest,
+  name: mockBlueprintNames['locale'],
+  description: mockBlueprintDescriptions['locale'],
+  customizations: {
+    locale: {
+      languages: ['en_US.UTF-8'],
+      keyboard: 'us',
+    },
+  },
+};
+
 export const timezoneBlueprintResponse: BlueprintResponse = {
   ...timezoneCreateBlueprintRequest,
   id: mockBlueprintIds['timezone'],
   description: mockBlueprintDescriptions['timezone'],
 };
 
+export const localeBlueprintResponse: BlueprintResponse = {
+  ...localeCreateBlueprintRequest,
+  id: mockBlueprintIds['locale'],
+  description: mockBlueprintDescriptions['locale'],
+};
+
 export const firstBootCreateBlueprintRequest: CreateBlueprintRequest = {
   ...baseCreateBlueprintRequest,
   name: mockBlueprintNames['firstBoot'],
@@ -525,6 +543,8 @@ export const getMockBlueprintResponse = (id: string) => {
       return packagesBlueprintResponse;
     case mockBlueprintIds['timezone']:
       return timezoneBlueprintResponse;
+    case mockBlueprintIds['locale']:
+      return localeBlueprintResponse;
     case mockBlueprintIds['firstBoot']:
       return firstBootBlueprintResponse;
     case mockBlueprintIds['details']: