From 4899553151ec8d420b63b97cbc8b48dc3525ef95 Mon Sep 17 00:00:00 2001 From: regexowl Date: Fri, 6 Dec 2024 11:24:15 +0100 Subject: [PATCH] test: Add Locale tests for keyboard drop down This adds tests checking functionality of keyboard drop down and blueprint request with locale. --- .../blueprints/blueprint.toml | 3 + .../steps/Locale/Locale.test.tsx | 89 ++++++++++++++++++- src/test/fixtures/blueprints.ts | 10 +++ src/test/fixtures/editMode.ts | 20 +++++ 4 files changed, 120 insertions(+), 2 deletions(-) create mode 100644 .local/share/cockpit/image-builder-frontend/blueprints/blueprint.toml diff --git a/.local/share/cockpit/image-builder-frontend/blueprints/blueprint.toml b/.local/share/cockpit/image-builder-frontend/blueprints/blueprint.toml new file mode 100644 index 00000000..b6ff501e --- /dev/null +++ b/.local/share/cockpit/image-builder-frontend/blueprints/blueprint.toml @@ -0,0 +1,3 @@ +name = "basic-example" +description = "A basic blueprint" +version = "0.0.1" diff --git a/src/test/Components/CreateImageWizard/steps/Locale/Locale.test.tsx b/src/test/Components/CreateImageWizard/steps/Locale/Locale.test.tsx index d4e6278b..a8e573f2 100644 --- a/src/test/Components/CreateImageWizard/steps/Locale/Locale.test.tsx +++ b/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' diff --git a/src/test/fixtures/blueprints.ts b/src/test/fixtures/blueprints.ts index c52b257c..3e85e038 100644 --- a/src/test/fixtures/blueprints.ts +++ b/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'], diff --git a/src/test/fixtures/editMode.ts b/src/test/fixtures/editMode.ts index 78a7d9e3..1773bef2 100644 --- a/src/test/fixtures/editMode.ts +++ b/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']: