Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

V2Wizard/test: Add autofocus and enable Keyboard accessibility tests (HMS-2781) #1714

Merged
merged 1 commit into from
Mar 1, 2024
Merged

V2Wizard/test: Add autofocus and enable Keyboard accessibility tests (HMS-2781) #1714

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/Components/CreateImageWizardV2/steps/TargetEnvironment/Aws/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,7 @@ const Aws = () => {
dispatch(changeAwsAccountId(''));
dispatch(changeAwsShareMethod('sources'));
}}
autoFocus
/>
<Radio
id="radio"
Expand Down
1 change: 1 addition & 0 deletions src/Components/CreateImageWizardV2/steps/TargetEnvironment/Azure/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,7 @@ const Azure = () => {
dispatch(changeAzureShareMethod('sources'));
dispatch(changeAzureResourceGroup(''));
}}
autoFocus
/>
<Radio
id="radio"
Expand Down
1 change: 1 addition & 0 deletions src/Components/CreateImageWizardV2/steps/TargetEnvironment/Gcp/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ const Gcp = () => {
onChange={() => {
dispatch(changeGcpShareMethod('withGoogle'));
}}
autoFocus
/>
<Radio
id="share-with-insights"
Expand Down
248 changes: 123 additions & 125 deletions src/test/Components/CreateImageWizardV2/CreateImageWizard.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1517,146 +1517,144 @@ describe('Click through all steps', () => {
});
});

// describe('Keyboard accessibility', () => {
// const user = userEvent.setup();
// const setUp = async () => {
// ({ router } = await renderCustomRoutesWithReduxRouter(
// 'imagewizard',
// {},
// routes
// ));
// await clickNext();
// };

// const selectAllEnvironments = async () => {
// await waitFor(
// async () => await user.click(await screen.findByTestId('upload-aws'))
// );
// await user.click(await screen.findByTestId('upload-google'));
// await user.click(await screen.findByTestId('upload-azure'));
// await user.click(
// await screen.findByRole('checkbox', {
// name: /virtualization guest image checkbox/i,
// })
// );
// };

