Added new a11y test for index management and Updated ILM UI code blocks to use correct language prop instead of lang (#133970)

* Added new a11y test for index management.
Fixed a11y violations in code in index management app in the code block element.
Added new test to a11y config to run in CI.

* Removed unused reference.

* Moved navigate to initial code block.

* Fixed all nits.
This commit is contained in:
John Dorlus 2022-06-21 22:59:45 -04:00 committed by GitHub
parent 3e70fd07f4
commit d7cb120904
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 181 additions and 74 deletions

View file

@ -21,83 +21,83 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
const testSubjects = getService('testSubjects');
describe('Management', () => {
before(async () => {
await esArchiver.loadIfNeeded('test/functional/fixtures/es_archiver/logstash_functional');
await kibanaServer.importExport.load('test/functional/fixtures/kbn_archiver/discover');
await kibanaServer.uiSettings.update({
defaultIndex: 'logstash-*',
});
await PageObjects.settings.navigateTo();
});
after(async () => {
await kibanaServer.importExport.unload('test/functional/fixtures/kbn_archiver/discover');
await esArchiver.unload('test/functional/fixtures/es_archiver/logstash_functional');
});
it('main view', async () => {
await a11y.testAppSnapshot();
});
it('index pattern page', async () => {
await PageObjects.settings.clickKibanaIndexPatterns();
await a11y.testAppSnapshot();
});
describe('data views', async () => {
before(async () => {
await esArchiver.loadIfNeeded('test/functional/fixtures/es_archiver/logstash_functional');
await kibanaServer.importExport.load('test/functional/fixtures/kbn_archiver/discover');
await kibanaServer.uiSettings.update({
defaultIndex: 'logstash-*',
});
await PageObjects.settings.navigateTo();
});
after(async () => {
await kibanaServer.importExport.unload('test/functional/fixtures/kbn_archiver/discover');
await esArchiver.unload('test/functional/fixtures/es_archiver/logstash_functional');
});
it('index pattern page', async () => {
await PageObjects.settings.clickKibanaIndexPatterns();
await a11y.testAppSnapshot();
});
it('Single indexpattern view', async () => {
await PageObjects.settings.clickIndexPatternLogstash();
await PageObjects.header.waitUntilLoadingHasFinished();
await a11y.testAppSnapshot();
});
it('Single indexpattern view', async () => {
await PageObjects.settings.clickIndexPatternLogstash();
await PageObjects.header.waitUntilLoadingHasFinished();
await a11y.testAppSnapshot();
});
it('Index pattern field editor - initial view', async () => {
await PageObjects.settings.clickAddField();
await a11y.testAppSnapshot();
});
it('Index pattern field editor - initial view', async () => {
await PageObjects.settings.clickAddField();
await a11y.testAppSnapshot();
});
it('Index pattern field editor - all options shown', async () => {
await PageObjects.settings.setFieldName('test');
await PageObjects.settings.setFieldType('Keyword');
await PageObjects.settings.setFieldScript("emit('hello world')");
await PageObjects.settings.toggleRow('formatRow');
await PageObjects.settings.setFieldFormat('string');
await PageObjects.settings.toggleRow('customLabelRow');
await PageObjects.settings.setCustomLabel('custom label');
await testSubjects.click('toggleAdvancedSetting');
// Let's make sure the field preview is visible before testing the snapshot
const isFieldPreviewVisible =
await PageObjects.indexPatternFieldEditorObjects.isFieldPreviewVisible();
expect(isFieldPreviewVisible).to.be(true);
it('Index pattern field editor - all options shown', async () => {
await PageObjects.settings.setFieldName('test');
await PageObjects.settings.setFieldType('Keyword');
await PageObjects.settings.setFieldScript("emit('hello world')");
await PageObjects.settings.toggleRow('formatRow');
await PageObjects.settings.setFieldFormat('string');
await PageObjects.settings.toggleRow('customLabelRow');
await PageObjects.settings.setCustomLabel('custom label');
await testSubjects.click('toggleAdvancedSetting');
// Let's make sure the field preview is visible before testing the snapshot
const isFieldPreviewVisible =
await PageObjects.indexPatternFieldEditorObjects.isFieldPreviewVisible();
expect(isFieldPreviewVisible).to.be(true);
await a11y.testAppSnapshot();
await a11y.testAppSnapshot();
await PageObjects.settings.closeIndexPatternFieldEditor();
});
await PageObjects.settings.closeIndexPatternFieldEditor();
});
it('Open create index pattern wizard', async () => {
await PageObjects.settings.clickKibanaIndexPatterns();
await PageObjects.settings.clickAddNewIndexPatternButton();
await PageObjects.header.waitUntilLoadingHasFinished();
await a11y.testAppSnapshot();
await testSubjects.click('closeFlyoutButton');
});
it('Open create index pattern wizard', async () => {
await PageObjects.settings.clickKibanaIndexPatterns();
await PageObjects.settings.clickAddNewIndexPatternButton();
await PageObjects.header.waitUntilLoadingHasFinished();
await a11y.testAppSnapshot();
await testSubjects.click('closeFlyoutButton');
});
// We are navigating back to index pattern page to test field formatters
it('Navigate back to logstash index page', async () => {
await PageObjects.settings.clickKibanaIndexPatterns();
await PageObjects.settings.clickIndexPatternLogstash();
await a11y.testAppSnapshot();
});
// We are navigating back to index pattern page to test field formatters
it('Navigate back to logstash index page', async () => {
await PageObjects.settings.clickKibanaIndexPatterns();
await PageObjects.settings.clickIndexPatternLogstash();
await a11y.testAppSnapshot();
});
it('Edit field type', async () => {
await PageObjects.settings.clickEditFieldFormat();
await a11y.testAppSnapshot();
await PageObjects.settings.closeIndexPatternFieldEditor();
});
it('Edit field type', async () => {
await PageObjects.settings.clickEditFieldFormat();
await a11y.testAppSnapshot();
await PageObjects.settings.closeIndexPatternFieldEditor();
});
it('Advanced settings', async () => {
await PageObjects.settings.clickKibanaSettings();
await a11y.testAppSnapshot();
it('Advanced settings', async () => {
await PageObjects.settings.clickKibanaSettings();
await a11y.testAppSnapshot();
});
});
});
}

View file

@ -51,6 +51,11 @@ export class SettingsPageObject extends FtrService {
await this.header.waitUntilLoadingHasFinished();
}
async clickIndexManagement() {
await this.testSubjects.click('index_management');
await this.header.waitUntilLoadingHasFinished();
}
async getAdvancedSettings(propertyName: string) {
this.log.debug('in getAdvancedSettings');
return await this.testSubjects.getAttribute(

View file

@ -140,7 +140,9 @@ export class IndexLifecycleSummary extends Component<Props, State> {
id="xpack.indexLifecycleMgmt.indexLifecycleMgmtSummary.phaseDefinitionTitle"
/>
</EuiPopoverTitle>
<EuiCodeBlock lang="json">{JSON.stringify(ilm.phase_execution, null, 2)}</EuiCodeBlock>
<EuiCodeBlock language="json">
{JSON.stringify(ilm.phase_execution, null, 2)}
</EuiCodeBlock>
</EuiPopover>
</EuiDescriptionListDescription>
</Fragment>

View file

@ -141,7 +141,7 @@ export const TabSummary: React.FunctionComponent<Props> = ({
/>
</EuiDescriptionListTitle>
<EuiDescriptionListDescription>
<EuiCodeBlock lang="json">{JSON.stringify(_meta, null, 2)}</EuiCodeBlock>
<EuiCodeBlock language="json">{JSON.stringify(_meta, null, 2)}</EuiCodeBlock>
</EuiDescriptionListDescription>
</>
)}

View file

@ -90,7 +90,7 @@ export const SimulateTemplate = React.memo(({ template, filters }: Props) => {
}
return isEmpty ? null : (
<EuiCodeBlock lang="json" isCopyable={true} data-test-subj="simulateTemplatePreview">
<EuiCodeBlock language="json" isCopyable={true} data-test-subj="simulateTemplatePreview">
{templatePreview}
</EuiCodeBlock>
);

View file

@ -19,7 +19,7 @@ export const TabAliases: React.FunctionComponent<Props> = ({ aliases }) => {
if (aliases && Object.keys(aliases).length) {
return (
<div data-test-subj="aliasesTabContent">
<EuiCodeBlock lang="json" isCopyable={true}>
<EuiCodeBlock isCopyable={true} language="json">
{JSON.stringify(aliases, null, 2)}
</EuiCodeBlock>
</div>

View file

@ -18,7 +18,7 @@ export const TabMappings: React.FunctionComponent<Props> = ({ mappings }) => {
if (mappings && Object.keys(mappings).length) {
return (
<div data-test-subj="mappingsTabContent">
<EuiCodeBlock lang="json" isCopyable={true}>
<EuiCodeBlock isCopyable={true} language="json">
{JSON.stringify(mappings, null, 2)}
</EuiCodeBlock>
</div>

View file

@ -18,7 +18,7 @@ export const TabSettings: React.FunctionComponent<Props> = ({ settings }) => {
if (settings && Object.keys(settings).length) {
return (
<div data-test-subj="settingsTabContent">
<EuiCodeBlock lang="json" isCopyable={true}>
<EuiCodeBlock isCopyable={true} language="json">
{JSON.stringify(settings, null, 2)}
</EuiCodeBlock>
</div>

View file

@ -268,7 +268,7 @@ export const StepReview: React.FunctionComponent<Props> = React.memo(
/>
</EuiDescriptionListTitle>
<EuiDescriptionListDescription>
<EuiCodeBlock lang="json">{JSON.stringify(_meta, null, 2)}</EuiCodeBlock>
<EuiCodeBlock language="json">{JSON.stringify(_meta, null, 2)}</EuiCodeBlock>
</EuiDescriptionListDescription>
</>
)}

View file

@ -26,6 +26,6 @@ export class ShowJson extends React.PureComponent {
return null;
}
const json = JSON.stringify(data, null, 2);
return <EuiCodeBlock lang="json">{json}</EuiCodeBlock>;
return <EuiCodeBlock language="json">{json}</EuiCodeBlock>;
}
}

View file

@ -209,7 +209,7 @@ export const TabSummary: React.FunctionComponent<Props> = ({ templateDetails })
/>
</EuiDescriptionListTitle>
<EuiDescriptionListDescription>
<EuiCodeBlock lang="json">{JSON.stringify(_meta, null, 2)}</EuiCodeBlock>
<EuiCodeBlock language="json">{JSON.stringify(_meta, null, 2)}</EuiCodeBlock>
</EuiDescriptionListDescription>
</>
)}

View file

@ -0,0 +1,82 @@
/*
* 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 PageObjects = getPageObjects([
'common',
'settings',
'header',
'indexPatternFieldEditorObjects',
'indexManagement',
]);
const esArchiver = getService('esArchiver');
const kibanaServer = getService('kibanaServer');
const a11y = getService('a11y');
describe('Management', () => {
it('main view', async () => {
await PageObjects.settings.navigateTo();
await a11y.testAppSnapshot();
});
describe('index management', async () => {
describe('indices', async () => {
it('empty state', async () => {
await PageObjects.settings.clickIndexManagement();
await a11y.testAppSnapshot();
});
describe('indices with data', async () => {
before(async () => {
await esArchiver.loadIfNeeded(
'test/functional/fixtures/es_archiver/logstash_functional'
);
await kibanaServer.uiSettings.update({
defaultIndex: 'logstash-*',
});
await PageObjects.settings.navigateTo();
});
after(async () => {
await esArchiver.unload('test/functional/fixtures/es_archiver/logstash_functional');
});
it('index list', async () => {
await a11y.testAppSnapshot();
});
describe('index panel', async () => {
it('index panel - summary', async () => {
await PageObjects.settings.clickIndexManagement();
await PageObjects.indexManagement.clickIndiceAt(0);
await a11y.testAppSnapshot();
});
it('index panel - settings', async () => {
await PageObjects.indexManagement.clickDetailPanelTabAt(0);
await a11y.testAppSnapshot();
});
it('index panel - mappings', async () => {
await PageObjects.indexManagement.clickDetailPanelTabAt(1);
await a11y.testAppSnapshot();
});
it('index panel - stats', async () => {
await PageObjects.indexManagement.clickDetailPanelTabAt(2);
await a11y.testAppSnapshot();
});
it('index panel - edit settings', async () => {
await PageObjects.indexManagement.clickDetailPanelTabAt(3);
await a11y.testAppSnapshot();
});
});
});
});
});
});
}

View file

@ -19,6 +19,7 @@ export default async function ({ readConfigFile }: FtrConfigProviderContext) {
require.resolve('./apps/login_page'),
require.resolve('./apps/kibana_overview'),
require.resolve('./apps/home'),
require.resolve('./apps/management'),
require.resolve('./apps/grok_debugger'),
require.resolve('./apps/search_profiler'),
require.resolve('./apps/painless_lab'),

View file

@ -8,8 +8,10 @@
import { FtrProviderContext } from '../ftr_provider_context';
export function IndexManagementPageProvider({ getService }: FtrProviderContext) {
const retry = getService('retry');
const find = getService('find');
const testSubjects = getService('testSubjects');
const log = getService('log');
return {
async sectionHeadingText() {
@ -25,10 +27,24 @@ export function IndexManagementPageProvider({ getService }: FtrProviderContext)
await testSubjects.click('checkboxToggles-rollupToggle');
},
async clickDetailPanelTabAt(indexOfTab: number): Promise<void> {
const tabList = await testSubjects.findAll('detailPanelTab');
log.debug(tabList.length);
await tabList[indexOfTab].click();
},
async clickIndiceAt(indexOfRow: number): Promise<void> {
const indexList = await testSubjects.findAll('indexTableIndexNameLink');
await indexList[indexOfRow].click();
await retry.waitFor('detail panel title to show up', async () => {
return (await testSubjects.isDisplayed('detailPanelTabSelected')) === true;
});
},
async getIndexList() {
const table = await find.byCssSelector('table');
const $ = await table.parseDomContent();
return $.findTestSubjects('indexTableRow')
const indexList = await $.findTestSubjects('indexTableRow')
.toArray()
.map((row) => {
return {
@ -44,6 +60,7 @@ export function IndexManagementPageProvider({ getService }: FtrProviderContext)
indexSize: $(row).findTestSubject('indexTableCell-size').text(),
};
});
return indexList;
},
async changeTabs(