a11y tests on spaces home page including feature control (#76515)

This commit is contained in:
Bhavya RM 2020-09-09 10:26:53 -04:00 committed by GitHub
parent e985f1a272
commit 78f6410bb2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 296 additions and 4 deletions

View file

@ -55,6 +55,7 @@ exports[`ConfirmDeleteModal renders as expected 1`] = `
labelType="label"
>
<EuiFieldText
data-test-subj="deleteSpaceInput"
disabled={false}
name="confirmDeleteSpaceInput"
onChange={[Function]}

View file

@ -139,6 +139,7 @@ class ConfirmDeleteModalUI extends Component<Props, State> {
})}
>
<EuiFieldText
data-test-subj="deleteSpaceInput"
name="confirmDeleteSpaceInput"
value={this.state.confirmSpaceName}
onChange={this.onSpaceNameChange}

View file

@ -30,6 +30,7 @@ export const SecureSpaceMessage = (props: SecureSpaceMessageProps) => {
values={{
rolesLink: (
<EuiLink
data-test-subj="rolesManagementPage"
href={props.getUrlForApp('management', { path: 'security/roles' })}
aria-label={rolesLinkTextAriaLabel}
>

View file

@ -14,6 +14,7 @@ exports[`renders without crashing 1`] = `
labelType="label"
>
<EuiFieldText
data-test-subj="spaceLetterInitial"
disabled={false}
inputRef={[Function]}
name="spaceInitials"
@ -55,6 +56,7 @@ exports[`renders without crashing 1`] = `
<EuiFilePicker
accept="image/svg+xml,image/jpeg,image/png,image/gif"
compressed={false}
data-test-subj="uploadCustomImageFile"
display="default"
initialPromptText="Select image file"
onChange={[Function]}

View file

@ -36,6 +36,7 @@ exports[`renders without crashing 1`] = `
/>
<EuiLink
aria-label="Customize the URL identifier"
data-test-subj="CustomizeOrReset"
onClick={[Function]}
>
<FormattedMessage
@ -49,6 +50,7 @@ exports[`renders without crashing 1`] = `
labelType="label"
>
<EuiFieldText
data-test-subj="spaceURLDisplay"
fullWidth={true}
inputRef={[Function]}
onChange={[Function]}

View file

@ -86,6 +86,7 @@ export class CustomizeSpace extends Component<Props, State> {
>
<EuiFieldText
name="name"
data-test-subj="addSpaceName"
placeholder={i18n.translate(
'xpack.spaces.management.manageSpacePage.awesomeSpacePlaceholder',
{
@ -149,6 +150,7 @@ export class CustomizeSpace extends Component<Props, State> {
)}
<EuiFormRow
data-test-subj="optionalDescription"
label={i18n.translate(
'xpack.spaces.management.manageSpacePage.spaceDescriptionFormRowLabel',
{
@ -165,6 +167,7 @@ export class CustomizeSpace extends Component<Props, State> {
fullWidth
>
<EuiTextArea
data-test-subj="descriptionSpaceText"
name="description"
value={description}
onChange={this.onDescriptionChange}

View file

@ -119,6 +119,7 @@ export class CustomizeSpaceAvatar extends Component<Props, State> {
>
<EuiFieldText
inputRef={this.initialsInputRef}
data-test-subj="spaceLetterInitial"
name="spaceInitials"
// allows input to be cleared or otherwise invalidated while user is editing the initials,
// without defaulting to the derived initials provided by `getSpaceInitials`
@ -163,6 +164,7 @@ export class CustomizeSpaceAvatar extends Component<Props, State> {
>
<EuiFilePicker
display="default"
data-test-subj="uploadCustomImageFile"
initialPromptText={i18n.translate(
'xpack.spaces.management.customizeSpaceAvatar.selectImageUrl',
{

View file

@ -46,6 +46,7 @@ class SpaceIdentifierUI extends Component<Props, State> {
>
<EuiFieldText
readOnly={!this.state.editing}
data-test-subj="spaceURLDisplay"
placeholder={
this.state.editing || !this.props.editable
? undefined
@ -105,7 +106,11 @@ class SpaceIdentifierUI extends Component<Props, State> {
id="xpack.spaces.management.spaceIdentifier.urlIdentifierLabel"
defaultMessage="URL identifier "
/>
<EuiLink onClick={this.onEditClick} aria-label={editLinkLabel}>
<EuiLink
data-test-subj="CustomizeOrReset"
onClick={this.onEditClick}
aria-label={editLinkLabel}
>
{editLinkText}
</EuiLink>
</p>

View file

@ -68,6 +68,7 @@ exports[`EnabledFeatures renders as expected 1`] = `
values={
Object {
"rolesLink": <EuiLink
data-test-subj="goToRoles"
href="management"
>
<FormattedMessage

View file

@ -139,6 +139,7 @@ export class EnabledFeatures extends Component<Props, {}> {
values={{
rolesLink: (
<EuiLink
data-test-subj="goToRoles"
href={this.props.getUrlForApp('management', { path: 'security/roles' })}
>
<FormattedMessage

View file

@ -101,6 +101,7 @@ export class FeatureTable extends Component<Props, {}> {
return (
<EuiSwitch
data-test-subj={`feature-${record.feature.id}-toggle`}
id={record.feature.id}
checked={checked}
onChange={this.onChange(record.feature.id) as any}

View file

@ -71,8 +71,8 @@ export class ToggleAllFeatures extends Component<Props, State> {
return (
<EuiPopover
id={'changeAllFeatureVisibilityPopover'}
button={button}
data-test-subj="changeAllFeatureVisibilityPopover"
isOpen={this.state.isPopoverOpen}
closePopover={this.closePopover}
panelPaddingSize="none"

View file

@ -38,6 +38,7 @@ exports[`SpacesGridPage renders as expected 1`] = `
grow={false}
>
<EuiButton
data-test-subj="createSpace"
fill={true}
onClick={[Function]}
>

View file

@ -140,7 +140,11 @@ export class SpacesGridPage extends Component<Props, State> {
public getPrimaryActionButton() {
return (
<EuiButton fill {...reactRouterNavigate(this.props.history, '/create')}>
<EuiButton
fill
{...reactRouterNavigate(this.props.history, '/create')}
data-test-subj="createSpace"
>
<FormattedMessage
id="xpack.spaces.management.spacesGridPage.createSpaceButtonLabel"
defaultMessage="Create a space"
@ -334,6 +338,7 @@ export class SpacesGridPage extends Component<Props, State> {
{
render: (record: Space) => (
<EuiButtonIcon
data-test-subj={`${record.name}-editSpace`}
aria-label={i18n.translate(
'xpack.spaces.management.spacesGridPage.editSpaceActionName',
{
@ -351,6 +356,7 @@ export class SpacesGridPage extends Component<Props, State> {
available: (record: Space) => !isReservedSpace(record),
render: (record: Space) => (
<EuiButtonIcon
data-test-subj={`${record.name}-deleteSpace`}
aria-label={i18n.translate(
'xpack.spaces.management.spacesGridPage.deleteActionName',
{

View file

@ -4,6 +4,7 @@ exports[`ManageSpacesButton doesn't render if user profile forbids managing spac
exports[`ManageSpacesButton renders as expected 1`] = `
<EuiButton
data-test-subj="manageSpaces"
onClick={[Function]}
size="s"
>

View file

@ -32,6 +32,7 @@ export class ManageSpacesButton extends Component<Props, {}> {
isDisabled={this.props.isDisabled}
onClick={this.navigateToManageSpaces}
style={this.props.style}
data-test-subj="manageSpaces"
>
<FormattedMessage
id="xpack.spaces.manageSpacesButton.manageSpacesButtonLabel"

View file

@ -184,6 +184,7 @@ class SpacesMenuUI extends Component<Props, State> {
return (
<EuiContextMenuItem
key={space.id}
data-test-subj={`${space.id}-gotoSpace`}
icon={icon}
href={addSpaceIdToPath(this.props.serverBasePath, space.id, ENTER_SPACE_PATH)}
toolTipTitle={space.description && space.name}

View file

@ -0,0 +1,142 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/
// a11y tests for spaces, space selection and spacce creation and feature controls
import { FtrProviderContext } from '../ftr_provider_context';
export default function ({ getService, getPageObjects }: FtrProviderContext) {
const PageObjects = getPageObjects(['common', 'spaceSelector', 'home', 'header', 'security']);
const a11y = getService('a11y');
const browser = getService('browser');
const esArchiver = getService('esArchiver');
const testSubjects = getService('testSubjects');
const retry = getService('retry');
const toasts = getService('toasts');
describe('Kibana spaces page meets a11y validations', () => {
before(async () => {
await esArchiver.load('empty_kibana');
await PageObjects.common.navigateToApp('home');
});
it('a11y test for manage spaces menu from top nav on Kibana home', async () => {
await PageObjects.spaceSelector.openSpacesNav();
await retry.waitFor(
'Manage spaces option visible',
async () => await testSubjects.exists('manageSpaces')
);
await a11y.testAppSnapshot();
});
it('a11y test for manage spaces page', async () => {
await PageObjects.spaceSelector.clickManageSpaces();
await PageObjects.header.waitUntilLoadingHasFinished();
await toasts.dismissAllToasts();
await retry.waitFor(
'Manage spaces page visible',
async () => await testSubjects.exists('createSpace')
);
await a11y.testAppSnapshot();
});
it('a11y test for click on create space page', async () => {
await PageObjects.spaceSelector.clickCreateSpace();
await a11y.testAppSnapshot();
});
it('a11y test for for customize space card', async () => {
await PageObjects.spaceSelector.clickEnterSpaceName();
await PageObjects.spaceSelector.addSpaceName('space_a');
await PageObjects.spaceSelector.clickSpaceAcustomAvatar();
await a11y.testAppSnapshot();
await browser.pressKeys(browser.keys.ESCAPE);
});
// EUI issue - https://github.com/elastic/eui/issues/3999
it.skip('a11y test for color picker', async () => {
await PageObjects.spaceSelector.clickColorPicker();
await a11y.testAppSnapshot();
await browser.pressKeys(browser.keys.ESCAPE);
});
it('a11y test for customize and reset space URL identifier', async () => {
await PageObjects.spaceSelector.clickOnCustomizeURL();
await a11y.testAppSnapshot();
await PageObjects.spaceSelector.clickOnCustomizeURL();
await a11y.testAppSnapshot();
});
it('a11y test for describe space text space', async () => {
await PageObjects.spaceSelector.clickOnDescriptionOfSpace();
await a11y.testAppSnapshot();
});
it('a11y test for click on "show" button to open customize feature display', async () => {
await retry.waitFor(
'show button is visible',
async () => await testSubjects.exists('show-hide-section-link')
);
await PageObjects.spaceSelector.clickShowFeatures();
await a11y.testAppSnapshot();
});
it('a11y test for change all option for feature visibility popover', async () => {
await PageObjects.spaceSelector.clickFeaturesVisibilityButton();
await a11y.testAppSnapshot();
});
it('a11y test for hide all feature visibility popover option', async () => {
await PageObjects.spaceSelector.clickHideAllFeatures();
await a11y.testAppSnapshot();
});
it('a11y test for toggle individual feature - using enterprise feature visibility', async () => {
await PageObjects.spaceSelector.clickFeaturesVisibilityButton();
await PageObjects.spaceSelector.clickShowAllFeatures();
await PageObjects.spaceSelector.toggleFeatureVisibility('enterpriseSearch');
await a11y.testAppSnapshot();
});
it('a11y test for space listing page', async () => {
await PageObjects.spaceSelector.clickSaveSpaceCreation();
await a11y.testAppSnapshot();
});
it('a11y test for updating a space', async () => {
await PageObjects.spaceSelector.clickSpaceEditButton('space_a');
await a11y.testAppSnapshot();
await PageObjects.spaceSelector.clickCancelSpaceCreation();
});
// creating space b and making it the current space so space selector page gets displayed when space b gets deleted
it('a11y test for delete space button', async () => {
await PageObjects.spaceSelector.clickCreateSpace();
await PageObjects.spaceSelector.clickEnterSpaceName();
await PageObjects.spaceSelector.addSpaceName('space_b');
await PageObjects.spaceSelector.clickSaveSpaceCreation();
await PageObjects.common.navigateToApp('home');
await PageObjects.spaceSelector.openSpacesNav();
await PageObjects.spaceSelector.clickSpaceAvatar('space_b');
await PageObjects.header.waitUntilLoadingHasFinished();
await PageObjects.spaceSelector.openSpacesNav();
await PageObjects.spaceSelector.clickManageSpaces();
await PageObjects.spaceSelector.clickOnDeleteSpaceButton('space_b');
await a11y.testAppSnapshot();
// a11y test for no space name in confirm dialogue box
await PageObjects.spaceSelector.confirmDeletingSpace();
await a11y.testAppSnapshot();
});
// test starts with deleting space b so we can get the space selection page instead of logging out in the test
it('a11y test for space selection page', async () => {
await PageObjects.spaceSelector.setSpaceNameTobeDeleted('space_b');
await PageObjects.spaceSelector.confirmDeletingSpace();
await a11y.testAppSnapshot();
await PageObjects.spaceSelector.clickSpaceCard('default');
});
});
}

View file

@ -20,7 +20,7 @@ export default async function ({ readConfigFile }: FtrConfigProviderContext) {
require.resolve('./apps/grok_debugger'),
require.resolve('./apps/search_profiler'),
require.resolve('./apps/uptime'),
require.resolve('./apps/painless_lab'),
require.resolve('./apps/spaces'),
],
pageObjects,
services,

View file

@ -50,6 +50,126 @@ export function SpaceSelectorPageProvider({ getService, getPageObjects }: FtrPro
return await testSubjects.click('spacesNavSelector');
}
async clickManageSpaces() {
await testSubjects.click('manageSpaces');
}
async clickCreateSpace() {
await testSubjects.click('createSpace');
}
async clickEnterSpaceName() {
await testSubjects.click('addSpaceName');
}
async addSpaceName(spaceName: string) {
await testSubjects.setValue('addSpaceName', spaceName);
}
async clickSpaceAcustomAvatar() {
await testSubjects.click('space-avatar-space_a');
}
async clickSpaceInitials() {
await testSubjects.click('spaceLetterInitial');
}
async addSpaceInitials(spaceInitials: string) {
await testSubjects.setValue('spaceLetterInitial', spaceInitials);
}
async clickColorPicker() {
await testSubjects.click('colorPickerAnchor');
}
async setColorinPicker(hexValue: string) {
await testSubjects.setValue('colorPickerAnchor', hexValue);
}
async clickShowFeatures() {
await testSubjects.click('show-hide-section-link');
}
async clickChangeAllPriv() {
await testSubjects.click('changeAllPrivilegesButton');
}
async clickSaveSpaceCreation() {
await testSubjects.click('save-space-button');
}
async clickSpaceEditButton(spaceName: string) {
await testSubjects.click(`${spaceName}-editSpace`);
}
async clickGoToRolesPage() {
await testSubjects.click('rolesManagementPage');
}
async clickCancelSpaceCreation() {
await testSubjects.click('cancel-space-button');
}
async clickOnCustomizeURL() {
await testSubjects.click('CustomizeOrReset');
}
async clickOnSpaceURLDisplay() {
await testSubjects.click('spaceURLDisplay');
}
async setSpaceURL(spaceURL: string) {
await testSubjects.setValue('spaceURLDisplay', spaceURL);
}
async clickFeaturesVisibilityButton() {
await testSubjects.click('changeAllFeatureVisibilityPopover');
}
async clickHideAllFeatures() {
await testSubjects.click('spc-toggle-all-features-hide');
}
async clickShowAllFeatures() {
await testSubjects.click('spc-toggle-all-features-show');
}
async toggleFeatureVisibility(featureName: string) {
await testSubjects.click(`feature-${featureName}-toggle`);
}
async clickOnDescriptionOfSpace() {
await testSubjects.click('descriptionSpaceText');
}
async setOnDescriptionOfSpace(descriptionSpace: string) {
await testSubjects.setValue('descriptionSpaceText', descriptionSpace);
}
async clickOnDeleteSpaceButton(spaceName: string) {
await testSubjects.click(`${spaceName}-deleteSpace`);
}
async setSpaceNameTobeDeleted(spaceName: string) {
await testSubjects.setValue('deleteSpaceInput', spaceName);
}
async cancelDeletingSpace() {
await testSubjects.click('confirmModalCancelButton');
}
async confirmDeletingSpace() {
await testSubjects.click('confirmModalConfirmButton');
}
async clickOnSpaceb() {
await testSubjects.click('space-avatar-space_b');
}
async goToSpecificSpace(spaceName: string) {
await testSubjects.click(`${spaceName}-gotoSpace`);
}
async clickSpaceAvatar(spaceId: string) {
return await retry.try(async () => {
log.info(`SpaceSelectorPage:clickSpaceAvatar(${spaceId})`);