// test('autofocus on each step first input element', async () => {
// await setUp();
describe('Keyboard accessibility', () => {
const user = userEvent.setup();
const setUp = async () => {
({ router } = await renderCustomRoutesWithReduxRouter(
'imagewizard',
{},
routes
));
await clickNext();
};

// // Image output
// await selectAllEnvironments();
// await clickNext();
const selectAllEnvironments = async () => {
await waitFor(
async () => await user.click(await screen.findByTestId('upload-aws'))
);
await user.click(await screen.findByTestId('upload-google'));
await user.click(await screen.findByTestId('upload-azure'));
await user.click(
await screen.findByRole('checkbox', {
name: /virtualization guest image checkbox/i,
})
);
};

// // Target environment aws
// expect(await screen.findByTestId('aws-radio-source')).toHaveFocus();
// const awsSourceDropdown = await getSourceDropdown();
// await user.click(awsSourceDropdown);
// const awsSource = await screen.findByRole('option', {
// name: /my_source/i,
// });
// await user.click(awsSource);
test('autofocus on each step first input element', async () => {
await setUp();

// await clickNext();
// Image output
await selectAllEnvironments();
await clickNext();

// // Target environment google
// await user.click(await screen.findByTestId('account-sharing'));
// expect(await screen.findByTestId('account-sharing')).toHaveFocus();
// await user.type(
// await screen.findByTestId('input-google-email'),
// '[email protected]'
// );
// await clickNext();
// Target environment aws
expect(
await screen.findByRole('radio', {
name: /use an account configured from sources\./i,
})
).toHaveFocus();
const awsSourceDropdown = await getSourceDropdown();
await user.click(awsSourceDropdown);
const awsSource = await screen.findByRole('option', {
name: /my_source/i,
});
await user.click(awsSource);

// // Target environment azure
// expect(await screen.findByTestId('azure-radio-source')).toHaveFocus();
// const azureSourceDropdown = await getSourceDropdown();
// await user.click(azureSourceDropdown);
// const azureSource = await screen.findByRole('option', {
// name: /azureSource1/i,
// });
// await user.click(azureSource);
await clickNext();

// const resourceGroupDropdown = await screen.findByRole('textbox', {
// name: /select resource group/i,
// });
// await user.click(resourceGroupDropdown);
// await user.click(await screen.findByLabelText('Resource group myResourceGroup1'));
// await clickNext();
// Target environment google
expect(
await screen.findByRole('radio', {
name: /share image with a google acount/i,
})
).toHaveFocus();
await user.type(
await screen.findByRole('textbox', { name: /google principal/i }),
'[email protected]'
);
await clickNext();

// // Registration
// await screen.findByText(
// 'Automatically register and enable advanced capabilities'
// );
// const registerRadio = await screen.findByTestId('registration-radio-now');
// expect(registerRadio).toHaveFocus();
// await screen.findByRole('textbox', {
// name: 'Select activation key',
// });
// // skip registration
// const registerLaterRadio = await screen.findByTestId('registration-radio-later');
// await user.click(registerLaterRadio);
// Target environment azure
expect(
await screen.findByRole('radio', {
name: /use an account configured from sources\./i,
})
).toHaveFocus();
const azureSourceDropdown = await getSourceDropdown();
await user.click(azureSourceDropdown);
const azureSource = await screen.findByRole('option', {
name: /azureSource1/i,
});
await user.click(azureSource);

// await clickNext();
const resourceGroupDropdown = await screen.findByRole('textbox', {
name: /select resource group/i,
});
await user.click(resourceGroupDropdown);
await user.click(
await screen.findByLabelText('Resource group myResourceGroup1')
);
await clickNext();

// // File system configuration
// await clickNext();
// Registration
await screen.findByText(
'Automatically register and enable advanced capabilities'
);
const registerRadio = await screen.findByTestId('registration-radio-now');
expect(registerRadio).toHaveFocus();
await screen.findByRole('textbox', {
name: 'Select activation key',
});
// skip registration
const registerLaterRadio = await screen.findByTestId(
'registration-radio-later'
);
await user.click(registerLaterRadio);
await clickNext();

// // Packages
// const view = await screen.findByTestId('search-available-pkgs-input');
// TODO: Focus on textbox on OpenSCAP step
await clickNext();

// const availablePackagesInput = within(view).getByRole('textbox', {
// name: /search input/i,
// });
// await waitFor(() => expect(availablePackagesInput).toBeEnabled());
// expect(availablePackagesInput).toHaveFocus();
// await clickNext();
// File system configuration
// await clickNext();

// // TODO: what should have focus on Custom Repos step?
// await clickNext();
// TODO: Focus on textbox on Custom Repos step
await clickNext();

// // Name
// const nameInput = await screen.findByRole('textbox', { name: /image name/i });
// expect(nameInput).toHaveFocus();
// await clickNext();
// });
// TODO: Focus on textbox on Packages step
await clickNext();

// test('pressing Esc closes the wizard', async () => {
// await setUp();
// // wizard needs to be interacted with for the esc key to work
// await waitFor(
// async () => await user.click(await screen.findByTestId('upload-aws'))
// );
// await user.keyboard('{escape}');
// expect(router.state.location.pathname).toBe('/insights/image-builder');
// });
// TODO: Focus on textbox on Details step
await clickNext();
}, 20000);

// test('pressing Enter does not advance the wizard', async () => {
// await setUp();
// await waitFor(
// async () => await user.click(await screen.findByTestId('upload-aws'))
// );
// await user.keyboard('{enter}');
// await screen.findByRole('heading', {
// name: /image output/i,
// });
// });
test('pressing Enter does not advance the wizard', async () => {
await setUp();
await waitFor(
async () => await user.click(await screen.findByTestId('upload-aws'))
);
await user.keyboard('{enter}');
await screen.findByRole('heading', {
name: /image output/i,
});
});

// test('target environment tiles are keyboard selectable', async () => {
// const testTile = async (tile) => {
// tile.focus();
// await user.keyboard('{space}');
// expect(tile).toHaveClass('pf-m-selected');
// await user.keyboard('{space}');
// expect(tile).not.toHaveClass('pf-m-selected');
// };
test('target environment tiles are keyboard selectable', async () => {
const testTile = async (tile: HTMLElement) => {
tile.focus();
await user.keyboard('{space}');
expect(tile).toHaveClass('pf-m-selected');
await user.keyboard('{space}');
expect(tile).not.toHaveClass('pf-m-selected');
};

// await setUp();
// await clickNext();
await setUp();
await clickNext();

// await waitFor(() => screen.findByTestId('upload-aws'));
// testTile(await screen.findByTestId('upload-aws'));
// testTile(await screen.findByTestId('upload-google'));
// testTile(await screen.findByTestId('upload-azure'));
// });
//});
await waitFor(() => screen.findByTestId('upload-aws'));
testTile(await screen.findByTestId('upload-aws'));
testTile(await screen.findByTestId('upload-google'));
testTile(await screen.findByTestId('upload-azure'));
});
});
Loading