particle-os/debian-image-builder-frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

src: Remove more data-testids

Browse source 
As using `data-testid`s in tests is an anti-pattern, this removes more of them and replaces them with appropriate locators in the tests.
This commit is contained in:
regexowl 2025-05-08 10:22:33 +02:00 • committed by Gianluca Zuccarelli
parent 0ea874abc6
commit a0fe3644c3
26 changed files with 257 additions and 160 deletions
Download patch file Download diff file Expand all files Collapse all files

8
playwright/test.spec.ts
View file

@ -22,14 +22,16 @@ test.describe.serial('test', () => {
await frame.getByTestId('blueprints-create-button').click();
frame.getByRole('heading', { name: 'Image output' });
await frame.getByTestId('checkbox-guest-image').click();
await frame
.getByRole('checkbox', { name: /Virtualization guest image/i })
.click();
await frame.getByRole('button', { name: 'Next', exact: true }).click();
if (isHosted()) {
frame.getByRole('heading', {
name: 'Register systems using this image',
});
await page.getByTestId('register-later-radio').click();
await page.getByRole('radio', { name: /Register later/i }).click();
await frame.getByRole('button', { name: 'Next', exact: true }).click();
}
@ -164,7 +166,7 @@ test.describe.serial('test', () => {
// the clickable blueprint cards are a bit awkward, so use the
// button's id instead
await frame.locator(`button[id="${blueprintName}"]`).click();
await frame.getByTestId('blueprint-action-menu-toggle').click();
await frame.getByRole('button', { name: /blueprint menu toggle/i }).click();
await frame.getByRole('menuitem', { name: 'Delete blueprint' }).click();
await frame.getByRole('button', { name: 'Delete' }).click();
});

1
src/Components/Blueprints/BlueprintActionsMenu.tsx
View file

@ -60,7 +60,6 @@ export const BlueprintActionsMenu: React.FunctionComponent<
onClick={() => setShowBlueprintActionsMenu(!showBlueprintActionsMenu)}
variant="plain"
aria-label="blueprint menu toggle"
data-testid="blueprint-action-menu-toggle"
>
<EllipsisVIcon aria-hidden="true" />
</MenuToggle>

1
src/Components/Blueprints/ImportBlueprintModal.tsx
View file

@ -327,7 +327,6 @@ export const ImportBlueprintModal: React.FunctionComponent<
state: { blueprint: importedBlueprint },
})
}
data-testid="import-blueprint-finish"
>
Review and finish
</Button>

10
src/Components/CreateImageWizard/steps/FileSystem/components/FileSystemTable.tsx
View file

