test: Cleanup Packages tests
This cleans up Packages test file after relevant tests were moved there from `CreateImageWizard.content.test.tsx`.
This commit is contained in:
regexowl
Klara Simickova
parent
f31842d2d0
commit
2bb82b70c1
1 changed files with 366 additions and 511 deletions
|
|
@ -1,10 +1,7 @@
|
|||
import React from 'react';
|
||||
|
||||
import { Router as RemixRouter } from '@remix-run/router/dist/router';
|
||||
import { screen, waitFor, within } from '@testing-library/react';
|
||||
import { userEvent } from '@testing-library/user-event';
|
||||
|
||||
import CreateImageWizard from '../../../../../Components/CreateImageWizard/CreateImageWizard';
|
||||
import { CREATE_BLUEPRINT, EDIT_BLUEPRINT } from '../../../../../constants';
|
||||
import { CreateBlueprintRequest } from '../../../../../store/imageBuilderApi';
|
||||
import { mockBlueprintIds } from '../../../../fixtures/blueprints';
|
||||
|
|
@ -15,7 +12,6 @@ import {
|
|||
expectedSinglePackageRecommendation,
|
||||
packagesCreateBlueprintRequest,
|
||||
} from '../../../../fixtures/editMode';
|
||||
import { renderCustomRoutesWithReduxRouter } from '../../../../testUtils';
|
||||
import {
|
||||
clickBack,
|
||||
clickNext,
|
||||
|
|
@ -33,12 +29,18 @@ import {
|
|||
renderEditMode,
|
||||
} from '../../wizardTestUtils';
|
||||
|
||||
const goToPackagesStep = async () => {
|
||||
const router: RemixRouter | undefined = undefined;
|
||||
|
||||
const selectGuestImageTarget = async () => {
|
||||
const user = userEvent.setup();
|
||||
const guestImageCheckBox = await screen.findByRole('checkbox', {
|
||||
name: /virtualization guest image checkbox/i,
|
||||
});
|
||||
await waitFor(() => user.click(guestImageCheckBox));
|
||||
};
|
||||
|
||||
const goToPackagesStep = async () => {
|
||||
await selectGuestImageTarget();
|
||||
await clickNext(); // Registration
|
||||
await clickRegisterLater();
|
||||
await clickNext(); // OpenSCAP
|
||||
|
|
@ -55,26 +57,39 @@ const goToReviewStep = async () => {
|
|||
await clickNext(); // Review
|
||||
};
|
||||
|
||||
const searchForPackage = async () => {
|
||||
const typeIntoSearchBox = async (searchTerm: string) => {
|
||||
const user = userEvent.setup();
|
||||
const searchBox = await screen.findByRole('textbox', {
|
||||
const searchbox = await screen.findByRole('textbox', {
|
||||
name: /search packages/i,
|
||||
});
|
||||
await waitFor(() => user.type(searchBox, 'test'));
|
||||
await waitFor(() => user.type(searchbox, searchTerm));
|
||||
};
|
||||
|
||||
const searchForGroup = async () => {
|
||||
const clearSearchInput = async () => {
|
||||
const user = userEvent.setup();
|
||||
const searchBox = await screen.findByRole('textbox', {
|
||||
name: /search packages/i,
|
||||
const clearSearchBtn = await screen.findByRole('button', {
|
||||
name: /clear-package-search/i,
|
||||
});
|
||||
await waitFor(() => user.type(searchBox, '@grouper'));
|
||||
await waitFor(() => user.click(clearSearchBtn));
|
||||
};
|
||||
|
||||
const getRowsIn = async () => {
|
||||
const getAllCheckboxes = async () => {
|
||||
const pkgTable = await screen.findByTestId('packages-table');
|
||||
await screen.findAllByTestId('package-row');
|
||||
|
||||
const checkboxes = await within(pkgTable).findAllByRole('checkbox', {
|
||||
name: /select row/i,
|
||||
});
|
||||
|
||||
return checkboxes;
|
||||
};
|
||||
|
||||
const getRows = async () => {
|
||||
const packagesTable = await screen.findByTestId('packages-table');
|
||||
const getRows = async () =>
|
||||
await within(packagesTable).findAllByTestId('package-row');
|
||||
return await within(packagesTable).findAllByTestId('package-row');
|
||||
};
|
||||
|
||||
const comparePackageSearchResults = async () => {
|
||||
const availablePackages = await getRows();
|
||||
await waitFor(() => expect(availablePackages).toHaveLength(6));
|
||||
|
||||
|
|
@ -86,15 +101,7 @@ const getRowsIn = async () => {
|
|||
expect(availablePackages[5]).toHaveTextContent('lib-test-sources');
|
||||
};
|
||||
|
||||
const clearSearchInput = async () => {
|
||||
const user = userEvent.setup();
|
||||
const clearSearchBtn = await screen.findByRole('button', {
|
||||
name: /clear-package-search/i,
|
||||
});
|
||||
await waitFor(() => user.click(clearSearchBtn));
|
||||
};
|
||||
|
||||
const selectFirstPackage = async () => {
|
||||
const clickFirstPackageCheckbox = async () => {
|
||||
const user = userEvent.setup();
|
||||
const row0Checkbox = await screen.findByRole('checkbox', {
|
||||
name: /select row 0/i,
|
||||
|
|
@ -102,12 +109,26 @@ const selectFirstPackage = async () => {
|
|||
await waitFor(async () => user.click(row0Checkbox));
|
||||
};
|
||||
|
||||
const deselectFirstPackage = async () => {
|
||||
const toggleSelected = async () => {
|
||||
const user = userEvent.setup();
|
||||
const row0Checkbox = await screen.findByRole('checkbox', {
|
||||
name: /select row 0/i,
|
||||
const selected = await screen.findByRole('button', { name: /selected/i });
|
||||
await waitFor(async () => user.click(selected));
|
||||
};
|
||||
|
||||
const openIncludedPackagesPopover = async () => {
|
||||
const user = userEvent.setup();
|
||||
const popoverBtn = await screen.findByRole('button', {
|
||||
name: /About included packages/i,
|
||||
});
|
||||
await waitFor(async () => user.click(row0Checkbox));
|
||||
await waitFor(() => user.click(popoverBtn));
|
||||
};
|
||||
|
||||
const checkRecommendationsEmptyState = async () => {
|
||||
await screen.findByRole('button', {
|
||||
name: /Recommended Red Hat packages/,
|
||||
});
|
||||
|
||||
await screen.findByText('Select packages to generate recommendations.');
|
||||
};
|
||||
|
||||
const addSingleRecommendation = async () => {
|
||||
|
|
@ -122,14 +143,6 @@ const addAllRecommendations = async () => {
|
|||
await waitFor(async () => user.click(addAllBtn));
|
||||
};
|
||||
|
||||
const switchToSelected = async () => {
|
||||
const user = userEvent.setup();
|
||||
const selectedBtn = await screen.findByRole('button', {
|
||||
name: /selected \(\d*\)/i,
|
||||
});
|
||||
await waitFor(async () => user.click(selectedBtn));
|
||||
};
|
||||
|
||||
const deselectRecommendation = async () => {
|
||||
const user = userEvent.setup();
|
||||
const row1Checkbox = await screen.findByRole('checkbox', {
|
||||
|
|
@ -138,15 +151,254 @@ const deselectRecommendation = async () => {
|
|||
await waitFor(async () => user.click(row1Checkbox));
|
||||
};
|
||||
|
||||
const openIncludedPackagesPopover = async () => {
|
||||
const user = userEvent.setup();
|
||||
const popoverBtn = await screen.findByRole('button', {
|
||||
name: /About included packages/i,
|
||||
describe('Step Packages', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
await waitFor(() => user.click(popoverBtn));
|
||||
};
|
||||
|
||||
describe('packages request generated correctly', () => {
|
||||
const user = userEvent.setup();
|
||||
|
||||
test('clicking Next loads First boot', async () => {
|
||||
await renderCreateMode();
|
||||
await goToPackagesStep();
|
||||
await clickNext();
|
||||
await screen.findByRole('heading', {
|
||||
name: 'First boot configuration',
|
||||
});
|
||||
});
|
||||
|
||||
test('clicking Back loads Custom repositories', async () => {
|
||||
await renderCreateMode();
|
||||
await goToPackagesStep();
|
||||
await clickBack();
|
||||
await screen.findByRole('heading', {
|
||||
name: 'Custom repositories',
|
||||
});
|
||||
});
|
||||
|
||||
test('clicking Cancel loads landing page', async () => {
|
||||
await renderCreateMode();
|
||||
await goToPackagesStep();
|
||||
await verifyCancelButton(router);
|
||||
});
|
||||
|
||||
test('should display search bar and toggle buttons', async () => {
|
||||
await renderCreateMode();
|
||||
await goToPackagesStep();
|
||||
await typeIntoSearchBox('test');
|
||||
await screen.findByRole('button', {
|
||||
name: /Available/,
|
||||
});
|
||||
await screen.findByRole('button', {
|
||||
name: /Selected/,
|
||||
});
|
||||
});
|
||||
|
||||
test('should display default state', async () => {
|
||||
await renderCreateMode();
|
||||
await goToPackagesStep();
|
||||
await screen.findByText(
|
||||
'Search above to add additionalpackages to your image.'
|
||||
);
|
||||
});
|
||||
|
||||
test('should display an exact match if found regardless of too many results', async () => {
|
||||
await renderCreateMode();
|
||||
await goToPackagesStep();
|
||||
await typeIntoSearchBox('testPkg-123');
|
||||
await screen.findByTestId('exact-match-row');
|
||||
await screen.findByRole('heading', {
|
||||
name: /too many results to display/i,
|
||||
});
|
||||
});
|
||||
|
||||
test('search results should be sorted with most relevant results first', async () => {
|
||||
await renderCreateMode();
|
||||
await goToPackagesStep();
|
||||
await selectCustomRepo();
|
||||
await typeIntoSearchBox('test');
|
||||
await comparePackageSearchResults();
|
||||
});
|
||||
|
||||
test('selected packages are sorted the same way as available packages', async () => {
|
||||
await renderCreateMode();
|
||||
await goToPackagesStep();
|
||||
await selectCustomRepo();
|
||||
await typeIntoSearchBox('test');
|
||||
|
||||
// select all packages
|
||||
const checkboxes = await getAllCheckboxes();
|
||||
for (const checkbox in checkboxes) {
|
||||
user.click(checkboxes[checkbox]);
|
||||
}
|
||||
|
||||
await toggleSelected();
|
||||
await comparePackageSearchResults();
|
||||
});
|
||||
|
||||
test('selected packages persist throughout steps', async () => {
|
||||
await renderCreateMode();
|
||||
await goToPackagesStep();
|
||||
await typeIntoSearchBox('test');
|
||||
|
||||
const checkboxes = await getAllCheckboxes();
|
||||
let firstPkgCheckbox = checkboxes[0] as HTMLInputElement;
|
||||
|
||||
expect(firstPkgCheckbox.checked).toEqual(false);
|
||||
user.click(firstPkgCheckbox);
|
||||
await waitFor(() => expect(firstPkgCheckbox.checked).toEqual(true));
|
||||
await clickNext();
|
||||
await clickBack();
|
||||
firstPkgCheckbox = checkboxes[0] as HTMLInputElement;
|
||||
expect(firstPkgCheckbox.checked).toEqual(true);
|
||||
});
|
||||
|
||||
test('should display empty available state on failed search', async () => {
|
||||
await renderCreateMode();
|
||||
await goToPackagesStep();
|
||||
await typeIntoSearchBox('asdf');
|
||||
await screen.findByText('No results found');
|
||||
});
|
||||
|
||||
test('should display too many results state for more than 100 results', async () => {
|
||||
await renderCreateMode();
|
||||
await goToPackagesStep();
|
||||
await typeIntoSearchBox('te');
|
||||
await screen.findByText('Too many results to display');
|
||||
});
|
||||
|
||||
test('should display too short', async () => {
|
||||
await renderCreateMode();
|
||||
await goToPackagesStep();
|
||||
await typeIntoSearchBox('t');
|
||||
await screen.findByText('The search value is too short');
|
||||
});
|
||||
|
||||
test('should display relevant results in selected first', async () => {
|
||||
await renderCreateMode();
|
||||
await goToPackagesStep();
|
||||
await selectCustomRepo();
|
||||
await typeIntoSearchBox('test');
|
||||
|
||||
const checkboxes = await getAllCheckboxes();
|
||||
|
||||
user.click(checkboxes[0]);
|
||||
user.click(checkboxes[1]);
|
||||
|
||||
await clearSearchInput();
|
||||
await typeIntoSearchBox('mock');
|
||||
await screen.findByText(/mockPkg/);
|
||||
|
||||
user.click(checkboxes[0]);
|
||||
user.click(checkboxes[1]);
|
||||
|
||||
await toggleSelected();
|
||||
await clearSearchInput();
|
||||
await typeIntoSearchBox('test');
|
||||
|
||||
const availablePackages = await getRows();
|
||||
expect(availablePackages[0]).toHaveTextContent('test');
|
||||
expect(availablePackages[1]).toHaveTextContent('test-sources');
|
||||
});
|
||||
|
||||
test('should display recommendations', async () => {
|
||||
await renderCreateMode();
|
||||
await goToPackagesStep();
|
||||
await checkRecommendationsEmptyState();
|
||||
await typeIntoSearchBox('test');
|
||||
await clickFirstPackageCheckbox();
|
||||
|
||||
await screen.findByText('recommendedPackage1');
|
||||
await screen.findByText('recommendedPackage2');
|
||||
await screen.findByText('recommendedPackage3');
|
||||
});
|
||||
|
||||
test('allow to add recommendations to selected', async () => {
|
||||
await renderCreateMode();
|
||||
await goToPackagesStep();
|
||||
await checkRecommendationsEmptyState();
|
||||
await typeIntoSearchBox('test');
|
||||
await clickFirstPackageCheckbox();
|
||||
await addSingleRecommendation();
|
||||
await toggleSelected();
|
||||
|
||||
const pkgTable = await screen.findByTestId('packages-table');
|
||||
await within(pkgTable).findByText('recommendedPackage1');
|
||||
});
|
||||
|
||||
describe('Pagination', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
test('itemcount correct after search', async () => {
|
||||
await renderCreateMode();
|
||||
await goToPackagesStep();
|
||||
await selectCustomRepo();
|
||||
await typeIntoSearchBox('test'); // search for 'test' package
|
||||
await clickFirstPackageCheckbox(); // select
|
||||
|
||||
// the pagination in the top right
|
||||
const top = await screen.findByTestId('packages-pagination-top');
|
||||
expect(top).toHaveTextContent('of 6');
|
||||
const bottom = await screen.findByTestId('packages-pagination-bottom');
|
||||
expect(bottom).toHaveTextContent('of 6');
|
||||
});
|
||||
|
||||
test('itemcount correct after toggling selected', async () => {
|
||||
await renderCreateMode();
|
||||
await goToPackagesStep();
|
||||
await typeIntoSearchBox('test'); // search for 'test' package
|
||||
await clickFirstPackageCheckbox(); // select
|
||||
await toggleSelected();
|
||||
|
||||
// the pagination in the top right
|
||||
const top = await screen.findByTestId('packages-pagination-top');
|
||||
expect(top).toHaveTextContent('of 1');
|
||||
const bottom = await screen.findByTestId('packages-pagination-bottom');
|
||||
expect(bottom).toHaveTextContent('of 1');
|
||||
});
|
||||
|
||||
test('itemcount correct after clearing search input', async () => {
|
||||
await renderCreateMode();
|
||||
await goToPackagesStep();
|
||||
await typeIntoSearchBox('test'); // search for 'test' package
|
||||
await clickFirstPackageCheckbox(); // select
|
||||
await clearSearchInput();
|
||||
|
||||
// the pagination in the top right
|
||||
const top = await screen.findByTestId('packages-pagination-top');
|
||||
expect(top).toHaveTextContent('of 0');
|
||||
const bottom = await screen.findByTestId('packages-pagination-bottom');
|
||||
expect(bottom).toHaveTextContent('of 0');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Package groups', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
test('included packages popover', async () => {
|
||||
await renderCreateMode();
|
||||
await goToPackagesStep();
|
||||
await typeIntoSearchBox('@grouper'); // search for '@grouper' package group
|
||||
await clickFirstPackageCheckbox(); // select
|
||||
await openIncludedPackagesPopover();
|
||||
|
||||
const table = await screen.findByTestId('group-included-packages-table');
|
||||
const rows = await within(table).findAllByRole('row');
|
||||
expect(rows).toHaveLength(2);
|
||||
|
||||
const firstRowCells = await within(rows[0]).findAllByRole('cell');
|
||||
expect(firstRowCells[0]).toHaveTextContent('fish1');
|
||||
const secondRowCells = await within(rows[1]).findAllByRole('cell');
|
||||
await waitFor(() => expect(secondRowCells[0]).toHaveTextContent('fish2'));
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Packages request generated correctly', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
|
@ -154,8 +406,8 @@ describe('packages request generated correctly', () => {
|
|||
test('with custom packages', async () => {
|
||||
await renderCreateMode();
|
||||
await goToPackagesStep();
|
||||
await searchForPackage();
|
||||
await selectFirstPackage();
|
||||
await typeIntoSearchBox('test'); // search for 'test' package
|
||||
await clickFirstPackageCheckbox(); // select
|
||||
await goToReviewStep();
|
||||
// informational modal pops up in the first test only as it's tied
|
||||
// to a 'imageBuilder.saveAndBuildModalSeen' variable in localStorage
|
||||
|
|
@ -175,9 +427,9 @@ describe('packages request generated correctly', () => {
|
|||
test('deselecting a package removes it from the request', async () => {
|
||||
await renderCreateMode();
|
||||
await goToPackagesStep();
|
||||
await searchForPackage();
|
||||
await selectFirstPackage();
|
||||
await deselectFirstPackage();
|
||||
await typeIntoSearchBox('test'); // search for 'test' package
|
||||
await clickFirstPackageCheckbox(); // select
|
||||
await clickFirstPackageCheckbox(); // deselect
|
||||
await goToReviewStep();
|
||||
const receivedRequest = await interceptBlueprintRequest(CREATE_BLUEPRINT);
|
||||
|
||||
|
|
@ -189,8 +441,8 @@ describe('packages request generated correctly', () => {
|
|||
test('with custom groups', async () => {
|
||||
await renderCreateMode();
|
||||
await goToPackagesStep();
|
||||
await searchForGroup();
|
||||
await selectFirstPackage();
|
||||
await typeIntoSearchBox('@grouper'); // search for '@grouper' package group
|
||||
await clickFirstPackageCheckbox(); // select
|
||||
await goToReviewStep();
|
||||
|
||||
const receivedRequest = await interceptBlueprintRequest(CREATE_BLUEPRINT);
|
||||
|
|
@ -207,82 +459,82 @@ describe('packages request generated correctly', () => {
|
|||
test('deselecting a group removes it from the request', async () => {
|
||||
await renderCreateMode();
|
||||
await goToPackagesStep();
|
||||
await searchForGroup();
|
||||
await selectFirstPackage();
|
||||
await switchToSelected();
|
||||
await deselectFirstPackage();
|
||||
await typeIntoSearchBox('@grouper'); // search for '@grouper' package group
|
||||
await clickFirstPackageCheckbox(); // select
|
||||
await toggleSelected();
|
||||
await clickFirstPackageCheckbox(); // deselect
|
||||
await goToReviewStep();
|
||||
|
||||
const receivedRequest = await interceptBlueprintRequest(CREATE_BLUEPRINT);
|
||||
const expectedRequest = blueprintRequest;
|
||||
expect(receivedRequest).toEqual(expectedRequest);
|
||||
});
|
||||
});
|
||||
|
||||
describe('package recommendations', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
describe('Package recommendations', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
test('selecting single recommendation adds it to the request', async () => {
|
||||
await renderCreateMode();
|
||||
await goToPackagesStep();
|
||||
await searchForPackage();
|
||||
await selectFirstPackage();
|
||||
await addSingleRecommendation();
|
||||
await goToReviewStep();
|
||||
const receivedRequest = await interceptBlueprintRequest(CREATE_BLUEPRINT);
|
||||
test('selecting single recommendation adds it to the request', async () => {
|
||||
await renderCreateMode();
|
||||
await goToPackagesStep();
|
||||
await typeIntoSearchBox('test'); // search for 'test' package
|
||||
await clickFirstPackageCheckbox(); // select
|
||||
await addSingleRecommendation();
|
||||
await goToReviewStep();
|
||||
const receivedRequest = await interceptBlueprintRequest(CREATE_BLUEPRINT);
|
||||
|
||||
const expectedRequest: CreateBlueprintRequest = {
|
||||
...blueprintRequest,
|
||||
customizations: {
|
||||
packages: expectedSinglePackageRecommendation,
|
||||
},
|
||||
};
|
||||
const expectedRequest: CreateBlueprintRequest = {
|
||||
...blueprintRequest,
|
||||
customizations: {
|
||||
packages: expectedSinglePackageRecommendation,
|
||||
},
|
||||
};
|
||||
|
||||
expect(receivedRequest).toEqual(expectedRequest);
|
||||
});
|
||||
|
||||
test('clicking "Add all packages" adds all recommendations to the request', async () => {
|
||||
await renderCreateMode();
|
||||
await goToPackagesStep();
|
||||
await searchForPackage();
|
||||
await selectFirstPackage();
|
||||
await addAllRecommendations();
|
||||
await goToReviewStep();
|
||||
const receivedRequest = await interceptBlueprintRequest(CREATE_BLUEPRINT);
|
||||
|
||||
const expectedRequest: CreateBlueprintRequest = {
|
||||
...blueprintRequest,
|
||||
customizations: {
|
||||
packages: expectedAllPackageRecommendations,
|
||||
},
|
||||
};
|
||||
|
||||
expect(receivedRequest).toEqual(expectedRequest);
|
||||
});
|
||||
|
||||
test('deselecting a package recommendation removes it from the request', async () => {
|
||||
await renderCreateMode();
|
||||
await goToPackagesStep();
|
||||
await searchForPackage();
|
||||
await selectFirstPackage();
|
||||
await addSingleRecommendation();
|
||||
await switchToSelected();
|
||||
await deselectRecommendation();
|
||||
await goToReviewStep();
|
||||
const receivedRequest = await interceptBlueprintRequest(CREATE_BLUEPRINT);
|
||||
|
||||
const expectedRequest: CreateBlueprintRequest = {
|
||||
...blueprintRequest,
|
||||
customizations: {
|
||||
packages: expectedPackagesWithoutRecommendations,
|
||||
},
|
||||
};
|
||||
|
||||
await waitFor(() => {
|
||||
expect(receivedRequest).toEqual(expectedRequest);
|
||||
});
|
||||
|
||||
test('clicking "Add all packages" adds all recommendations to the request', async () => {
|
||||
await renderCreateMode();
|
||||
await goToPackagesStep();
|
||||
await typeIntoSearchBox('test'); // search for 'test' package
|
||||
await clickFirstPackageCheckbox(); // select
|
||||
await addAllRecommendations();
|
||||
await goToReviewStep();
|
||||
const receivedRequest = await interceptBlueprintRequest(CREATE_BLUEPRINT);
|
||||
|
||||
const expectedRequest: CreateBlueprintRequest = {
|
||||
...blueprintRequest,
|
||||
customizations: {
|
||||
packages: expectedAllPackageRecommendations,
|
||||
},
|
||||
};
|
||||
|
||||
expect(receivedRequest).toEqual(expectedRequest);
|
||||
});
|
||||
|
||||
test('deselecting a package recommendation removes it from the request', async () => {
|
||||
await renderCreateMode();
|
||||
await goToPackagesStep();
|
||||
await typeIntoSearchBox('test'); // search for 'test' package
|
||||
await clickFirstPackageCheckbox(); // select
|
||||
await addSingleRecommendation();
|
||||
await toggleSelected();
|
||||
await deselectRecommendation();
|
||||
await goToReviewStep();
|
||||
const receivedRequest = await interceptBlueprintRequest(CREATE_BLUEPRINT);
|
||||
|
||||
const expectedRequest: CreateBlueprintRequest = {
|
||||
...blueprintRequest,
|
||||
customizations: {
|
||||
packages: expectedPackagesWithoutRecommendations,
|
||||
},
|
||||
};
|
||||
|
||||
await waitFor(() => {
|
||||
expect(receivedRequest).toEqual(expectedRequest);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -303,400 +555,3 @@ describe('Packages edit mode', () => {
|
|||
expect(receivedRequest).toEqual(expectedRequest);
|
||||
});
|
||||
});
|
||||
|
||||
describe('pagination on packages step', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
test('itemcount correct after search', async () => {
|
||||
await renderCreateMode();
|
||||
await goToPackagesStep();
|
||||
await selectCustomRepo();
|
||||
await searchForPackage();
|
||||
await selectFirstPackage();
|
||||
// the pagination in the top right
|
||||
const top = await screen.findByTestId('packages-pagination-top');
|
||||
expect(top).toHaveTextContent('of 6');
|
||||
const bottom = await screen.findByTestId('packages-pagination-bottom');
|
||||
expect(bottom).toHaveTextContent('of 6');
|
||||
});
|
||||
|
||||
test('itemcount correct after toggling selected', async () => {
|
||||
await renderCreateMode();
|
||||
await goToPackagesStep();
|
||||
await searchForPackage();
|
||||
await selectFirstPackage();
|
||||
await switchToSelected();
|
||||
|
||||
// the pagination in the top right
|
||||
const top = await screen.findByTestId('packages-pagination-top');
|
||||
expect(top).toHaveTextContent('of 1');
|
||||
const bottom = await screen.findByTestId('packages-pagination-bottom');
|
||||
expect(bottom).toHaveTextContent('of 1');
|
||||
});
|
||||
|
||||
test('itemcount correct after clearing search input', async () => {
|
||||
await renderCreateMode();
|
||||
await goToPackagesStep();
|
||||
await searchForPackage();
|
||||
await selectFirstPackage();
|
||||
await clearSearchInput();
|
||||
|
||||
// the pagination in the top right
|
||||
const top = await screen.findByTestId('packages-pagination-top');
|
||||
expect(top).toHaveTextContent('of 0');
|
||||
const bottom = await screen.findByTestId('packages-pagination-bottom');
|
||||
expect(bottom).toHaveTextContent('of 0');
|
||||
});
|
||||
});
|
||||
|
||||
describe('package groups on packages step', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
test('included packages popover', async () => {
|
||||
await renderCreateMode();
|
||||
await goToPackagesStep();
|
||||
await searchForGroup();
|
||||
await selectFirstPackage();
|
||||
await openIncludedPackagesPopover();
|
||||
|
||||
const table = await screen.findByTestId('group-included-packages-table');
|
||||
const rows = await within(table).findAllByRole('row');
|
||||
expect(rows).toHaveLength(2);
|
||||
|
||||
const firstRowCells = await within(rows[0]).findAllByRole('cell');
|
||||
expect(firstRowCells[0]).toHaveTextContent('fish1');
|
||||
const secondRowCells = await within(rows[1]).findAllByRole('cell');
|
||||
await waitFor(() => expect(secondRowCells[0]).toHaveTextContent('fish2'));
|
||||
});
|
||||
});
|
||||
|
||||
const getAllCheckboxes = async () => {
|
||||
const pkgTable = await screen.findByTestId('packages-table');
|
||||
await screen.findAllByTestId('package-row');
|
||||
|
||||
const checkboxes = await within(pkgTable).findAllByRole('checkbox', {
|
||||
name: /select row/i,
|
||||
});
|
||||
|
||||
return checkboxes;
|
||||
};
|
||||
|
||||
let router: RemixRouter | undefined = undefined;
|
||||
const routes = [
|
||||
{
|
||||
path: 'insights/image-builder/*',
|
||||
element: <div />,
|
||||
},
|
||||
{
|
||||
path: 'insights/image-builder/imagewizard/:composeId?',
|
||||
element: <CreateImageWizard />,
|
||||
},
|
||||
];
|
||||
|
||||
const typeIntoSearchBox = async (searchTerm: string) => {
|
||||
const user = userEvent.setup();
|
||||
const searchbox = await screen.findByRole('textbox', {
|
||||
name: /search packages/i,
|
||||
});
|
||||
|
||||
await waitFor(() => user.click(searchbox));
|
||||
await waitFor(() => user.type(searchbox, searchTerm));
|
||||
};
|
||||
|
||||
const checkRecommendationsEmptyState = async () => {
|
||||
await screen.findByRole('button', {
|
||||
name: /Recommended Red Hat packages/,
|
||||
});
|
||||
|
||||
await screen.findByText('Select packages to generate recommendations.');
|
||||
};
|
||||
|
||||
const clearSearchBox = async () => {
|
||||
const user = userEvent.setup();
|
||||
const searchbox = await screen.findByRole('textbox', {
|
||||
name: /search packages/i,
|
||||
});
|
||||
|
||||
await waitFor(() => user.click(searchbox));
|
||||
await waitFor(() => user.clear(searchbox));
|
||||
};
|
||||
|
||||
const toggleSelected = async () => {
|
||||
const user = userEvent.setup();
|
||||
const selected = await screen.findByRole('button', { name: /selected/i });
|
||||
await waitFor(async () => user.click(selected));
|
||||
};
|
||||
|
||||
describe('Step Packages', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
const user = userEvent.setup();
|
||||
const setUp = async () => {
|
||||
({ router } = await renderCustomRoutesWithReduxRouter(
|
||||
'imagewizard',
|
||||
{},
|
||||
routes
|
||||
));
|
||||
|
||||
// select aws as upload destination
|
||||
const uploadAws = await screen.findByTestId('upload-aws');
|
||||
|
||||
user.click(uploadAws);
|
||||
await clickNext();
|
||||
|
||||
// aws step
|
||||
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
|
||||
await screen.findByRole('textbox', {
|
||||
name: 'Select activation key',
|
||||
});
|
||||
|
||||
const registrationCheckbox = await screen.findByTestId(
|
||||
'automatically-register-checkbox'
|
||||
);
|
||||
user.click(registrationCheckbox);
|
||||
|
||||
await clickNext();
|
||||
// skip OpenSCAP
|
||||
await clickNext();
|
||||
// skip snapshots
|
||||
await clickNext();
|
||||
// skip Repositories
|
||||
await clickNext();
|
||||
// skip fsc
|
||||
await clickNext();
|
||||
};
|
||||
|
||||
test('clicking Next loads Image name', async () => {
|
||||
await setUp();
|
||||
|
||||
await clickNext();
|
||||
await clickNext();
|
||||
|
||||
await screen.findByRole('heading', {
|
||||
name: 'Details',
|
||||
});
|
||||
});
|
||||
|
||||
test('clicking Back loads repositories', async () => {
|
||||
await setUp();
|
||||
|
||||
await clickBack();
|
||||
|
||||
await screen.findByRole('heading', {
|
||||
name: /Custom repositories/i,
|
||||
});
|
||||
});
|
||||
|
||||
test('clicking Cancel loads landing page', async () => {
|
||||
await setUp();
|
||||
|
||||
await verifyCancelButton(router);
|
||||
});
|
||||
|
||||
test('should display search bar and toggle buttons', async () => {
|
||||
await setUp();
|
||||
|
||||
await typeIntoSearchBox('test');
|
||||
|
||||
await screen.findByRole('button', {
|
||||
name: /available/i,
|
||||
});
|
||||
await screen.findByRole('button', {
|
||||
name: /selected/i,
|
||||
});
|
||||
});
|
||||
|
||||
test('should display default state', async () => {
|
||||
await setUp();
|
||||
|
||||
await screen.findByText(
|
||||
'Search above to add additionalpackages to your image.'
|
||||
);
|
||||
});
|
||||
|
||||
test('should display an exact match if found regardless of too many results', async () => {
|
||||
await setUp();
|
||||
|
||||
await typeIntoSearchBox('testPkg-123');
|
||||
|
||||
await screen.findByTestId('exact-match-row');
|
||||
|
||||
await screen.findByRole('heading', {
|
||||
name: /too many results to display/i,
|
||||
});
|
||||
});
|
||||
|
||||
test('search results should be sorted with most relevant results first', async () => {
|
||||
await setUp();
|
||||
|
||||
await selectCustomRepo();
|
||||
await typeIntoSearchBox('test');
|
||||
|
||||
await getRowsIn();
|
||||
});
|
||||
|
||||
test('selected packages are sorted the same way as available packages', async () => {
|
||||
await setUp();
|
||||
|
||||
await selectCustomRepo();
|
||||
await typeIntoSearchBox('test');
|
||||
|
||||
const checkboxes = await getAllCheckboxes();
|
||||
|
||||
for (const checkbox in checkboxes) {
|
||||
user.click(checkboxes[checkbox]);
|
||||
}
|
||||
|
||||
await toggleSelected();
|
||||
|
||||
await getRowsIn();
|
||||
});
|
||||
|
||||
test('selected packages persist throughout steps', async () => {
|
||||
await setUp();
|
||||
|
||||
await typeIntoSearchBox('test');
|
||||
const pkgTable = await screen.findByTestId('packages-table');
|
||||
await screen.findAllByTestId('package-row');
|
||||
|
||||
const getFirstPkgCheckbox = async () =>
|
||||
await within(pkgTable).findByRole('checkbox', {
|
||||
name: /select row 0/i,
|
||||
});
|
||||
let firstPkgCheckbox = (await getFirstPkgCheckbox()) as HTMLInputElement;
|
||||
|
||||
expect(firstPkgCheckbox.checked).toEqual(false);
|
||||
user.click(firstPkgCheckbox);
|
||||
await waitFor(() => expect(firstPkgCheckbox.checked).toEqual(true));
|
||||
|
||||
await clickNext();
|
||||
await clickBack();
|
||||
|
||||
firstPkgCheckbox = (await getFirstPkgCheckbox()) as HTMLInputElement;
|
||||
expect(firstPkgCheckbox.checked).toEqual(true);
|
||||
});
|
||||
|
||||
test('should display empty available state on failed search', async () => {
|
||||
await setUp();
|
||||
|
||||
await typeIntoSearchBox('asdf');
|
||||
|
||||
await screen.findByText('No results found');
|
||||
});
|
||||
|
||||
test('should display too many results state for more than 100 results', async () => {
|
||||
await setUp();
|
||||
|
||||
await typeIntoSearchBox('te');
|
||||
|
||||
await screen.findByText('Too many results to display');
|
||||
});
|
||||
|
||||
test('should display too short', async () => {
|
||||
await setUp();
|
||||
|
||||
await typeIntoSearchBox('t');
|
||||
|
||||
await screen.findByText('The search value is too short');
|
||||
});
|
||||
|
||||
test('should display relevant results in selected first', async () => {
|
||||
await setUp();
|
||||
|
||||
await selectCustomRepo();
|
||||
await typeIntoSearchBox('test');
|
||||
|
||||
const checkboxes = await getAllCheckboxes();
|
||||
|
||||
user.click(checkboxes[0]);
|
||||
user.click(checkboxes[1]);
|
||||
|
||||
await clearSearchBox();
|
||||
await typeIntoSearchBox('mock');
|
||||
|
||||
// wait for debounce
|
||||
await waitFor(
|
||||
() => {
|
||||
expect(screen.getByText(/mockPkg/)).toBeInTheDocument();
|
||||
},
|
||||
{
|
||||
timeout: 1500,
|
||||
}
|
||||
);
|
||||
|
||||
user.click(checkboxes[0]);
|
||||
user.click(checkboxes[1]);
|
||||
|
||||
await toggleSelected();
|
||||
|
||||
await clearSearchBox();
|
||||
await typeIntoSearchBox('test');
|
||||
|
||||
const packagesTable = await screen.findByTestId('packages-table');
|
||||
|
||||
const getRows = async () =>
|
||||
await within(packagesTable).findAllByTestId('package-row');
|
||||
const availablePackages = await getRows();
|
||||
|
||||
expect(availablePackages[0]).toHaveTextContent('test');
|
||||
expect(availablePackages[1]).toHaveTextContent('test-sources');
|
||||
});
|
||||
|
||||
test('should display recommendations', async () => {
|
||||
await setUp();
|
||||
|
||||
await checkRecommendationsEmptyState();
|
||||
await typeIntoSearchBox('test');
|
||||
|
||||
const checkboxes = await getAllCheckboxes();
|
||||
|
||||
user.click(checkboxes[0]);
|
||||
|
||||
await screen.findByText('recommendedPackage1');
|
||||
await screen.findByText('recommendedPackage2');
|
||||
await screen.findByText('recommendedPackage3');
|
||||
});
|
||||
|
||||
test('allow to add recommendations to selected', async () => {
|
||||
await setUp();
|
||||
|
||||
await checkRecommendationsEmptyState();
|
||||
|
||||
const pkgTable = await screen.findByTestId('packages-table');
|
||||
|
||||
await typeIntoSearchBox('test');
|
||||
|
||||
const checkboxes = await getAllCheckboxes();
|
||||
|
||||
user.click(checkboxes[0]);
|
||||
|
||||
const addRecButtons = await screen.findAllByTestId(
|
||||
'add-recommendation-button'
|
||||
);
|
||||
user.click(addRecButtons[0]);
|
||||
|
||||
const selected = await screen.findByRole('button', { name: /Selected/ });
|
||||
user.click(selected);
|
||||
|
||||
await within(pkgTable).findByText('recommendedPackage1');
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue