Skip to content

Commit 7de6486

Browse files
walterrawalterra
committed
refactor(test): consolidate accessibility tests into single file
1 parent e0e6e09 commit 7de6486

File tree

4 files changed

+182
-218
lines changed

4 files changed

+182
-218
lines changed

‎packages/charts/src/components/accessibility/accessibility.goal_chart.test.tsx‎

Lines changed: 0 additions & 79 deletions
This file was deleted.

‎packages/charts/src/components/accessibility/accessibility.partition_chart.test.tsx‎

Lines changed: 0 additions & 101 deletions
This file was deleted.

‎packages/charts/src/components/accessibility/accessibility.test.tsx‎

Lines changed: 182 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License
4+
* 2.0 and the Server Side Public License, v 1; you may not use this file except
5+
* in compliance with, at your election, the Elastic License 2.0 or the Server
6+
* Side Public License, v 1.
7+
*/
8+
9+
import { mount } from 'enzyme';
10+
import React from 'react';
11+
12+
import { Goal } from '../../chart_types/goal_chart/specs';
13+
import { GoalSubtype } from '../../chart_types/goal_chart/specs/constants';
14+
import { defaultPartitionValueFormatter } from '../../chart_types/partition_chart/layout/config';
15+
import { PartitionLayout } from '../../chart_types/partition_chart/layout/types/config_types';
16+
import { arrayToLookup } from '../../common/color_calcs';
17+
import { mocks } from '../../mocks/hierarchical';
18+
import { productDimension } from '../../mocks/hierarchical/dimension_codes';
19+
import { BarSeries, LineSeries, Partition, Settings } from '../../specs';
20+
import type { Datum } from '../../utils/common';
21+
import { Chart } from '../chart';
22+
23+
describe('Accessibility', () => {
24+
describe('Screen reader summary xy charts', () => {
25+
it('should include the series types if one type of series', () => {
26+
const wrapper = mount(
27+
<Chart size={[100, 100]} id="chart1">
28+
<Settings debug rendering="svg" showLegend />
29+
<BarSeries id="test" data={[{ x: 0, y: 2 }]} xAccessor="x" yAccessors={['y']} />
30+
</Chart>,
31+
);
32+
expect(wrapper.find('.echScreenReaderOnly').first().text()).toBe('bar chart.');
33+
});
34+
it('should include the series types if multiple types of series', () => {
35+
const wrapper = mount(
36+
<Chart size={[100, 100]} id="chart1">
37+
<Settings debug rendering="svg" showLegend />
38+
<BarSeries id="test" data={[{ x: 0, y: 2 }]} xAccessor="x" yAccessors={['y']} />
39+
<LineSeries id="test2" data={[{ x: 3, y: 5 }]} xAccessor="x" yAccessors={['y']} />
40+
</Chart>,
41+
);
42+
expect(wrapper.find('.echScreenReaderOnly').first().text()).toBe('Mixed chart: bar and line chart.');
43+
});
44+
});
45+
46+
describe('Partition charts accessibility', () => {
47+
const productLookup = arrayToLookup((d: any) => d.sitc1, productDimension);
48+
type TestDatum = { cat1: string; cat2: string; val: number };
49+
50+
const sunburstWrapper = mount(
51+
<Chart size={[100, 100]} id="chart1">
52+
<Partition
53+
id="spec_1"
54+
data={mocks.pie}
55+
valueAccessor={(d: Datum) => d.exportVal as number}
56+
valueFormatter={(d: number) => `$${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`}
57+
layers={[
58+
{
59+
groupByRollup: (d: Datum) => d.sitc1,
60+
nodeLabel: (d: Datum) => productLookup[d].name,
61+
},
62+
]}
63+
/>
64+
</Chart>,
65+
);
66+
67+
const treemapWrapper = mount(
68+
<Chart size={[100, 100]} id="chart1">
69+
<Partition
70+
id="spec_1"
71+
data={mocks.pie}
72+
layout={PartitionLayout.treemap}
73+
valueAccessor={(d: Datum) => d.exportVal as number}
74+
valueFormatter={(d: number) => `$${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`}
75+
layers={[
76+
{
77+
groupByRollup: (d: Datum) => d.sitc1,
78+
nodeLabel: (d: Datum) => productLookup[d].name,
79+
},
80+
]}
81+
/>
82+
</Chart>,
83+
);
84+
85+
const sunburstLayerWrapper = mount(
86+
<Chart>
87+
<Settings showLegend flatLegend={false} legendMaxDepth={2} />
88+
<Partition
89+
id="spec_1"
90+
data={[
91+
{ cat1: 'A', cat2: 'A', val: 1 },
92+
{ cat1: 'A', cat2: 'B', val: 1 },
93+
{ cat1: 'B', cat2: 'A', val: 1 },
94+
{ cat1: 'B', cat2: 'B', val: 1 },
95+
{ cat1: 'C', cat2: 'A', val: 1 },
96+
{ cat1: 'C', cat2: 'B', val: 1 },
97+
]}
98+
valueAccessor={(d: TestDatum) => d.val}
99+
layers={[
100+
{
101+
groupByRollup: (d: TestDatum) => d.cat1,
102+
},
103+
{
104+
groupByRollup: (d: TestDatum) => d.cat2,
105+
},
106+
]}
107+
/>
108+
</Chart>,
109+
);
110+
111+
it('should include the series type if partition chart', () => {
112+
expect(sunburstWrapper.find('.echScreenReaderOnly').first().text()).toBe('sunburst chart. 10 data points.');
113+
});
114+
it('should include series type if treemap type', () => {
115+
expect(treemapWrapper.find('.echScreenReaderOnly').first().text()).toBe('treemap chart. 10 data points.');
116+
});
117+
it('should test defaults for screen reader data table', () => {
118+
expect(sunburstWrapper.find('tr').first().text()).toBe('LabelValuePercentage');
119+
});
120+
it('should include additional columns if a multilayer pie chart', () => {
121+
expect(sunburstLayerWrapper.find('tr').first().text()).toBe('DepthLabelParentValuePercentage');
122+
});
123+
});
124+
125+
describe('Goal chart type accessibility', () => {
126+
const goalChartWrapper = mount(
127+
<Chart>
128+
<Goal
129+
id="spec_1"
130+
subtype={GoalSubtype.Goal}
131+
base={0}
132+
target={260}
133+
actual={170}
134+
bands={[200, 250, 300]}
135+
domain={{ min: 0, max: 300 }}
136+
ticks={[0, 50, 100, 150, 200, 250, 300]}
137+
labelMajor="Revenue 2020 YTD "
138+
labelMinor="(thousand USD) "
139+
centralMajor="170"
140+
centralMinor=""
141+
angleStart={Math.PI}
142+
angleEnd={0}
143+
/>
144+
</Chart>,
145+
);
146+
147+
const bandLabelsAscending = ['freezing', 'chilly', 'brisk'];
148+
const bandsAscending = [200, 250, 300];
149+
150+
const ascendingBandLabelsGoalChart = mount(
151+
<Chart className="story-chart">
152+
<Goal
153+
id="spec_1"
154+
subtype={GoalSubtype.Goal}
155+
base={0}
156+
target={260}
157+
actual={170}
158+
bands={bandsAscending}
159+
domain={{ min: 0, max: 300 }}
160+
ticks={[0, 50, 100, 150, 200, 250, 300]}
161+
labelMajor="Revenue 2020 YTD "
162+
labelMinor="(thousand USD) "
163+
centralMajor="170"
164+
centralMinor=""
165+
angleStart={Math.PI}
166+
angleEnd={0}
167+
bandLabels={bandLabelsAscending}
168+
/>
169+
</Chart>,
170+
);
171+
it('should test defaults for goal charts', () => {
172+
expect(goalChartWrapper.find('.echScreenReaderOnly').first().text()).toBe(
173+
'Revenue 2020 YTD (thousand USD) goal chart. Revenue 2020 YTD (thousand USD). Minimum: 0, Maximum: 300, Target: 260, Value: 170.',
174+
);
175+
});
176+
it('should correctly render ascending semantic values', () => {
177+
expect(ascendingBandLabelsGoalChart.find('.echGoalDescription').first().text()).toBe(
178+
'0 - 200freezing200 - 250chilly250 - 300brisk',
179+
);
180+
});
181+
});
182+
});

0 commit comments

Comments
 (0)