Skip to content

Commit

Permalink
V2Wizard/test: Add autofocus to radios and enable Keyboard accessibil…
Browse files Browse the repository at this point in the history 
…ity tests

This adds `autoFocus` attribute to radios on AWS, Azure and GCP step.

The Keyboard accessibility tests have been re-enabled.
  • Loading branch information
@regexowl
regexowl committed Feb 29, 2024
1 parent 3118fc0 commit 43b40c0
Show file tree
Hide file tree
Showing 4 changed files with 133 additions and 124 deletions.
1 change: 1 addition & 0 deletions src/Components/CreateImageWizardV2/steps/TargetEnvironment/Aws/index.tsx
View file
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
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
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
254 changes: 130 additions & 124 deletions src/test/Components/CreateImageWizardV2/CreateImageWizard.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1517,146 +1517,152 @@ 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,
// })
// );
// };
describe('Keyboard accessibility', () => {
const user = userEvent.setup();
const setUp = async () => {
({ router } = await renderCustomRoutesWithReduxRouter(
'imagewizard',
{},
routes
));
await clickNext();
};

// test('autofocus on each step first input element', async () => {
// await setUp();
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,
})
);
};

// // Image output
// await selectAllEnvironments();
// await clickNext();
test('autofocus on each step first input element', async () => {
await setUp();

// // 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);
// Image output
await selectAllEnvironments();
await clickNext();

// 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 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();
await clickNext();

// // 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);
// 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();

// 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 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);

// // 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);
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();

// 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();

// // File system configuration
// await clickNext();
// TODO: Focus on textbox on OpenSCAP step
await clickNext();

// // Packages
// const view = await screen.findByTestId('search-available-pkgs-input');
// File system configuration
// await clickNext();

// const availablePackagesInput = within(view).getByRole('textbox', {
// name: /search input/i,
// });
// await waitFor(() => expect(availablePackagesInput).toBeEnabled());
// expect(availablePackagesInput).toHaveFocus();
// await clickNext();
// TODO: Focus on textbox on Custom Repos step
await clickNext();

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

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

// 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');
// });
// test('pressing Esc closes the wizard', async () => {
// await setUp();
// // wizard needs to be interacted with for the esc key to work
// await user.click(await screen.findByTestId('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();
// 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'));
});
});

0 comments on commit 43b40c0

Please sign in to comment.