From 726c7142a6400036f393a3250de80cc83500bdfb Mon Sep 17 00:00:00 2001 From: Maja Grubic Date: Mon, 2 Mar 2020 20:56:07 +0000 Subject: [PATCH] Dashboard a11y tests (#58122) * adding comprehensive dashboard tests * fixing delete and adding dima changes * Fixing some of the a11y test failures * Fixing i18n issue * Extracting exit fullscreen logic in a separate function * Fixing typo * Upgrading axe * Fixing failing jest tests * Removing main tag as it was causing a test to fail * Adding focusable=false to a range control as well * Update test/accessibility/apps/dashboard.ts Co-Authored-By: Michail Yasonik * Fixing linting error * Update src/legacy/core_plugins/input_control_vis/public/components/vis/list_control.tsx Co-Authored-By: Michail Yasonik * Add comments Co-authored-by: Bhavya RM Co-authored-by: Michail Yasonik Co-authored-by: Elastic Machine --- package.json | 2 +- .../__snapshots__/list_control.test.tsx.snap | 1 + .../public/components/vis/list_control.tsx | 14 ++ .../__snapshots__/clone_modal.test.js.snap | 1 + .../np_ready/top_nav/clone_modal.tsx | 3 + .../tool_bar_pager_buttons.test.tsx.snap | 2 + .../pager/tool_bar_pager_buttons.tsx | 13 ++ .../validated_range/validated_dual_range.js | 1 + .../query_string_input/language_switcher.tsx | 2 +- test/accessibility/apps/dashboard.ts | 131 ++++++++++++++++-- .../functional/page_objects/dashboard_page.ts | 7 + yarn.lock | 8 +- 12 files changed, 171 insertions(+), 14 deletions(-) diff --git a/package.json b/package.json index 6c44c34996c6..e79b3530c981 100644 --- a/package.json +++ b/package.json @@ -387,7 +387,7 @@ "@typescript-eslint/parser": "^2.15.0", "angular-mocks": "^1.7.9", "archiver": "^3.1.1", - "axe-core": "^3.3.2", + "axe-core": "^3.4.1", "babel-eslint": "^10.0.3", "babel-jest": "^24.9.0", "babel-plugin-dynamic-import-node": "^2.2.0", diff --git a/src/legacy/core_plugins/input_control_vis/public/components/vis/__snapshots__/list_control.test.tsx.snap b/src/legacy/core_plugins/input_control_vis/public/components/vis/__snapshots__/list_control.test.tsx.snap index 99482a4be2d7..59ae99260cec 100644 --- a/src/legacy/core_plugins/input_control_vis/public/components/vis/__snapshots__/list_control.test.tsx.snap +++ b/src/legacy/core_plugins/input_control_vis/public/components/vis/__snapshots__/list_control.test.tsx.snap @@ -25,6 +25,7 @@ exports[`renders ListControl 1`] = ` compressed={false} data-test-subj="listControlSelect0" fullWidth={false} + inputRef={[Function]} isClearable={true} isLoading={false} onChange={[Function]} diff --git a/src/legacy/core_plugins/input_control_vis/public/components/vis/list_control.tsx b/src/legacy/core_plugins/input_control_vis/public/components/vis/list_control.tsx index d62adfdce56b..d01cef15ea41 100644 --- a/src/legacy/core_plugins/input_control_vis/public/components/vis/list_control.tsx +++ b/src/legacy/core_plugins/input_control_vis/public/components/vis/list_control.tsx @@ -58,8 +58,17 @@ class ListControlUi extends PureComponent { + if (this.textInput) { + this.textInput.setAttribute('focusable', 'false'); // remove when #59039 is fixed + } this.isMounted = true; }; @@ -67,6 +76,10 @@ class ListControlUi extends PureComponent { + this.textInput = ref; + }; + handleOnChange = (selectedOptions: any[]) => { const selectedValues = selectedOptions.map(({ value }) => { return value; @@ -143,6 +156,7 @@ class ListControlUi extends PureComponent ); } diff --git a/src/legacy/core_plugins/kibana/public/dashboard/np_ready/top_nav/__snapshots__/clone_modal.test.js.snap b/src/legacy/core_plugins/kibana/public/dashboard/np_ready/top_nav/__snapshots__/clone_modal.test.js.snap index f5a00e5435ed..771d53b73d96 100644 --- a/src/legacy/core_plugins/kibana/public/dashboard/np_ready/top_nav/__snapshots__/clone_modal.test.js.snap +++ b/src/legacy/core_plugins/kibana/public/dashboard/np_ready/top_nav/__snapshots__/clone_modal.test.js.snap @@ -28,6 +28,7 @@ exports[`renders DashboardCloneModal 1`] = ` { @@ -41,6 +48,12 @@ export function ToolBarPagerButtons(props: Props) { onClick={() => props.onPageNext()} disabled={!props.hasNextPage} data-test-subj="btnNextPage" + aria-label={i18n.translate( + 'kbn.ddiscover.docTable.pager.toolbarPagerButtons.nextButtonAriaLabel', + { + defaultMessage: 'Next page in table', + } + )} > diff --git a/src/legacy/ui/public/validated_range/validated_dual_range.js b/src/legacy/ui/public/validated_range/validated_dual_range.js index 8689397a7833..3b0efba11afc 100644 --- a/src/legacy/ui/public/validated_range/validated_dual_range.js +++ b/src/legacy/ui/public/validated_range/validated_dual_range.js @@ -92,6 +92,7 @@ export class ValidatedDualRange extends Component { fullWidth={fullWidth} value={this.state.value} onChange={this._onChange} + focusable={false} // remove when #59039 is fixed {...rest} /> diff --git a/src/plugins/data/public/ui/query_string_input/language_switcher.tsx b/src/plugins/data/public/ui/query_string_input/language_switcher.tsx index d86a8a970a8e..63f6997ce2fc 100644 --- a/src/plugins/data/public/ui/query_string_input/language_switcher.tsx +++ b/src/plugins/data/public/ui/query_string_input/language_switcher.tsx @@ -68,7 +68,7 @@ export function QueryLanguageSwitcher(props: Props) { return ( { const dashboardName = 'Dashboard Listing A11y'; + const clonedDashboardName = 'Dashboard Listing A11y Copy'; + before(async () => { - await esArchiver.loadIfNeeded('logstash_functional'); - await kibanaServer.uiSettings.update({ - defaultIndex: 'logstash-*', - }); + await PageObjects.common.navigateToUrl('home', 'tutorial_directory/sampleData'); + await PageObjects.home.addSampleDataSet('flights'); + }); + + after(async () => { await PageObjects.common.navigateToApp('dashboard'); + await listingTable.searchForItemWithName(dashboardName); + await listingTable.checkListingSelectAllCheckbox(); + await listingTable.clickDeleteSelected(); + await PageObjects.common.clickConfirmOnModal(); }); it('dashboard', async () => { + await PageObjects.common.navigateToApp('dashboard'); await a11y.testAppSnapshot(); }); it('create dashboard button', async () => { - await PageObjects.dashboard.clickCreateDashboardPrompt(); + await PageObjects.dashboard.clickNewDashboard(); await a11y.testAppSnapshot(); }); @@ -49,9 +58,115 @@ export default function({ getService, getPageObjects }: FtrProviderContext) { await a11y.testAppSnapshot(); }); + it('Open Edit mode', async () => { + await PageObjects.dashboard.switchToEditMode(); + await a11y.testAppSnapshot(); + }); + + it('Open add panel', async () => { + await dashboardAddPanel.clickOpenAddPanel(); + await a11y.testAppSnapshot(); + }); + + it('add a visualization', async () => { + await testSubjects.click('savedObjectTitle[Flights]-Delay-Buckets'); + await a11y.testAppSnapshot(); + }); + + it('add a saved search', async () => { + await dashboardAddPanel.addSavedSearch('[Flights] Flight Log'); + await a11y.testAppSnapshot(); + }); + + it('save the dashboard', async () => { + await PageObjects.dashboard.saveDashboard(dashboardName); + await a11y.testAppSnapshot(); + }); + + it('Open Edit mode', async () => { + await PageObjects.dashboard.switchToEditMode(); + await a11y.testAppSnapshot(); + }); + + it('open options menu', async () => { + await PageObjects.dashboard.openOptions(); + await a11y.testAppSnapshot(); + }); + + it('Should be able to hide panel titles', async () => { + await testSubjects.click('dashboardPanelTitlesCheckbox'); + await a11y.testAppSnapshot(); + }); + + it('Should be able display panels without margins', async () => { + await testSubjects.click('dashboardMarginsCheckbox'); + await a11y.testAppSnapshot(); + }); + + it('Open add panel', async () => { + await dashboardAddPanel.clickOpenAddPanel(); + await a11y.testAppSnapshot(); + }); + + it('Add one more saved object to cancel it', async () => { + await testSubjects.click('savedObjectTitle[Flights]-Average-Ticket-Price'); + await a11y.testAppSnapshot(); + }); + + it('Close add panel', async () => { + await dashboardAddPanel.closeAddPanel(); + await a11y.testAppSnapshot(); + }); + + it('Exit out of edit mode', async () => { + await PageObjects.dashboard.clickCancelOutOfEditMode(); + await a11y.testAppSnapshot(); + }); + + it('Discard changes', async () => { + await PageObjects.common.clickConfirmOnModal(); + await PageObjects.dashboard.getIsInViewMode(); + await a11y.testAppSnapshot(); + }); + + it('Test full screen', async () => { + await PageObjects.dashboard.clickFullScreenMode(); + await a11y.testAppSnapshot(); + }); + + it('Exit out of full screen mode', async () => { + await PageObjects.dashboard.exitFullScreenMode(); + await a11y.testAppSnapshot(); + }); + + it('Make a clone of the dashboard', async () => { + await PageObjects.dashboard.clickClone(); + await a11y.testAppSnapshot(); + }); + + it('Confirm clone with *copy* appended', async () => { + await PageObjects.dashboard.confirmClone(); + await a11y.testAppSnapshot(); + }); + it('Dashboard listing table', async () => { await PageObjects.dashboard.gotoDashboardLandingPage(); await a11y.testAppSnapshot(); }); + + it('Delete a11y clone dashboard', async () => { + await listingTable.searchForItemWithName(clonedDashboardName); + await listingTable.checkListingSelectAllCheckbox(); + await listingTable.clickDeleteSelected(); + await a11y.testAppSnapshot(); + await PageObjects.common.clickConfirmOnModal(); + await listingTable.searchForItemWithName(''); + }); + + // Blocked by https://github.com/elastic/kibana/issues/38980 + it.skip('Open flight dashboard', async () => { + await testSubjects.click('dashboardListingTitleLink-[Flights]-Global-Flight-Dashboard'); + await a11y.testAppSnapshot(); + }); }); } diff --git a/test/functional/page_objects/dashboard_page.ts b/test/functional/page_objects/dashboard_page.ts index 3fd7ce27e27d..0f01097cf50d 100644 --- a/test/functional/page_objects/dashboard_page.ts +++ b/test/functional/page_objects/dashboard_page.ts @@ -65,6 +65,13 @@ export function DashboardPageProvider({ getService, getPageObjects }: FtrProvide await this.waitForRenderComplete(); } + public async exitFullScreenMode() { + log.debug(`exitFullScreenMode`); + const logoButton = await this.getExitFullScreenLogoButton(); + await logoButton.moveMouseTo(); + await this.clickExitFullScreenTextButton(); + } + public async fullScreenModeMenuItemExists() { return await testSubjects.exists('dashboardFullScreenMode'); } diff --git a/yarn.lock b/yarn.lock index fc6d6eb2df79..207f8c022f15 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7948,10 +7948,10 @@ aws4@^1.6.0: resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e" integrity sha1-g+9cqGCysy5KDe7e6MdxudtXRx4= -axe-core@^3.3.2: - version "3.3.2" - resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-3.3.2.tgz#7baf3c55a5cf1621534a2c38735f5a1bf2f7e1a8" - integrity sha512-lRdxsRt7yNhqpcXQk1ao1BL73OZDzmFCWOG0mC4tGR/r14ohH2payjHwCMQjHGbBKm924eDlmG7utAGHiX/A6g== +axe-core@^3.4.1: + version "3.5.1" + resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-3.5.1.tgz#d8d5aaef73f003e8b766ea28bb078343f3622201" + integrity sha512-mwpDgPwWB+5kMHyLjlxh4w25ClJfqSxi+c6LQ4ix349TdCUctMwJNPTkhPD1qP9SYIjFgjeVpVZWCvK9oBGwCg== axios@^0.18.0, axios@^0.18.1: version "0.18.1"