diff --git a/src/Components/Blueprints/ImportBlueprintModal.test.tsx b/src/Components/Blueprints/ImportBlueprintModal.test.tsx index 8c1aaed5..413f88a5 100644 --- a/src/Components/Blueprints/ImportBlueprintModal.test.tsx +++ b/src/Components/Blueprints/ImportBlueprintModal.test.tsx @@ -182,13 +182,14 @@ const INVALID_IMAGE_TYPE_JSON = `{ }`; const uploadFile = async (filename: string, content: string): Promise => { + const user = userEvent.setup(); const fileInput: HTMLElement | null = // eslint-disable-next-line testing-library/no-node-access document.querySelector('input[type="file"]'); if (fileInput) { const file = new File([content], filename, { type: 'application/json' }); - await userEvent.upload(fileInput, file); + user.upload(fileInput, file); } }; @@ -203,11 +204,14 @@ describe('Import model', () => { const setUp = async () => { renderWithReduxRouter('', {}); - await user.click(await screen.findByTestId('import-blueprint-button')); + const importBlueprintBtn = await screen.findByTestId( + 'import-blueprint-button' + ); + await waitFor(() => user.click(importBlueprintBtn)); const reviewButton = await screen.findByRole('button', { name: /review and finish/i, }); - expect(reviewButton).toHaveClass('pf-m-disabled'); + await waitFor(() => expect(reviewButton).toHaveClass('pf-m-disabled')); }; test('should show alert on invalid blueprint', async () => { @@ -218,7 +222,7 @@ describe('Import model', () => { const helperText = await screen.findByText( /not compatible with the blueprints format\./i ); - expect(helperText).toBeInTheDocument(); + await waitFor(() => expect(helperText).toBeInTheDocument()); }); test('should show alert on invalid blueprint incorrect architecture', async () => { @@ -229,7 +233,7 @@ describe('Import model', () => { const helperText = await screen.findByText( /not compatible with the blueprints format\./i ); - expect(helperText).toBeInTheDocument(); + await waitFor(() => expect(helperText).toBeInTheDocument()); }); test('should show alert on invalid blueprint incorrect image type', async () => { @@ -240,7 +244,7 @@ describe('Import model', () => { const helperText = await screen.findByText( /not compatible with the blueprints format\./i ); - expect(helperText).toBeInTheDocument(); + await waitFor(() => expect(helperText).toBeInTheDocument()); }); test('should enable button on correct blueprint and go to wizard', async () => { @@ -248,10 +252,12 @@ describe('Import model', () => { await uploadFile(`blueprints.json`, BLUEPRINT_JSON); const reviewButton = screen.getByTestId('import-blueprint-finish'); await waitFor(() => expect(reviewButton).not.toHaveClass('pf-m-disabled')); - await user.click(reviewButton); + user.click(reviewButton); - expect( - await screen.findByText('Image output', { selector: 'h1' }) - ).toBeInTheDocument(); + await waitFor(async () => + expect( + await screen.findByText('Image output', { selector: 'h1' }) + ).toBeInTheDocument() + ); }); }); diff --git a/src/test/Components/Blueprints/Blueprints.test.tsx b/src/test/Components/Blueprints/Blueprints.test.tsx index 5cfec31c..d92c7a8f 100644 --- a/src/test/Components/Blueprints/Blueprints.test.tsx +++ b/src/test/Components/Blueprints/Blueprints.test.tsx @@ -34,8 +34,9 @@ vi.mock('@unleash/proxy-client-react', () => ({ })); const selectBlueprintById = async (bpId: string) => { + const user = userEvent.setup(); const blueprint = await screen.findByTestId(bpId); - await userEvent.click(blueprint); + await waitFor(() => user.click(blueprint)); return blueprint; }; @@ -71,9 +72,11 @@ describe('Blueprints', () => { }); expect(emptyStateAction).toBeInTheDocument(); - await user.click(emptyStateAction); - expect(router.state.location.pathname).toBe( - '/insights/image-builder/imagewizard' + user.click(emptyStateAction); + await waitFor(() => + expect(router.state.location.pathname).toBe( + '/insights/image-builder/imagewizard' + ) ); }); test('renders blueprint composes', async () => { @@ -113,15 +116,15 @@ describe('Blueprints', () => { }); expect(buildImageBtn).toBeEnabled(); const buildImageDropDown = screen.getByTestId('blueprint-build-image-menu'); - await user.click(buildImageDropDown); + user.click(buildImageDropDown); const awsCheckbox = await screen.findByRole('checkbox', { name: /amazon web services/i, }); expect(awsCheckbox).toBeChecked(); - await user.click(awsCheckbox); - expect(awsCheckbox).not.toBeChecked(); + user.click(awsCheckbox); + await waitFor(() => expect(awsCheckbox).not.toBeChecked()); const buildSelectedBtn = await screen.findByRole('button', { name: /Build selected/i, @@ -139,14 +142,14 @@ describe('Blueprints', () => { expect(buildImageBtn).toBeEnabled(); const buildImageDropDown = screen.getByTestId('blueprint-build-image-menu'); - await user.click(buildImageDropDown); + user.click(buildImageDropDown); const awsCheckbox = await screen.findByRole('checkbox', { name: /amazon web services/i, }); expect(awsCheckbox).toBeChecked(); - await user.click(awsCheckbox); - expect(awsCheckbox).not.toBeChecked(); + user.click(awsCheckbox); + await waitFor(() => expect(awsCheckbox).not.toBeChecked()); const buildSelectedBtn = await screen.findByRole('button', { name: /Build selected/i, }); @@ -207,7 +210,7 @@ describe('Blueprints', () => { const blueprintDetails = await screen.findByTestId( 'image-details-expandable' ); - await user.click(blueprintDetails); + user.click(blueprintDetails); await screen.findByText(editedBlueprintName); }); test('redirect to index page when blueprint is invalid', async () => { @@ -236,7 +239,7 @@ describe('Blueprints', () => { 'Search by name or description' ); searchInput.focus(); - await user.keyboard('Milk'); + user.keyboard('Milk'); // wait for debounce await waitFor( @@ -276,8 +279,8 @@ describe('Blueprints', () => { expect(button).toBeEnabled(); }); - await user.click(button); - await user.click(button); + user.click(button); + user.click(button); await waitFor(() => { expect(screen.getAllByRole('checkbox')).toHaveLength(8); @@ -300,12 +303,14 @@ describe('Blueprints', () => { within(screen.getByTestId('images-table')).getAllByRole('row') ).toHaveLength(4); - await user.click(composesVersionFilter); + user.click(composesVersionFilter); const option = await screen.findByRole('menuitem', { name: 'Newest' }); - await user.click(option); - expect( - within(screen.getByTestId('images-table')).getAllByRole('row') - ).toHaveLength(2); + user.click(option); + await waitFor(() => + expect( + within(screen.getByTestId('images-table')).getAllByRole('row') + ).toHaveLength(2) + ); }); }); }); diff --git a/src/test/Components/CreateImageWizardV2/CreateImageWizard.azure.test.tsx b/src/test/Components/CreateImageWizardV2/CreateImageWizard.azure.test.tsx index 52494804..0ee8582a 100644 --- a/src/test/Components/CreateImageWizardV2/CreateImageWizard.azure.test.tsx +++ b/src/test/Components/CreateImageWizardV2/CreateImageWizard.azure.test.tsx @@ -91,7 +91,8 @@ describe('Step Upload to Azure', () => { routes )); // select Azure as upload destination - await user.click(await screen.findByTestId('upload-azure')); + const uploadAzure = await screen.findByTestId('upload-azure'); + user.click(uploadAzure); await clickNext(); @@ -102,28 +103,27 @@ describe('Step Upload to Azure', () => { test('clicking Next loads Registration', async () => { await setUp(); - await user.click( - screen.getByText(/manually enter the account information\./i) + const manualOption = await screen.findByText( + /manually enter the account information\./i ); + await waitFor(() => user.click(manualOption)); // Randomly generated GUID - await user.type( - screen.getByRole('textbox', { - name: /azure tenant guid/i, - }), - 'b8f86d22-4371-46ce-95e7-65c415f3b1e2' + const tenantGuid = await screen.findByRole('textbox', { + name: /azure tenant guid/i, + }); + await waitFor(() => + user.type(tenantGuid, 'b8f86d22-4371-46ce-95e7-65c415f3b1e2') ); - await user.type( - screen.getByRole('textbox', { - name: /subscription id/i, - }), - '60631143-a7dc-4d15-988b-ba83f3c99711' - ); - await user.type( - screen.getByRole('textbox', { - name: /resource group/i, - }), - 'testResourceGroup' + const subscriptionId = await screen.findByRole('textbox', { + name: /subscription id/i, + }); + await waitFor(() => + user.type(subscriptionId, '60631143-a7dc-4d15-988b-ba83f3c99711') ); + const resourceGroup = await screen.findByRole('textbox', { + name: /resource group/i, + }); + await waitFor(() => user.type(resourceGroup, 'testResourceGroup')); await clickNext(); await screen.findByRole('textbox', { @@ -152,35 +152,44 @@ describe('Step Upload to Azure', () => { await setUp(); const nextButton = await getNextButton(); - await user.click( - screen.getByText(/manually enter the account information\./i) + const manualOption = await screen.findByText( + /manually enter the account information\./i ); + await waitFor(() => user.click(manualOption)); const tenantId = screen.getByRole('textbox', { name: /azure tenant guid/i, }); expect(tenantId).toHaveValue(''); expect(tenantId).toBeEnabled(); - await user.type(tenantId, 'c983c2cd-94d7-44e1-9c6e-9cfa3a40995f'); + await waitFor( + async () => + await user.type(tenantId, 'c983c2cd-94d7-44e1-9c6e-9cfa3a40995f') + ); const subscription = screen.getByRole('textbox', { name: /subscription id/i, }); expect(subscription).toHaveValue(''); expect(subscription).toBeEnabled(); - await user.type(subscription, 'f8f200aa-6234-4bfb-86c2-163d33dffc0c'); + await waitFor( + async () => + await user.type(subscription, 'f8f200aa-6234-4bfb-86c2-163d33dffc0c') + ); const resourceGroup = screen.getByRole('textbox', { name: /resource group/i, }); expect(resourceGroup).toHaveValue(''); expect(resourceGroup).toBeEnabled(); - await user.type(resourceGroup, 'testGroup'); + await waitFor(async () => await user.type(resourceGroup, 'testGroup')); expect(nextButton).not.toHaveClass('pf-m-disabled'); - await user.click( - screen.getByRole('radio', { - name: /use an account configured from sources\./i, - }) + await waitFor(async () => + user.click( + await screen.findByRole('radio', { + name: /use an account configured from sources\./i, + }) + ) ); await waitFor(() => expect(nextButton).toHaveClass('pf-m-disabled')); @@ -200,12 +209,14 @@ describe('Step Upload to Azure', () => { }) ).toHaveValue(''); - await user.click(sourceDropdown); + await waitFor(() => user.click(sourceDropdown)); - await user.click( - await screen.findByRole('option', { - name: /azureSource1/i, - }) + await waitFor(async () => + user.click( + await screen.findByRole('option', { + name: /azureSource1/i, + }) + ) ); // wait for fetching the upload info await waitFor(() => @@ -216,15 +227,19 @@ describe('Step Upload to Azure', () => { ).not.toHaveValue('') ); - await user.click( - await screen.findByRole('textbox', { - name: /select resource group/i, - }) + await waitFor(async () => + user.click( + await screen.findByRole('textbox', { + name: /select resource group/i, + }) + ) ); const groups = screen.getAllByLabelText(/^Resource group/); expect(groups).toHaveLength(2); - await user.click( - await screen.findByLabelText('Resource group myResourceGroup1') + await waitFor(async () => + user.click( + await screen.findByLabelText('Resource group myResourceGroup1') + ) ); expect(nextButton).not.toHaveClass('pf-m-disabled'); @@ -234,11 +249,13 @@ describe('Step Upload to Azure', () => { await setUp(); const sourceDropdown = await getSourceDropdown(); - await user.click(sourceDropdown); - await user.click( - await screen.findByRole('option', { - name: /azureSource1/i, - }) + await waitFor(() => user.click(sourceDropdown)); + await waitFor(async () => + user.click( + await screen.findByRole('option', { + name: /azureSource1/i, + }) + ) ); await waitFor(() => @@ -249,11 +266,13 @@ describe('Step Upload to Azure', () => { ).not.toHaveValue('') ); - await user.click(sourceDropdown); - await user.click( - await screen.findByRole('option', { - name: /azureSource2/i, - }) + await waitFor(() => user.click(sourceDropdown)); + await waitFor(async () => + user.click( + await screen.findByRole('option', { + name: /azureSource2/i, + }) + ) ); await waitFor(() => { expect( @@ -263,10 +282,12 @@ describe('Step Upload to Azure', () => { ).toHaveValue('73d5694c-7a28-417e-9fca-55840084f508'); }); - await user.click( - await screen.findByRole('textbox', { - name: /select resource group/i, - }) + await waitFor(async () => + user.click( + await screen.findByRole('textbox', { + name: /select resource group/i, + }) + ) ); const groups = await screen.findByLabelText(/^Resource group/); expect(groups).toBeInTheDocument(); diff --git a/src/test/Components/CreateImageWizardV2/CreateImageWizard.compliance.test.tsx b/src/test/Components/CreateImageWizardV2/CreateImageWizard.compliance.test.tsx index 268349ce..d85072f3 100644 --- a/src/test/Components/CreateImageWizardV2/CreateImageWizard.compliance.test.tsx +++ b/src/test/Components/CreateImageWizardV2/CreateImageWizard.compliance.test.tsx @@ -2,7 +2,7 @@ import React from 'react'; import '@testing-library/jest-dom'; -import { screen } from '@testing-library/react'; +import { screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import nodeFetch, { Request, Response } from 'node-fetch'; @@ -63,20 +63,26 @@ afterEach(() => { }); const selectRhel8 = async () => { - await userEvent.click( - screen.getAllByRole('button', { - name: /options menu/i, - })[0] + const user = userEvent.setup(); + await waitFor(async () => + user.click( + screen.getAllByRole('button', { + name: /options menu/i, + })[0] + ) ); const rhel8 = await screen.findByRole('option', { name: /red hat enterprise linux \(rhel\) 8/i, }); - await userEvent.click(rhel8); + await waitFor(async () => user.click(rhel8)); }; const clickFromImageOutputToOpenScap = async () => { + const user = userEvent.setup(); await clickNext(); - await userEvent.click(await screen.findByLabelText('Register later')); + await waitFor(async () => + user.click(await screen.findByLabelText('Register later')) + ); await clickNext(); // skip registration }; @@ -89,34 +95,37 @@ describe('Step Compliance', () => { await setup(); // select aws as upload destination - await user.click(await screen.findByTestId('upload-aws')); + const uploadAws = await screen.findByTestId('upload-aws'); + user.click(uploadAws); await clickNext(); // aws step - await user.click( - await screen.findByRole('radio', { - name: /manually enter an account id\./i, - }) - ); - await user.type( - await screen.findByRole('textbox', { - name: 'aws account id', - }), - '012345678901' - ); + const manualOption = await screen.findByRole('radio', { + name: /manually enter an account id\./i, + }); + await waitFor(() => user.click(manualOption)); + const awsAccountId = await screen.findByRole('textbox', { + name: 'aws account id', + }); + await waitFor(() => user.type(awsAccountId, '012345678901')); await clickNext(); // skip registration - await user.click(await screen.findByLabelText('Register later')); + const registerLater = await screen.findByLabelText('Register later'); + + user.click(registerLater); await clickNext(); // Now we should be in the Compliance step await screen.findByRole('heading', { name: /OpenSCAP/i }); - await user.click( - await screen.findByRole('textbox', { name: /select a profile/i }) - ); - await user.click(await screen.findByText(/none/i)); + const selectProfile = await screen.findByRole('textbox', { + name: /select a profile/i, + }); + + user.click(selectProfile); + const noneProfile = await screen.findByText(/none/i); + user.click(noneProfile); // check that the FSC does not contain a /tmp partition await clickNext(); @@ -144,42 +153,45 @@ describe('Step Compliance', () => { await setup(); // select aws as upload destination - await user.click(await screen.findByTestId('upload-aws')); + const uploadAws = await screen.findByTestId('upload-aws'); + + user.click(uploadAws); await clickNext(); // aws step - await user.click( - await screen.findByRole('radio', { - name: /manually enter an account id\./i, - }) - ); + const manualOption = await screen.findByRole('radio', { + name: /manually enter an account id\./i, + }); - await user.type( - await screen.findByRole('textbox', { - name: 'aws account id', - }), - '012345678901' - ); + await waitFor(() => user.click(manualOption)); + await waitFor(async () => + user.type( + await screen.findByRole('textbox', { + name: 'aws account id', + }), + '012345678901' + ) + ); await clickNext(); // skip registration - await user.click(await screen.findByLabelText('Register later')); + const registerLater = await screen.findByLabelText('Register later'); + + user.click(registerLater); await clickNext(); // Now we should be at the OpenSCAP step await screen.findByRole('heading', { name: /OpenSCAP/i }); - await user.click( - await screen.findByRole('textbox', { - name: /select a profile/i, - }) - ); + const selectProfile = await screen.findByRole('textbox', { + name: /select a profile/i, + }); + user.click(selectProfile); - await user.click( - await screen.findByText( - /cis red hat enterprise linux 8 benchmark for level 1 - workstation/i - ) + const cis1Profile = await screen.findByText( + /cis red hat enterprise linux 8 benchmark for level 1 - workstation/i ); + user.click(cis1Profile); await screen.findByText(/kernel arguments:/i); await screen.findByText(/audit_backlog_limit=8192 audit=1/i); await screen.findByText(/disabled services:/i); @@ -202,7 +214,8 @@ describe('Step Compliance', () => { await screen.findByRole('heading', { name: /Additional packages/i, }); - await user.click(await screen.findByText(/Selected/)); + const selected = await screen.findByText(/Selected/); + user.click(selected); await screen.findByText(/aide/i); await screen.findByText(/neovim/i); }); @@ -210,7 +223,8 @@ describe('Step Compliance', () => { test('OpenSCAP dropdown is disabled for WSL targets only', async () => { await setup(); await selectRhel8(); - await user.click(await screen.findByTestId('checkbox-wsl')); + const wslCheckbox = await screen.findByTestId('checkbox-wsl'); + user.click(wslCheckbox); await clickFromImageOutputToOpenScap(); await screen.findByText( /OpenSCAP profiles are not compatible with WSL images/i @@ -223,8 +237,14 @@ describe('Step Compliance', () => { test('Alert displayed and OpenSCAP dropdown enabled when targets include WSL', async () => { await setup(); await selectRhel8(); - await user.click(await screen.findByTestId('checkbox-image-installer')); - await user.click(await screen.findByTestId('checkbox-wsl')); + const imageInstallerCheckbox = await screen.findByTestId( + 'checkbox-image-installer' + ); + + user.click(imageInstallerCheckbox); + const wslCheckbox = await screen.findByTestId('checkbox-wsl'); + + user.click(wslCheckbox); await clickFromImageOutputToOpenScap(); await screen.findByText( /OpenSCAP profiles are not compatible with WSL images/i diff --git a/src/test/Components/CreateImageWizardV2/CreateImageWizard.content.test.tsx b/src/test/Components/CreateImageWizardV2/CreateImageWizard.content.test.tsx index ee7a3000..25526453 100644 --- a/src/test/Components/CreateImageWizardV2/CreateImageWizard.content.test.tsx +++ b/src/test/Components/CreateImageWizardV2/CreateImageWizard.content.test.tsx @@ -78,21 +78,23 @@ afterEach(() => { }); const typeIntoSearchBox = async (searchTerm: string) => { + const user = userEvent.setup(); const searchbox = await screen.findByRole('textbox', { name: /search packages/i, }); - await userEvent.click(searchbox); - await userEvent.type(searchbox, searchTerm); + await waitFor(() => user.click(searchbox)); + await waitFor(() => user.type(searchbox, searchTerm)); }; const clearSearchBox = async () => { + const user = userEvent.setup(); const searchbox = await screen.findByRole('textbox', { name: /search packages/i, }); - await userEvent.click(searchbox); - await userEvent.clear(searchbox); + await waitFor(() => user.click(searchbox)); + await waitFor(() => user.clear(searchbox)); }; const getAllCheckboxes = async () => { @@ -107,9 +109,9 @@ const getAllCheckboxes = async () => { }; const toggleSelected = async () => { - await userEvent.click( - await screen.findByRole('button', { name: /selected/i }) - ); + const user = userEvent.setup(); + const selected = await screen.findByRole('button', { name: /selected/i }); + await waitFor(async () => user.click(selected)); }; const checkRecommendationsEmptyState = async () => { @@ -141,20 +143,23 @@ describe('Step Packages', () => { )); // select aws as upload destination - await userEvent.click(await screen.findByTestId('upload-aws')); + const uploadAws = await screen.findByTestId('upload-aws'); + + user.click(uploadAws); await clickNext(); // aws step - await userEvent.click( - await screen.findByRole('radio', { - name: /manually enter an account id\./i, - }) - ); - await userEvent.type( - await screen.findByRole('textbox', { - name: 'aws account id', - }), - '012345678901' + const manualOption = await screen.findByRole('radio', { + name: /manually enter an account id\./i, + }); + await waitFor(async () => user.click(manualOption)); + await waitFor(async () => + user.type( + await screen.findByRole('textbox', { + name: 'aws account id', + }), + '012345678901' + ) ); await clickNext(); // skip registration @@ -162,9 +167,9 @@ describe('Step Packages', () => { name: 'Select activation key', }); - await userEvent.click( - await screen.findByTestId('registration-radio-later') - ); + const registerLater = await screen.findByTestId('registration-radio-later'); + user.click(registerLater); + await clickNext(); // skip OpenSCAP await clickNext(); @@ -267,7 +272,7 @@ describe('Step Packages', () => { const checkboxes = await getAllCheckboxes(); for (const checkbox in checkboxes) { - await userEvent.click(checkboxes[checkbox]); + user.click(checkboxes[checkbox]); } await toggleSelected(); @@ -302,8 +307,8 @@ describe('Step Packages', () => { let firstPkgCheckbox = (await getFirstPkgCheckbox()) as HTMLInputElement; expect(firstPkgCheckbox.checked).toEqual(false); - await userEvent.click(firstPkgCheckbox); - expect(firstPkgCheckbox.checked).toEqual(true); + user.click(firstPkgCheckbox); + await waitFor(() => expect(firstPkgCheckbox.checked).toEqual(true)); await clickNext(); await clickBack(); @@ -344,8 +349,8 @@ describe('Step Packages', () => { const checkboxes = await getAllCheckboxes(); - await userEvent.click(checkboxes[0]); - await userEvent.click(checkboxes[1]); + user.click(checkboxes[0]); + user.click(checkboxes[1]); await clearSearchBox(); await typeIntoSearchBox('mock'); @@ -360,8 +365,8 @@ describe('Step Packages', () => { } ); - await userEvent.click(checkboxes[0]); - await userEvent.click(checkboxes[1]); + user.click(checkboxes[0]); + user.click(checkboxes[1]); await toggleSelected(); @@ -386,7 +391,7 @@ describe('Step Packages', () => { const checkboxes = await getAllCheckboxes(); - await userEvent.click(checkboxes[0]); + user.click(checkboxes[0]); await screen.findByText('recommendedPackage1'); await screen.findByText('recommendedPackage2'); @@ -404,17 +409,16 @@ describe('Step Packages', () => { const checkboxes = await getAllCheckboxes(); - await userEvent.click(checkboxes[0]); + user.click(checkboxes[0]); const addRecButtons = await screen.findAllByTestId( 'add-recommendation-button' ); - await userEvent.click(addRecButtons[0]); + user.click(addRecButtons[0]); - await userEvent.click( - await screen.findByRole('button', { name: /Selected/ }) - ); + const selected = await screen.findByRole('button', { name: /Selected/ }); + user.click(selected); await within(pkgTable).findByText('recommendedPackage1'); }); @@ -430,20 +434,22 @@ describe('Step Custom repositories', () => { )); // select aws as upload destination - await user.click(await screen.findByTestId('upload-aws')); + const uploadAws = await screen.findByTestId('upload-aws'); + user.click(uploadAws); await clickNext(); // aws step - await user.click( - await screen.findByRole('radio', { - name: /manually enter an account id\./i, - }) - ); - await user.type( - await screen.findByRole('textbox', { - name: 'aws account id', - }), - '012345678901' + const manualOption = await screen.findByRole('radio', { + name: /manually enter an account id\./i, + }); + await waitFor(() => user.click(manualOption)); + await waitFor(async () => + user.type( + await screen.findByRole('textbox', { + name: 'aws account id', + }), + '012345678901' + ) ); await clickNext(); @@ -452,7 +458,9 @@ describe('Step Custom repositories', () => { name: 'Select activation key', }); - await user.click(await screen.findByLabelText('Register later')); + const registerLater = await screen.findByLabelText('Register later'); + + user.click(registerLater); await clickNext(); // skip OpenSCAP await clickNext(); @@ -472,8 +480,8 @@ describe('Step Custom repositories', () => { let firstRepoCheckbox = (await getFirstRepoCheckbox()) as HTMLInputElement; expect(firstRepoCheckbox.checked).toEqual(false); - await user.click(firstRepoCheckbox); - expect(firstRepoCheckbox.checked).toEqual(true); + user.click(firstRepoCheckbox); + await waitFor(() => expect(firstRepoCheckbox.checked).toEqual(true)); await clickNext(); await clickBack(); @@ -485,11 +493,11 @@ describe('Step Custom repositories', () => { test('correct number of repositories is fetched', async () => { await setUp(); - await user.click( - await screen.findByRole('button', { - name: /^select$/i, - }) - ); + const select = await screen.findByRole('button', { + name: /^select$/i, + }); + + user.click(select); await screen.findByText(/select page \(10 items\)/i); }); @@ -505,8 +513,8 @@ describe('Step Custom repositories', () => { (await getFirstRepoCheckbox()) as HTMLInputElement; expect(firstRepoCheckbox.checked).toEqual(false); - await user.click(firstRepoCheckbox); - expect(firstRepoCheckbox.checked).toEqual(true); + user.click(firstRepoCheckbox); + await waitFor(() => expect(firstRepoCheckbox.checked).toEqual(true)); const getSelectedButton = async () => await screen.findByRole('button', { @@ -514,7 +522,7 @@ describe('Step Custom repositories', () => { }); const selectedButton = await getSelectedButton(); - await user.click(selectedButton); + user.click(selectedButton); expect(firstRepoCheckbox.checked).toEqual(true); @@ -542,8 +550,8 @@ describe('Step Custom repositories', () => { expect(firstRepoCheckbox.checked).toEqual(false); expect(secondRepoCheckbox.checked).toEqual(false); - await user.click(firstRepoCheckbox); - expect(firstRepoCheckbox.checked).toEqual(true); + user.click(firstRepoCheckbox); + await waitFor(() => expect(firstRepoCheckbox.checked).toEqual(true)); expect(secondRepoCheckbox.checked).toEqual(false); const getAllButton = async () => @@ -552,7 +560,7 @@ describe('Step Custom repositories', () => { }); const allButton = await getAllButton(); - await user.click(allButton); + user.click(allButton); expect(firstRepoCheckbox.checked).toEqual(true); expect(secondRepoCheckbox.checked).toEqual(false); diff --git a/src/test/Components/CreateImageWizardV2/CreateImageWizard.test.tsx b/src/test/Components/CreateImageWizardV2/CreateImageWizard.test.tsx index c3e90be8..3dc4ee34 100644 --- a/src/test/Components/CreateImageWizardV2/CreateImageWizard.test.tsx +++ b/src/test/Components/CreateImageWizardV2/CreateImageWizard.test.tsx @@ -78,7 +78,7 @@ const switchToAWSManual = async () => { const manualRadio = await screen.findByRole('radio', { name: /manually enter an account id\./i, }); - await user.click(manualRadio); + await waitFor(() => user.click(manualRadio)); return manualRadio; }; @@ -92,8 +92,10 @@ const getSourceDropdown = async () => { }; const clickFromImageOutputToFsc = async () => { + const user = userEvent.setup(); await clickNext(); - await userEvent.click(await screen.findByText(/Register later/)); + const registerLater = await screen.findByText(/Register later/); + await waitFor(async () => user.click(registerLater)); await clickNext(); await clickNext(); // skip OSCAP }; @@ -136,7 +138,8 @@ describe('Step Image output', () => { )); // select aws as upload destination - await user.click(await screen.findByTestId('upload-aws')); + const uploadAws = await screen.findByTestId('upload-aws'); + user.click(uploadAws); await screen.findByRole('heading', { name: 'Image output' }); }; @@ -172,15 +175,15 @@ describe('Step Image output', () => { const awsTile = await screen.findByTestId('upload-aws'); // this has already been clicked once in the setup function - await user.click(awsTile); // deselect + user.click(awsTile); // deselect const googleTile = await screen.findByTestId('upload-google'); - await user.click(googleTile); // select - await user.click(googleTile); // deselect + user.click(googleTile); // select + user.click(googleTile); // deselect const azureTile = await screen.findByTestId('upload-azure'); - await user.click(azureTile); // select - await user.click(azureTile); // deselect + user.click(azureTile); // select + user.click(azureTile); // deselect await waitFor(() => expect(nextButton).toBeDisabled()); }); @@ -191,7 +194,7 @@ describe('Step Image output', () => { const releaseMenu = screen.getAllByRole('button', { name: /options menu/i, })[0]; - await user.click(releaseMenu); + user.click(releaseMenu); await screen.findByRole('option', { name: /Red Hat Enterprise Linux \(RHEL\) 8/, @@ -203,7 +206,7 @@ describe('Step Image output', () => { name: 'Show options for further development of RHEL', }); - await user.click(releaseMenu); + user.click(releaseMenu); }); test('expect all releases after expansion', async () => { @@ -212,12 +215,12 @@ describe('Step Image output', () => { const releaseMenu = screen.getAllByRole('button', { name: /options menu/i, })[0]; - await user.click(releaseMenu); + user.click(releaseMenu); const showOptionsButton = await screen.findByRole('button', { name: 'Show options for further development of RHEL', }); - await user.click(showOptionsButton); + user.click(showOptionsButton); await screen.findByRole('option', { name: /Red Hat Enterprise Linux \(RHEL\) 8/, @@ -231,36 +234,36 @@ describe('Step Image output', () => { expect(showOptionsButton).not.toBeInTheDocument(); - await user.click(releaseMenu); + user.click(releaseMenu); }); test('release lifecycle chart appears only when RHEL 8 is chosen', async () => { await setUp(); - const releaseMenu = screen.getAllByRole('button', { + const releaseMenu = await screen.findAllByRole('button', { name: /options menu/i, - })[0]; - await user.click(releaseMenu); + }); + user.click(releaseMenu[0]); - await user.click( - await screen.findByRole('option', { - name: /Red Hat Enterprise Linux \(RHEL\) 9/, - }) + const rhel8Option = await screen.findByRole('option', { + name: /Red Hat Enterprise Linux \(RHEL\) 8/, + }); + + user.click(rhel8Option); + await screen.findByTestId('release-lifecycle-chart'); + + user.click(releaseMenu[0]); + + const rhel9Option = await screen.findByRole('option', { + name: /Red Hat Enterprise Linux \(RHEL\) 9/, + }); + + user.click(rhel9Option); + await waitFor(() => + expect( + screen.queryByTestId('release-lifecycle-chart') + ).not.toBeInTheDocument() ); - expect( - screen.queryByTestId('release-lifecycle-chart') - ).not.toBeInTheDocument(); - - await user.click(releaseMenu); - - await user.click( - await screen.findByRole('option', { - name: /Red Hat Enterprise Linux \(RHEL\) 8/, - }) - ); - expect( - await screen.findByTestId('release-lifecycle-chart') - ).toBeInTheDocument(); }); test('CentOS acknowledgement appears', async () => { @@ -269,17 +272,17 @@ describe('Step Image output', () => { const releaseMenu = screen.getAllByRole('button', { name: /options menu/i, })[0]; - await user.click(releaseMenu); + user.click(releaseMenu); const showOptionsButton = await screen.findByRole('button', { name: 'Show options for further development of RHEL', }); - await user.click(showOptionsButton); + user.click(showOptionsButton); const centOSButton = await screen.findByRole('option', { name: 'CentOS Stream 9', }); - await user.click(centOSButton); + user.click(centOSButton); await screen.findByText( 'CentOS Stream builds are intended for the development of future versions of RHEL and are not supported for production workloads or other use cases.' @@ -297,9 +300,8 @@ describe('Step Upload to AWS', () => { )); // select aws as upload destination - await waitFor( - async () => await user.click(await screen.findByTestId('upload-aws')) - ); + const uploadAws = await screen.findByTestId('upload-aws'); + user.click(uploadAws); await clickNext(); @@ -312,12 +314,10 @@ describe('Step Upload to AWS', () => { await setUp(); await switchToAWSManual(); - await user.type( - await screen.findByRole('textbox', { - name: 'aws account id', - }), - '012345678901' - ); + const awsAccountId = await screen.findByRole('textbox', { + name: 'aws account id', + }); + await waitFor(async () => user.type(awsAccountId, '012345678901')); await clickNext(); await screen.findByRole('textbox', { @@ -361,11 +361,10 @@ describe('Step Upload to AWS', () => { expect(nextButton).toHaveClass('pf-m-disabled'); - await user.click( - await screen.findByRole('radio', { - name: /manually enter an account id\./i, - }) - ); + const manualOption = await screen.findByRole('radio', { + name: /manually enter an account id\./i, + }); + await waitFor(async () => user.click(manualOption)); expect(nextButton).toHaveClass('pf-m-disabled'); @@ -374,25 +373,25 @@ describe('Step Upload to AWS', () => { }); expect(awsAccId).toHaveValue(''); expect(awsAccId).toBeEnabled(); - await user.type(awsAccId, '012345678901'); + await waitFor(() => user.type(awsAccId, '012345678901')); expect(nextButton).not.toHaveClass('pf-m-disabled'); - await user.click( - await screen.findByRole('radio', { - name: /use an account configured from sources\./i, - }) - ); + const sourceRadio = await screen.findByRole('radio', { + name: /use an account configured from sources\./i, + }); + + user.click(sourceRadio); await waitFor(() => expect(nextButton).toHaveClass('pf-m-disabled')); const sourceDropdown = await getSourceDropdown(); - await user.click(sourceDropdown); + user.click(sourceDropdown); const source = await screen.findByRole('option', { name: /my_source/i, }); - await user.click(source); + user.click(source); await waitFor(() => expect(nextButton).not.toHaveClass('pf-m-disabled')); }); @@ -401,12 +400,12 @@ describe('Step Upload to AWS', () => { await setUp(); const sourceDropdown = await getSourceDropdown(); - await user.click(sourceDropdown); + user.click(sourceDropdown); const source = await screen.findByRole('option', { name: /my_source/i, }); - await user.click(source); + user.click(source); await clickNext(); @@ -416,7 +415,7 @@ describe('Step Upload to AWS', () => { }); const registerLaterRadio = await screen.findByLabelText('Register later'); - await user.click(registerLaterRadio); + user.click(registerLaterRadio); // click through to review step await clickNext(); @@ -433,9 +432,11 @@ describe('Step Upload to AWS', () => { // to a 'imageBuilder.saveAndBuildModalSeen' variable in localStorage await openAndDismissSaveAndBuildModal(); - await user.click( - await screen.findByRole('button', { name: /Create blueprint/ }) - ); + const createBlueprintBtn = await screen.findByRole('button', { + name: /Create blueprint/, + }); + + user.click(createBlueprintBtn); // returns back to the landing page await waitFor(() => @@ -455,9 +456,9 @@ describe('Step Upload to Google', () => { )); // select gcp as upload destination - await waitFor( - async () => await user.click(await screen.findByTestId('upload-google')) - ); + const uploadGcp = await screen.findByTestId('upload-google'); + + user.click(uploadGcp); await clickNext(); @@ -472,11 +473,11 @@ describe('Step Upload to Google', () => { const shareRadioButton = await screen.findByText( /share image with a google account/i ); - await user.click(shareRadioButton); + user.click(shareRadioButton); const googleEmailInput = await screen.findByTestId('principal'); - await user.type(googleEmailInput, 'test@test.com'); + await waitFor(() => user.type(googleEmailInput, 'test@test.com')); await clickNext(); await screen.findByRole('textbox', { @@ -513,10 +514,14 @@ describe('Step Upload to Google', () => { test('the google email field must be a valid email', async () => { await setUp(); - await user.type(await screen.findByTestId('principal'), 'a'); + await waitFor(async () => + user.type(await screen.findByTestId('principal'), 'a') + ); expect(await getNextButton()).toHaveClass('pf-m-disabled'); expect(await getNextButton()).toBeDisabled(); - await user.type(await screen.findByTestId('principal'), 'test@test.com'); + await waitFor(async () => + user.type(await screen.findByTestId('principal'), 'test@test.com') + ); expect(await getNextButton()).not.toHaveClass('pf-m-disabled'); expect(await getNextButton()).toBeEnabled(); }); @@ -532,21 +537,21 @@ describe('Step Registration', () => { )); // select aws as upload destination - await waitFor( - async () => await user.click(await screen.findByTestId('upload-aws')) - ); + const uploadAws = await screen.findByTestId('upload-aws'); + user.click(uploadAws); await clickNext(); - await user.click( - await screen.findByRole('radio', { - name: /manually enter an account id\./i, - }) - ); - await user.type( - await screen.findByRole('textbox', { - name: 'aws account id', - }), - '012345678901' + const manualOption = await screen.findByRole('radio', { + name: /manually enter an account id\./i, + }); + await waitFor(async () => user.click(manualOption)); + await waitFor(async () => + user.type( + await screen.findByRole('textbox', { + name: 'aws account id', + }), + '012345678901' + ) ); await clickNext(); @@ -561,7 +566,7 @@ describe('Step Registration', () => { const registerLaterRadio = await screen.findByTestId( 'registration-radio-later' ); - await user.click(registerLaterRadio); + user.click(registerLaterRadio); await clickNext(); await clickNext(); @@ -576,11 +581,10 @@ describe('Step Registration', () => { await clickBack(); - await user.click( - await screen.findByRole('radio', { - name: /manually enter an account id\./i, - }) - ); + const manualOption = await screen.findByRole('radio', { + name: /manually enter an account id\./i, + }); + await waitFor(async () => user.click(manualOption)); await screen.findByText('AWS account ID'); }); @@ -600,7 +604,7 @@ describe('Step Registration', () => { const activationKeyDropdown = await screen.findByRole('textbox', { name: 'Select activation key', }); - await user.click(activationKeyDropdown); + user.click(activationKeyDropdown); await screen.findByText('No activation keys found'); }); @@ -610,11 +614,11 @@ describe('Step Registration', () => { const activationKeyDropdown = await screen.findByRole('textbox', { name: 'Select activation key', }); - await user.click(activationKeyDropdown); + user.click(activationKeyDropdown); const activationKey = await screen.findByRole('option', { name: 'name0', }); - await user.click(activationKey); + user.click(activationKey); await screen.findByDisplayValue('name0'); await clickNext(); @@ -640,10 +644,13 @@ describe('Step Registration', () => { test('should allow registering without rhc', async () => { await setUp(); - await user.click( - await screen.findByTestId('registration-additional-options') + const showOptions = await screen.findByTestId( + 'registration-additional-options' ); - await user.click(await screen.findByTestId('registration-checkbox-rhc')); + + user.click(showOptions); + const rhcCheckbox = await screen.findByTestId('registration-checkbox-rhc'); + await waitFor(async () => user.click(rhcCheckbox)); // going back and forward when rhc isn't selected should keep additional options shown await clickBack(); @@ -657,11 +664,11 @@ describe('Step Registration', () => { const activationKeyDropdown = await screen.findByRole('textbox', { name: 'Select activation key', }); - await user.click(activationKeyDropdown); + user.click(activationKeyDropdown); const activationKey = await screen.findByRole('option', { name: 'name0', }); - await user.click(activationKey); + user.click(activationKey); await screen.findByDisplayValue('name0'); await clickNext(); @@ -688,13 +695,17 @@ describe('Step Registration', () => { test('should allow registering without insights or rhc', async () => { await setUp(); - await user.click( - await screen.findByTestId('registration-additional-options') + const showOptions = await screen.findByTestId( + 'registration-additional-options' ); - await user.click( - await screen.findByTestId('registration-checkbox-insights') + + user.click(showOptions); + const insightsCheckbox = await screen.findByTestId( + 'registration-checkbox-insights' ); + user.click(insightsCheckbox); + // going back and forward when neither rhc or insights is selected should keep additional options shown await clickBack(); await screen.findByRole('textbox', { @@ -707,11 +718,11 @@ describe('Step Registration', () => { const activationKeyDropdown = await screen.findByRole('textbox', { name: 'Select activation key', }); - await user.click(activationKeyDropdown); + user.click(activationKeyDropdown); const activationKey = await screen.findByRole('option', { name: 'name0', }); - await user.click(activationKey); + user.click(activationKey); await screen.findByDisplayValue('name0'); await clickNext(); @@ -741,7 +752,8 @@ describe('Step Registration', () => { ]); // click the later radio button which should remove any input fields - await user.click(await screen.findByTestId('registration-radio-later')); + const manualOption = await screen.findByTestId('registration-radio-later'); + await waitFor(async () => user.click(manualOption)); await removeKeyInformation; @@ -760,21 +772,31 @@ describe('Step Registration', () => { test('registering with rhc implies registering with insights', async () => { await setUp(); - await user.click( - await screen.findByTestId('registration-additional-options') + const showOptions = await screen.findByTestId( + 'registration-additional-options' ); - await user.click( - await screen.findByTestId('registration-checkbox-insights') - ); - expect( - await screen.findByTestId('registration-checkbox-rhc') - ).not.toBeChecked(); + user.click(showOptions); - await user.click(await screen.findByTestId('registration-checkbox-rhc')); - expect( - await screen.findByTestId('registration-checkbox-insights') - ).toBeChecked(); + const insightsCheckbox = await screen.findByTestId( + 'registration-checkbox-insights' + ); + + user.click(insightsCheckbox); + await waitFor(async () => + expect( + await screen.findByTestId('registration-checkbox-rhc') + ).not.toBeChecked() + ); + + const rhcCheckbox = await screen.findByTestId('registration-checkbox-rhc'); + user.click(rhcCheckbox); + + await waitFor(async () => + expect( + await screen.findByTestId('registration-checkbox-insights') + ).toBeChecked() + ); }); }); @@ -787,17 +809,18 @@ describe('Step File system configuration', () => { routes )); // select aws as upload destination - await waitFor( - async () => await user.click(await screen.findByTestId('upload-aws')) - ); + const uploadAws = await screen.findByTestId('upload-aws'); + user.click(uploadAws); await clickNext(); // aws step await switchToAWSManual(); - await user.type( - screen.getByRole('textbox', { - name: /aws account id/i, - }), - '012345678901' + await waitFor(() => + user.type( + screen.getByRole('textbox', { + name: /aws account id/i, + }), + '012345678901' + ) ); await clickNext(); // skip registration @@ -807,7 +830,7 @@ describe('Step File system configuration', () => { const registerLaterRadio = await screen.findByTestId( 'registration-radio-later' ); - await user.click(registerLaterRadio); + user.click(registerLaterRadio); await clickNext(); await clickNext(); }; @@ -816,11 +839,11 @@ describe('Step File system configuration', () => { const manuallyConfigurePartitions = await screen.findByText( /manually configure partitions/i ); - await user.click(manuallyConfigurePartitions); + user.click(manuallyConfigurePartitions); const addPartition = await screen.findByTestId('file-system-add-partition'); // Create duplicate partitions - await user.click(addPartition); - await user.click(addPartition); + user.click(addPartition); + user.click(addPartition); // Clicking next causes errors to appear await clickNext(); expect(await getNextButton()).toBeDisabled(); @@ -834,11 +857,11 @@ describe('Step File system configuration', () => { const mountPointOptions = within(rows[2]).getAllByRole('button', { name: 'Options menu', })[0]; - await user.click(mountPointOptions); + user.click(mountPointOptions); const varButton = await within(rows[2]).findByRole('option', { name: '/var', }); - await user.click(varButton); + user.click(varButton); await waitFor(() => expect(mountPointAlerts[0]).not.toBeInTheDocument()); await waitFor(() => expect(mountPointAlerts[1]).not.toBeInTheDocument()); expect(await getNextButton()).toBeEnabled(); @@ -850,7 +873,11 @@ describe('Step File system configuration', () => { {}, routes )); - await user.click(await screen.findByTestId('checkbox-image-installer')); + const imageInstallerCheckbox = await screen.findByTestId( + 'checkbox-image-installer' + ); + + user.click(imageInstallerCheckbox); await clickFromImageOutputToFsc(); expect( screen.queryByText(/manually configure partitions/i) @@ -863,10 +890,22 @@ describe('Step File system configuration', () => { {}, routes )); - await user.click(await screen.findByTestId('checkbox-image-installer')); - await user.click(await screen.findByTestId('checkbox-guest-image')); + const imageInstallerCheckbox = await screen.findByTestId( + 'checkbox-image-installer' + ); + + user.click(imageInstallerCheckbox); + const guestImageCheckBox = await screen.findByTestId( + 'checkbox-guest-image' + ); + + user.click(guestImageCheckBox); await clickFromImageOutputToFsc(); - await user.click(await screen.findByText(/manually configure partitions/i)); + const manualOption = await screen.findByText( + /manually configure partitions/i + ); + + user.click(manualOption); await screen.findByText('Configure partitions'); }); }); @@ -881,19 +920,17 @@ describe('Step Details', () => { )); // select aws as upload destination - await waitFor( - async () => await user.click(await screen.findByTestId('upload-aws')) - ); + const uploadAws = await screen.findByTestId('upload-aws'); + user.click(uploadAws); await clickNext(); // aws step await switchToAWSManual(); - await user.type( - await screen.findByRole('textbox', { - name: 'aws account id', - }), - '012345678901' - ); + const awsAccountId = await screen.findByRole('textbox', { + name: 'aws account id', + }); + + await waitFor(() => user.type(awsAccountId, '012345678901')); await clickNext(); // skip registration @@ -902,7 +939,7 @@ describe('Step Details', () => { }); const registerLaterRadio = screen.getByTestId('registration-radio-later'); - await user.click(registerLaterRadio); + user.click(registerLaterRadio); await clickNext(); // skip oscap await clickNext(); @@ -922,7 +959,6 @@ describe('Step Details', () => { await setUp(); // Enter image name - const invalidName = 'a'.repeat(101); await enterBlueprintName(invalidName); expect(await getNextButton()).toHaveClass('pf-m-disabled'); @@ -930,9 +966,10 @@ describe('Step Details', () => { const nameInput = await screen.findByRole('textbox', { name: /blueprint name/i, }); - await user.clear(nameInput); + await waitFor(() => user.clear(nameInput)); await enterBlueprintName(); + expect(await getNextButton()).not.toHaveClass('pf-m-disabled'); expect(await getNextButton()).toBeEnabled(); @@ -942,12 +979,12 @@ describe('Step Details', () => { }); const invalidDescription = 'a'.repeat(251); - await user.type(descriptionInput, invalidDescription); + await waitFor(() => user.type(descriptionInput, invalidDescription)); expect(await getNextButton()).toHaveClass('pf-m-disabled'); expect(await getNextButton()).toBeDisabled(); - await user.clear(descriptionInput); - await user.type(descriptionInput, 'valid-description'); + await waitFor(() => user.clear(descriptionInput)); + await waitFor(() => user.type(descriptionInput, 'valid-description')); expect(await getNextButton()).not.toHaveClass('pf-m-disabled'); expect(await getNextButton()).toBeEnabled(); @@ -971,11 +1008,13 @@ describe('Step Review', () => { // aws step await switchToAWSManual(); - await user.type( - await screen.findByRole('textbox', { - name: 'aws account id', - }), - '012345678901' + await waitFor(async () => + user.type( + await screen.findByRole('textbox', { + name: 'aws account id', + }), + '012345678901' + ) ); await clickNext(); await screen.findByRole('textbox', { @@ -986,7 +1025,7 @@ describe('Step Review', () => { const registerLaterRadio = await screen.findByTestId( 'registration-radio-later' ); - await user.click(registerLaterRadio); + await waitFor(() => user.click(registerLaterRadio)); await clickNext(); // skip OpenScap @@ -1016,16 +1055,16 @@ describe('Step Review', () => { name: /options menu/i, })[0]; - await user.click(releaseMenu); + await waitFor(() => user.click(releaseMenu)); const showOptionsButton = await screen.findByRole('button', { name: 'Show options for further development of RHEL', }); - await user.click(showOptionsButton); + await waitFor(() => user.click(showOptionsButton)); const centos = await screen.findByRole('option', { name: 'CentOS Stream 9', }); - await user.click(centos); + await waitFor(() => user.click(centos)); // select aws as upload destination await waitFor( async () => await user.click(await screen.findByTestId('upload-aws')) @@ -1034,11 +1073,13 @@ describe('Step Review', () => { // aws step await switchToAWSManual(); - await user.type( - await screen.findByRole('textbox', { - name: 'aws account id', - }), - '012345678901' + await waitFor(async () => + user.type( + await screen.findByRole('textbox', { + name: 'aws account id', + }), + '012345678901' + ) ); await clickNext(); await screen.findByRole('textbox', { @@ -1048,7 +1089,7 @@ describe('Step Review', () => { const registerLaterRadio = await screen.findByTestId( 'registration-radio-later' ); - await user.click(registerLaterRadio); + await waitFor(() => user.click(registerLaterRadio)); await clickNext(); // skip Oscap @@ -1140,12 +1181,18 @@ describe('Keyboard accessibility', () => { await waitFor( async () => await user.click(await screen.findByTestId('upload-aws')) ); - await user.click(await screen.findByTestId('upload-google')); - await user.click(await screen.findByTestId('upload-azure')); - await user.click( - await screen.findByRole('checkbox', { - name: /virtualization guest image checkbox/i, - }) + await waitFor(async () => + user.click(await screen.findByTestId('upload-google')) + ); + await waitFor(async () => + user.click(await screen.findByTestId('upload-azure')) + ); + await waitFor(async () => + user.click( + await screen.findByRole('checkbox', { + name: /virtualization guest image checkbox/i, + }) + ) ); }; @@ -1163,11 +1210,11 @@ describe('Keyboard accessibility', () => { }) ).toHaveFocus(); const awsSourceDropdown = await getSourceDropdown(); - await user.click(awsSourceDropdown); + await waitFor(() => user.click(awsSourceDropdown)); const awsSource = await screen.findByRole('option', { name: /my_source/i, }); - await user.click(awsSource); + await waitFor(() => user.click(awsSource)); await clickNext(); @@ -1177,9 +1224,11 @@ describe('Keyboard accessibility', () => { name: /share image with a google account/i, }) ).toHaveFocus(); - await user.type( - await screen.findByRole('textbox', { name: /google principal/i }), - 'test@test.com' + await waitFor(async () => + user.type( + await screen.findByRole('textbox', { name: /google principal/i }), + 'test@test.com' + ) ); await clickNext(); @@ -1190,18 +1239,20 @@ describe('Keyboard accessibility', () => { }) ).toHaveFocus(); const azureSourceDropdown = await getSourceDropdown(); - await user.click(azureSourceDropdown); + await waitFor(() => user.click(azureSourceDropdown)); const azureSource = await screen.findByRole('option', { name: /azureSource1/i, }); - await user.click(azureSource); + await waitFor(() => user.click(azureSource)); const resourceGroupDropdown = await screen.findByRole('textbox', { name: /select resource group/i, }); - await user.click(resourceGroupDropdown); - await user.click( - await screen.findByLabelText('Resource group myResourceGroup1') + await waitFor(() => user.click(resourceGroupDropdown)); + await waitFor(async () => + user.click( + await screen.findByLabelText('Resource group myResourceGroup1') + ) ); await clickNext(); @@ -1218,7 +1269,7 @@ describe('Keyboard accessibility', () => { const registerLaterRadio = await screen.findByTestId( 'registration-radio-later' ); - await user.click(registerLaterRadio); + await waitFor(() => user.click(registerLaterRadio)); await clickNext(); // TODO: Focus on textbox on OpenSCAP step @@ -1242,7 +1293,7 @@ describe('Keyboard accessibility', () => { await waitFor( async () => await user.click(await screen.findByTestId('upload-aws')) ); - await user.keyboard('{enter}'); + await waitFor(() => user.keyboard('{enter}')); await screen.findByRole('heading', { name: /image output/i, }); diff --git a/src/test/Components/CreateImageWizardV2/steps/Details/Details.test.tsx b/src/test/Components/CreateImageWizardV2/steps/Details/Details.test.tsx index ca6b7164..8fe13689 100644 --- a/src/test/Components/CreateImageWizardV2/steps/Details/Details.test.tsx +++ b/src/test/Components/CreateImageWizardV2/steps/Details/Details.test.tsx @@ -57,10 +57,13 @@ const goToDetailsStep = async () => { }; const enterBlueprintDescription = async () => { + const user = userEvent.setup(); const blueprintDescription = await screen.findByRole('textbox', { name: /blueprint description/i, }); - await userEvent.type(blueprintDescription, 'Now with extra carmine!'); + await waitFor(() => + user.type(blueprintDescription, 'Now with extra carmine!') + ); }; const goToReviewStep = async () => { @@ -77,7 +80,7 @@ describe('validates name', () => { const nextButton = await getNextButton(); expect(nextButton).toBeDisabled(); await enterBlueprintName(' '); - expect(nextButton).toBeDisabled(); + await waitFor(() => expect(nextButton).toBeDisabled()); }); test('with valid name', async () => { @@ -86,9 +89,8 @@ describe('validates name', () => { await clickRegisterLater(); await goToDetailsStep(); await enterBlueprintName('šŸ¤£Red VelvetšŸ¤£'); - const nextButton = await getNextButton(); - expect(nextButton).toBeEnabled(); + await waitFor(() => expect(nextButton).toBeEnabled()); }); test('with non-unique name', async () => { @@ -99,7 +101,7 @@ describe('validates name', () => { await enterBlueprintName('Lemon Pie'); const nextButton = await getNextButton(); - expect(nextButton).toBeDisabled(); + await waitFor(() => expect(nextButton).toBeDisabled()); }); }); @@ -118,7 +120,7 @@ describe('registration request generated correctly', () => { const expectedRequest = { ...blueprintRequest }; - expect(receivedRequest).toEqual(expectedRequest); + await waitFor(() => expect(receivedRequest).toEqual(expectedRequest)); }); test('with description', async () => { @@ -152,6 +154,6 @@ describe('Details edit mode', () => { `${EDIT_BLUEPRINT}/${id}` ); const expectedRequest = detailsCreateBlueprintRequest; - expect(receivedRequest).toEqual(expectedRequest); + await waitFor(() => expect(receivedRequest).toEqual(expectedRequest)); }); }); diff --git a/src/test/Components/CreateImageWizardV2/steps/FileSystemConfiguration/FileSystemConfiguration.test.tsx b/src/test/Components/CreateImageWizardV2/steps/FileSystemConfiguration/FileSystemConfiguration.test.tsx index 2ecd90b5..ff4f119c 100644 --- a/src/test/Components/CreateImageWizardV2/steps/FileSystemConfiguration/FileSystemConfiguration.test.tsx +++ b/src/test/Components/CreateImageWizardV2/steps/FileSystemConfiguration/FileSystemConfiguration.test.tsx @@ -50,10 +50,11 @@ vi.mock('@unleash/proxy-client-react', () => ({ })); const goToFileSystemConfigurationStep = async () => { + const user = userEvent.setup(); const guestImageCheckBox = await screen.findByRole('checkbox', { name: /virtualization guest image checkbox/i, }); - await userEvent.click(guestImageCheckBox); + await waitFor(() => user.click(guestImageCheckBox)); await clickNext(); // Registration await clickRegisterLater(); await clickNext(); // OpenSCAP @@ -61,21 +62,24 @@ const goToFileSystemConfigurationStep = async () => { }; const clickManuallyConfigurePartitions = async () => { + const user = userEvent.setup(); const button = await screen.findByText(/manually configure partitions/i); - await userEvent.click(button); + await waitFor(() => user.click(button)); }; const addPartition = async () => { + const user = userEvent.setup(); const button = await screen.findByRole('button', { name: /add partition/i }); - await userEvent.click(button); + await waitFor(() => user.click(button)); }; const customizePartition = async () => { + const user = userEvent.setup(); const row = await getRow(2); const minSize = await within(row).findByRole('textbox', { name: /mountpoint suffix/i, }); - await userEvent.type(minSize, 'cakerecipes'); + await waitFor(() => user.type(minSize, 'cakerecipes')); }; const getRow = async (row: number) => { @@ -85,31 +89,34 @@ const getRow = async (row: number) => { }; const changePartitionSize = async () => { + const user = userEvent.setup(); const row = await getRow(1); const minSize = await within(row).findByRole('textbox', { name: /minimum partition size/i, }); - await userEvent.type(minSize, '{backspace}5'); + await waitFor(() => user.type(minSize, '{backspace}5')); }; const changePartitionUnitsToKiB = async () => { + const user = userEvent.setup(); const row = await getRow(1); const units = await within(row).findAllByRole('button', { name: /options menu/i, }); - await userEvent.click(units[1]); + await waitFor(() => user.click(units[1])); const mibibytes = await screen.findByText('KiB'); - await userEvent.click(mibibytes); + await waitFor(() => user.click(mibibytes)); }; const changePartitionUnitsToMiB = async () => { + const user = userEvent.setup(); const row = await getRow(1); const units = await within(row).findAllByRole('button', { name: /options menu/i, }); - await userEvent.click(units[1]); + await waitFor(() => user.click(units[1])); const mibibytes = await screen.findByText('MiB'); - await userEvent.click(mibibytes); + await waitFor(() => user.click(mibibytes)); }; const goToReviewStep = async () => { diff --git a/src/test/Components/CreateImageWizardV2/steps/FirstBoot/Firstboot.test.tsx b/src/test/Components/CreateImageWizardV2/steps/FirstBoot/Firstboot.test.tsx index 9512d403..b8bc431a 100644 --- a/src/test/Components/CreateImageWizardV2/steps/FirstBoot/Firstboot.test.tsx +++ b/src/test/Components/CreateImageWizardV2/steps/FirstBoot/Firstboot.test.tsx @@ -55,10 +55,11 @@ vi.mock('@unleash/proxy-client-react', () => ({ })); const goToFirstBootStep = async (): Promise => { + const user = userEvent.setup(); const guestImageCheckBox = await screen.findByRole('checkbox', { name: /virtualization guest image checkbox/i, }); - await userEvent.click(guestImageCheckBox); + await waitFor(() => user.click(guestImageCheckBox)); await clickNext(); await clickNext(); // Registration await clickRegisterLater(); @@ -71,20 +72,22 @@ const goToFirstBootStep = async (): Promise => { }; const openCodeEditor = async (): Promise => { + const user = userEvent.setup(); const startBtn = await screen.findByRole('button', { name: /Start from scratch/i, }); - await userEvent.click(startBtn); + await waitFor(() => user.click(startBtn)); }; const uploadFile = async (): Promise => { + const user = userEvent.setup(); const fileInput: HTMLElement | null = // eslint-disable-next-line testing-library/no-node-access document.querySelector('input[type="file"]'); if (fileInput) { const file = new File([SCRIPT], 'script.sh', { type: 'text/x-sh' }); - await userEvent.upload(fileInput, file); + await waitFor(() => user.upload(fileInput, file)); } }; @@ -98,7 +101,7 @@ describe('First Boot step', () => { test('should render First Boot step', async () => { await renderCreateMode(); await goToFirstBootStep(); - expect(screen.getByText('First boot configuration')).toBeInTheDocument(); + await screen.findByText('First boot configuration'); }); describe('validate first boot request ', () => { test('should validate first boot request', async () => { diff --git a/src/test/Components/CreateImageWizardV2/steps/ImageOutput/TargetEnvironment.test.tsx b/src/test/Components/CreateImageWizardV2/steps/ImageOutput/TargetEnvironment.test.tsx index 52a35ef6..9a321846 100644 --- a/src/test/Components/CreateImageWizardV2/steps/ImageOutput/TargetEnvironment.test.tsx +++ b/src/test/Components/CreateImageWizardV2/steps/ImageOutput/TargetEnvironment.test.tsx @@ -90,65 +90,73 @@ afterEach(() => { }); const openReleaseMenu = async () => { + const user = userEvent.setup(); const releaseMenu = screen.getAllByRole('button', { name: /options menu/i, })[0]; - await userEvent.click(releaseMenu); + await waitFor(() => user.click(releaseMenu)); }; const openArchitectureMenu = async () => { + const user = userEvent.setup(); const releaseMenu = screen.getAllByRole('button', { name: /options menu/i, })[1]; - await userEvent.click(releaseMenu); + await waitFor(() => user.click(releaseMenu)); }; const clickShowOptions = async () => { + const user = userEvent.setup(); const showOptions = await screen.findByRole('button', { name: /show options for further development of rhel/i, }); - await userEvent.click(showOptions); + await waitFor(() => user.click(showOptions)); }; const selectRhel8 = async () => { + const user = userEvent.setup(); await openReleaseMenu(); const rhel8 = await screen.findByRole('option', { name: /red hat enterprise linux \(rhel\) 8 full support ends: may 2024 \| maintenance support ends: may 2029/i, }); - await userEvent.click(rhel8); + await waitFor(() => user.click(rhel8)); }; const selectRhel9 = async () => { + const user = userEvent.setup(); await openReleaseMenu(); const rhel9 = await screen.findByRole('option', { name: /red hat enterprise linux \(rhel\) 9 full support ends: may 2027 \| maintenance support ends: may 2032/i, }); - await userEvent.click(rhel9); + await waitFor(() => user.click(rhel9)); }; const selectCentos9 = async () => { + const user = userEvent.setup(); await openReleaseMenu(); await clickShowOptions(); const centos9 = await screen.findByRole('option', { name: 'CentOS Stream 9', }); - await userEvent.click(centos9); + await waitFor(() => user.click(centos9)); }; const selectX86_64 = async () => { + const user = userEvent.setup(); await openArchitectureMenu(); const x86_64 = await screen.findByRole('option', { name: 'x86_64', }); - await userEvent.click(x86_64); + await waitFor(() => user.click(x86_64)); }; const selectAarch64 = async () => { + const user = userEvent.setup(); await openArchitectureMenu(); const aarch64 = await screen.findByRole('option', { name: 'aarch64', }); - await userEvent.click(aarch64); + await waitFor(() => user.click(aarch64)); }; const goToReviewStep = async () => { @@ -174,8 +182,9 @@ describe('Check that the target filtering is in accordance to mock content', () const archMenu = screen.getAllByRole('button', { name: /options menu/i, })[1]; - await user.click(archMenu); - await user.click(await screen.findByRole('option', { name: 'x86_64' })); + user.click(archMenu); + const x86_64Option = await screen.findByRole('option', { name: 'x86_64' }); + user.click(x86_64Option); // make sure this test is in SYNC with the mocks let images_types: string[] = []; // type is `string[]` and not `ImageType[]` because in imageBuilderAPI ArchitectureItem['image_types'] is type string @@ -193,7 +202,7 @@ describe('Check that the target filtering is in accordance to mock content', () expect(images_types).toContain('vsphere-ova'); expect(images_types).not.toContain('wsl'); // make sure the UX conforms to the mocks - await waitFor(async () => await screen.findByTestId('upload-aws')); + await screen.findByTestId('upload-aws'); await screen.findByTestId('upload-google'); await screen.findByTestId('upload-azure'); await screen.findByTestId('checkbox-guest-image'); @@ -213,19 +222,20 @@ describe('Check that the target filtering is in accordance to mock content', () const releaseMenu = screen.getAllByRole('button', { name: /options menu/i, })[0]; - await user.click(releaseMenu); - await user.click( - await screen.findByRole('option', { - name: /Red Hat Enterprise Linux \(RHEL\) 8/, - }) - ); + user.click(releaseMenu); + const rhel8Option = await screen.findByRole('option', { + name: /Red Hat Enterprise Linux \(RHEL\) 8/, + }); + + user.click(rhel8Option); // select x86_64 const archMenu = screen.getAllByRole('button', { name: /options menu/i, })[1]; - await user.click(archMenu); - await user.click(await screen.findByRole('option', { name: 'x86_64' })); + user.click(archMenu); + const x86_64Option = await screen.findByRole('option', { name: 'x86_64' }); + user.click(x86_64Option); // make sure this test is in SYNC with the mocks let images_types: string[] = []; @@ -243,7 +253,7 @@ describe('Check that the target filtering is in accordance to mock content', () expect(images_types).toContain('vsphere-ova'); expect(images_types).toContain('wsl'); // make sure the UX conforms to the mocks - await waitFor(async () => await screen.findByTestId('upload-aws')); + await screen.findByTestId('upload-aws'); await screen.findByTestId('upload-google'); await screen.findByTestId('upload-azure'); await screen.findByTestId('checkbox-guest-image'); @@ -261,8 +271,11 @@ describe('Check that the target filtering is in accordance to mock content', () const archMenu = screen.getAllByRole('button', { name: /options menu/i, })[1]; - await user.click(archMenu); - await user.click(await screen.findByRole('option', { name: 'aarch64' })); + user.click(archMenu); + const aarch64Option = await screen.findByRole('option', { + name: 'aarch64', + }); + user.click(aarch64Option); // make sure this test is in SYNC with the mocks let images_types: string[] = []; @@ -280,8 +293,10 @@ describe('Check that the target filtering is in accordance to mock content', () expect(images_types).not.toContain('vsphere-ova'); expect(images_types).not.toContain('wsl'); // make sure the UX conforms to the mocks - await waitFor(async () => await screen.findByTestId('upload-aws')); - expect(screen.queryByTestId('upload-google')).not.toBeInTheDocument(); + await screen.findByTestId('upload-aws'); + await waitFor(() => + expect(screen.queryByTestId('upload-google')).not.toBeInTheDocument() + ); expect(screen.queryByTestId('upload-azure')).not.toBeInTheDocument(); await screen.findByTestId('checkbox-guest-image'); await screen.findByTestId('checkbox-image-installer'); @@ -302,19 +317,21 @@ describe('Check that the target filtering is in accordance to mock content', () const releaseMenu = screen.getAllByRole('button', { name: /options menu/i, })[0]; - await user.click(releaseMenu); - await user.click( - await screen.findByRole('option', { - name: /Red Hat Enterprise Linux \(RHEL\) 8/, - }) - ); + user.click(releaseMenu); + const rhel8Option = await screen.findByRole('option', { + name: /Red Hat Enterprise Linux \(RHEL\) 8/, + }); + user.click(rhel8Option); // select x86_64 const archMenu = screen.getAllByRole('button', { name: /options menu/i, })[1]; - await user.click(archMenu); - await user.click(await screen.findByRole('option', { name: 'aarch64' })); + user.click(archMenu); + const aarch64Option = await screen.findByRole('option', { + name: 'aarch64', + }); + user.click(aarch64Option); // make sure this test is in SYNC with the mocks let images_types: string[] = []; @@ -332,8 +349,10 @@ describe('Check that the target filtering is in accordance to mock content', () expect(images_types).not.toContain('vsphere-ova'); expect(images_types).not.toContain('wsl'); // make sure the UX conforms to the mocks - await waitFor(async () => await screen.findByTestId('upload-aws')); - expect(screen.queryByTestId('upload-google')).not.toBeInTheDocument(); + await screen.findByTestId('upload-aws'); + await waitFor(() => + expect(screen.queryByTestId('upload-google')).not.toBeInTheDocument() + ); expect(screen.queryByTestId('upload-azure')).not.toBeInTheDocument(); await screen.findByTestId('checkbox-guest-image'); await screen.findByTestId('checkbox-image-installer'); @@ -356,25 +375,32 @@ describe('Check step consistency', () => { const archMenu = screen.getAllByRole('button', { name: /options menu/i, })[1]; - await user.click(archMenu); - await user.click(await screen.findByRole('option', { name: 'x86_64' })); - await waitFor(async () => await screen.findByTestId('upload-aws')); + user.click(archMenu); + let x86_64Option = await screen.findByRole('option', { name: 'x86_64' }); + user.click(x86_64Option); + await screen.findByTestId('upload-aws'); // select GCP, it's available for x86_64 - await user.click(await screen.findByTestId('upload-google')); + const uploadGcpBtn = await screen.findByTestId('upload-google'); + user.click(uploadGcpBtn); const next = await screen.findByRole('button', { name: /Next/ }); await waitFor(() => expect(next).toBeEnabled()); // Change to aarch - await user.click(archMenu); - await user.click(await screen.findByRole('option', { name: 'aarch64' })); - await waitFor(async () => await screen.findByTestId('upload-aws')); + user.click(archMenu); + const aarch64Option = await screen.findByRole('option', { + name: 'aarch64', + }); + user.click(aarch64Option); + await screen.findByTestId('upload-aws'); // GCP not being compatible with arch, the next button is disabled await waitFor(() => expect(next).toBeDisabled()); // clicking on AWS the user can go next - await user.click(await screen.findByTestId('upload-aws')); + const uploadAwsBtn = await screen.findByTestId('upload-aws'); + user.click(uploadAwsBtn); await waitFor(() => expect(next).toBeEnabled()); // and going back to x86_64 the user should keep the next button visible - await user.click(archMenu); - await user.click(await screen.findByRole('option', { name: 'x86_64' })); + user.click(archMenu); + x86_64Option = await screen.findByRole('option', { name: 'x86_64' }); + user.click(x86_64Option); await waitFor(() => expect(next).toBeEnabled()); }); }); @@ -417,13 +443,13 @@ describe('set target using query parameter', () => { test('no target by default (no query parameter)', async () => { await renderCreateMode(); const nextButton = await screen.findByRole('button', { name: /Next/ }); - expect(nextButton).toBeDisabled(); + await waitFor(() => expect(nextButton).toBeDisabled()); }); test('no target by default (invalid query parameter)', async () => { await renderCreateMode({ target: 'azure' }); const nextButton = await screen.findByRole('button', { name: /Next/ }); - expect(nextButton).toBeDisabled(); + await waitFor(() => expect(nextButton).toBeDisabled()); }); test('image-installer (query parameter provided)', async () => { @@ -433,7 +459,7 @@ describe('set target using query parameter', () => { const targetExpandable = await screen.findByTestId( 'target-environments-expandable' ); - await userEvent.click(targetExpandable); + user.click(targetExpandable); await screen.findByText('Bare metal - Installer (.iso)'); }); @@ -444,7 +470,7 @@ describe('set target using query parameter', () => { const targetExpandable = await screen.findByTestId( 'target-environments-expandable' ); - await userEvent.click(targetExpandable); + user.click(targetExpandable); await screen.findByText('Virtualization - Guest image (.qcow2)'); }); }); diff --git a/src/test/Components/CreateImageWizardV2/steps/Oscap/Oscap.test.tsx b/src/test/Components/CreateImageWizardV2/steps/Oscap/Oscap.test.tsx index 17b56f3d..5de1ba7e 100644 --- a/src/test/Components/CreateImageWizardV2/steps/Oscap/Oscap.test.tsx +++ b/src/test/Components/CreateImageWizardV2/steps/Oscap/Oscap.test.tsx @@ -47,51 +47,50 @@ vi.mock('@unleash/proxy-client-react', () => ({ })); const goToOscapStep = async () => { + const user = userEvent.setup(); const guestImageCheckBox = await screen.findByRole('checkbox', { name: /virtualization guest image checkbox/i, }); - await userEvent.click(guestImageCheckBox); + await waitFor(() => user.click(guestImageCheckBox)); await clickNext(); // Registration await clickRegisterLater(); await clickNext(); // OpenSCAP }; const selectProfile = async () => { - await userEvent.click( - await screen.findByRole('textbox', { - name: /select a profile/i, - }) - ); + const user = userEvent.setup(); + const selectProfileDropdown = await screen.findByRole('textbox', { + name: /select a profile/i, + }); + await waitFor(async () => user.click(selectProfileDropdown)); - await userEvent.click( - await screen.findByText( - /cis red hat enterprise linux 8 benchmark for level 1 - workstation/i - ) + const cis1Profile = await screen.findByText( + /cis red hat enterprise linux 8 benchmark for level 1 - workstation/i ); + await waitFor(async () => user.click(cis1Profile)); }; const selectDifferentProfile = async () => { - await userEvent.click( - await screen.findByRole('textbox', { - name: /select a profile/i, - }) - ); + const user = userEvent.setup(); + const selectProfileDropdown = await screen.findByRole('textbox', { + name: /select a profile/i, + }); + await waitFor(async () => user.click(selectProfileDropdown)); - await userEvent.click( - await screen.findByText( - /cis red hat enterprise linux 8 benchmark for level 2 - workstation/i - ) + const cis2Profile = await screen.findByText( + /cis red hat enterprise linux 8 benchmark for level 2 - workstation/i ); + await waitFor(async () => user.click(cis2Profile)); }; const selectNone = async () => { - await userEvent.click( - await screen.findByRole('textbox', { - name: /select a profile/i, - }) - ); + const user = userEvent.setup(); + const selectProfileDropdown = await screen.findByRole('textbox', { + name: /select a profile/i, + }); + await waitFor(async () => user.click(selectProfileDropdown)); - await userEvent.click(await screen.findByText(/none/i)); + await waitFor(async () => user.click(await screen.findByText(/none/i))); }; const goToReviewStep = async () => { diff --git a/src/test/Components/CreateImageWizardV2/steps/Packages/Packages.test.tsx b/src/test/Components/CreateImageWizardV2/steps/Packages/Packages.test.tsx index 9b147d01..efb56554 100644 --- a/src/test/Components/CreateImageWizardV2/steps/Packages/Packages.test.tsx +++ b/src/test/Components/CreateImageWizardV2/steps/Packages/Packages.test.tsx @@ -55,10 +55,11 @@ vi.mock('@unleash/proxy-client-react', () => ({ })); const goToPackagesStep = async () => { + const user = userEvent.setup(); const guestImageCheckBox = await screen.findByRole('checkbox', { name: /virtualization guest image checkbox/i, }); - await userEvent.click(guestImageCheckBox); + await waitFor(() => user.click(guestImageCheckBox)); await clickNext(); // Registration await clickRegisterLater(); await clickNext(); // OpenSCAP @@ -76,64 +77,79 @@ const goToReviewStep = async () => { }; const searchForPackage = async () => { + const user = userEvent.setup(); const searchBox = await screen.findByRole('textbox', { name: /search packages/i, }); - await userEvent.type(searchBox, 'test'); + await waitFor(() => user.type(searchBox, 'test')); }; const searchForGroup = async () => { + const user = userEvent.setup(); const searchBox = await screen.findByRole('textbox', { name: /search packages/i, }); - await userEvent.type(searchBox, '@grouper'); + await waitFor(() => user.type(searchBox, '@grouper')); }; const clearSearchInput = async () => { + const user = userEvent.setup(); const clearSearchBtn = await screen.findByRole('button', { name: /clear-package-search/i, }); - await userEvent.click(clearSearchBtn); + await waitFor(() => user.click(clearSearchBtn)); }; const selectFirstPackage = async () => { - await userEvent.click( - await screen.findByRole('checkbox', { name: /select row 0/i }) - ); + const user = userEvent.setup(); + const row0Checkbox = await screen.findByRole('checkbox', { + name: /select row 0/i, + }); + await waitFor(async () => user.click(row0Checkbox)); }; const deselectFirstPackage = async () => { - await userEvent.click( - await screen.findByRole('checkbox', { name: /select row 0/i }) - ); + const user = userEvent.setup(); + const row0Checkbox = await screen.findByRole('checkbox', { + name: /select row 0/i, + }); + await waitFor(async () => user.click(row0Checkbox)); }; const addSingleRecommendation = async () => { + const user = userEvent.setup(); const addPackageButtons = await screen.findAllByText(/add package/i); - await userEvent.click(addPackageButtons[0]); + await waitFor(() => user.click(addPackageButtons[0])); }; const addAllRecommendations = async () => { - await userEvent.click(await screen.findByText(/add all packages/i)); + const user = userEvent.setup(); + const addAllBtn = await screen.findByText(/add all packages/i); + await waitFor(async () => user.click(addAllBtn)); }; const switchToSelected = async () => { - await userEvent.click( - await screen.findByRole('button', { name: /selected \(\d*\)/i }) - ); + const user = userEvent.setup(); + const selectedBtn = await screen.findByRole('button', { + name: /selected \(\d*\)/i, + }); + await waitFor(async () => user.click(selectedBtn)); }; const deselectRecommendation = async () => { - await userEvent.click( - await screen.findByRole('checkbox', { name: /select row 1/i }) - ); + const user = userEvent.setup(); + const row1Checkbox = await screen.findByRole('checkbox', { + name: /select row 1/i, + }); + await waitFor(async () => user.click(row1Checkbox)); }; const openIncludedPackagesPopover = async () => { + const user = userEvent.setup(); const popoverBtn = await screen.findByRole('button', { name: /About included packages/i, }); - await userEvent.click(popoverBtn); + await waitFor(() => user.click(popoverBtn)); }; describe('packages request generated correctly', () => { @@ -291,9 +307,9 @@ describe('pagination on packages step', () => { await selectFirstPackage(); // the pagination in the top right const top = await screen.findByTestId('packages-pagination-top'); - await expect(top).toHaveTextContent('of 6'); + expect(top).toHaveTextContent('of 6'); const bottom = await screen.findByTestId('packages-pagination-bottom'); - await expect(bottom).toHaveTextContent('of 6'); + expect(bottom).toHaveTextContent('of 6'); }); test('itemcount correct after toggling selected', async () => { @@ -305,9 +321,9 @@ describe('pagination on packages step', () => { // the pagination in the top right const top = await screen.findByTestId('packages-pagination-top'); - await expect(top).toHaveTextContent('of 1'); + expect(top).toHaveTextContent('of 1'); const bottom = await screen.findByTestId('packages-pagination-bottom'); - await expect(bottom).toHaveTextContent('of 1'); + expect(bottom).toHaveTextContent('of 1'); }); test('itemcount correct after clearing search input', async () => { @@ -319,9 +335,9 @@ describe('pagination on packages step', () => { // the pagination in the top right const top = await screen.findByTestId('packages-pagination-top'); - await expect(top).toHaveTextContent('of 0'); + expect(top).toHaveTextContent('of 0'); const bottom = await screen.findByTestId('packages-pagination-bottom'); - await expect(bottom).toHaveTextContent('of 0'); + expect(bottom).toHaveTextContent('of 0'); }); }); @@ -340,6 +356,6 @@ describe('package groups on packages step', () => { const firstRowCells = await within(rows[0]).findAllByRole('cell'); expect(firstRowCells[0]).toHaveTextContent('fish1'); const secondRowCells = await within(rows[1]).findAllByRole('cell'); - expect(secondRowCells[0]).toHaveTextContent('fish2'); + await waitFor(() => expect(secondRowCells[0]).toHaveTextContent('fish2')); }); }); diff --git a/src/test/Components/CreateImageWizardV2/steps/Registration/Registration.test.tsx b/src/test/Components/CreateImageWizardV2/steps/Registration/Registration.test.tsx index db388af8..b73cbe95 100644 --- a/src/test/Components/CreateImageWizardV2/steps/Registration/Registration.test.tsx +++ b/src/test/Components/CreateImageWizardV2/steps/Registration/Registration.test.tsx @@ -52,33 +52,37 @@ vi.mock('@unleash/proxy-client-react', () => ({ })); const selectActivationKey = async () => { + const user = userEvent.setup(); const activationKeyDropdown = await screen.findByRole('textbox', { name: 'Select activation key', }); - await userEvent.click(activationKeyDropdown); + await waitFor(() => user.click(activationKeyDropdown)); const activationKey = await screen.findByRole('option', { name: 'name0', }); - await userEvent.click(activationKey); + await waitFor(() => user.click(activationKey)); }; const clickShowAdditionalConnectionOptions = async () => { + const user = userEvent.setup(); const link = await screen.findByText('Show additional connection options'); - await userEvent.click(link); + await waitFor(() => user.click(link)); }; const deselectEnableRemoteRemediations = async () => { + const user = userEvent.setup(); const checkBox = await screen.findByRole('checkbox', { name: 'Enable remote remediations and system management with automation', }); - await userEvent.click(checkBox); + await waitFor(() => user.click(checkBox)); }; const deselectPredictiveAnalytics = async () => { + const user = userEvent.setup(); const checkBox = await screen.findByRole('checkbox', { name: 'Enable predictive analytics and management capabilities', }); - await userEvent.click(checkBox); + await waitFor(() => user.click(checkBox)); }; const goToReviewStep = async () => { diff --git a/src/test/Components/CreateImageWizardV2/steps/Repositories/Repositories.test.tsx b/src/test/Components/CreateImageWizardV2/steps/Repositories/Repositories.test.tsx index 162c5372..3a187794 100644 --- a/src/test/Components/CreateImageWizardV2/steps/Repositories/Repositories.test.tsx +++ b/src/test/Components/CreateImageWizardV2/steps/Repositories/Repositories.test.tsx @@ -54,10 +54,11 @@ vi.mock('@unleash/proxy-client-react', () => ({ })); const goToRepositoriesStep = async () => { + const user = userEvent.setup(); const guestImageCheckBox = await screen.findByRole('checkbox', { name: /virtualization guest image checkbox/i, }); - await userEvent.click(guestImageCheckBox); + await waitFor(() => user.click(guestImageCheckBox)); await clickNext(); // Registration await clickRegisterLater(); await clickNext(); // OpenSCAP @@ -76,15 +77,19 @@ const goToReviewStep = async () => { }; const selectFirstRepository = async () => { - await userEvent.click( - await screen.findByRole('checkbox', { name: /select row 0/i }) - ); + const user = userEvent.setup(); + const row0Checkbox = await screen.findByRole('checkbox', { + name: /select row 0/i, + }); + await waitFor(async () => user.click(row0Checkbox)); }; const deselectFirstRepository = async () => { - await userEvent.click( - await screen.findByRole('checkbox', { name: /select row 0/i }) - ); + const user = userEvent.setup(); + const row0Checkbox = await screen.findByRole('checkbox', { + name: /select row 0/i, + }); + await waitFor(async () => user.click(row0Checkbox)); }; describe('repositories request generated correctly', () => { @@ -110,14 +115,13 @@ describe('repositories request generated correctly', () => { }); const selectNginxRepository = async () => { + const user = userEvent.setup(); const search = await screen.findByLabelText('Search repositories'); - await userEvent.type(search, 'nginx stable repo'); + await waitFor(() => user.type(search, 'nginx stable repo')); await waitFor( () => expect(screen.getByText('nginx stable repo')).toBeInTheDocument ); - await userEvent.click( - await screen.findByRole('checkbox', { name: /select row 0/i }) - ); + await selectFirstRepository(); }; const expectedNginxRepository: Repository = { @@ -192,30 +196,36 @@ describe('Repositories edit mode', () => { const id = mockBlueprintIds['repositories']; await renderEditMode(id); - await userEvent.click( - await screen.findByRole('button', { name: /Custom repositories/ }) - ); + const customRepositories = await screen.findByRole('button', { + name: /Custom repositories/, + }); + + user.click(customRepositories); await screen.findByText( /Removing previously added repositories may lead to issues with selected packages/i ); - await userEvent.click( - await screen.findByRole('button', { name: /Selected repositories/ }) - ); + const selectedRepositories = await screen.findByRole('button', { + name: /Selected repositories/, + }); + user.click(selectedRepositories); const repoCheckbox = await screen.findByRole('checkbox', { name: /select row 0/i, }); expect(repoCheckbox).toBeChecked(); - await userEvent.click(repoCheckbox); + user.click(repoCheckbox); await screen.findByText(/Are you sure?/); - await userEvent.click( - await screen.findByRole('button', { name: /Remove anyway/ }) - ); + const removeAnywayBtn = await screen.findByRole('button', { + name: /Remove anyway/, + }); + user.click(removeAnywayBtn); - expect(screen.queryByText(/Are you sure?/)).not.toBeInTheDocument(); + await waitFor(() => + expect(screen.queryByText(/Are you sure?/)).not.toBeInTheDocument() + ); expect(repoCheckbox).not.toBeChecked(); }); }); diff --git a/src/test/Components/CreateImageWizardV2/steps/Snapshot/Snapshot.test.tsx b/src/test/Components/CreateImageWizardV2/steps/Snapshot/Snapshot.test.tsx index cde257ed..f241ea89 100644 --- a/src/test/Components/CreateImageWizardV2/steps/Snapshot/Snapshot.test.tsx +++ b/src/test/Components/CreateImageWizardV2/steps/Snapshot/Snapshot.test.tsx @@ -50,10 +50,11 @@ vi.mock('@unleash/proxy-client-react', () => ({ })); const goToSnapshotStep = async () => { + const user = userEvent.setup(); const guestImageCheckBox = await screen.findByRole('checkbox', { name: /virtualization guest image checkbox/i, }); - await userEvent.click(guestImageCheckBox); + await waitFor(async () => user.click(guestImageCheckBox)); await clickNext(); // Registration await clickRegisterLater(); await clickNext(); // OpenSCAP @@ -71,26 +72,33 @@ const goToReviewStep = async () => { }; const selectFirstRepository = async () => { - await userEvent.click( - await screen.findByRole('checkbox', { name: /select row 0/i }) - ); + const user = userEvent.setup(); + const row0Checkbox = await screen.findByRole('checkbox', { + name: /select row 0/i, + }); + await waitFor(async () => user.click(row0Checkbox)); }; const selectUseSnapshot = async () => { - await userEvent.click( - await screen.findByRole('radio', { name: /Use a snapshot/i }) - ); + const user = userEvent.setup(); + const snapshotRadio = await screen.findByRole('radio', { + name: /Use a snapshot/i, + }); + await waitFor(async () => user.click(snapshotRadio)); }; const updateDatePickerWithValue = async (date: string) => { - await userEvent.type( - await screen.findByRole('textbox', { name: /Date picker/i }), - date - ); + const user = userEvent.setup(); + const dateTextbox = await screen.findByRole('textbox', { + name: /Date picker/i, + }); + await waitFor(async () => user.type(dateTextbox, date)); }; const clickContentDropdown = async () => { - await userEvent.click(await screen.findByTestId('content-expandable')); + const user = userEvent.setup(); + const contentExpandable = await screen.findByTestId('content-expandable'); + await waitFor(async () => user.click(contentExpandable)); }; const getSnapshotMethodElement = async () => diff --git a/src/test/Components/CreateImageWizardV2/steps/TargetEnvironment/AwsTarget.test.tsx b/src/test/Components/CreateImageWizardV2/steps/TargetEnvironment/AwsTarget.test.tsx index 0a78e166..435e343e 100644 --- a/src/test/Components/CreateImageWizardV2/steps/TargetEnvironment/AwsTarget.test.tsx +++ b/src/test/Components/CreateImageWizardV2/steps/TargetEnvironment/AwsTarget.test.tsx @@ -66,46 +66,48 @@ const goToReview = async () => { }; const selectAwsTarget = async () => { + const user = userEvent.setup(); await renderCreateMode(); const awsCard = await screen.findByTestId('upload-aws'); - await userEvent.click(awsCard); + await waitFor(() => user.click(awsCard)); await clickNext(); }; const deselectAwsAndSelectGuestImage = async () => { + const user = userEvent.setup(); const awsCard = await screen.findByTestId('upload-aws'); - await userEvent.click(awsCard); - await userEvent.click( - await screen.findByRole('checkbox', { - name: /virtualization guest image checkbox/i, - }) - ); + await waitFor(() => user.click(awsCard)); + const guestImageCheckbox = await screen.findByRole('checkbox', { + name: /virtualization guest image checkbox/i, + }); + await waitFor(async () => user.click(guestImageCheckbox)); await clickNext(); }; const selectSource = async () => { - await userEvent.click( - await screen.findByRole('textbox', { - name: /select source/i, - }) - ); + const user = userEvent.setup(); + const sourceTexbox = await screen.findByRole('textbox', { + name: /select source/i, + }); + await waitFor(async () => user.click(sourceTexbox)); - await userEvent.click( - await screen.findByRole('option', { name: /my_source/i }) - ); + const sourceOption = await screen.findByRole('option', { + name: /my_source/i, + }); + await waitFor(async () => user.click(sourceOption)); }; const enterAccountId = async () => { - await userEvent.click( - await screen.findByText(/manually enter an account id\./i) + const user = userEvent.setup(); + const manualOption = await screen.findByText( + /manually enter an account id\./i ); + await waitFor(async () => user.click(manualOption)); - await userEvent.type( - await screen.findByRole('textbox', { - name: 'aws account id', - }), - '123123123123' - ); + const awsAccountIdTextbox = await screen.findByRole('textbox', { + name: 'aws account id', + }); + await waitFor(async () => user.type(awsAccountIdTextbox, '123123123123')); }; describe('aws image type request generated correctly', () => { diff --git a/src/test/Components/CreateImageWizardV2/steps/TargetEnvironment/AzureTarget.test.tsx b/src/test/Components/CreateImageWizardV2/steps/TargetEnvironment/AzureTarget.test.tsx index 84da132f..175eae86 100644 --- a/src/test/Components/CreateImageWizardV2/steps/TargetEnvironment/AzureTarget.test.tsx +++ b/src/test/Components/CreateImageWizardV2/steps/TargetEnvironment/AzureTarget.test.tsx @@ -66,72 +66,84 @@ const goToReview = async () => { }; const selectAzureTarget = async () => { + const user = userEvent.setup(); await renderCreateMode(); const azureCard = await screen.findByTestId('upload-azure'); - await userEvent.click(azureCard); + await waitFor(() => user.click(azureCard)); await clickNext(); }; const deselectAzureAndSelectGuestImage = async () => { + const user = userEvent.setup(); const azureCard = await screen.findByTestId('upload-azure'); - await userEvent.click(azureCard); - await userEvent.click( - await screen.findByRole('checkbox', { - name: /virtualization guest image checkbox/i, - }) - ); + await waitFor(() => user.click(azureCard)); + const guestImageCheckbox = await screen.findByRole('checkbox', { + name: /virtualization guest image checkbox/i, + }); + await waitFor(async () => user.click(guestImageCheckbox)); await clickNext(); }; const selectSource = async () => { - await userEvent.click( - await screen.findByRole('textbox', { - name: /select source/i, - }) - ); + const user = userEvent.setup(); + const sourceTexbox = await screen.findByRole('textbox', { + name: /select source/i, + }); + await waitFor(async () => user.click(sourceTexbox)); - await userEvent.click( - await screen.findByRole('option', { name: /azureSource1/i }) - ); + const azureSource = await screen.findByRole('option', { + name: /azureSource1/i, + }); + await waitFor(async () => user.click(azureSource)); }; const selectResourceGroup = async () => { - await userEvent.click( - await screen.findByRole('textbox', { - name: /select resource group/i, - }) - ); + const user = userEvent.setup(); + const resourceGrpTextbox = await screen.findByRole('textbox', { + name: /select resource group/i, + }); + await waitFor(async () => user.click(resourceGrpTextbox)); - await userEvent.click( - await screen.findByRole('option', { name: /myResourceGroup1/i }) - ); + const myResourceGroup1 = await screen.findByRole('option', { + name: /myResourceGroup1/i, + }); + await waitFor(async () => user.click(myResourceGroup1)); }; const selectManuallyEnterInformation = async () => { - await userEvent.click( - await screen.findByText(/manually enter the account information\./i) + const user = userEvent.setup(); + const manualOption = await screen.findByText( + /manually enter the account information\./i ); + await waitFor(async () => user.click(manualOption)); }; const enterTenantGuid = async () => { - await userEvent.type( - screen.getByRole('textbox', { name: /azure tenant guid/i }), - 'b8f86d22-4371-46ce-95e7-65c415f3b1e2' + const user = userEvent.setup(); + const tenantGuid = await screen.findByRole('textbox', { + name: /azure tenant guid/i, + }); + await waitFor(() => + user.type(tenantGuid, 'b8f86d22-4371-46ce-95e7-65c415f3b1e2') ); }; const enterSubscriptionId = async () => { - await userEvent.type( - screen.getByRole('textbox', { name: /subscription id/i }), - '60631143-a7dc-4d15-988b-ba83f3c99711' + const user = userEvent.setup(); + const subscriptionId = await screen.findByRole('textbox', { + name: /subscription id/i, + }); + await waitFor(() => + user.type(subscriptionId, '60631143-a7dc-4d15-988b-ba83f3c99711') ); }; const enterResourceGroup = async () => { - await userEvent.type( - screen.getByRole('textbox', { name: /resource group/i }), - 'testResourceGroup' - ); + const user = userEvent.setup(); + const resourceGroup = await screen.findByRole('textbox', { + name: /resource group/i, + }); + await waitFor(() => user.type(resourceGroup, 'testResourceGroup')); }; describe('azure image type request generated correctly', () => { diff --git a/src/test/Components/CreateImageWizardV2/steps/TargetEnvironment/GCPTarget.test.tsx b/src/test/Components/CreateImageWizardV2/steps/TargetEnvironment/GCPTarget.test.tsx index c0d5edce..5c6c3937 100644 --- a/src/test/Components/CreateImageWizardV2/steps/TargetEnvironment/GCPTarget.test.tsx +++ b/src/test/Components/CreateImageWizardV2/steps/TargetEnvironment/GCPTarget.test.tsx @@ -81,28 +81,30 @@ const createGCPCloudImage = ( }; const clickGCPTarget = async () => { + const user = userEvent.setup(); await renderCreateMode(); const googleOption = await screen.findByTestId('upload-google'); - await userEvent.click(googleOption); + await waitFor(() => user.click(googleOption)); await clickNext(); }; const deselectGcpAndSelectGuestImage = async () => { + const user = userEvent.setup(); const googleCard = await screen.findByTestId('upload-google'); - await userEvent.click(googleCard); - await userEvent.click( - await screen.findByRole('checkbox', { - name: /virtualization guest image checkbox/i, - }) - ); + await waitFor(() => user.click(googleCard)); + const guestImageCheckbox = await screen.findByRole('checkbox', { + name: /virtualization guest image checkbox/i, + }); + await waitFor(async () => user.click(guestImageCheckbox)); await clickNext(); }; const selectGoogleAccount = async (optionId: string) => { + const user = userEvent.setup(); const googleAccountOption = await screen.findByTestId(optionId); - await userEvent.click(googleAccountOption); + await waitFor(() => user.click(googleAccountOption)); const principalInput = await screen.findByTestId('principal'); - await userEvent.type(principalInput, GCP_ACCOUNT); + await waitFor(() => user.type(principalInput, GCP_ACCOUNT)); }; describe('gcp image type request generated correctly', () => { @@ -167,12 +169,13 @@ describe('gcp image type request generated correctly', () => { expect(receivedRequest).toEqual(expectedRequest); }); test('share image with red hat insight only', async () => { + const user = userEvent.setup(); await clickGCPTarget(); const shareWithInsightOption = await screen.findByTestId( 'share-with-insights' ); - await userEvent.click(shareWithInsightOption); + user.click(shareWithInsightOption); await goToReview(); const receivedRequest = await interceptBlueprintRequest(CREATE_BLUEPRINT); const expectedImageRequest = createGCPCloudImage('gcp', {}); @@ -207,6 +210,6 @@ describe('GCP edit mode', () => { `${EDIT_BLUEPRINT}/${id}` ); const expectedRequest = gcpCreateBlueprintRequest; - expect(receivedRequest).toEqual(expectedRequest); + await waitFor(() => expect(receivedRequest).toEqual(expectedRequest)); }); }); diff --git a/src/test/Components/CreateImageWizardV2/wizardTestUtils.tsx b/src/test/Components/CreateImageWizardV2/wizardTestUtils.tsx index cdc8bac3..beb1e6f7 100644 --- a/src/test/Components/CreateImageWizardV2/wizardTestUtils.tsx +++ b/src/test/Components/CreateImageWizardV2/wizardTestUtils.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { screen } from '@testing-library/react'; +import { screen, waitFor } from '@testing-library/react'; import { userEvent } from '@testing-library/user-event'; import { MockedRequest } from 'msw'; @@ -87,45 +87,53 @@ export const renderEditMode = async (id: string) => { }; export const goToRegistrationStep = async () => { + const user = userEvent.setup(); const guestImageCheckBox = await screen.findByRole('checkbox', { name: /virtualization guest image checkbox/i, }); - await userEvent.click(guestImageCheckBox); + await waitFor(() => user.click(guestImageCheckBox)); await clickNext(); }; export const clickRegisterLater = async () => { + const user = userEvent.setup(); + await screen.findByRole('heading', { + name: /Register systems using this image/, + }); const radioButton = await screen.findByRole('radio', { name: 'Register later', }); - await userEvent.click(radioButton); + await waitFor(() => user.click(radioButton)); }; export const enterBlueprintName = async (name: string = 'Red Velvet') => { + const user = userEvent.setup(); const blueprintName = await screen.findByRole('textbox', { name: /blueprint name/i, }); - await userEvent.type(blueprintName, name); + await waitFor(() => user.type(blueprintName, name)); }; export const openAndDismissSaveAndBuildModal = async () => { - await userEvent.click( - await screen.findByRole('button', { - name: 'Create blueprint', - }) - ); - await userEvent.click( - await screen.findByTestId('close-button-saveandbuild-modal') + const user = userEvent.setup(); + const createBlueprintBtn = await screen.findByRole('button', { + name: 'Create blueprint', + }); + await waitFor(async () => user.click(createBlueprintBtn)); + const saveAndBuildModal = await screen.findByTestId( + 'close-button-saveandbuild-modal' ); + await waitFor(() => user.click(saveAndBuildModal)); }; export const interceptBlueprintRequest = async (requestPathname: string) => { + const user = userEvent.setup(); const receivedRequestPromise = spyOnRequest(requestPathname, 'POST'); const saveButton = await screen.findByRole('button', { name: 'Create blueprint', }); - await userEvent.click(saveButton); + await waitFor(() => user.click(saveButton)); return await receivedRequestPromise; }; @@ -133,12 +141,13 @@ export const interceptBlueprintRequest = async (requestPathname: string) => { export const interceptEditBlueprintRequest = async ( requestPathname: string ) => { + const user = userEvent.setup(); const receivedRequestPromise = spyOnRequest(requestPathname, 'PUT'); const saveButton = await screen.findByRole('button', { name: 'Save changes to blueprint', }); - await userEvent.click(saveButton); + await waitFor(() => user.click(saveButton)); return await receivedRequestPromise; }; diff --git a/src/test/Components/ShareImageModal/ShareImageModal.test.tsx b/src/test/Components/ShareImageModal/ShareImageModal.test.tsx index 555aaca4..090c044a 100644 --- a/src/test/Components/ShareImageModal/ShareImageModal.test.tsx +++ b/src/test/Components/ShareImageModal/ShareImageModal.test.tsx @@ -46,19 +46,19 @@ describe('Create Share To Regions Modal', () => { const selectToggle = await screen.findByRole('button', { name: /menu toggle/i, }); - await user.click(selectToggle); + user.click(selectToggle); const usEast2 = await screen.findByRole('option', { name: /us east \(ohio\) us-east-2/i, }); expect(usEast2).not.toHaveClass('pf-m-disabled'); - await user.click(usEast2); + user.click(usEast2); await waitFor(() => expect(shareButton).toBeEnabled()); const clearAllButton = await screen.findByRole('button', { name: /clear input value/i, }); - await user.click(clearAllButton); + user.click(clearAllButton); await waitFor(() => expect(shareButton).toBeDisabled()); const invalidAlert = await screen.findByText( @@ -75,7 +75,7 @@ describe('Create Share To Regions Modal', () => { ); const cancelButton = await screen.findByRole('button', { name: /cancel/i }); - await user.click(cancelButton); + user.click(cancelButton); // returns back to the landing page await waitFor(() => @@ -91,7 +91,7 @@ describe('Create Share To Regions Modal', () => { ); const closeButton = await screen.findByRole('button', { name: /close/i }); - await user.click(closeButton); + user.click(closeButton); // returns back to the landing page await waitFor(() => @@ -105,7 +105,7 @@ describe('Create Share To Regions Modal', () => { const selectToggle = await screen.findByRole('button', { name: /menu toggle/i, }); - await user.click(selectToggle); + user.click(selectToggle); // parent region disabled const usEast1 = await screen.findByRole('option', { @@ -114,7 +114,7 @@ describe('Create Share To Regions Modal', () => { expect(usEast1).toBeDisabled(); // close the select again to avoid state update - await user.click(selectToggle); + user.click(selectToggle); }); // TODO Verify that sharing clones works once msw/data is incorporated. diff --git a/src/test/testUtils.js b/src/test/testUtils.js index 84ce4273..c4a90afe 100644 --- a/src/test/testUtils.js +++ b/src/test/testUtils.js @@ -1,7 +1,7 @@ import React from 'react'; import { configureStore } from '@reduxjs/toolkit'; -import { screen, render } from '@testing-library/react'; +import { screen, render, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { Provider } from 'react-redux'; import { createMemoryRouter, RouterProvider } from 'react-router-dom'; @@ -80,17 +80,20 @@ export const renderWithProvider = ( export const clickBack = async () => { const user = userEvent.setup(); - await user.click(await screen.findByRole('button', { name: /Back/ })); + const backBtn = await screen.findByRole('button', { name: /Back/ }); + await waitFor(() => user.click(backBtn)); }; export const clickNext = async () => { const user = userEvent.setup(); - await user.click(await screen.findByRole('button', { name: /Next/ })); + const nextBtn = await screen.findByRole('button', { name: /Next/ }); + await waitFor(() => user.click(nextBtn)); }; export const clickCancel = async () => { const user = userEvent.setup(); - await user.click(await screen.findByRole('button', { name: /Cancel/ })); + const cancelBtn = await screen.findByRole('button', { name: /Cancel/ }); + await waitFor(() => user.click(cancelBtn)); }; export const getNextButton = async () => {