Adding automated a11y tests for Canvas (#91571)
This commit is contained in:
parent
60e63aa53b
commit
18db413083
8 changed files with 77 additions and 2 deletions
|
@ -1752,6 +1752,12 @@ export const ComponentStrings = {
|
||||||
description:
|
description:
|
||||||
'This column in the table contains the date/time the workpad was last updated.',
|
'This column in the table contains the date/time the workpad was last updated.',
|
||||||
}),
|
}),
|
||||||
|
getTableActionsColumnTitle: () =>
|
||||||
|
i18n.translate('xpack.canvas.workpadLoader.table.actionsColumnTitle', {
|
||||||
|
defaultMessage: 'Actions',
|
||||||
|
description:
|
||||||
|
'This column in the table contains the actions that can be taken on a workpad.',
|
||||||
|
}),
|
||||||
},
|
},
|
||||||
WorkpadManager: {
|
WorkpadManager: {
|
||||||
getModalTitle: () =>
|
getModalTitle: () =>
|
||||||
|
|
|
@ -49,6 +49,7 @@ export const ConfirmModal: FunctionComponent<Props> = (props) => {
|
||||||
cancelButtonText={cancelButtonText}
|
cancelButtonText={cancelButtonText}
|
||||||
defaultFocusedButton="confirm"
|
defaultFocusedButton="confirm"
|
||||||
buttonColor="danger"
|
buttonColor="danger"
|
||||||
|
data-test-subj="canvasConfirmModal"
|
||||||
>
|
>
|
||||||
{message}
|
{message}
|
||||||
</EuiConfirmModal>
|
</EuiConfirmModal>
|
||||||
|
|
|
@ -213,7 +213,7 @@ export class WorkpadLoader extends React.PureComponent {
|
||||||
width: '20%',
|
width: '20%',
|
||||||
render: (date) => this.props.formatDate(date),
|
render: (date) => this.props.formatDate(date),
|
||||||
},
|
},
|
||||||
{ name: '', actions, width: '5%' },
|
{ name: strings.getTableActionsColumnTitle(), actions, width: '100px' },
|
||||||
];
|
];
|
||||||
|
|
||||||
const sorting = {
|
const sorting = {
|
||||||
|
@ -310,6 +310,7 @@ export class WorkpadLoader extends React.PureComponent {
|
||||||
onClick={this.openRemoveConfirm}
|
onClick={this.openRemoveConfirm}
|
||||||
disabled={!canUserWrite}
|
disabled={!canUserWrite}
|
||||||
aria-label={strings.getDeleteButtonAriaLabel(selectedWorkpads.length)}
|
aria-label={strings.getDeleteButtonAriaLabel(selectedWorkpads.length)}
|
||||||
|
data-test-subj="deleteWorkpadButton"
|
||||||
>
|
>
|
||||||
{strings.getDeleteButtonLabel(selectedWorkpads.length)}
|
{strings.getDeleteButtonLabel(selectedWorkpads.length)}
|
||||||
</EuiButton>
|
</EuiButton>
|
||||||
|
@ -331,6 +332,7 @@ export class WorkpadLoader extends React.PureComponent {
|
||||||
display="default"
|
display="default"
|
||||||
compressed
|
compressed
|
||||||
className="canvasWorkpad__upload--compressed"
|
className="canvasWorkpad__upload--compressed"
|
||||||
|
aria-label={strings.getFilePickerPlaceholder()}
|
||||||
initialPromptText={strings.getFilePickerPlaceholder()}
|
initialPromptText={strings.getFilePickerPlaceholder()}
|
||||||
onChange={([file]) => uploadWorkpad(file, this.onUpload, this.props.notify)}
|
onChange={([file]) => uploadWorkpad(file, this.onUpload, this.props.notify)}
|
||||||
accept="application/json"
|
accept="application/json"
|
||||||
|
|
|
@ -37,6 +37,7 @@ export const WorkpadManager = ({ onClose }) => {
|
||||||
{
|
{
|
||||||
id: 'workpadTemplates',
|
id: 'workpadTemplates',
|
||||||
name: strings.getWorkpadTemplatesTabLabel(),
|
name: strings.getWorkpadTemplatesTabLabel(),
|
||||||
|
'data-test-subj': 'workpadTemplates',
|
||||||
content: (
|
content: (
|
||||||
<Fragment>
|
<Fragment>
|
||||||
<EuiSpacer />
|
<EuiSpacer />
|
||||||
|
@ -50,7 +51,9 @@ export const WorkpadManager = ({ onClose }) => {
|
||||||
<EuiModalHeader className="canvasHomeApp__modalHeader">
|
<EuiModalHeader className="canvasHomeApp__modalHeader">
|
||||||
<EuiFlexGroup alignItems="center" gutterSize="s">
|
<EuiFlexGroup alignItems="center" gutterSize="s">
|
||||||
<EuiFlexItem grow={false}>
|
<EuiFlexItem grow={false}>
|
||||||
<EuiModalHeaderTitle>{strings.getModalTitle()}</EuiModalHeaderTitle>
|
<EuiModalHeaderTitle>
|
||||||
|
<h1>{strings.getModalTitle()}</h1>
|
||||||
|
</EuiModalHeaderTitle>
|
||||||
</EuiFlexItem>
|
</EuiFlexItem>
|
||||||
</EuiFlexGroup>
|
</EuiFlexGroup>
|
||||||
</EuiModalHeader>
|
</EuiModalHeader>
|
||||||
|
|
|
@ -95,6 +95,7 @@ exports[`Storyshots components/WorkpadTemplates default 1`] = `
|
||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
className="euiBasicTable canvasWorkpad__dropzoneTable canvasWorkpad__dropzoneTable--tags"
|
className="euiBasicTable canvasWorkpad__dropzoneTable canvasWorkpad__dropzoneTable--tags"
|
||||||
|
data-test-subj="canvasTemplatesTable"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
|
|
|
@ -150,6 +150,7 @@ export class WorkpadTemplates extends React.PureComponent<
|
||||||
sorting={sorting}
|
sorting={sorting}
|
||||||
onChange={this.onTableChange}
|
onChange={this.onTableChange}
|
||||||
className="canvasWorkpad__dropzoneTable canvasWorkpad__dropzoneTable--tags"
|
className="canvasWorkpad__dropzoneTable canvasWorkpad__dropzoneTable--tags"
|
||||||
|
data-test-subj="canvasTemplatesTable"
|
||||||
/>
|
/>
|
||||||
<EuiSpacer />
|
<EuiSpacer />
|
||||||
{rows.length > 0 && (
|
{rows.length > 0 && (
|
||||||
|
|
60
x-pack/test/accessibility/apps/canvas.ts
Normal file
60
x-pack/test/accessibility/apps/canvas.ts
Normal file
|
@ -0,0 +1,60 @@
|
||||||
|
/*
|
||||||
|
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||||
|
* or more contributor license agreements. Licensed under the Elastic License
|
||||||
|
* 2.0; you may not use this file except in compliance with the Elastic License
|
||||||
|
* 2.0.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { FtrProviderContext } from '../ftr_provider_context';
|
||||||
|
|
||||||
|
export default function ({ getService, getPageObjects }: FtrProviderContext) {
|
||||||
|
const a11y = getService('a11y');
|
||||||
|
const testSubjects = getService('testSubjects');
|
||||||
|
const esArchiver = getService('esArchiver');
|
||||||
|
const retry = getService('retry');
|
||||||
|
const { common } = getPageObjects(['common']);
|
||||||
|
|
||||||
|
describe('Canvas', () => {
|
||||||
|
before(async () => {
|
||||||
|
await esArchiver.load('canvas/default');
|
||||||
|
await common.navigateToApp('canvas');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('loads workpads', async function () {
|
||||||
|
await retry.waitFor(
|
||||||
|
'canvas workpads visible',
|
||||||
|
async () => await testSubjects.exists('canvasWorkpadLoaderTable')
|
||||||
|
);
|
||||||
|
await a11y.testAppSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('provides bulk actions', async function () {
|
||||||
|
await testSubjects.click('checkboxSelectAll');
|
||||||
|
await retry.waitFor(
|
||||||
|
'canvas bulk actions visible',
|
||||||
|
async () => await testSubjects.exists('deleteWorkpadButton')
|
||||||
|
);
|
||||||
|
await a11y.testAppSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('can delete workpads', async function () {
|
||||||
|
await testSubjects.click('deleteWorkpadButton');
|
||||||
|
await retry.waitFor(
|
||||||
|
'canvas delete modal visible',
|
||||||
|
async () => await testSubjects.exists('canvasConfirmModal')
|
||||||
|
);
|
||||||
|
await a11y.testAppSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('can navigate to templates', async function () {
|
||||||
|
await testSubjects.click('confirmModalCancelButton'); // close modal from previous test
|
||||||
|
|
||||||
|
await testSubjects.click('workpadTemplates');
|
||||||
|
await retry.waitFor(
|
||||||
|
'canvas templates visible',
|
||||||
|
async () => await testSubjects.exists('canvasTemplatesTable')
|
||||||
|
);
|
||||||
|
await a11y.testAppSnapshot();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
|
@ -32,6 +32,7 @@ export default async function ({ readConfigFile }: FtrConfigProviderContext) {
|
||||||
require.resolve('./apps/ml'),
|
require.resolve('./apps/ml'),
|
||||||
require.resolve('./apps/lens'),
|
require.resolve('./apps/lens'),
|
||||||
require.resolve('./apps/upgrade_assistant'),
|
require.resolve('./apps/upgrade_assistant'),
|
||||||
|
require.resolve('./apps/canvas'),
|
||||||
],
|
],
|
||||||
|
|
||||||
pageObjects,
|
pageObjects,
|
||||||
|
|
Loading…
Reference in a new issue