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:
|
||||
'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: {
|
||||
getModalTitle: () =>
|
||||
|
|
|
@ -49,6 +49,7 @@ export const ConfirmModal: FunctionComponent<Props> = (props) => {
|
|||
cancelButtonText={cancelButtonText}
|
||||
defaultFocusedButton="confirm"
|
||||
buttonColor="danger"
|
||||
data-test-subj="canvasConfirmModal"
|
||||
>
|
||||
{message}
|
||||
</EuiConfirmModal>
|
||||
|
|
|
@ -213,7 +213,7 @@ export class WorkpadLoader extends React.PureComponent {
|
|||
width: '20%',
|
||||
render: (date) => this.props.formatDate(date),
|
||||
},
|
||||
{ name: '', actions, width: '5%' },
|
||||
{ name: strings.getTableActionsColumnTitle(), actions, width: '100px' },
|
||||
];
|
||||
|
||||
const sorting = {
|
||||
|
@ -310,6 +310,7 @@ export class WorkpadLoader extends React.PureComponent {
|
|||
onClick={this.openRemoveConfirm}
|
||||
disabled={!canUserWrite}
|
||||
aria-label={strings.getDeleteButtonAriaLabel(selectedWorkpads.length)}
|
||||
data-test-subj="deleteWorkpadButton"
|
||||
>
|
||||
{strings.getDeleteButtonLabel(selectedWorkpads.length)}
|
||||
</EuiButton>
|
||||
|
@ -331,6 +332,7 @@ export class WorkpadLoader extends React.PureComponent {
|
|||
display="default"
|
||||
compressed
|
||||
className="canvasWorkpad__upload--compressed"
|
||||
aria-label={strings.getFilePickerPlaceholder()}
|
||||
initialPromptText={strings.getFilePickerPlaceholder()}
|
||||
onChange={([file]) => uploadWorkpad(file, this.onUpload, this.props.notify)}
|
||||
accept="application/json"
|
||||
|
|
|
@ -37,6 +37,7 @@ export const WorkpadManager = ({ onClose }) => {
|
|||
{
|
||||
id: 'workpadTemplates',
|
||||
name: strings.getWorkpadTemplatesTabLabel(),
|
||||
'data-test-subj': 'workpadTemplates',
|
||||
content: (
|
||||
<Fragment>
|
||||
<EuiSpacer />
|
||||
|
@ -50,7 +51,9 @@ export const WorkpadManager = ({ onClose }) => {
|
|||
<EuiModalHeader className="canvasHomeApp__modalHeader">
|
||||
<EuiFlexGroup alignItems="center" gutterSize="s">
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiModalHeaderTitle>{strings.getModalTitle()}</EuiModalHeaderTitle>
|
||||
<EuiModalHeaderTitle>
|
||||
<h1>{strings.getModalTitle()}</h1>
|
||||
</EuiModalHeaderTitle>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiModalHeader>
|
||||
|
|
|
@ -95,6 +95,7 @@ exports[`Storyshots components/WorkpadTemplates default 1`] = `
|
|||
/>
|
||||
<div
|
||||
className="euiBasicTable canvasWorkpad__dropzoneTable canvasWorkpad__dropzoneTable--tags"
|
||||
data-test-subj="canvasTemplatesTable"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
|
|
|
@ -150,6 +150,7 @@ export class WorkpadTemplates extends React.PureComponent<
|
|||
sorting={sorting}
|
||||
onChange={this.onTableChange}
|
||||
className="canvasWorkpad__dropzoneTable canvasWorkpad__dropzoneTable--tags"
|
||||
data-test-subj="canvasTemplatesTable"
|
||||
/>
|
||||
<EuiSpacer />
|
||||
{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/lens'),
|
||||
require.resolve('./apps/upgrade_assistant'),
|
||||
require.resolve('./apps/canvas'),
|
||||
],
|
||||
|
||||
pageObjects,
|
||||
|
|
Loading…
Reference in a new issue