Skip to content

Commit

Permalink
chore(tests): add aria labels (#485)
Browse files Browse the repository at this point in the history 
* chore(tests): add aria labels for some elements
  • Loading branch information
@cbr7
cbr7 authored May 23, 2024
1 parent 92a9d41 commit 6214017
Show file tree
Hide file tree
Showing 3 changed files with 43 additions and 25 deletions.
22 changes: 12 additions & 10 deletions packages/frontend/src/Build.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -429,7 +429,7 @@ $: if (availableArchitectures) {
<div class="mb-2">
<span class="text-md font-semibold mb-2 block">Disk image type</span>
<div class="flex items-center mb-3">
<label for="raw" class="ml-1 flex items-center cursor-pointer">
<label for="raw" class="ml-1 flex items-center cursor-pointer" aria-label="raw-checkbox">
<input
bind:group="{buildType}"
type="checkbox"
Expand All @@ -448,7 +448,7 @@ $: if (availableArchitectures) {
</label>
</div>
<div class="flex items-center mb-3">
<label for="qcow2" class="ml-1 flex items-center cursor-pointer">
<label for="qcow2" class="ml-1 flex items-center cursor-pointer" aria-label="qcow2-checkbox">
<input
bind:group="{buildType}"
type="checkbox"
Expand All @@ -467,7 +467,7 @@ $: if (availableArchitectures) {
</label>
</div>
<div class="flex items-center mb-3">
<label for="iso" class="ml-1 flex items-center cursor-pointer">
<label for="iso" class="ml-1 flex items-center cursor-pointer" aria-label="iso-checkbox">
<input
bind:group="{buildType}"
type="checkbox"
Expand All @@ -486,7 +486,7 @@ $: if (availableArchitectures) {
</label>
</div>
<div class="flex items-center mb-3">
<label for="vmdk" class="ml-1 flex items-center cursor-pointer">
<label for="vmdk" class="ml-1 flex items-center cursor-pointer" aria-label="vmdk-checkbox">
<input
bind:group="{buildType}"
type="checkbox"
Expand All @@ -505,7 +505,7 @@ $: if (availableArchitectures) {
</label>
</div>
<div class="flex items-center mb-3">
<label for="ami" class="ml-1 flex items-center cursor-pointer">
<label for="ami" class="ml-1 flex items-center cursor-pointer" aria-label="ami-checkbox">
<input
bind:group="{buildType}"
type="checkbox"
Expand All @@ -527,7 +527,7 @@ $: if (availableArchitectures) {
<div>
<span class="text-md font-semibold mb-2 block">Filesystem</span>
<div class="flex items-center mb-3 space-x-3">
<label for="defaultFs" class="ml-1 flex items-center cursor-pointer">
<label for="defaultFs" class="ml-1 flex items-center cursor-pointer" aria-label="default-radio">
<input
bind:group="{buildFilesystem}"
disabled="{fedoraDetected}"
Expand All @@ -542,7 +542,7 @@ $: if (availableArchitectures) {
</div>
<span class="text-sm {fedoraDetected ? 'text-gray-300' : 'text-white'}">Default</span>
</label>
<label for="xfsFs" class="ml-1 flex items-center cursor-pointer">
<label for="xfsFs" class="ml-1 flex items-center cursor-pointer" aria-label="xfs-radio">
<input
bind:group="{buildFilesystem}"
type="radio"
Expand All @@ -556,7 +556,7 @@ $: if (availableArchitectures) {
</div>
<span class="text-sm text-white">XFS</span>
</label>
<label for="ext4Fs" class="ml-1 flex items-center cursor-pointer">
<label for="ext4Fs" class="ml-1 flex items-center cursor-pointer" aria-label="ext4-radio">
<input
bind:group="{buildFilesystem}"
type="radio"
Expand Down Expand Up @@ -601,7 +601,8 @@ $: if (availableArchitectures) {
'arm64',
)
? 'cursor-pointer hover:border-violet-500'
: 'ring-0 opacity-50'}">
: 'ring-0 opacity-50'}"
aria-label="arm64-button">
<i class="fab fa-linux fa-2x"></i>
<br />
<span class="ml-2 text-sm">ARM® aarch64 systems</span>
Expand All @@ -623,7 +624,8 @@ $: if (availableArchitectures) {
'amd64',
)
? 'cursor-pointer hover:border-violet-500'
: 'ring-0 opacity-50'}">
: 'ring-0 opacity-50'}"
aria-label="amd64-button">
<i class="fab fa-linux fa-2x"></i>
<br />
<span class="ml-2 text-sm">Intel and AMD x86_64 systems</span>
Expand Down
8 changes: 4 additions & 4 deletions tests/playwright/src/bootc-extension.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import {
PodmanDesktopRunner,
WelcomePage,
deleteImage,
removeFolderIfExists,
} from '@podman-desktop/tests-playwright';
import { expect as playExpect } from '@playwright/test';
import { RunnerTestContext } from '@podman-desktop/tests-playwright';
Expand All @@ -41,16 +42,17 @@ const imageName = 'quay.io/centos-bootc/centos-bootc';
const imageTag = 'stream9';
const extensionName = 'bootc';
const extensionLabel = 'redhat.bootc';
const isLinux = os.platform() === 'linux';
const containerFilePath = path.resolve(__dirname, '..', 'resources', 'bootable-containerfile');
const contextDirectory = path.resolve(__dirname, '..', 'resources');
const isLinux = os.platform() === 'linux';
const skipInstallation = process.env.SKIP_INSTALLATION;

beforeEach<RunnerTestContext>(async ctx => {
ctx.pdRunner = pdRunner;
});

beforeAll(async () => {
await removeFolderIfExists('tests/output/images');
pdRunner = new PodmanDesktopRunner({ customFolder: 'bootc-tests-pd', autoUpdate: false, autoCheckUpdate: false });
page = await pdRunner.start();
pdRunner.setVideoAndTraceName('bootc-e2e');
Expand Down Expand Up @@ -156,9 +158,7 @@ async function ensureBootcIsRemoved(): Promise<void> {
}

async function handleWebview(imageDetailsPage: ImageDetailsPage): Promise<[Page, Page]> {
await imageDetailsPage.actionsButton.click();
await playExpect(imageDetailsPage.buildDiskImageButton).toBeEnabled();
await imageDetailsPage.buildDiskImageButton.click();
await page.getByLabel('Bootable Containers').click();
await page.waitForTimeout(2000);

const webView = page.getByRole('document', { name: 'Bootable Containers' });
Expand Down
38 changes: 27 additions & 11 deletions tests/playwright/src/model/bootc-page.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,22 +39,26 @@ export class BootcPage {
readonly rowGroup: Locator;
readonly latestBuiltImage: Locator;
readonly getCurrentStatusOfLatestBuildImage: Locator;
readonly bootcListPage: Locator;
readonly bootcBuildDiskPage: Locator;

constructor(page: Page, webview: Page) {
this.page = page;
this.webview = webview;
this.heading = webview.getByLabel('Build Disk Image');
this.outputFolderPath = webview.getByLabel('folder-select');
this.imageSelect = webview.getByLabel('image-select');
this.rawCheckbox = webview.locator('label[for="raw"]');
this.qcow2Checkbox = webview.locator('label[for="qcow2"]');
this.isoCheckbox = webview.locator('label[for="iso"]');
this.vmdkCheckbox = webview.locator('label[for="vmdk"]');
this.amiCheckbox = webview.locator('label[for="ami"]');
this.amd64Button = webview.locator('label[for="amd64"]');
this.arm64Button = webview.locator('label[for="arm64"]');
this.buildButton = webview.getByRole('button', { name: 'Build' });
this.goBackButton = webview.getByRole('button', { name: 'Go Back' });
this.rawCheckbox = webview.getByLabel('raw-checkbox');
this.qcow2Checkbox = webview.getByLabel('qcow2-checkbox');
this.isoCheckbox = webview.getByLabel('iso-checkbox');
this.vmdkCheckbox = webview.getByLabel('vmdk-checkbox');
this.amiCheckbox = webview.getByLabel('ami-checkbox');
this.amd64Button = webview.getByLabel('amd64-button');
this.arm64Button = webview.getByLabel('arm64-button');
this.bootcListPage = webview.getByRole('region', { name: 'Bootable Containers', exact: true });
this.bootcBuildDiskPage = webview.getByLabel('Build Disk Image');
this.buildButton = webview.getByRole('button', { name: 'Build', exact: true });
this.goBackButton = webview.getByRole('button', { name: 'Go back', exact: true });
this.rowGroup = webview.getByRole('rowgroup').nth(1);
this.latestBuiltImage = this.rowGroup.getByRole('row').first();
this.getCurrentStatusOfLatestBuildImage = this.latestBuiltImage.getByRole('status');
Expand All @@ -68,11 +72,11 @@ export class BootcPage {
): Promise<boolean> {
let result = false;

if (await this.buildButton.isEnabled()) {
if (await this.bootcListPage.isVisible()) {
await this.buildButton.click();
await playExpect(this.bootcBuildDiskPage).toBeVisible();
}

await playExpect(this.buildButton).toBeDisabled();
await this.imageSelect.selectOption({ label: imageName });

await this.outputFolderPath.fill(pathToStore);
Expand All @@ -81,18 +85,23 @@ export class BootcPage {
switch (type.toLocaleLowerCase()) {
case 'raw':
await this.rawCheckbox.check();
await playExpect(this.rawCheckbox).toBeChecked();
break;
case 'qcow2':
await this.qcow2Checkbox.check();
await playExpect(this.qcow2Checkbox).toBeChecked();
break;
case 'iso':
await this.isoCheckbox.check();
await playExpect(this.isoCheckbox).toBeChecked();
break;
case 'vmdk':
await this.vmdkCheckbox.check();
await playExpect(this.vmdkCheckbox).toBeChecked();
break;
case 'ami':
await this.amiCheckbox.check();
await playExpect(this.amiCheckbox).toBeChecked();
break;
default:
throw new Error(`Unknown type: ${type}`);
Expand All @@ -112,10 +121,12 @@ export class BootcPage {
}

await playExpect(this.buildButton).toBeEnabled();
await this.buildButton.focus();
await this.buildButton.click();

await playExpect(this.goBackButton).toBeEnabled();
await this.goBackButton.click();
await playExpect(this.bootcListPage).toBeVisible();

await this.waitUntilCurrentBuildIsFinished();
if ((await this.getCurrentStatusOfLatestEntry()) === 'error') return false;
Expand All @@ -131,10 +142,15 @@ export class BootcPage {

private async uncheckedAllCheckboxes(): Promise<void> {
await this.rawCheckbox.uncheck();
await playExpect(this.rawCheckbox).not.toBeChecked();
await this.qcow2Checkbox.uncheck();
await playExpect(this.qcow2Checkbox).not.toBeChecked();
await this.isoCheckbox.uncheck();
await playExpect(this.isoCheckbox).not.toBeChecked();
await this.vmdkCheckbox.uncheck();
await playExpect(this.vmdkCheckbox).not.toBeChecked();
await this.amiCheckbox.uncheck();
await playExpect(this.amiCheckbox).not.toBeChecked();
}

async getCurrentStatusOfLatestEntry(): Promise<string> {
Expand Down

0 comments on commit 6214017

Please sign in to comment.