From eae7329735daa414a5d07e4492c14d211c1f1369 Mon Sep 17 00:00:00 2001 From: Rachel Shen Date: Tue, 27 Apr 2021 08:28:57 -0600 Subject: [PATCH] test(a11y): fix flaky accessibility integration tests (#1137) --- .../integration/page_objects/common.ts | 9 ++-- .../integration/tests/accessibility.test.ts | 45 ------------------ .../accessibility/accessibility.test.tsx | 46 +++++++++++++++++++ 3 files changed, 51 insertions(+), 49 deletions(-) delete mode 100644 packages/osd-charts/integration/tests/accessibility.test.ts create mode 100644 packages/osd-charts/src/components/accessibility/accessibility.test.tsx diff --git a/packages/osd-charts/integration/page_objects/common.ts b/packages/osd-charts/integration/page_objects/common.ts index f90335b86a06..075391dad97d 100644 --- a/packages/osd-charts/integration/page_objects/common.ts +++ b/packages/osd-charts/integration/page_objects/common.ts @@ -19,6 +19,7 @@ import Url from 'url'; +import { JSDOM } from 'jsdom'; import { AXNode } from 'puppeteer'; import { DRAG_DETECTION_TIMEOUT } from '../../src/state/reducers/interactions'; @@ -472,10 +473,10 @@ class CommonPage { * Get HTML for element to test aria labels etc */ // eslint-disable-next-line class-methods-use-this - async getElementHTML(url: string) { - await this.loadElementFromURL(url); - // https://github.com/puppeteer/puppeteer/issues/406#issuecomment-323555639 - return await page.evaluate(() => new XMLSerializer().serializeToString(document)); + async getSelectorHTML(url: string, tagName: string) { + await this.loadElementFromURL(url, '.echCanvasRenderer'); + const xml = await page.evaluate(() => new XMLSerializer().serializeToString(document)); + return new JSDOM(xml, { contentType: 'text/xml' }).window.document.getElementsByTagName(tagName); } } diff --git a/packages/osd-charts/integration/tests/accessibility.test.ts b/packages/osd-charts/integration/tests/accessibility.test.ts deleted file mode 100644 index 414d833bab69..000000000000 --- a/packages/osd-charts/integration/tests/accessibility.test.ts +++ /dev/null @@ -1,45 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import { common } from '../page_objects/common'; - -describe('Accessibility tree', () => { - it.skip('should include the series types if one type of series', async () => { - const tree = await common.testAccessibilityTree( - 'http://localhost:9001/iframe.html?id=annotations-lines--x-continuous-domain', - '.echCanvasRenderer', - ); - // the legend has bars and lines as value.descriptions not value.name - const hasTextOfChartTypes = tree.children.filter((value) => { - return value.name === 'bar chart'; - }); - expect(hasTextOfChartTypes[0].name).toBe('bar chart'); - }); - it('should include the series types if multiple types of series', async () => { - const tree = await common.testAccessibilityTree( - 'http://localhost:9001/iframe.html?id=mixed-charts--bars-and-lines', - '.echCanvasRenderer', - ); - // the legend has bars and lines as value.descriptions not value.name - const hasTextOfChartTypes = tree.children.filter((value) => { - return value.name === 'Mixed chart: bar and line chart'; - }); - expect(hasTextOfChartTypes[0].name).toBe('Mixed chart: bar and line chart'); - }); -}); diff --git a/packages/osd-charts/src/components/accessibility/accessibility.test.tsx b/packages/osd-charts/src/components/accessibility/accessibility.test.tsx new file mode 100644 index 000000000000..09fae35f6532 --- /dev/null +++ b/packages/osd-charts/src/components/accessibility/accessibility.test.tsx @@ -0,0 +1,46 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import { mount } from 'enzyme'; +import React from 'react'; + +import { BarSeries, LineSeries, Settings } from '../../specs'; +import { Chart } from '../chart'; + +describe('Accessibility', () => { + it('should include the series types if one type of series', () => { + const wrapper = mount( + + + + , + ); + expect(wrapper.find('dd').first().text()).toBe('bar chart'); + }); + it('should include the series types if multiple types of series', () => { + const wrapper = mount( + + + + + , + ); + expect(wrapper.find('dd').first().text()).toBe('Mixed chart: bar and line chart'); + }); +});