diff --git a/src/test/Components/CreateImageWizard/CreateImageWizard.azure.2.test.js b/src/test/Components/CreateImageWizard/CreateImageWizard.azure.2.test.js index 9991a248..cd68b21b 100644 --- a/src/test/Components/CreateImageWizard/CreateImageWizard.azure.2.test.js +++ b/src/test/Components/CreateImageWizard/CreateImageWizard.azure.2.test.js @@ -2,6 +2,7 @@ import React from 'react'; import '@testing-library/jest-dom'; import { screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; import { rest } from 'msw'; import CreateImageWizard from '../../../Components/CreateImageWizard/CreateImageWizard'; @@ -54,11 +55,12 @@ describe('Step Upload to Azure', () => { jest.clearAllMocks(); }); + const user = userEvent.setup(); + const setUp = async () => { renderCustomRoutesWithReduxRouter('imagewizard', {}, routes); - // select aws as upload destination - const azureTile = screen.getByTestId('upload-azure'); - azureTile.click(); + // select Azure as upload destination + await user.click(screen.getByTestId('upload-azure')); await clickNext(); diff --git a/src/test/Components/CreateImageWizard/CreateImageWizard.azure.test.js b/src/test/Components/CreateImageWizard/CreateImageWizard.azure.test.js index 51e6c527..cb3bcbdf 100644 --- a/src/test/Components/CreateImageWizard/CreateImageWizard.azure.test.js +++ b/src/test/Components/CreateImageWizard/CreateImageWizard.azure.test.js @@ -1,7 +1,7 @@ import React from 'react'; import '@testing-library/jest-dom'; -import { act, screen, waitFor } from '@testing-library/react'; +import { screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import CreateImageWizard from '../../../Components/CreateImageWizard/CreateImageWizard'; @@ -74,8 +74,7 @@ describe('Step Upload to Azure', () => { const setUp = async () => { ({ router } = renderCustomRoutesWithReduxRouter('imagewizard', {}, routes)); // select Azure as upload destination - const azureTile = screen.getByTestId('upload-azure'); - azureTile.click(); + user.click(await screen.findByTestId('upload-azure')); await clickNext(); @@ -87,7 +86,7 @@ describe('Step Upload to Azure', () => { test('clicking Next loads Registration', async () => { await setUp(); - await user.click(screen.getByTestId('azure-radio-manual')); + await user.click(await screen.findByTestId('azure-radio-manual')); // Randomly generated GUID await user.type( screen.getByTestId('azure-tenant-id-manual'), @@ -101,9 +100,7 @@ describe('Step Upload to Azure', () => { screen.getByTestId('azure-resource-group-manual'), 'testResourceGroup' ); - await act(async () => { - await clickNext(); - }); + clickNext(); await screen.findByRole('textbox', { name: 'Select activation key', @@ -130,14 +127,15 @@ describe('Step Upload to Azure', () => { test('azure step basics works', async () => { await setUp(); + const nextButton = await getNextButton(); - expect(await getNextButton()).toHaveClass('pf-m-disabled'); + expect(nextButton).toHaveClass('pf-m-disabled'); expect(screen.getByTestId('azure-radio-source')).toBeChecked(); await user.click(screen.getByTestId('azure-radio-manual')); expect(screen.getByTestId('azure-radio-manual')).toBeChecked(); - expect(await getNextButton()).toHaveClass('pf-m-disabled'); + expect(nextButton).toHaveClass('pf-m-disabled'); const tenantId = screen.getByTestId('azure-tenant-id-manual'); expect(tenantId).toHaveValue(''); @@ -152,11 +150,11 @@ describe('Step Upload to Azure', () => { expect(resourceGroup).toBeEnabled(); await user.type(resourceGroup, 'testGroup'); - expect(await getNextButton()).not.toHaveClass('pf-m-disabled'); + expect(nextButton).not.toHaveClass('pf-m-disabled'); - screen.getByTestId('azure-radio-source').click(); + user.click(screen.getByTestId('azure-radio-source')); - expect(await getNextButton()).toHaveClass('pf-m-disabled'); + await waitFor(() => expect(nextButton).toHaveClass('pf-m-disabled')); const sourceDropdown = await getSourceDropdown(); @@ -164,26 +162,28 @@ describe('Step Upload to Azure', () => { expect(screen.getByTestId('azure-tenant-id-source')).toHaveValue(''); expect(screen.getByTestId('azure-subscription-id-source')).toHaveValue(''); - sourceDropdown.click(); + user.click(sourceDropdown); - const source = await screen.findByRole('option', { - name: /azureSource1/i, - }); - source.click(); + user.click( + await screen.findByRole('option', { + name: /azureSource1/i, + }) + ); // wait for fetching the upload info await waitFor(() => expect(screen.getByTestId('azure-tenant-id-source')).not.toHaveValue('') ); - const resourceGroupDropdown = screen.getByRole('textbox', { - name: /select resource group/i, - }); - await user.click(resourceGroupDropdown); + await user.click( + screen.getByRole('textbox', { + name: /select resource group/i, + }) + ); const groups = screen.getAllByLabelText(/^Resource group/); expect(groups).toHaveLength(2); await user.click(screen.getByLabelText('Resource group myResourceGroup1')); - expect(await getNextButton()).not.toHaveClass('pf-m-disabled'); + expect(nextButton).not.toHaveClass('pf-m-disabled'); }, 10000); test('handles change of selected Source', async () => { @@ -191,30 +191,33 @@ describe('Step Upload to Azure', () => { const sourceDropdown = await getSourceDropdown(); - sourceDropdown.click(); - const source = await screen.findByRole('option', { - name: /azureSource1/i, - }); - source.click(); + user.click(sourceDropdown); + user.click( + await screen.findByRole('option', { + name: /azureSource1/i, + }) + ); await waitFor(() => expect(screen.getByTestId('azure-tenant-id-source')).not.toHaveValue('') ); - sourceDropdown.click(); - const source2 = await screen.findByRole('option', { - name: /azureSource2/i, - }); - source2.click(); + user.click(sourceDropdown); + user.click( + await screen.findByRole('option', { + name: /azureSource2/i, + }) + ); await waitFor(() => expect(screen.getByTestId('azure-tenant-id-source')).toHaveValue( '73d5694c-7a28-417e-9fca-55840084f508' ) ); - const resourceGroupDropdown = screen.getByRole('textbox', { - name: /select resource group/i, - }); - await user.click(resourceGroupDropdown); + await user.click( + screen.getByRole('textbox', { + name: /select resource group/i, + }) + ); const groups = screen.getByLabelText(/^Resource group/); expect(groups).toBeInTheDocument(); expect(screen.getByLabelText('Resource group theirGroup2')).toBeVisible(); diff --git a/src/test/Components/CreateImageWizard/CreateImageWizard.content.test.js b/src/test/Components/CreateImageWizard/CreateImageWizard.content.test.js index df2ddd64..926e73bd 100644 --- a/src/test/Components/CreateImageWizard/CreateImageWizard.content.test.js +++ b/src/test/Components/CreateImageWizard/CreateImageWizard.content.test.js @@ -2,7 +2,7 @@ import React from 'react'; import '@testing-library/jest-dom'; -import { act, screen, waitFor, within } from '@testing-library/react'; +import { screen, waitFor, within } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import api from '../../../api.js'; @@ -69,11 +69,11 @@ jest const searchForAvailablePackages = async (searchbox, searchTerm) => { const user = userEvent.setup(); await user.type(searchbox, searchTerm); - await act(async () => { - screen - .getByRole('button', { name: /search button for available packages/i }) - .click(); - }); + user.click( + await screen.findByRole('button', { + name: /search button for available packages/i, + }) + ); }; const searchForChosenPackages = async (searchbox, searchTerm) => { @@ -119,44 +119,37 @@ describe('Step Packages', () => { )); // select aws as upload destination - const awsTile = screen.getByTestId('upload-aws'); - await act(async () => { - awsTile.click(); - await clickNext(); - }); + await user.click(await screen.findByTestId('upload-aws')); + await clickNext(); // aws step - const manualRadio = screen.getByRole('radio', { - name: /manually enter an account id\./i, - }); - manualRadio.click(); - const aai = screen.getByTestId('aws-account-id'); - await act(async () => { - await user.type(aai, '012345678901'); - await clickNext(); - }); + user.click( + screen.getByRole('radio', { + name: /manually enter an account id\./i, + }) + ); + await user.type( + await screen.findByTestId('aws-account-id'), + '012345678901' + ); + await clickNext(); // skip registration await screen.findByRole('textbox', { name: 'Select activation key', }); - const registerLaterRadio = screen.getByTestId('registration-radio-later'); - await act(async () => { - await user.click(registerLaterRadio); - await clickNext(); - // skip fsc - await clickNext(); - }); + user.click(await screen.findByTestId('registration-radio-later')); + await clickNext(); + // skip fsc + await clickNext(); }; test('clicking Next loads Image name', async () => { await setUp(); - await act(async () => { - await clickNext(); - }); + await clickNext(); - screen.getByRole('heading', { + await screen.findByRole('heading', { name: 'Details', }); }); @@ -164,9 +157,7 @@ describe('Step Packages', () => { test('clicking Back loads file system configuration', async () => { await setUp(); - await act(async () => { - await clickBack(); - }); + await clickBack(); screen.getByRole('heading', { name: /file system configuration/i }); }); @@ -180,12 +171,12 @@ describe('Step Packages', () => { test('should display search bar and button', async () => { await setUp(); - const sapi = screen.getByTestId('search-available-pkgs-input'); - await act(async () => { - await user.type(sapi, 'test'); - }); + await user.type( + await screen.findByTestId('search-available-pkgs-input'), + 'test' + ); - screen.getByRole('button', { + await screen.findByRole('button', { name: 'Search button for available packages', }); }); @@ -203,16 +194,14 @@ describe('Step Packages', () => { const searchbox = screen.getAllByRole('textbox')[0]; // searching by id doesn't update the input ref await waitFor(() => expect(searchbox).toBeEnabled()); - await act(async () => { - searchbox.click(); - }); + await user.click(searchbox); await searchForAvailablePackages(searchbox, 'test'); const availablePackagesList = screen.getByTestId('available-pkgs-list'); - const availablePackagesItems = within(availablePackagesList).getAllByRole( - 'option' - ); + const availablePackagesItems = await within( + availablePackagesList + ).findAllByRole('option'); expect(availablePackagesItems).toHaveLength(3); const [firstItem, secondItem, thirdItem] = availablePackagesItems; expect(firstItem).toHaveTextContent('testsummary for test package'); @@ -226,29 +215,15 @@ describe('Step Packages', () => { const searchbox = screen.getAllByRole('textbox')[0]; // searching by id doesn't update the input ref await waitFor(() => expect(searchbox).toBeEnabled()); - await act(async () => { - searchbox.click(); - }); + user.click(searchbox); await searchForAvailablePackages(searchbox, 'test'); - const apt = screen.getByTestId('available-pkgs-testPkg'); - await act(async () => { - apt.click(); - }); - const bas = screen.getByRole('button', { name: /Add selected/ }); - await act(async () => { - bas.click(); - }); + await user.click(await screen.findByTestId('available-pkgs-testPkg')); + await user.click(screen.getByRole('button', { name: /Add selected/ })); - const spt = screen.getByTestId('selected-pkgs-testPkg'); - await act(async () => { - spt.click(); - }); - const brs = screen.getByRole('button', { name: /Remove selected/ }); - await act(async () => { - brs.click(); - }); + user.click(screen.getByTestId('selected-pkgs-testPkg')); + user.click(screen.getByRole('button', { name: /Remove selected/ })); const availablePackagesList = screen.getByTestId('available-pkgs-list'); const availablePackagesItems = within(availablePackagesList).getAllByRole( @@ -267,20 +242,12 @@ describe('Step Packages', () => { const searchbox = screen.getAllByRole('textbox')[0]; // searching by id doesn't update the input ref await waitFor(() => expect(searchbox).toBeEnabled()); - await act(async () => { - searchbox.click(); - }); + user.click(searchbox); await searchForAvailablePackages(searchbox, 'test'); - const baa = screen.getByRole('button', { name: /Add all/ }); - await act(async () => { - baa.click(); - }); - const bra = screen.getByRole('button', { name: /Remove all/ }); - await act(async () => { - bra.click(); - }); + user.click(screen.getByRole('button', { name: /Add all/ })); + await user.click(screen.getByRole('button', { name: /Remove all/ })); const availablePackagesList = screen.getByTestId('available-pkgs-list'); const availablePackagesItems = within(availablePackagesList).getAllByRole( @@ -299,72 +266,39 @@ describe('Step Packages', () => { const searchbox = screen.getAllByRole('textbox')[0]; // searching by id doesn't update the input ref await waitFor(() => expect(searchbox).toBeEnabled()); - await act(async () => { - searchbox.click(); - }); + user.click(searchbox); await searchForAvailablePackages(searchbox, 'test'); - const baa = screen.getByRole('button', { name: /Add all/ }); - await act(async () => { - baa.click(); - }); + user.click(screen.getByRole('button', { name: /Add all/ })); // remove a single package - const splt = screen.getByTestId('selected-pkgs-lib-test'); - await act(async () => { - splt.click(); - }); - const brs = screen.getByRole('button', { name: /Remove selected/ }); - await act(async () => { - brs.click(); - }); + await user.click(await screen.findByTestId('selected-pkgs-lib-test')); + user.click(screen.getByRole('button', { name: /Remove selected/ })); // skip name page - const bn1 = screen.getByRole('button', { name: /Next/ }); - await act(async () => { - bn1.click(); - }); + clickNext(); // review page - const bn2 = screen.getByRole('button', { name: /Next/ }); - await act(async () => { - bn2.click(); - }); + clickNext(); // await screen.findByTestId('chosen-packages-count'); let chosen = await screen.findByTestId('chosen-packages-count'); expect(chosen).toHaveTextContent('2'); // remove another package - const bb1 = screen.getByRole('button', { name: /Back/ }); - await act(async () => { - bb1.click(); - }); - const bb2 = screen.getByRole('button', { name: /Back/ }); - await act(async () => { - bb2.click(); - }); + clickBack(); + clickBack(); await screen.findByTestId('search-available-pkgs-input'); - const op = screen.getByRole('option', { - name: /summary for test package/, - }); - await act(async () => { - op.click(); - }); - const brs2 = screen.getByRole('button', { name: /Remove selected/ }); - await act(async () => { - brs2.click(); - }); + user.click( + screen.getByRole('option', { + name: /summary for test package/, + }) + ); + user.click(screen.getByRole('button', { name: /Remove selected/ })); // review page - const n1 = screen.getByRole('button', { name: /Next/ }); - await act(async () => { - n1.click(); - }); - const n2 = screen.getByRole('button', { name: /Next/ }); - await act(async () => { - n2.click(); - }); + clickNext(); + clickNext(); // await screen.findByTestId('chosen-packages-count'); chosen = await screen.findByTestId('chosen-packages-count'); @@ -377,12 +311,10 @@ describe('Step Packages', () => { const searchbox = screen.getAllByRole('textbox')[0]; // searching by id doesn't update the input ref await waitFor(() => expect(searchbox).toBeEnabled()); - await act(async () => { - searchbox.click(); - }); + user.click(searchbox); await searchForAvailablePackages(searchbox, 'asdf'); - screen.getByText('No results found'); + await screen.findByText('No results found'); }); test('should display empty available state on failed search after a successful search', async () => { @@ -391,19 +323,19 @@ describe('Step Packages', () => { const searchbox = screen.getAllByRole('textbox')[0]; // searching by id doesn't update the input ref await waitFor(() => expect(searchbox).toBeEnabled()); - await act(async () => { - searchbox.click(); - }); + user.click(searchbox); await searchForAvailablePackages(searchbox, 'test'); - screen - .getByRole('button', { name: /clear available packages search/i }) - .click(); + user.click( + await screen.findByRole('button', { + name: /clear available packages search/i, + }) + ); await searchForAvailablePackages(searchbox, 'asdf'); - screen.getByText('No results found'); + await screen.findByText('No results found'); }); test('should display empty chosen state on failed search', async () => { @@ -413,12 +345,12 @@ describe('Step Packages', () => { const searchboxChosen = screen.getAllByRole('textbox')[1]; await waitFor(() => expect(searchboxAvailable).toBeEnabled()); - searchboxAvailable.click(); + user.click(searchboxAvailable); await searchForAvailablePackages(searchboxAvailable, 'test'); - screen.getByRole('button', { name: /Add all/ }).click(); + user.click(await screen.findByRole('button', { name: /Add all/ })); - searchboxChosen.click(); + user.click(searchboxChosen); await user.type(searchboxChosen, 'asdf'); expect(screen.getByText('No packages found')).toBeInTheDocument(); @@ -432,7 +364,7 @@ describe('Step Packages', () => { const searchbox = screen.getAllByRole('textbox')[0]; // searching by id doesn't update the input ref await waitFor(() => expect(searchbox).toBeEnabled()); - searchbox.click(); + user.click(searchbox); const getPackages = jest .spyOn(api, 'getPackages') @@ -443,7 +375,7 @@ describe('Step Packages', () => { }); await searchForAvailablePackages(searchbox, 'testPkg'); - expect(getPackages).toHaveBeenCalledTimes(2); + await waitFor(() => expect(getPackages).toHaveBeenCalledTimes(2)); screen.getByText('Over 100 results found. Refine your search.'); screen.getByText('Too many results to display'); @@ -455,7 +387,7 @@ describe('Step Packages', () => { const searchbox = screen.getAllByRole('textbox')[0]; // searching by id doesn't update the input ref await waitFor(() => expect(searchbox).toBeEnabled()); - searchbox.click(); + user.click(searchbox); const getPackages = jest .spyOn(api, 'getPackages') @@ -466,7 +398,7 @@ describe('Step Packages', () => { }); await searchForAvailablePackages(searchbox, 'testPkg-128'); - expect(getPackages).toHaveBeenCalledTimes(2); + await waitFor(() => expect(getPackages).toHaveBeenCalledTimes(2)); const availablePackagesList = screen.getByTestId('available-pkgs-list'); const availablePackagesItems = within(availablePackagesList).getByRole( @@ -484,14 +416,14 @@ describe('Step Packages', () => { const searchbox = screen.getAllByRole('textbox')[0]; // searching by id doesn't update the input ref await waitFor(() => expect(searchbox).toBeEnabled()); - searchbox.click(); + user.click(searchbox); const getPackages = jest .spyOn(api, 'getPackages') .mockImplementation(() => Promise.resolve(mockPkgResultAlpha)); await searchForAvailablePackages(searchbox, 'test'); - expect(getPackages).toHaveBeenCalledTimes(1); + await waitFor(() => expect(getPackages).toHaveBeenCalledTimes(1)); const availablePackagesList = screen.getByTestId('available-pkgs-list'); const availablePackagesItems = within(availablePackagesList).getAllByRole( @@ -511,21 +443,25 @@ describe('Step Packages', () => { const searchbox = screen.getAllByRole('textbox')[0]; await waitFor(() => expect(searchbox).toBeEnabled()); - searchbox.click(); + user.click(searchbox); await searchForAvailablePackages(searchbox, 'test'); const availablePackagesList = screen.getByTestId('available-pkgs-list'); - const availablePackagesItems = within(availablePackagesList).getAllByRole( - 'option' - ); + const availablePackagesItems = await within( + availablePackagesList + ).findAllByRole('option'); expect(availablePackagesItems).toHaveLength(3); - screen - .getByRole('button', { name: /clear available packages search/i }) - .click(); + user.click( + await screen.findByRole('button', { + name: /clear available packages search/i, + }) + ); - screen.getByText('Search above to add additionalpackages to your image'); + await screen.findByText( + 'Search above to add additionalpackages to your image' + ); }); test('chosen packages can be reset after filtering', async () => { @@ -534,25 +470,26 @@ describe('Step Packages', () => { const availableSearchbox = screen.getAllByRole('textbox')[0]; await waitFor(() => expect(availableSearchbox).toBeEnabled()); - availableSearchbox.click(); + user.click(availableSearchbox); await searchForAvailablePackages(availableSearchbox, 'test'); const availablePackagesList = screen.getByTestId('available-pkgs-list'); - const availablePackagesItems = within(availablePackagesList).getAllByRole( - 'option' - ); - expect(availablePackagesItems).toHaveLength(3); + const availablePackagesItems = await within( + availablePackagesList + ).findAllByRole('option'); + await waitFor(() => expect(availablePackagesItems).toHaveLength(3)); - screen.getByRole('button', { name: /Add all/ }).click(); + user.click(await screen.findByRole('button', { name: /Add all/ })); const chosenPackagesList = screen.getByTestId('chosen-pkgs-list'); - let chosenPackagesItems = - within(chosenPackagesList).getAllByRole('option'); - expect(chosenPackagesItems).toHaveLength(3); + let chosenPackagesItems = await within(chosenPackagesList).findAllByRole( + 'option' + ); + await waitFor(() => expect(chosenPackagesItems).toHaveLength(3)); const chosenSearchbox = screen.getAllByRole('textbox')[1]; - chosenSearchbox.click(); + await user.click(chosenSearchbox); await searchForChosenPackages(chosenSearchbox, 'lib'); chosenPackagesItems = await within(chosenPackagesList).findAllByRole( 'option' @@ -560,11 +497,15 @@ describe('Step Packages', () => { // eslint-disable-next-line jest-dom/prefer-in-document expect(chosenPackagesItems).toHaveLength(1); - screen - .getByRole('button', { name: /clear chosen packages search/i }) - .click(); - chosenPackagesItems = within(chosenPackagesList).getAllByRole('option'); - expect(chosenPackagesItems).toHaveLength(3); + await user.click( + await screen.findByRole('button', { + name: /clear chosen packages search/i, + }) + ); + chosenPackagesItems = await within(chosenPackagesList).findAllByRole( + 'option' + ); + await waitFor(() => expect(chosenPackagesItems).toHaveLength(3)); }); }); @@ -578,20 +519,15 @@ describe('Step Packages', () => { )); // select aws as upload destination - const awsTile = screen.getByTestId('upload-aws'); - await act(async () => { - awsTile.click(); - await clickNext(); - }); + user.click(screen.getByTestId('upload-aws')); + await clickNext(); // aws step await user.click( screen.getByRole('radio', { name: /manually enter an account id\./i }) ); await user.type(screen.getByTestId('aws-account-id'), '012345678901'); - await act(async () => { - await clickNext(); - }); + await clickNext(); // skip registration await screen.findByRole('textbox', { name: 'Select activation key', @@ -599,12 +535,9 @@ describe('Step Packages', () => { const registerLaterRadio = screen.getByTestId('registration-radio-later'); await user.click(registerLaterRadio); - await act(async () => { - await clickNext(); - - // skip fsc - await clickNext(); - }); + await clickNext(); + // skip fsc + await clickNext(); }; test('search results should be sorted with most relevant results first', async () => { @@ -619,9 +552,7 @@ describe('Step Packages', () => { //const searchbox = screen.getAllByRole('textbox')[0]; // searching by id doesn't update the input ref await waitFor(() => expect(searchbox).toBeEnabled()); - await act(async () => { - searchbox.click(); - }); + user.click(searchbox); await searchForAvailablePackages(searchbox, 'test'); @@ -644,17 +575,15 @@ describe('Step Packages', () => { const searchbox = screen.getAllByRole('textbox')[0]; // searching by id doesn't update the input ref await waitFor(() => expect(searchbox).toBeEnabled()); - await act(async () => { - searchbox.click(); - }); + user.click(searchbox); await searchForAvailablePackages(searchbox, 'test'); - screen.getByTestId('available-pkgs-testPkg').click(); - screen.getByRole('button', { name: /Add selected/ }).click(); + user.click(await screen.findByTestId('available-pkgs-testPkg')); + user.click(screen.getByRole('button', { name: /Add selected/ })); - screen.getByTestId('selected-pkgs-testPkg').click(); - screen.getByRole('button', { name: /Remove selected/ }).click(); + user.click(await screen.findByTestId('selected-pkgs-testPkg')); + user.click(screen.getByRole('button', { name: /Remove selected/ })); const availablePackagesList = screen.getByTestId('available-pkgs-list'); const availablePackagesItems = within(availablePackagesList).getAllByRole( @@ -673,17 +602,17 @@ describe('Step Packages', () => { const searchbox = screen.getAllByRole('textbox')[0]; // searching by id doesn't update the input ref await waitFor(() => expect(searchbox).toBeEnabled()); - searchbox.click(); + user.click(searchbox); await searchForAvailablePackages(searchbox, 'test'); - screen.getByRole('button', { name: /Add all/ }).click(); - screen.getByRole('button', { name: /Remove all/ }).click(); + user.click(screen.getByRole('button', { name: /Add all/ })); + user.click(screen.getByRole('button', { name: /Remove all/ })); const availablePackagesList = screen.getByTestId('available-pkgs-list'); - const availablePackagesItems = within(availablePackagesList).getAllByRole( - 'option' - ); + const availablePackagesItems = await within( + availablePackagesList + ).findAllByRole('option'); expect(availablePackagesItems).toHaveLength(3); const [firstItem, secondItem, thirdItem] = availablePackagesItems; expect(firstItem).toHaveTextContent('testsummary for test package'); @@ -697,22 +626,22 @@ describe('Step Packages', () => { const searchbox = screen.getAllByRole('textbox')[0]; // searching by id doesn't update the input ref await waitFor(() => expect(searchbox).toBeEnabled()); - searchbox.click(); + user.click(searchbox); await searchForAvailablePackages(searchbox, 'test'); - screen.getByRole('button', { name: /Add all/ }).click(); + user.click(screen.getByRole('button', { name: /Add all/ })); // remove a single package - screen.getByTestId('selected-pkgs-lib-test').click(); - screen.getByRole('button', { name: /Remove selected/ }).click(); + user.click(await screen.findByTestId('selected-pkgs-lib-test')); + user.click(screen.getByRole('button', { name: /Remove selected/ })); // skip Custom repositories page - screen.getByRole('button', { name: /Next/ }).click(); + clickNext(); // skip name page - screen.getByRole('button', { name: /Next/ }).click(); + clickNext(); // review page - screen.getByRole('button', { name: /Next/ }).click(); + clickNext(); // await screen.findByTestId('chosen-packages-count'); const chosen = await screen.findByTestId('chosen-packages-count'); @@ -725,7 +654,7 @@ describe('Step Packages', () => { const searchbox = screen.getAllByRole('textbox')[0]; // searching by id doesn't update the input ref await waitFor(() => expect(searchbox).toBeEnabled()); - searchbox.click(); + user.click(searchbox); await searchForAvailablePackages(searchbox, 'asdf'); @@ -739,12 +668,12 @@ describe('Step Packages', () => { const searchboxChosen = screen.getAllByRole('textbox')[1]; await waitFor(() => expect(searchboxAvailable).toBeEnabled()); - searchboxAvailable.click(); + user.click(searchboxAvailable); await searchForAvailablePackages(searchboxAvailable, 'test'); - screen.getByRole('button', { name: /Add all/ }).click(); + user.click(screen.getByRole('button', { name: /Add all/ })); - searchboxChosen.click(); + user.click(searchboxChosen); await user.type(searchboxChosen, 'asdf'); expect(screen.getByText('No packages found')).toBeInTheDocument(); @@ -758,7 +687,7 @@ describe('Step Packages', () => { const searchbox = screen.getAllByRole('textbox')[0]; // searching by id doesn't update the input ref await waitFor(() => expect(searchbox).toBeEnabled()); - searchbox.click(); + user.click(searchbox); const getPackages = jest .spyOn(api, 'getPackagesContentSources') @@ -767,7 +696,7 @@ describe('Step Packages', () => { ); await searchForAvailablePackages(searchbox, 'test'); - expect(getPackages).toHaveBeenCalledTimes(1); + await waitFor(() => expect(getPackages).toHaveBeenCalledTimes(1)); const availablePackagesList = screen.getByTestId('available-pkgs-list'); const availablePackagesItems = within(availablePackagesList).getAllByRole( @@ -787,21 +716,23 @@ describe('Step Packages', () => { const searchbox = screen.getAllByRole('textbox')[0]; await waitFor(() => expect(searchbox).toBeEnabled()); - searchbox.click(); + user.click(searchbox); await searchForAvailablePackages(searchbox, 'test'); const availablePackagesList = screen.getByTestId('available-pkgs-list'); - const availablePackagesItems = within(availablePackagesList).getAllByRole( - 'option' - ); + const availablePackagesItems = await within( + availablePackagesList + ).findAllByRole('option'); expect(availablePackagesItems).toHaveLength(3); - screen - .getByRole('button', { name: /clear available packages search/i }) - .click(); + user.click( + screen.getByRole('button', { name: /clear available packages search/i }) + ); - screen.getByText('Search above to add additionalpackages to your image'); + await screen.findByText( + 'Search above to add additionalpackages to your image' + ); }); test('chosen packages can be reset after filtering', async () => { @@ -810,35 +741,40 @@ describe('Step Packages', () => { const availableSearchbox = screen.getAllByRole('textbox')[0]; await waitFor(() => expect(availableSearchbox).toBeEnabled()); - availableSearchbox.click(); + user.click(availableSearchbox); await searchForAvailablePackages(availableSearchbox, 'test'); const availablePackagesList = screen.getByTestId('available-pkgs-list'); - const availablePackagesItems = within(availablePackagesList).getAllByRole( - 'option' - ); + const availablePackagesItems = await within( + availablePackagesList + ).findAllByRole('option'); expect(availablePackagesItems).toHaveLength(3); - screen.getByRole('button', { name: /Add all/ }).click(); + user.click(screen.getByRole('button', { name: /Add all/ })); const chosenPackagesList = screen.getByTestId('chosen-pkgs-list'); - let chosenPackagesItems = - within(chosenPackagesList).getAllByRole('option'); + let chosenPackagesItems = await within(chosenPackagesList).findAllByRole( + 'option' + ); expect(chosenPackagesItems).toHaveLength(3); const chosenSearchbox = screen.getAllByRole('textbox')[1]; - chosenSearchbox.click(); + user.click(chosenSearchbox); await searchForChosenPackages(chosenSearchbox, 'lib'); chosenPackagesItems = within(chosenPackagesList).getAllByRole('option'); // eslint-disable-next-line jest-dom/prefer-in-document expect(chosenPackagesItems).toHaveLength(1); - screen - .getByRole('button', { name: /clear chosen packages search/i }) - .click(); - chosenPackagesItems = within(chosenPackagesList).getAllByRole('option'); - expect(chosenPackagesItems).toHaveLength(3); + await user.click( + await screen.findByRole('button', { + name: /clear chosen packages search/i, + }) + ); + chosenPackagesItems = await within(chosenPackagesList).findAllByRole( + 'option' + ); + await waitFor(() => expect(chosenPackagesItems).toHaveLength(3)); }); }); }); @@ -849,43 +785,34 @@ describe('Step Custom repositories', () => { ({ router } = renderCustomRoutesWithReduxRouter('imagewizard', {}, routes)); // select aws as upload destination - const awsTile = screen.getByTestId('upload-aws'); - await act(async () => { - awsTile.click(); - await clickNext(); - }); + user.click(await screen.findByTestId('upload-aws')); + await clickNext(); // aws step await user.click( screen.getByRole('radio', { name: /manually enter an account id\./i }) ); await user.type(screen.getByTestId('aws-account-id'), '012345678901'); - await act(async () => { - await clickNext(); - }); + + await clickNext(); // skip registration await screen.findByRole('textbox', { name: 'Select activation key', }); - const registerLaterRadio = screen.getByLabelText('Register later'); - await user.click(registerLaterRadio); - await act(async () => { - await clickNext(); - - // skip fsc - await clickNext(); - - // skip packages - await clickNext(); - }); + user.click(screen.getByLabelText('Register later')); + await clickNext(); + // skip fsc + await clickNext(); + // skip packages + await clickNext(); }; test('selected repositories stored in and retrieved from form state', async () => { await setUp(); - const getFirstRepoCheckbox = () => - screen.findByRole('checkbox', { + const getFirstRepoCheckbox = async () => + await screen.findByRole('checkbox', { name: /select row 0/i, }); let firstRepoCheckbox = await getFirstRepoCheckbox(); @@ -894,10 +821,8 @@ describe('Step Custom repositories', () => { await user.click(firstRepoCheckbox); expect(firstRepoCheckbox.checked).toEqual(true); - await act(async () => { - await clickNext(); - clickBack(); - }); + await clickNext(); + clickBack(); firstRepoCheckbox = await getFirstRepoCheckbox(); expect(firstRepoCheckbox.checked).toEqual(true); @@ -906,10 +831,11 @@ describe('Step Custom repositories', () => { test('correct number of repositories is fetched', async () => { await setUp(); - const selectButton = await screen.findByRole('button', { - name: /select/i, - }); - await user.click(selectButton); + await user.click( + await screen.findByRole('button', { + name: /select/i, + }) + ); screen.getByText(/select all \(1015 items\)/i); }); @@ -933,12 +859,12 @@ describe('Step Custom repositories', () => { expect(rows).toHaveLength(1); // clear filter - screen.getByRole('button', { name: /reset/i }).click(); + await user.click(await screen.findByRole('button', { name: /reset/i })); rows = getRows(); // remove first row from list since it is just header labels rows.shift(); - expect(rows).toHaveLength(10); + await waitFor(() => expect(rows).toHaveLength(10)); }); }); diff --git a/src/test/Components/CreateImageWizard/CreateImageWizard.test.js b/src/test/Components/CreateImageWizard/CreateImageWizard.test.js index 1b0a800d..71cbbca9 100644 --- a/src/test/Components/CreateImageWizard/CreateImageWizard.test.js +++ b/src/test/Components/CreateImageWizard/CreateImageWizard.test.js @@ -3,7 +3,6 @@ import React from 'react'; import '@testing-library/jest-dom'; import { - act, screen, waitFor, waitForElementToBeRemoved, @@ -37,7 +36,7 @@ const routes = [ element: , }, { - path: 'insights/image-builder/share/:composeId', + path: 'insights/image-builder/share /:composeId', element: , }, ]; @@ -82,18 +81,19 @@ jest.mock('@unleash/proxy-client-react', () => ({ const searchForAvailablePackages = async (searchbox, searchTerm) => { const user = userEvent.setup(); await user.type(searchbox, searchTerm); - await act(async () => { - screen - .getByRole('button', { name: /search button for available packages/i }) - .click(); - }); + user.click( + await screen.findByRole('button', { + name: /search button for available packages/i, + }) + ); }; const switchToAWSManual = () => { + const user = userEvent.setup(); const manualRadio = screen.getByRole('radio', { name: /manually enter an account id\./i, }); - manualRadio.click(); + user.click(manualRadio); return manualRadio; }; @@ -138,16 +138,15 @@ describe('Step Image output', () => { const setUp = () => { ({ router } = renderCustomRoutesWithReduxRouter('imagewizard', {}, routes)); - const imageOutputLink = screen.getByRole('button', { - name: 'Image output', - }); - // select aws as upload destination - const awsTile = screen.getByTestId('upload-aws'); - awsTile.click(); + user.click(screen.getByTestId('upload-aws')); // load from sidebar - imageOutputLink.click(); + user.click( + screen.getByRole('button', { + name: 'Image output', + }) + ); }; test('clicking Next loads Upload to AWS', async () => { @@ -156,7 +155,7 @@ describe('Step Image output', () => { await clickNext(); switchToAWSManual(); - screen.getByText('AWS account ID'); + await screen.findByText('AWS account ID'); }); test('clicking Cancel loads landing page', async () => { @@ -180,15 +179,15 @@ describe('Step Image output', () => { const awsTile = screen.getByTestId('upload-aws'); // this has already been clicked once in the setup function - awsTile.click(); // deselect + user.click(awsTile); // deselect const googleTile = screen.getByTestId('upload-google'); - googleTile.click(); // select - googleTile.click(); // deselect + user.click(googleTile); // select + user.click(googleTile); // deselect const azureTile = screen.getByTestId('upload-azure'); - azureTile.click(); // select - azureTile.click(); // deselect + user.click(azureTile); // select + user.click(azureTile); // deselect expect(await getNextButton()).toBeDisabled(); }); @@ -279,8 +278,7 @@ describe('Step Upload to AWS', () => { )); // select aws as upload destination - const awsTile = screen.getByTestId('upload-aws'); - awsTile.click(); + user.click(screen.getByTestId('upload-aws')); await clickNext(); @@ -297,9 +295,7 @@ describe('Step Upload to AWS', () => { await screen.findByTestId('aws-account-id'), '012345678901' ); - await act(async () => { - await clickNext(); - }); + await clickNext(); await screen.findByRole('textbox', { name: 'Select activation key', @@ -311,9 +307,7 @@ describe('Step Upload to AWS', () => { test('clicking Back loads Release', async () => { await setUp(); - await act(async () => { - await clickBack(); - }); + await clickBack(); screen.getByTestId('upload-aws'); }); @@ -327,7 +321,7 @@ describe('Step Upload to AWS', () => { test('component renders error state correctly', async () => { await setUp(); server.use( - rest.get(`${PROVISIONING_API}/sources`, (_req, res, ctx) => + rest.get(`${PROVISIONING_API}/sources`, (req, res, ctx) => res(ctx.status(500)) ) ); @@ -339,59 +333,58 @@ describe('Step Upload to AWS', () => { test('validation works', async () => { await setUp(); + const nextButton = await getNextButton(); // jsdom seems to render the next button differently than the browser. The // next button is enabled briefly during the test. This does not occur in // the browser. Using findByRole instead of getByRole to get the next // button allows us to capture its 'final' state. - expect(await getNextButton()).toHaveClass('pf-m-disabled'); + expect(nextButton).toHaveClass('pf-m-disabled'); await user.click( screen.getByRole('radio', { name: /manually enter an account id\./i }) ); - expect(await getNextButton()).toHaveClass('pf-m-disabled'); + expect(nextButton).toHaveClass('pf-m-disabled'); const awsAccId = screen.getByTestId('aws-account-id'); expect(awsAccId).toHaveValue(''); expect(awsAccId).toBeEnabled(); await user.type(awsAccId, '012345678901'); - expect(await getNextButton()).not.toHaveClass('pf-m-disabled'); + expect(nextButton).not.toHaveClass('pf-m-disabled'); - screen - .getByRole('radio', { name: /use an account configured from sources\./i }) - .click(); + user.click( + screen.getByRole('radio', { + name: /use an account configured from sources\./i, + }) + ); - expect(await getNextButton()).toHaveClass('pf-m-disabled'); + await waitFor(() => expect(nextButton).toHaveClass('pf-m-disabled')); const sourceDropdown = await getSourceDropdown(); - sourceDropdown.click(); + user.click(sourceDropdown); const source = await screen.findByRole('option', { name: /my_source/i, }); - source.click(); + user.click(source); - expect(await getNextButton()).not.toHaveClass('pf-m-disabled'); + await waitFor(() => expect(nextButton).not.toHaveClass('pf-m-disabled')); }); test('compose request share_with_sources field is correct', async () => { await setUp(); const sourceDropdown = await getSourceDropdown(); - sourceDropdown.click(); + user.click(sourceDropdown); const source = await screen.findByRole('option', { name: /my_source/i, }); - await act(async () => { - source.click(); - }); + user.click(source); - await act(async () => { - await clickNext(); - }); + await clickNext(); // registration await screen.findByRole('textbox', { @@ -399,18 +392,14 @@ describe('Step Upload to AWS', () => { }); const registerLaterRadio = screen.getByLabelText('Register later'); - await act(async () => { - await user.click(registerLaterRadio); - }); + await user.click(registerLaterRadio); // click through to review step - await act(async () => { - await clickNext(); - await clickNext(); - await clickNext(); - await clickNext(); - await clickNext(); - }); + await clickNext(); + await clickNext(); + await clickNext(); + await clickNext(); + await clickNext(); const composeImage = jest .spyOn(api, 'composeImage') @@ -438,13 +427,10 @@ describe('Step Upload to AWS', () => { return Promise.resolve({ id }); }); - const create = screen.getByRole('button', { name: /Create/ }); - await act(async () => { - create.click(); - }); + user.click(screen.getByRole('button', { name: /Create/ })); // API request sent to backend - expect(composeImage).toHaveBeenCalledTimes(1); + await waitFor(() => expect(composeImage).toHaveBeenCalledTimes(1)); // returns back to the landing page await waitFor(() => @@ -462,9 +448,8 @@ describe('Step Upload to Google', () => { const setUp = async () => { ({ router } = renderCustomRoutesWithReduxRouter('imagewizard', {}, routes)); - // select aws as upload destination - const awsTile = screen.getByTestId('upload-google'); - awsTile.click(); + // select gcp as upload destination + user.click(screen.getByTestId('upload-google')); await clickNext(); @@ -477,9 +462,7 @@ describe('Step Upload to Google', () => { await setUp(); await user.type(screen.getByTestId('input-google-email'), 'test@test.com'); - await act(async () => { - await clickNext(); - }); + await clickNext(); await screen.findByRole('textbox', { name: 'Select activation key', @@ -529,19 +512,14 @@ describe('Step Registration', () => { ({ router } = renderCustomRoutesWithReduxRouter('imagewizard', {}, routes)); // select aws as upload destination - const awsTile = screen.getByTestId('upload-aws'); - awsTile.click(); + user.click(screen.getByTestId('upload-aws')); - await act(async () => { - await clickNext(); - }); + await clickNext(); await user.click( screen.getByRole('radio', { name: /manually enter an account id\./i }) ); await user.type(screen.getByTestId('aws-account-id'), '012345678901'); - await act(async () => { - await clickNext(); - }); + await clickNext(); await screen.findByRole('textbox', { name: 'Select activation key', @@ -554,9 +532,7 @@ describe('Step Registration', () => { const registerLaterRadio = screen.getByTestId('registration-radio-later'); await user.click(registerLaterRadio); - await act(async () => { - await clickNext(); - }); + await clickNext(); screen.getByRole('heading', { name: /file system configuration/i }); }); @@ -584,37 +560,18 @@ describe('Step Registration', () => { const activationKeyDropdown = await screen.findByRole('textbox', { name: 'Select activation key', }); - await act(async () => { - await user.click(activationKeyDropdown); - }); + await user.click(activationKeyDropdown); const activationKey = await screen.findByRole('option', { name: 'name0', }); - await act(async () => { - await user.click(activationKey); - }); + await user.click(activationKey); screen.getByDisplayValue('name0'); - const n1 = screen.getByRole('button', { name: /Next/ }); - await act(async () => { - n1.click(); - }); - const n2 = screen.getByRole('button', { name: /Next/ }); - await act(async () => { - n2.click(); - }); - const n3 = screen.getByRole('button', { name: /Next/ }); - await act(async () => { - n3.click(); - }); - const n4 = screen.getByRole('button', { name: /Next/ }); - await act(async () => { - n4.click(); - }); - const n5 = screen.getByRole('button', { name: /Next/ }); - await act(async () => { - n5.click(); - }); + await clickNext(); + await clickNext(); + await clickNext(); + await clickNext(); + await clickNext(); const review = screen.getByTestId('review-registration'); expect(review).toHaveTextContent( 'Register with Red Hat Subscription Manager (RHSM)' @@ -629,58 +586,31 @@ describe('Step Registration', () => { test('should allow registering without rhc', async () => { await setUp(); - await act(async () => { - await user.click(screen.getByTestId('registration-additional-options')); - await user.click(screen.getByTestId('registration-checkbox-rhc')); - }); + await user.click(screen.getByTestId('registration-additional-options')); + await user.click(screen.getByTestId('registration-checkbox-rhc')); // going back and forward when rhc isn't selected should keep additional options shown - const back1 = screen.getByRole('button', { name: /Back/ }); - await act(async () => { - back1.click(); - }); + await clickBack(); await screen.findByTestId('aws-account-id'); - const next1 = screen.getByRole('button', { name: /Next/ }); - await act(async () => { - next1.click(); - }); + await clickNext(); screen.getByTestId('registration-checkbox-insights'); screen.getByTestId('registration-checkbox-rhc'); const activationKeyDropdown = await screen.findByRole('textbox', { name: 'Select activation key', }); - await act(async () => { - await user.click(activationKeyDropdown); - }); + await user.click(activationKeyDropdown); const activationKey = await screen.findByRole('option', { name: 'name0', }); - await act(async () => { - await user.click(activationKey); - }); + await user.click(activationKey); screen.getByDisplayValue('name0'); - const n1 = screen.getByRole('button', { name: /Next/ }); - await act(async () => { - n1.click(); - }); - const n2 = screen.getByRole('button', { name: /Next/ }); - await act(async () => { - n2.click(); - }); - const n3 = screen.getByRole('button', { name: /Next/ }); - await act(async () => { - n3.click(); - }); - const n4 = screen.getByRole('button', { name: /Next/ }); - await act(async () => { - n4.click(); - }); - const n5 = screen.getByRole('button', { name: /Next/ }); - await act(async () => { - n5.click(); - }); + await clickNext(); + await clickNext(); + await clickNext(); + await clickNext(); + await clickNext(); const review = screen.getByTestId('review-registration'); expect(review).toHaveTextContent( 'Register with Red Hat Subscription Manager (RHSM)' @@ -699,56 +629,27 @@ describe('Step Registration', () => { await user.click(screen.getByTestId('registration-checkbox-insights')); // going back and forward when neither rhc or insights is selected should keep additional options shown - const b1 = screen.getByRole('button', { name: /Back/ }); - await act(async () => { - b1.click(); - }); + await clickBack(); await screen.findByTestId('aws-account-id'); - const next1 = screen.getByRole('button', { name: /Next/ }); - await act(async () => { - next1.click(); - }); + await clickNext(); screen.getByTestId('registration-checkbox-insights'); screen.getByTestId('registration-checkbox-rhc'); const activationKeyDropdown = await screen.findByRole('textbox', { name: 'Select activation key', }); - await act(async () => { - await user.click(activationKeyDropdown); - }); + await user.click(activationKeyDropdown); const activationKey = await screen.findByRole('option', { name: 'name0', }); - await act(async () => { - await user.click(activationKey); - }); + await user.click(activationKey); screen.getByDisplayValue('name0'); - const n1 = screen.getByRole('button', { name: /Next/ }); - await act(async () => { - n1.click(); - }); - const n2 = screen.getByRole('button', { name: /Next/ }); - await act(async () => { - n2.click(); - }); - const n3 = screen.getByRole('button', { name: /Next/ }); - await act(async () => { - n3.click(); - }); - const n4 = screen.getByRole('button', { name: /Next/ }); - await act(async () => { - n4.click(); - }); - const n5 = screen.getByRole('button', { name: /Next/ }); - await act(async () => { - n5.click(); - }); - const exp1 = screen.getByTestId('registration-expandable'); - await act(async () => { - exp1.click(); - }); + await clickNext(); + await clickNext(); + await clickNext(); + await clickNext(); + await clickNext(); const review = screen.getByTestId('review-registration'); expect(review).toHaveTextContent( 'Register with Red Hat Subscription Manager (RHSM)' @@ -762,58 +663,31 @@ describe('Step Registration', () => { test('should hide input fields when clicking Register the system later', async () => { await setUp(); - const p1 = waitForElementToBeRemoved(() => [ + const removeKeyInformation = waitForElementToBeRemoved(() => [ screen.getByTestId('subscription-activation-key'), ]); // click the later radio button which should remove any input fields - const rrl = screen.getByTestId('registration-radio-later'); - await act(async () => { - rrl.click(); - }); + user.click(screen.getByTestId('registration-radio-later')); - await p1; + await removeKeyInformation; - const n1 = screen.getByRole('button', { name: /Next/ }); - await act(async () => { - n1.click(); - }); - const n2 = screen.getByRole('button', { name: /Next/ }); - await act(async () => { - n2.click(); - }); - const n3 = screen.getByRole('button', { name: /Next/ }); - await act(async () => { - n3.click(); - }); - const n4 = screen.getByRole('button', { name: /Next/ }); - await act(async () => { - n4.click(); - }); - const n5 = screen.getByRole('button', { name: /Next/ }); - await act(async () => { - n5.click(); - }); + await clickNext(); + await clickNext(); + await clickNext(); + await clickNext(); + await clickNext(); screen.getByText('Register the system later'); }); test('registering with rhc implies registering with insights', async () => { await setUp(); - const rro = screen.getByTestId('registration-additional-options'); - await act(async () => { - await user.click(rro); - }); + await user.click(screen.getByTestId('registration-additional-options')); - const rci = screen.getByTestId('registration-checkbox-insights'); - await act(async () => { - await user.click(rci); - }); + await user.click(screen.getByTestId('registration-checkbox-insights')); expect(screen.getByTestId('registration-checkbox-rhc')).not.toBeChecked(); - const rch = screen.getByTestId('registration-checkbox-rhc'); - await act(async () => { - await user.click(rch); - }); + await user.click(screen.getByTestId('registration-checkbox-rhc')); expect(screen.getByTestId('registration-checkbox-insights')).toBeChecked(); }); }); @@ -824,20 +698,16 @@ describe('Step File system configuration', () => { ({ router } = renderCustomRoutesWithReduxRouter('imagewizard', {}, routes)); // select aws as upload destination - const awsTile = screen.getByTestId('upload-aws'); - await act(async () => { - awsTile.click(); - }); - await act(async () => { - await clickNext(); - }); + user.click(screen.getByTestId('upload-aws')); + await clickNext(); // aws step switchToAWSManual(); - await user.type(screen.getByTestId('aws-account-id'), '012345678901'); - await act(async () => { - await clickNext(); - }); + await user.type( + await screen.findByTestId('aws-account-id'), + '012345678901' + ); + await clickNext(); // skip registration await screen.findByRole('textbox', { name: 'Select activation key', @@ -845,9 +715,7 @@ describe('Step File system configuration', () => { const registerLaterRadio = screen.getByTestId('registration-radio-later'); await user.click(registerLaterRadio); - await act(async () => { - await clickNext(); - }); + await clickNext(); }; test('Error validation occurs upon clicking next button', async () => { @@ -856,13 +724,13 @@ describe('Step File system configuration', () => { const manuallyConfigurePartitions = screen.getByText( /manually configure partitions/i ); - manuallyConfigurePartitions.click(); + user.click(manuallyConfigurePartitions); const addPartition = await screen.findByTestId('file-system-add-partition'); // Create duplicate partitions - addPartition.click(); - addPartition.click(); + user.click(addPartition); + user.click(addPartition); expect(await getNextButton()).toBeEnabled(); @@ -883,8 +751,14 @@ describe('Step File system configuration', () => { expect(rows).toHaveLength(3); // Change mountpoint of final row to /var, resolving errors - within(rows[2]).getAllByRole('button', { name: 'Options menu' })[0].click(); - within(rows[2]).getByRole('option', { name: '/var' }).click(); + const mountPointOptions = within(rows[2]).getAllByRole('button', { + name: 'Options menu', + })[0]; + user.click(mountPointOptions); + const varButton = await within(rows[2]).findByRole('option', { + name: '/var', + }); + user.click(varButton); await waitFor(() => expect(mountPointWarning).not.toBeInTheDocument()); await waitFor(() => expect(mountPointAlerts[0]).not.toBeInTheDocument()); @@ -899,18 +773,16 @@ describe('Step Details', () => { ({ router } = renderCustomRoutesWithReduxRouter('imagewizard', {}, routes)); // select aws as upload destination - const awsTile = screen.getByTestId('upload-aws'); - await act(async () => { - awsTile.click(); - await clickNext(); - }); + user.click(screen.getByTestId('upload-aws')); + await clickNext(); // aws step switchToAWSManual(); - await user.type(screen.getByTestId('aws-account-id'), '012345678901'); - await act(async () => { - await clickNext(); - }); + await user.type( + await screen.findByTestId('aws-account-id'), + '012345678901' + ); + await clickNext(); // skip registration await screen.findByRole('textbox', { name: 'Select activation key', @@ -918,16 +790,14 @@ describe('Step Details', () => { const registerLaterRadio = screen.getByTestId('registration-radio-later'); await user.click(registerLaterRadio); - await act(async () => { - await clickNext(); + await clickNext(); - // skip fsc - await clickNext(); - // skip packages - await clickNext(); - // skip repositories - await clickNext(); - }); + // skip fsc + await clickNext(); + // skip packages + await clickNext(); + // skip repositories + await clickNext(); }; test('image name invalid for more than 63 chars', async () => { @@ -939,9 +809,7 @@ describe('Step Details', () => { }); // 101 character name const invalidName = 'a'.repeat(64); - await act(async () => { - await user.type(nameInput, invalidName); - }); + await user.type(nameInput, invalidName); expect(await getNextButton()).toHaveClass('pf-m-disabled'); expect(await getNextButton()).toBeDisabled(); await user.clear(nameInput); @@ -974,18 +842,16 @@ describe('Step Review', () => { ({ router } = renderCustomRoutesWithReduxRouter('imagewizard', {}, routes)); // select aws as upload destination - const awsTile = screen.getByTestId('upload-aws'); - await act(async () => { - awsTile.click(); - await clickNext(); - }); + user.click(screen.getByTestId('upload-aws')); + await clickNext(); // aws step switchToAWSManual(); - await user.type(screen.getByTestId('aws-account-id'), '012345678901'); - await act(async () => { - await clickNext(); - }); + await user.type( + await screen.findByTestId('aws-account-id'), + '012345678901' + ); + await clickNext(); await screen.findByRole('textbox', { name: 'Select activation key', @@ -994,18 +860,16 @@ describe('Step Review', () => { // skip registration const registerLaterRadio = screen.getByTestId('registration-radio-later'); await user.click(registerLaterRadio); - await act(async () => { - await clickNext(); - // skip fsc - await clickNext(); - // skip packages - await clickNext(); - // skip repositories - await clickNext(); - // skip name - await clickNext(); - }); + await clickNext(); + // skip fsc + await clickNext(); + // skip packages + await clickNext(); + // skip repositories + await clickNext(); + // skip name + await clickNext(); }; // eslint-disable-next-line no-unused-vars @@ -1028,28 +892,24 @@ describe('Step Review', () => { await user.click(centos); // select aws as upload destination - const awsTile = screen.getByTestId('upload-aws'); - await act(async () => { - awsTile.click(); - await clickNext(); - }); + user.click(await screen.findByTestId('upload-aws')); + await clickNext(); // aws step switchToAWSManual(); - await user.type(screen.getByTestId('aws-account-id'), '012345678901'); - await act(async () => { - await clickNext(); - - // skip fsc - await clickNext(); - - // skip packages - await clickNext(); - // skip repositories - await clickNext(); - // skip name - await clickNext(); - }); + await user.type( + await screen.findByTestId('aws-account-id'), + '012345678901' + ); + await clickNext(); + // skip fsc + await clickNext(); + // skip packages + await clickNext(); + // skip repositories + await clickNext(); + // skip name + await clickNext(); }; test('has 3 buttons', async () => { @@ -1153,26 +1013,17 @@ describe('Click through all steps', () => { await user.click(screen.getByTestId('checkbox-guest-image')); await user.click(screen.getByTestId('checkbox-image-installer')); - screen.getByRole('button', { name: /Next/ }).click(); + await clickNext(); await user.click( screen.getByRole('radio', { name: /manually enter an account id\./i }) ); await user.type(screen.getByTestId('aws-account-id'), '012345678901'); - const bn1 = screen.getByRole('button', { name: /Next/ }); - await act(async () => { - bn1.click(); - }); + await clickNext(); await user.type(screen.getByTestId('input-google-email'), 'test@test.com'); - const bn2 = screen.getByRole('button', { name: /Next/ }); - await act(async () => { - bn2.click(); - }); + await clickNext(); - const azm = screen.getByTestId('azure-radio-manual'); - await act(async () => { - azm.click(); - }); + await user.click(screen.getByTestId('azure-radio-manual')); // Randomly generated GUID await user.type( screen.getByTestId('azure-tenant-id-manual'), @@ -1186,10 +1037,7 @@ describe('Click through all steps', () => { screen.getByTestId('azure-resource-group-manual'), 'testResourceGroup' ); - const bn4 = screen.getByRole('button', { name: /Next/ }); - await act(async () => { - bn4.click(); - }); + await clickNext(); // registration const activationKeyDropdown = await screen.findByRole('textbox', { @@ -1202,24 +1050,29 @@ describe('Click through all steps', () => { await user.click(activationKey); screen.getByDisplayValue('name0'); - await act(async () => { - await clickNext(); - }); + await clickNext(); // fsc (await screen.findByTestId('file-system-config-radio-manual')).click(); - const ap = await screen.findByTestId('file-system-add-partition'); - ap.click(); - ap.click(); + const addPartition = await screen.findByTestId('file-system-add-partition'); + await user.click(addPartition); + await user.click(addPartition); + const tbody = screen.getByTestId('file-system-configuration-tbody'); const rows = within(tbody).getAllByRole('row'); - expect(rows).toHaveLength(3); - await act(async () => { - await clickNext(); - }); + await waitFor(() => expect(rows).toHaveLength(3)); + await clickNext(); + // set mountpoint of final row to /var/tmp - within(rows[2]).getAllByRole('button', { name: 'Options menu' })[0].click(); - within(rows[2]).getByRole('option', { name: '/var' }).click(); + const mountPointMenu = within(rows[2]).getAllByRole('button', { + name: 'Options menu', + })[0]; + user.click(mountPointMenu); + + const varButton = await within(rows[2]).findByRole('option', { + name: '/var', + }); + user.click(varButton); await waitForElementToBeRemoved(() => screen.queryAllByRole('heading', { name: 'Danger alert: Duplicate mount point.', @@ -1237,11 +1090,16 @@ describe('Click through all steps', () => { within(rows[2]).getByRole('textbox', { name: 'Size text input' }), '{backspace}100' ); - within(rows[2]).getAllByRole('button', { name: 'Options menu' })[1].click(); - within(rows[2]).getByRole('option', { name: 'MiB' }).click(); - await act(async () => { - await clickNext(); + const unitMenu = within(rows[2]).getAllByRole('button', { + name: 'Options menu', + })[1]; + user.click(unitMenu); + + const mibButton = await within(rows[2]).findByRole('option', { + name: 'MiB', }); + user.click(mibButton); + await clickNext(); screen.getByText( /Images built with Image Builder include all required packages/i @@ -1252,19 +1110,13 @@ describe('Click through all steps', () => { await waitFor(() => expect(searchbox).toBeEnabled()); await searchForAvailablePackages(searchbox, 'test'); - const bot = screen.getByRole('option', { - name: /test summary for test package/, - }); - await act(async () => { - bot.click(); - }); - const bas = screen.getByRole('button', { name: /Add selected/ }); - await act(async () => { - bas.click(); - }); - await act(async () => { - await clickNext(); - }); + user.click( + await screen.findByRole('option', { + name: /test summary for test package/, + }) + ); + user.click(screen.getByRole('button', { name: /Add selected/ })); + await clickNext(); // Custom repositories await user.click( @@ -1274,38 +1126,32 @@ describe('Click through all steps', () => { await screen.findByRole('checkbox', { name: /select row 1/i }) ); - await act(async () => { - await clickNext(); - // Custom packages - await clickNext(); - }); + await clickNext(); + // Custom packages + await clickNext(); // Enter image name const nameInput = screen.getByRole('textbox', { name: 'Image Name', }); - await act(async () => { - await user.type(nameInput, 'my-image-name'); - }); + await user.type(nameInput, 'my-image-name'); // Enter description for image const descriptionInput = screen.getByRole('textbox', { name: /Description/, }); - await act(async () => { - await user.type( - descriptionInput, - 'this is a perfect description for image' - ); - await clickNext(); - }); + await user.type( + descriptionInput, + 'this is a perfect description for image' + ); + await clickNext(); // review const targetEnvironmentsExpandable = await screen.findByTestId( 'target-environments-expandable' ); - targetEnvironmentsExpandable.click(); + user.click(targetEnvironmentsExpandable); await screen.findAllByText('AWS'); await screen.findAllByText('GCP'); await screen.findByText('VMWare vSphere (.ova)'); @@ -1315,9 +1161,7 @@ describe('Click through all steps', () => { const registrationExpandable = await screen.findByTestId( 'registration-expandable' ); - await act(async () => { - registrationExpandable.click(); - }); + user.click(registrationExpandable); const review = screen.getByTestId('review-registration'); expect(review).toHaveTextContent( 'Use remote host configuration (rhc) utility' @@ -1326,9 +1170,7 @@ describe('Click through all steps', () => { const imageDetailsExpandable = await screen.findByTestId( 'image-details-expandable' ); - await act(async () => { - imageDetailsExpandable.click(); - }); + user.click(imageDetailsExpandable); await screen.findByText('my-image-name'); await screen.findByText('this is a perfect description for image'); @@ -1336,19 +1178,13 @@ describe('Click through all steps', () => { await screen.findByText('Self-Support'); await screen.findByText('Production'); - const brp = screen.getByTestId('repositories-popover-button'); - await act(async () => { - brp.click(); - }); + user.click(screen.getByTestId('repositories-popover-button')); const repotbody = await screen.findByTestId( 'additional-repositories-table' ); expect(within(repotbody).getAllByRole('row')).toHaveLength(3); - const fsc = screen.getByTestId('file-system-configuration-popover'); - await act(async () => { - fsc.click(); - }); + user.click(screen.getByTestId('file-system-configuration-popover')); const revtbody = await screen.findByTestId( 'file-system-configuration-tbody-review' ); @@ -1484,10 +1320,7 @@ describe('Click through all steps', () => { return Promise.resolve({ id }); }); - const create = screen.getByRole('button', { name: /Create/ }); - await act(async () => { - await user.click(create); - }); + await user.click(screen.getByRole('button', { name: /Create/ })); // API request sent to backend expect(composeImage).toHaveBeenCalledTimes(6); @@ -1509,16 +1342,14 @@ describe('Keyboard accessibility', () => { }; const selectAllEnvironments = () => { - const awsTile = screen.getByTestId('upload-aws'); - awsTile.click(); - const googleTile = screen.getByTestId('upload-google'); - googleTile.click(); - const azureTile = screen.getByTestId('upload-azure'); - azureTile.click(); - const virtualizationCheckbox = screen.getByRole('checkbox', { - name: /virtualization guest image checkbox/i, - }); - virtualizationCheckbox.click(); + user.click(screen.getByTestId('upload-aws')); + user.click(screen.getByTestId('upload-google')); + user.click(screen.getByTestId('upload-azure')); + user.click( + screen.getByRole('checkbox', { + name: /virtualization guest image checkbox/i, + }) + ); }; test('autofocus on each step first input element', async () => { @@ -1526,22 +1357,18 @@ describe('Keyboard accessibility', () => { // Image output selectAllEnvironments(); - await act(async () => { - await clickNext(); - }); + await clickNext(); // Target environment aws expect(screen.getByTestId('aws-radio-source')).toHaveFocus(); const awsSourceDropdown = await getSourceDropdown(); - awsSourceDropdown.click(); + user.click(awsSourceDropdown); const awsSource = await screen.findByRole('option', { name: /my_source/i, }); - awsSource.click(); + user.click(awsSource); - await act(async () => { - await clickNext(); - }); + await clickNext(); // Target environment google const googleAccountRadio = screen.getByRole('radio', { @@ -1549,27 +1376,23 @@ describe('Keyboard accessibility', () => { }); expect(googleAccountRadio).toHaveFocus(); await user.type(screen.getByTestId('input-google-email'), 'test@test.com'); - await act(async () => { - await clickNext(); - }); + await clickNext(); // Target environment azure expect(screen.getByTestId('azure-radio-source')).toHaveFocus(); const azureSourceDropdown = await getSourceDropdown(); - azureSourceDropdown.click(); + user.click(azureSourceDropdown); const azureSource = await screen.findByRole('option', { name: /azureSource1/i, }); - azureSource.click(); + user.click(azureSource); const resourceGroupDropdown = await screen.findByRole('textbox', { name: /select resource group/i, }); await user.click(resourceGroupDropdown); await user.click(screen.getByLabelText('Resource group myResourceGroup1')); - await act(async () => { - await clickNext(); - }); + await clickNext(); // Registration await screen.findByText( @@ -1584,24 +1407,16 @@ describe('Keyboard accessibility', () => { const registerLaterRadio = screen.getByTestId('registration-radio-later'); await user.click(registerLaterRadio); - await act(async () => { - await clickNext(); - }); + await clickNext(); // File system configuration - await act(async () => { - await clickNext(); - }); + await clickNext(); // Packages - let availablePackagesInput; - // eslint-disable-next-line testing-library/no-unnecessary-act - await act(async () => { - const view = screen.getByTestId('search-available-pkgs-input'); + const view = screen.getByTestId('search-available-pkgs-input'); - availablePackagesInput = within(view).getByRole('textbox', { - name: /search input/i, - }); + const availablePackagesInput = within(view).getByRole('textbox', { + name: /search input/i, }); await waitFor(() => expect(availablePackagesInput).toBeEnabled()); expect(availablePackagesInput).toHaveFocus(); @@ -1613,24 +1428,20 @@ describe('Keyboard accessibility', () => { // Name const nameInput = screen.getByRole('textbox', { name: /image name/i }); expect(nameInput).toHaveFocus(); - await act(async () => { - await clickNext(); - }); + await clickNext(); }); test('pressing Esc closes the wizard', async () => { await setUp(); // wizard needs to be interacted with for the esc key to work - const awsTile = screen.getByTestId('upload-aws'); - await user.click(awsTile); + await user.click(screen.getByTestId('upload-aws')); await user.keyboard('{escape}'); expect(router.state.location.pathname).toBe('/insights/image-builder'); }); test('pressing Enter does not advance the wizard', async () => { await setUp(); - const awsTile = screen.getByTestId('upload-aws'); - await user.click(awsTile); + await user.click(screen.getByTestId('upload-aws')); await user.keyboard('{enter}'); screen.getByRole('heading', { name: /image output/i,