@ -194,7 +194,6 @@ const MountpointPrefix = ({ partition }: MountpointPrefixPropTypes) => {
onClick={onToggleClick}
isExpanded={isOpen}
isDisabled={prefix === '/'}
data-testid="prefix-select"
isFullWidth
>
{prefix}
@ -332,12 +331,7 @@ const SizeUnit = ({ partition }: SizeUnitPropTypes) => {
};
const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
<MenuToggle
ref={toggleRef}
onClick={onToggleClick}
isExpanded={isOpen}
data-testid="unit-select"
>
<MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>
{partition.unit}
</MenuToggle>
);
@ -505,7 +499,6 @@ const FileSystemTable = () => {
className={isDragging ? styles.modifiers.dragOver : ''}
aria-label="File system table"
variant="compact"
data-testid="fsc-table"
>
<Thead>
<Tr>
@ -526,7 +519,6 @@ const FileSystemTable = () => {
onDrop={onDragOver}
onDragLeave={onDragLeave}
ref={bodyRef}
data-testid="file-system-configuration-tbody"
>
{partitions &&
partitions.map((partition) => (

1
src/Components/CreateImageWizard/steps/ImageOutput/components/ReleaseLifecycle.tsx
View file

@ -119,7 +119,6 @@ export const MajorReleasesLifecyclesChart = () => {
<Panel>
<PanelMain maxHeight="10rem">
<Bar
data-testid="release-lifecycle-chart"
options={chartMajorVersionCfg.options}
data={chartMajorVersionCfg.data}
/>

12
src/Components/CreateImageWizard/steps/ImageOutput/components/TargetEnvironment.tsx
View file

@ -37,7 +37,6 @@ type TargetEnvironmentCardProps = {
imageAlt: string;
isClicked: boolean;
isDisabled?: boolean;
testId: string;
handleOnClick: () => void;
onMouseEnter?: MouseEventHandler<HTMLElement>;
};
@ -50,11 +49,9 @@ const TargetEnvironmentCard = ({
onMouseEnter,
isClicked,
isDisabled = false,
testId,
}: TargetEnvironmentCardProps) => {
return (
<Card
data-testid={testId}
style={{ textAlign: 'center' } as React.CSSProperties}
onMouseUp={onMouseEnter}
isClicked={isClicked}
@ -147,7 +144,6 @@ const TargetEnvironment = () => {
<Gallery hasGutter>
{supportedEnvironments?.includes('aws') && (
<TargetEnvironmentCard
testId="upload-aws"
title="Amazon Web Services"
imageSrc={'/apps/frontend-assets/partners-icons/aws.svg'}
imageAlt="Amazon Web Services logo"
@ -158,7 +154,6 @@ const TargetEnvironment = () => {
)}
{supportedEnvironments?.includes('gcp') && (
<TargetEnvironmentCard
testId="upload-google"
title="Google Cloud Platform"
imageSrc={
'/apps/frontend-assets/partners-icons/google-cloud-short.svg'
@ -171,7 +166,6 @@ const TargetEnvironment = () => {
)}
{supportedEnvironments?.includes('azure') && (
<TargetEnvironmentCard
testId="upload-azure"
title="Microsoft Azure"
imageSrc={
'/apps/frontend-assets/partners-icons/microsoft-azure-short.svg'
@ -184,7 +178,6 @@ const TargetEnvironment = () => {
)}
{supportedEnvironments?.includes('oci') && (
<TargetEnvironmentCard
testId="upload-oci"
title="Oracle Cloud Infrastructure"
imageSrc={
'/apps/frontend-assets/partners-icons/oracle-short.svg'
@ -208,7 +201,6 @@ const TargetEnvironment = () => {
name="vsphere-checkbox-ova"
aria-label="VMware vSphere checkbox OVA"
id="vsphere-checkbox-ova"
data-testid="checkbox-vsphere-ova"
label={
<>
VMware vSphere - Open virtualization format (.ova)
@ -249,7 +241,6 @@ const TargetEnvironment = () => {
name="vsphere-checkbox-vmdk"
aria-label="VMware vSphere checkbox VMDK"
id="vsphere-checkbox-vmdk"
data-testid="checkbox-vsphere-vmdk"
label={
<>
VMware vSphere - Virtual disk (.vmdk)
@ -296,7 +287,6 @@ const TargetEnvironment = () => {
aria-label="Virtualization guest image checkbox"
id="checkbox-guest-image"
name="Virtualization guest image"
data-testid="checkbox-guest-image"
/>
)}
{supportedEnvironments?.includes('image-installer') && (
@ -309,7 +299,6 @@ const TargetEnvironment = () => {
aria-label="Bare metal installer checkbox"
id="checkbox-image-installer"
name="Bare metal installer"
data-testid="checkbox-image-installer"
/>
)}
{supportedEnvironments?.includes('wsl') && (
@ -369,7 +358,6 @@ const TargetEnvironment = () => {
aria-label="windows subsystem for linux checkbox"
id="checkbox-wsl"
name="WSL"
data-testid="checkbox-wsl"
/>
)}
</FormGroup>

2
src/Components/CreateImageWizard/steps/Registration/components/Registration.tsx
View file

@ -120,7 +120,6 @@ const Registration = () => {
<FormGroup label="Registration method">
<Radio
label="Automatically register and enable advanced capabilities"
data-testid="automatically-register-radio"
isChecked={
registrationType === 'register-now' ||
registrationType === 'register-now-insights' ||
@ -200,7 +199,6 @@ const Registration = () => {
/>
<Radio
label="Register later"
data-testid="register-later-radio"
isChecked={registrationType === 'register-later'}
onChange={() => {
dispatch(changeRegistrationType('register-later'));

1
src/Components/CreateImageWizard/steps/Repositories/components/Empty.tsx
View file

@ -27,7 +27,6 @@ const Empty = ({ hasFilterValue, refetch }: EmptyProps) => {
: 'No custom repositories'
}
variant={EmptyStateVariant.lg}
data-testid="empty-state"
>
<EmptyStateBody>
{hasFilterValue

1
src/Components/CreateImageWizard/steps/Snapshot/components/TemplatesEmpty.tsx
View file

@ -35,7 +35,6 @@ const TemplatesEmpty = ({ refetch }: TemplatesEmptyProps) => {
headingLevel="h4"
titleText={'No content templates'}
variant={EmptyStateVariant.lg}
data-testid="empty-state"
>
<EmptyStateBody>
{`Content templates can be added in the "Templates" area of the

1
src/Components/CreateImageWizard/steps/TargetEnvironment/Azure/AzureHyperVSelect.tsx
View file

@ -47,7 +47,6 @@ export const AzureHyperVSelect = () => {
const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
<MenuToggle
ref={toggleRef}
data-testid="azure-hyper-v-generation-select"
onClick={() => setIsOpen(!isOpen)}
isExpanded={isOpen}
>

5
src/Components/CreateImageWizard/steps/TargetEnvironment/Gcp/index.tsx
View file

@ -66,7 +66,6 @@ const Gcp = () => {
/>
<Radio
id="share-with-insights"
data-testid="share-with-insights"
label="Share image with Red Hat Insights only"
name="radio-2"
description={
@ -88,7 +87,6 @@ const Gcp = () => {
<FormGroup label="Account type" isRequired>
<Radio
id="google-account"
data-testid="google-account"
label="Google account"
name="radio-3"
isChecked={accountType === 'user'}
@ -98,7 +96,6 @@ const Gcp = () => {
/>
<Radio
id="service-account"
data-testid="service-account"
label="Service account"
name="radio-4"
isChecked={accountType === 'serviceAccount'}
@ -108,7 +105,6 @@ const Gcp = () => {
/>
<Radio
id="google-group"
data-testid="google-group"
label="Google group"
name="radio-5"
isChecked={accountType === 'group'}
@ -118,7 +114,6 @@ const Gcp = () => {
/>
<Radio
id="google-domain"
data-testid="google-domain"
label="Google Workspace domain or Cloud Identity domain"
name="radio-6"
isChecked={accountType === 'domain'}

1
src/Components/ImagesTable/EmptyState.tsx
View file

@ -55,7 +55,6 @@ const EmptyImagesTable = () => {
<Bullseye>
<EmptyState
variant={EmptyStateVariant.lg}
data-testid="empty-state"
titleText="No images"
headingLevel="h4"
icon={SearchIcon}

1
src/Components/sharedComponents/ImageBuilderHeader.tsx
View file

@ -115,7 +115,6 @@ export const ImageBuilderHeader = ({
</Button>
{importExportFlag && (
<Button
data-testid="import-blueprint-button"
variant="secondary"
onClick={() => setShowImportModal(true)}
>

6
src/test/Components/Blueprints/Blueprints.test.tsx
View file

@ -356,9 +356,9 @@ describe('Blueprints', () => {
renderCustomRoutesWithReduxRouter();
await selectBlueprintById(blueprintIdWithComposes);
const toggleButton = await screen.findByTestId(
'blueprint-action-menu-toggle'
);
const toggleButton = await screen.findByRole('button', {
name: /blueprint menu toggle/i,
});
await waitFor(() => user.click(toggleButton));
const downloadButton = screen.getByRole('menuitem', {

43
src/test/Components/Blueprints/ImportBlueprintModal.test.tsx
View file

@ -293,15 +293,15 @@ describe('Import modal', () => {
test('renders import component', async () => {
renderCustomRoutesWithReduxRouter();
const importButton = await screen.findByTestId('import-blueprint-button');
const importButton = await screen.findByRole('button', { name: /Import/i });
await waitFor(() => expect(importButton).toBeInTheDocument());
});
const setUp = async () => {
renderCustomRoutesWithReduxRouter();
const importBlueprintBtn = await screen.findByTestId(
'import-blueprint-button'
);
const importBlueprintBtn = await screen.findByRole('button', {
name: /Import/i,
});
await waitFor(() => user.click(importBlueprintBtn));
const reviewButton = await screen.findByRole('button', {
name: /review and finish/i,
@ -312,7 +312,9 @@ describe('Import modal', () => {
test('should show alert on invalid blueprint', async () => {
await setUp();
await uploadFile(`blueprints.json`, INVALID_JSON);
const reviewButton = screen.getByTestId('import-blueprint-finish');
const reviewButton = screen.getByRole('button', {
name: /Review and finish/i,
});
expect(reviewButton).toBeDisabled();
const helperText = await screen.findByText(
/not compatible with the blueprints format\./i
@ -323,7 +325,9 @@ describe('Import modal', () => {
test('should show alert on invalid blueprint incorrect architecture', async () => {
await setUp();
await uploadFile(`blueprints.json`, INVALID_ARCHITECTURE_JSON);
const reviewButton = screen.getByTestId('import-blueprint-finish');
const reviewButton = screen.getByRole('button', {
name: /Review and finish/i,
});
expect(reviewButton).toBeDisabled();
const helperText = await screen.findByText(
/not compatible with the blueprints format\./i
@ -334,7 +338,9 @@ describe('Import modal', () => {
test('should enable button and ignore subscription in blueprint file', async () => {
await setUp();
await uploadFile(`blueprints.json`, IGNORE_SUBSCRIPTION_BLUEPRINT);
const reviewButton = screen.getByTestId('import-blueprint-finish');
const reviewButton = screen.getByRole('button', {
name: /Review and finish/i,
});
await waitFor(() => expect(reviewButton).toBeEnabled());
user.click(reviewButton);
@ -348,7 +354,9 @@ describe('Import modal', () => {
test('should enable button on correct blueprint and go to wizard', async () => {
await setUp();
await uploadFile(`blueprints.json`, BLUEPRINT_JSON);
const reviewButton = screen.getByTestId('import-blueprint-finish');
const reviewButton = screen.getByRole('button', {
name: /Review and finish/i,
});
await waitFor(() => expect(reviewButton).toBeEnabled());
user.click(reviewButton);
@ -369,7 +377,9 @@ describe('Import modal', () => {
test('should enable button on toml blueprint and go to wizard', async () => {
await setUp();
await uploadFile(`blueprints.toml`, ONPREM_BLUEPRINT_TOML);
const reviewButton = screen.getByTestId('import-blueprint-finish');
const reviewButton = screen.getByRole('button', {
name: /Review and finish/i,
});
await waitFor(() => expect(reviewButton).toBeEnabled());
user.click(reviewButton);
@ -381,7 +391,10 @@ describe('Import modal', () => {
// Image output
await waitFor(
async () => await user.click(await screen.findByTestId('upload-aws'))
async () =>
await user.click(
await screen.findByRole('button', { name: /Amazon Web Services/i })
)
);
await clickNext();
@ -404,9 +417,9 @@ describe('Import modal', () => {
await screen.findByText(
'Automatically register and enable advanced capabilities'
);
//const registrationCheckbox = await screen.findByTestId(
// 'automatically-register-radio'
//);
//const registrationCheckbox = await screen.findByRole('radio', {
// name: /Automatically register and enable advanced capabilities/i,
//});
//expect(registrationCheckbox).toHaveFocus();
await screen.findByPlaceholderText('Select activation key');
@ -514,7 +527,9 @@ describe('Import modal', () => {
`blueprints.toml`,
ONPREM_BLUEPRINT_TOML_WITH_INVALID_VALUES
);
const reviewButton = screen.getByTestId('import-blueprint-finish');
const reviewButton = screen.getByRole('button', {
name: /Review and finish/i,
});
await waitFor(() => expect(reviewButton).toBeEnabled());
user.click(reviewButton);

42
src/test/Components/CreateImageWizard/CreateImageWizard.test.tsx
View file

@ -13,10 +13,20 @@ const getSourceDropdown = async () => {
const selectAllEnvironments = async () => {
const user = userEvent.setup();
await waitFor(() => user.click(screen.getByTestId('upload-aws')));
await waitFor(() => user.click(screen.getByTestId('upload-google')));
await waitFor(() => user.click(screen.getByTestId('upload-azure')));
await waitFor(() => user.click(screen.getByTestId('checkbox-guest-image')));
await waitFor(() =>
user.click(screen.getByRole('button', { name: /Amazon Web Services/i }))
);
await waitFor(() =>
user.click(screen.getByRole('button', { name: /Google Cloud Platform/i }))
);
await waitFor(() =>
user.click(screen.getByRole('button', { name: /Microsoft Azure/i }))
);
await waitFor(() =>
user.click(
screen.getByRole('checkbox', { name: /Virtualization guest image/i })
)
);
};
const testTile = async (tile: HTMLElement) => {
@ -24,7 +34,7 @@ const testTile = async (tile: HTMLElement) => {
tile.focus();
await waitFor(() => user.keyboard(' '));
expect(tile).toHaveClass('pf-m-clickable');
expect(tile).toHaveClass('pf-v6-c-card__clickable-action');
};
describe('Create Image Wizard', () => {
@ -135,9 +145,9 @@ describe('Keyboard accessibility', () => {
await screen.findByText(
'Automatically register and enable advanced capabilities'
);
//const registrationCheckbox = await screen.findByTestId(
// 'automatically-register-radio'
//);
//const registrationCheckbox = await screen.findByRole('radio', {
// name: /Automatically register and enable advanced capabilities/i,
//});
//expect(registrationCheckbox).toHaveFocus();
await screen.findByPlaceholderText('Select activation key');
await clickNext();
@ -160,7 +170,9 @@ describe('Keyboard accessibility', () => {
test('pressing Enter does not advance the wizard', async () => {
await renderCreateMode();
user.click(await screen.findByTestId('upload-aws'));
user.click(
await screen.findByRole('button', { name: /Amazon Web Services/i })
);
user.keyboard('{enter}');
await screen.findByRole('heading', {
name: /image output/i,
@ -170,8 +182,14 @@ describe('Keyboard accessibility', () => {
test('target environment tiles are keyboard selectable', async () => {
await renderCreateMode();
await testTile(await screen.findByTestId('upload-aws'));
await testTile(await screen.findByTestId('upload-google'));
await testTile(await screen.findByTestId('upload-azure'));
await testTile(
await screen.findByRole('button', { name: /Amazon Web Services/i })
);
await testTile(
await screen.findByRole('button', { name: /Google Cloud Platform/i })
);
await testTile(
await screen.findByRole('button', { name: /Microsoft Azure/i })
);
});
});

23
src/test/Components/CreateImageWizard/steps/FileSystemConfiguration/FileSystemConfiguration.test.tsx
View file

@ -36,9 +36,9 @@ const selectGuestImage = async () => {
const selectImageInstaller = async () => {
const user = userEvent.setup();
const imageInstallerCheckbox = await screen.findByTestId(
'checkbox-image-installer'
);
const imageInstallerCheckbox = await screen.findByRole('checkbox', {
name: /Bare metal installer/i,
});
await waitFor(() => user.click(imageInstallerCheckbox));
};
@ -71,8 +71,7 @@ const customizePartition = async () => {
};
const getRow = async (row: number) => {
const table = await screen.findByTestId('fsc-table');
const rows = await within(table).findAllByRole('row');
const rows = await screen.findAllByRole('row');
return rows[row];
};
@ -88,7 +87,7 @@ const changePartitionSize = async () => {
const changePartitionUnitsToKiB = async () => {
const user = userEvent.setup();
const row = await getRow(1);
const units = await within(row).findByTestId('unit-select');
const units = await within(row).findByText('GiB');
await waitFor(() => user.click(units));
const kibOption = await screen.findByRole('option', { name: 'KiB' });
await waitFor(() => user.click(kibOption));
@ -97,7 +96,7 @@ const changePartitionUnitsToKiB = async () => {
const changePartitionUnitsToMiB = async () => {
const user = userEvent.setup();
const row = await getRow(1);
const units = await within(row).findByTestId('unit-select');
const units = await within(row).findByText('GiB');
await waitFor(() => user.click(units));
const mibOption = await screen.findByRole('option', { name: 'MiB' });
await waitFor(() => user.click(mibOption));
@ -180,16 +179,12 @@ describe('Step File system configuration', () => {
const mountPointAlerts = screen.getAllByRole('heading', {
name: /danger alert: duplicate mount point/i,
});
const fscTable = await screen.findByTestId(
'file-system-configuration-tbody'
);
const rows = within(fscTable).getAllByRole('row');
const rows = await screen.findAllByRole('row');
rows.shift(); // remove table header
expect(rows).toHaveLength(3);
//Change mountpoint of final row to /var, resolving errors
const mountPointOptions = await within(rows[2]).findByTestId(
'prefix-select'
);
const mountPointOptions = await within(rows[2]).findByText('/home');
await waitFor(() => user.click(mountPointOptions));
const varButton = await screen.findByRole('option', {
name: /\/var/i,

166
src/test/Components/CreateImageWizard/steps/ImageOutput/ImageOutput.test.tsx
View file

@ -174,23 +174,29 @@ describe('Step Image output', () => {
expect(destination).toContainElement(required);
});
test('selecting and deselecting a tile disables the next button', async () => {
test('selecting and deselecting a card disables the next button', async () => {
await renderCreateMode();
const nextButton = await getNextButton();
const awsTile = await screen.findByTestId('upload-aws');
const awsTile = await screen.findByRole('button', {
name: /Amazon Web Services/i,
});
user.click(awsTile); // select
await waitFor(() => expect(nextButton).toBeEnabled());
user.click(awsTile); // deselect
await waitFor(() => expect(nextButton).toBeDisabled());
const googleTile = await screen.findByTestId('upload-google');
const googleTile = await screen.findByRole('button', {
name: /Google Cloud Platform/i,
});
user.click(googleTile); // select
await waitFor(() => expect(nextButton).toBeEnabled());
user.click(googleTile); // deselect
await waitFor(() => expect(nextButton).toBeDisabled());
const azureTile = await screen.findByTestId('upload-azure');
const azureTile = await screen.findByRole('button', {
name: /Microsoft Azure/i,
});
user.click(azureTile); // select
await waitFor(() => expect(nextButton).toBeEnabled());
user.click(azureTile); // deselect
@ -238,15 +244,21 @@ describe('Step Image output', () => {
await renderCreateMode();
await selectRhel8();
await screen.findByTestId('release-lifecycle-chart');
await screen.findByRole('region', {
name: /hide information about release lifecycle/i,
});
await selectRhel9();
await screen.findByTestId('release-lifecycle-chart');
await screen.findByRole('region', {
name: /hide information about release lifecycle/i,
});
await selectRhel10();
await waitFor(() =>
expect(
screen.queryByTestId('release-lifecycle-chart')
screen.queryByRole('region', {
name: /hide information about release lifecycle/i,
})
).not.toBeInTheDocument()
);
});
@ -328,12 +340,18 @@ describe('Check that the target filtering is in accordance to mock content', ()
expect(images_types).toContain('wsl');
// make sure the UX conforms to the mocks
await screen.findByTestId('upload-aws');
await screen.findByTestId('upload-google');
await screen.findByTestId('upload-azure');
await screen.findByTestId('upload-oci');
await screen.findByTestId('checkbox-guest-image');
await screen.findByTestId('checkbox-image-installer');
await screen.findByRole('button', { name: /Amazon Web Services/i });
await screen.findByRole('button', { name: /Google Cloud Platform/i });
await screen.findByRole('button', { name: /Microsoft Azure/i });
await screen.findByRole('button', {
name: /Oracle Cloud Infrastructure/i,
});
await screen.findByRole('checkbox', {
name: /Virtualization guest image/i,
});
await screen.findByRole('checkbox', {
name: /Bare metal installer/i,
});
await screen.findByText(/wsl - windows subsystem for linux \(\.wsl\)/i);
});
@ -361,12 +379,18 @@ describe('Check that the target filtering is in accordance to mock content', ()
expect(images_types).not.toContain('wsl');
// make sure the UX conforms to the mocks
await screen.findByTestId('upload-aws');
await screen.findByTestId('upload-google');
await screen.findByTestId('upload-azure');
await screen.findByTestId('upload-oci');
await screen.findByTestId('checkbox-guest-image');
await screen.findByTestId('checkbox-image-installer');
await screen.findByRole('button', { name: /Amazon Web Services/i });
await screen.findByRole('button', { name: /Google Cloud Platform/i });
await screen.findByRole('button', { name: /Microsoft Azure/i });
await screen.findByRole('button', {
name: /Oracle Cloud Infrastructure/i,
});
await screen.findByRole('checkbox', {
name: /Virtualization guest image/i,
});
await screen.findByRole('checkbox', {
name: /Bare metal installer/i,
});
await screen.findByText(
/VMware vSphere - Open virtualization format \(\.ova\)/
);
@ -400,12 +424,18 @@ describe('Check that the target filtering is in accordance to mock content', ()
expect(images_types).toContain('wsl');
// make sure the UX conforms to the mocks
await screen.findByTestId('upload-aws');
await screen.findByTestId('upload-google');
await screen.findByTestId('upload-azure');
await screen.findByTestId('upload-oci');
await screen.findByTestId('checkbox-guest-image');
await screen.findByTestId('checkbox-image-installer');
await screen.findByRole('button', { name: /Amazon Web Services/i });
await screen.findByRole('button', { name: /Google Cloud Platform/i });
await screen.findByRole('button', { name: /Microsoft Azure/i });
await screen.findByRole('button', {
name: /Oracle Cloud Infrastructure/i,
});
await screen.findByRole('checkbox', {
name: /Virtualization guest image/i,
});
await screen.findByRole('checkbox', {
name: /Bare metal installer/i,
});
await screen.findByText(
/VMware vSphere - Open virtualization format \(\.ova\)/
);
@ -436,14 +466,24 @@ describe('Check that the target filtering is in accordance to mock content', ()
expect(images_types).not.toContain('wsl');
// make sure the UX conforms to the mocks
await screen.findByTestId('upload-aws');
await screen.findByRole('button', { name: /Amazon Web Services/i });
await waitFor(() =>
expect(screen.queryByTestId('upload-google')).not.toBeInTheDocument()
expect(
screen.queryByRole('button', { name: /Google Cloud Platform/i })
).not.toBeInTheDocument()
);
expect(screen.queryByTestId('upload-azure')).not.toBeInTheDocument();
expect(screen.queryByTestId('upload-oci')).not.toBeInTheDocument();
await screen.findByTestId('checkbox-guest-image');
await screen.findByTestId('checkbox-image-installer');
expect(
screen.queryByRole('button', { name: /Microsoft Azure/i })
).not.toBeInTheDocument();
expect(
screen.queryByRole('button', { name: /Oracle Cloud Infrastructure/i })
).not.toBeInTheDocument();
await screen.findByRole('checkbox', {
name: /Virtualization guest image/i,
});
await screen.findByRole('checkbox', {
name: /Bare metal installer/i,
});
expect(
screen.queryByText(
/VMware vSphere - Open virtualization format \(\.ova\)/
@ -481,14 +521,24 @@ describe('Check that the target filtering is in accordance to mock content', ()
expect(images_types).not.toContain('wsl');
// make sure the UX conforms to the mocks
await screen.findByTestId('upload-aws');
await screen.findByRole('button', { name: /Amazon Web Services/i });
await waitFor(() =>
expect(screen.queryByTestId('upload-google')).not.toBeInTheDocument()
expect(
screen.queryByRole('button', { name: /Google Cloud Platform/i })
).not.toBeInTheDocument()
);
expect(screen.queryByTestId('upload-azure')).not.toBeInTheDocument();
expect(screen.queryByTestId('upload-oci')).not.toBeInTheDocument();
await screen.findByTestId('checkbox-guest-image');
await screen.findByTestId('checkbox-image-installer');
expect(
screen.queryByRole('button', { name: /Microsoft Azure/i })
).not.toBeInTheDocument();
expect(
screen.queryByRole('button', { name: /Oracle Cloud Infrastructure/i })
).not.toBeInTheDocument();
await screen.findByRole('checkbox', {
name: /Virtualization guest image/i,
});
await screen.findByRole('checkbox', {
name: /Bare metal installer/i,
});
expect(
screen.queryByText(
/VMware vSphere - Open virtualization format \(\.ova\)/
@ -526,12 +576,22 @@ describe('Check that the target filtering is in accordance to mock content', ()
expect(images_types).not.toContain('wsl');
// make sure the UX conforms to the mocks
await screen.findByTestId('upload-aws');
expect(screen.queryByTestId('upload-google')).not.toBeInTheDocument();
expect(screen.queryByTestId('upload-azure')).not.toBeInTheDocument();
expect(screen.queryByTestId('upload-oci')).not.toBeInTheDocument();
await screen.findByTestId('checkbox-guest-image');
await screen.findByTestId('checkbox-image-installer');
await screen.findByRole('button', { name: /Amazon Web Services/i });
expect(
screen.queryByRole('button', { name: /Google Cloud Platform/i })
).not.toBeInTheDocument();
expect(
screen.queryByRole('button', { name: /Microsoft Azure/i })
).not.toBeInTheDocument();
expect(
screen.queryByRole('button', { name: /Oracle Cloud Infrastructure/i })
).not.toBeInTheDocument();
await screen.findByRole('checkbox', {
name: /Virtualization guest image/i,
});
await screen.findByRole('checkbox', {
name: /Bare metal installer/i,
});
expect(
screen.queryByText(
/VMware vSphere - Open virtualization format \(\.ova\)/
@ -559,7 +619,9 @@ describe('Check step consistency', () => {
const next = await screen.findByRole('button', { name: /Next/ });
// select GCP, it's available for x86_64
const uploadGcpBtn = await screen.findByTestId('upload-google');
const uploadGcpBtn = await screen.findByRole('button', {
name: /Google Cloud Platform/i,
});
user.click(uploadGcpBtn);
await waitFor(() => expect(next).toBeEnabled());
@ -568,7 +630,9 @@ describe('Check step consistency', () => {
await waitFor(() => expect(next).toBeDisabled());
// clicking on AWS enables the Next button
const uploadAwsBtn = await screen.findByTestId('upload-aws');
const uploadAwsBtn = await screen.findByRole('button', {
name: /Amazon Web Services/i,
});
user.click(uploadAwsBtn);
await waitFor(() => expect(next).toBeEnabled());
@ -655,7 +719,11 @@ describe('Set target using query parameter', () => {
test('image-installer (query parameter provided)', async () => {
await renderCreateMode({ target: 'iso' });
expect(await screen.findByTestId('checkbox-image-installer')).toBeChecked();
expect(
await screen.findByRole('checkbox', {
name: /Bare metal installer/i,
})
).toBeChecked();
await handleRegistration();
await goToDetailsStep();
await enterNameAndGoToReviewStep();
@ -668,7 +736,11 @@ describe('Set target using query parameter', () => {
test('guest-image (query parameter provided)', async () => {
await renderCreateMode({ target: 'qcow2' });
expect(await screen.findByTestId('checkbox-guest-image')).toBeChecked();
expect(
await screen.findByRole('checkbox', {
name: /Virtualization guest image/i,
})
).toBeChecked();
await handleRegistration();
await goToDetailsStep();
await enterNameAndGoToReviewStep();

10
src/test/Components/CreateImageWizard/steps/Oscap/Oscap.test.tsx
View file

@ -40,15 +40,17 @@ const selectRhel8 = async () => {
const selectImageInstallerTarget = async () => {
const user = userEvent.setup();
const imageInstallerCheckbox = await screen.findByTestId(
'checkbox-image-installer'
);
const imageInstallerCheckbox = await screen.findByRole('checkbox', {
name: /Bare metal installer/i,
});
await waitFor(() => user.click(imageInstallerCheckbox));
};
const selectWslTarget = async () => {
const user = userEvent.setup();
const wslCheckBox = await screen.findByTestId('checkbox-wsl');
const wslCheckBox = await screen.findByRole('checkbox', {
name: /windows subsystem for linux/i,
});
await waitFor(() => user.click(wslCheckBox));
};

10
src/test/Components/CreateImageWizard/steps/TargetEnvironment/AwsTarget.test.tsx
View file

@ -70,15 +70,19 @@ const clickRevisitButton = async () => {
const selectAwsTarget = async () => {
const user = userEvent.setup();
const awsCard = await screen.findByTestId('upload-aws');
const awsCard = await screen.findByRole('button', {
name: /Amazon Web Services/i,
});
await waitFor(() => user.click(awsCard));
await clickNext();
};
const deselectAwsAndSelectGuestImage = async () => {
const user = userEvent.setup();
const awsCard = await screen.findByTestId('upload-aws');
await waitFor(() => user.click(awsCard));
const awsCard = await screen.findAllByRole('button', {
name: /Amazon Web Services/i,
});
await waitFor(() => user.click(awsCard[1]));
const guestImageCheckbox = await screen.findByRole('checkbox', {
name: /virtualization guest image checkbox/i,
});

10
src/test/Components/CreateImageWizard/steps/TargetEnvironment/AzureTarget.test.tsx
View file

@ -70,14 +70,18 @@ const clickRevisitButton = async () => {
const selectAzureTarget = async () => {
const user = userEvent.setup();
const azureCard = await screen.findByTestId('upload-azure');
const azureCard = await screen.findByRole('button', {
name: /Microsoft Azure/i,
});
await waitFor(() => user.click(azureCard));
await clickNext();
};
const deselectAzureAndSelectGuestImage = async () => {
const user = userEvent.setup();
const azureCard = await screen.findByTestId('upload-azure');
const azureCard = await screen.findByRole('button', {
name: /Microsoft Azure/i,
});
await waitFor(() => user.click(azureCard));
const guestImageCheckbox = await screen.findByRole('checkbox', {
name: /virtualization guest image checkbox/i,
@ -157,7 +161,7 @@ const enterSubscriptionId = async () => {
const selectV1 = async () => {
const user = userEvent.setup();
const hypervMenu = screen.getByTestId('azure-hyper-v-generation-select');
const hypervMenu = screen.getByRole('button', { name: /Generation 2/i });
await waitFor(() => user.click(hypervMenu));
const v1 = await screen.findByRole('option', {

38
src/test/Components/CreateImageWizard/steps/TargetEnvironment/GCPTarget.test.tsx
View file

@ -79,15 +79,19 @@ const createGCPCloudImage = (
const clickGCPTarget = async () => {
const user = userEvent.setup();
const googleOption = await screen.findByTestId('upload-google');
const googleOption = await screen.findByRole('button', {
name: /Google Cloud Platform/i,
});
await waitFor(() => user.click(googleOption));
await clickNext();
};
const deselectGcpAndSelectGuestImage = async () => {
const user = userEvent.setup();
const googleCard = await screen.findByTestId('upload-google');
await waitFor(() => user.click(googleCard));
const googleCard = await screen.findAllByRole('button', {
name: /Google Cloud Platform/i,
});
await waitFor(() => user.click(googleCard[1]));
const guestImageCheckbox = await screen.findByRole('checkbox', {
name: /virtualization guest image checkbox/i,
});
@ -96,7 +100,9 @@ const deselectGcpAndSelectGuestImage = async () => {
const selectGoogleAccount = async (optionId: string) => {
const user = userEvent.setup();
const googleAccountOption = await screen.findByTestId(optionId);
const googleAccountOption = await screen.findByRole('radio', {
name: optionId,
});
await waitFor(() => user.click(googleAccountOption));
const principalInput = await screen.findByTestId('principal');
await waitFor(() => user.type(principalInput, GCP_ACCOUNT));
@ -115,7 +121,7 @@ describe('Step Upload to Google', () => {
test('clicking Next loads Registration', async () => {
await renderCreateMode();
await clickGCPTarget();
await selectGoogleAccount('google-account');
await selectGoogleAccount('Google account');
await clickNext();
await screen.findByRole('heading', {
name: 'Register systems using this image',
@ -161,7 +167,7 @@ describe('Step Upload to Google', () => {
test('revisit step button on Review works', async () => {
await renderCreateMode();
await clickGCPTarget();
await selectGoogleAccount('google-account');
await selectGoogleAccount('Google account');
await goToReview();
await clickRevisitButton();
await screen.findByRole('heading', { name: /Image output/ });
@ -176,7 +182,7 @@ describe('GCP image type request generated correctly', () => {
test('share image with google account', async () => {
await renderCreateMode();
await clickGCPTarget();
await selectGoogleAccount('google-account');
await selectGoogleAccount('Google account');
await goToReview();
// informational modal pops up in the first test only as it's tied
// to a 'imageBuilder.saveAndBuildModalSeen' variable in localStorage
@ -196,7 +202,7 @@ describe('GCP image type request generated correctly', () => {
test('share image with service account', async () => {
await renderCreateMode();
await clickGCPTarget();
await selectGoogleAccount('service-account');
await selectGoogleAccount('Service account');
await goToReview();
const receivedRequest = await interceptBlueprintRequest(CREATE_BLUEPRINT);
const expectedImageRequest = createGCPCloudImage('gcp', {
@ -212,7 +218,7 @@ describe('GCP image type request generated correctly', () => {
test('share image with google group', async () => {
await renderCreateMode();
await clickGCPTarget();
await selectGoogleAccount('google-group');
await selectGoogleAccount('Google group');
await goToReview();
const receivedRequest = await interceptBlueprintRequest(CREATE_BLUEPRINT);
const expectedImageRequest = createGCPCloudImage('gcp', {
@ -228,7 +234,9 @@ describe('GCP image type request generated correctly', () => {
test('share image with domain', async () => {
await renderCreateMode();
await clickGCPTarget();
await selectGoogleAccount('google-domain');
await selectGoogleAccount(
'Google Workspace domain or Cloud Identity domain'
);
await goToReview();
const receivedRequest = await interceptBlueprintRequest(CREATE_BLUEPRINT);
const expectedImageRequest = createGCPCloudImage('gcp', {
@ -245,9 +253,9 @@ describe('GCP image type request generated correctly', () => {
const user = userEvent.setup();
await renderCreateMode();
await clickGCPTarget();
const shareWithInsightOption = await screen.findByTestId(
'share-with-insights'
);
const shareWithInsightOption = await screen.findByRole('radio', {
name: /Share image with Red Hat Insights only/i,
});
user.click(shareWithInsightOption);
await goToReview();
@ -263,7 +271,9 @@ describe('GCP image type request generated correctly', () => {
test('after selecting and deselecting gcp', async () => {
await renderCreateMode();
await clickGCPTarget();
await selectGoogleAccount('google-domain');
await selectGoogleAccount(
'Google Workspace domain or Cloud Identity domain'
);
await clickBack();
await deselectGcpAndSelectGuestImage();
await goToReview();

4
src/test/Components/CreateImageWizard/steps/Users/Users.test.tsx
View file

@ -55,7 +55,9 @@ const goToReviewStep = async () => {
const addAzureTarget = async () => {
const user = userEvent.setup();
await waitFor(() => user.click(screen.getByTestId('upload-azure')));
await waitFor(() =>
user.click(screen.getByRole('button', { name: /Microsoft Azure/i }))
);
await clickNext();
const azureSourceDropdown = await screen.findByPlaceholderText(

4
src/test/Components/CreateImageWizard/wizardTestUtils.tsx
View file

@ -117,7 +117,9 @@ export const selectRhel9 = async () => {
export const selectGuestImageTarget = async () => {
const user = userEvent.setup();
const guestImageCheckBox = await screen.findByTestId('checkbox-guest-image');
const guestImageCheckBox = await screen.findByRole('checkbox', {
name: /Virtualization guest image/i,
});
await waitFor(() => user.click(guestImageCheckBox));
};

12
src/test/Components/ImagesTable/ImagesTable.test.tsx
View file

@ -19,8 +19,10 @@ describe('Images Table', () => {
const table = await screen.findByTestId('images-table');
// make sure the empty-state message isn't present
const emptyState = screen.queryByTestId('empty-state');
// make sure the empty state message isn't present
const emptyState = screen.queryByText(
/Image builder is a tool for creating deployment-ready customized system images/i
);
expect(emptyState).not.toBeInTheDocument();
// check table
@ -228,8 +230,10 @@ describe('Clones table', () => {
const table = await screen.findByTestId('images-table');
// make sure the empty-state message isn't present
const emptyState = screen.queryByTestId('empty-state');
// make sure the empty state message isn't present
const emptyState = screen.queryByText(
/Image builder is a tool for creating deployment-ready customized system images/i
);
expect(emptyState).not.toBeInTheDocument();
// get rows

4
src/test/Components/LandingPage/LandingPage.test.tsx
View file

@ -28,6 +28,8 @@ describe('Landing Page', () => {
renderCustomRoutesWithReduxRouter();
// check table loads
await screen.findByTestId('empty-state');
await screen.findByText(
/Image builder is a tool for creating deployment-ready customized system images/i
);
});
});