Skip to content

Commit a4cfbf1

Browse files
EugeniyKiyashkoEugeniyKiyashko
committed
DataGrid, Scheduler, TreeList: move a11y tests into the accessibility folder
1 parent 21cb7b3 commit a4cfbf1

51 files changed

Lines changed: 3005 additions & 425 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.github/workflows/demos_visual_tests_frameworks.yml‎

Lines changed: 0 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -326,46 +326,6 @@ jobs:
326326
pnpm run lint-demos
327327
fi
328328
329-
- name: Run lint on changed demos
330-
if: github.event_name == 'pull_request' && !contains(github.event.pull_request.labels.*.name, 'force all tests')
331-
working-directory: apps/demos
332-
env:
333-
DEBUG: 'eslint:cli-engine,stylelint:standalone'
334-
run: |
335-
pnpx nx lint-non-demos
336-
337-
if [ -f "changed-files.json" ]; then
338-
echo "Running lint-demos on changed files"
339-
CHANGED_DEMOS=$(jq -r '.[].filename' changed-files.json | grep '^apps/demos/Demos/' | sed 's|^apps/demos/||' | tr '\n' ' ')
340-
if [ ! -z "$CHANGED_DEMOS" ]; then
341-
echo "Changed demo files: $CHANGED_DEMOS"
342-
pnpx eslint $CHANGED_DEMOS
343-
else
344-
echo "No demo files changed, skipping lint-demos"
345-
fi
346-
else
347-
echo "changed-files.json not found"
348-
pnpm run lint-demos
349-
fi
350-
351-
- name: Run lint on changed demos
352-
if: github.event_name != 'pull_request' && !contains(github.event.pull_request.labels.*.name, 'force all tests')
353-
working-directory: apps/demos
354-
env:
355-
DEBUG: 'eslint:cli-engine,stylelint:standalone'
356-
run: |
357-
pnpx nx lint-non-demos
358-
359-
if [ -f "changed-files.json" ]; then
360-
echo "Running lint-demos on changed files"
361-
CHANGED_DEMOS=$(jq -r '.[].filename' changed-files.json | grep '^apps/demos/Demos/' | sed 's|^apps/demos/||' | tr '\n' ' ')
362-
if [ ! -z "$CHANGED_DEMOS" ]; then
363-
echo "Changed demo files: $CHANGED_DEMOS"
364-
pnpx eslint $CHANGED_DEMOS
365-
else
366-
echo "No demo files changed, skipping lint-demos"
367-
fi
368-
369329
check_generated_demos:
370330
name: ${{ matrix.name }}
371331
runs-on: ubuntu-22.04

‎e2e/testcafe-devextreme/helpers/clearPage.js‎

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

‎e2e/testcafe-devextreme/helpers/testPageUtils.ts‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import { ClientFunction } from 'testcafe';
2+
3+
export async function clearTestPage(testController: TestController): Promise<void> {
4+
const shadowDom = process.env.shadowDom === 'true';
5+
6+
const clearTestPageFn = ClientFunction(() => {
7+
const widgetSelector = '.dx-widget';
8+
const $elements = $(widgetSelector)
9+
.filter((_, element) => $(element).parents(widgetSelector).length === 0);
10+
$elements.each((_, element) => {
11+
const $widgetElement = $(element);
12+
const widgetNames = $widgetElement.data().dxComponents;
13+
widgetNames?.forEach((name) => {
14+
if ($widgetElement.hasClass('dx-widget')) {
15+
// @ts-expect-error
16+
$widgetElement[name]?.('dispose');
17+
}
18+
});
19+
$widgetElement.empty();
20+
});
21+
22+
const body = document.querySelector('body');
23+
const parentContainer = document.getElementById('parentContainer');
24+
25+
if (shadowDom) {
26+
parentContainer?.remove();
27+
} else {
28+
// @ts-expect-error
29+
$(parentContainer).remove();
30+
}
31+
32+
const containerElement = document.createElement('div');
33+
containerElement.setAttribute('id', 'container');
34+
35+
const otherContainerElement = document.createElement('div');
36+
otherContainerElement.setAttribute('id', 'otherContainer');
37+
38+
const parentContainerElement = document.createElement('div');
39+
parentContainerElement.setAttribute('id', 'parentContainer');
40+
41+
parentContainerElement.append(containerElement, otherContainerElement);
42+
body?.prepend(parentContainerElement);
43+
44+
$('#stylesheetRules').remove();
45+
}, {
46+
dependencies: {
47+
shadowDom,
48+
}
49+
});
50+
51+
await clearTestPageFn.with({ boundTestRun: testController })();
52+
}
53+
54+
export async function loadAxeCore(t: TestController): Promise<void> {
55+
await t.eval(() => {
56+
return new Promise<void>((resolve, reject) => {
57+
// @ts-expect-error
58+
if (window.axe) {
59+
resolve();
60+
return;
61+
}
62+
63+
const script = document.createElement('script');
64+
script.src = '../../../node_modules/axe-core/axe.min.js';
65+
// @ts-expect-error
66+
script.onload = resolve;
67+
script.onerror = reject;
68+
document.head.appendChild(script);
69+
});
70+
});
71+
}
72+

‎e2e/testcafe-devextreme/runner.ts‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,10 @@ import * as process from 'process';
44
import parseArgs from 'minimist';
55
import { globSync } from 'glob';
66
import { DEFAULT_BROWSER_SIZE } from './helpers/const';
7-
import * as testPageUtils from './helpers/clearPage';
7+
import {
8+
clearTestPage,
9+
loadAxeCore
10+
} from './helpers/testPageUtils';
811
import 'nconf';
912

1013
interface ParsedArgs {
@@ -253,6 +256,8 @@ createTestCafe(TESTCAFE_CONFIG)
253256
if (!componentFolder.includes('accessibility')) {
254257
const [width, height] = DEFAULT_BROWSER_SIZE;
255258
await t.resizeWindow(width, height);
259+
} else {
260+
await loadAxeCore(t);
256261
}
257262

258263
if (args.shadowDom) {
@@ -269,7 +274,7 @@ createTestCafe(TESTCAFE_CONFIG)
269274
}
270275
},
271276
after: async (t: TestController) => {
272-
await testPageUtils.clearTestPage(t);
277+
await clearTestPage(t);
273278
},
274279
},
275280
},

‎e2e/testcafe-devextreme/tests/accessibility/cardView/columnChooser.ts‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import CardView from 'devextreme-testcafe-models/cardView';
2+
import url from '../../../helpers/getPageUrl';
3+
import { createWidget } from '../../../helpers/createWidget';
4+
import { a11yCheck } from '../../../helpers/accessibility/utils';
5+
6+
fixture.disablePageReloads`CardView - ColumnChooser.Visual`
7+
.page(url(__dirname, '../../container.html'));
8+
9+
const CARD_VIEW_SELECTOR = '#container';
10+
11+
test('column chooser in \'select\' mode', async (t) => {
12+
const cardView = new CardView(CARD_VIEW_SELECTOR);
13+
14+
await cardView.apiShowColumnChooser();
15+
16+
await a11yCheck(t, {}, CARD_VIEW_SELECTOR);
17+
}).before(async () => createWidget('dxCardView', {
18+
columnChooser: {
19+
enabled: true,
20+
mode: 'select',
21+
height: 400,
22+
width: 400,
23+
search: {
24+
enabled: true,
25+
},
26+
selection: {
27+
allowSelectAll: true,
28+
},
29+
},
30+
columns: [
31+
{ dataField: 'Column 1', visible: false },
32+
{ dataField: 'Column 2', allowHiding: false },
33+
{ dataField: 'Column 3', showInColumnChooser: false },
34+
{ dataField: 'Column 4' },
35+
],
36+
}));
37+
38+
test('column chooser in \'dragAndDrop\' mode', async (t) => {
39+
const cardView = new CardView(CARD_VIEW_SELECTOR);
40+
41+
await cardView.apiShowColumnChooser();
42+
43+
const a11yCheckConfig = {
44+
rules: { 'color-contrast': { enabled: false } },
45+
};
46+
await a11yCheck(t, a11yCheckConfig, CARD_VIEW_SELECTOR);
47+
}).before(async () => createWidget('dxCardView', {
48+
columnChooser: {
49+
enabled: true,
50+
mode: 'dragAndDrop',
51+
height: 400,
52+
width: 400,
53+
search: {
54+
enabled: true,
55+
},
56+
},
57+
columns: [
58+
{ dataField: 'Column 1', visible: false },
59+
{ dataField: 'Column 2', visible: false, allowHiding: false },
60+
{ dataField: 'Column 3', visible: false, showInColumnChooser: false },
61+
{ dataField: 'Column 4', visible: false },
62+
],
63+
}));
64+
65+
test('cardView with opened columnChooser', async (t) => {
66+
const cardView = new CardView(CARD_VIEW_SELECTOR);
67+
68+
await cardView.apiShowColumnChooser();
69+
70+
await a11yCheck(t, {}, CARD_VIEW_SELECTOR);
71+
}).before(async () => createWidget('dxCardView', {
72+
dataSource: Array.from({ length: 50 }, (_, i) => ({ value: `value_${i}` })),
73+
columnChooser: {
74+
enabled: true,
75+
},
76+
columns: [
77+
{ dataField: 'value' },
78+
],
79+
}));

‎e2e/testcafe-devextreme/tests/accessibility/cardView/columnSortable.ts‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import CardView from 'devextreme-testcafe-models/cardView';
2+
import { createWidget } from '../../../helpers/createWidget';
3+
import url from '../../../helpers/getPageUrl';
4+
import { getColumnItem, triggerDragEnd, triggerDragStart } from '../../cardView/columnSortable/utils';
5+
import { a11yCheck } from '../../../helpers/accessibility/utils';
6+
7+
fixture.disablePageReloads`CardView - ColumnSortable.Visual`
8+
.page(url(__dirname, '../../container.html'));
9+
10+
const CARD_VIEW_SELECTOR = '#container';
11+
12+
test('headerPanel dragging column when it has sorting and headerFilter', async (t) => {
13+
const cardView = new CardView(CARD_VIEW_SELECTOR);
14+
const columnElement = cardView.getHeaders().getHeaderItemNth(0).element;
15+
16+
await triggerDragStart(columnElement);
17+
18+
const a11yCheckConfig = {
19+
rules: { 'color-contrast': { enabled: false } },
20+
};
21+
await a11yCheck(t, a11yCheckConfig, CARD_VIEW_SELECTOR);
22+
}).before(async () => createWidget('dxCardView', {
23+
allowColumnReordering: true,
24+
columnChooser: {
25+
enabled: true,
26+
},
27+
headerFilter: {
28+
visible: true,
29+
},
30+
columns: [{
31+
dataField: 'test',
32+
allowReordering: true,
33+
sortOrder: 'asc',
34+
}],
35+
}));
36+
37+
test('dropzone appear in headerPanel when drag from columnChooser a column', async (t) => {
38+
const cardView = new CardView(CARD_VIEW_SELECTOR);
39+
const columnElement = getColumnItem(cardView, 0, 'columnChooser');
40+
41+
await cardView.apiShowColumnChooser();
42+
43+
await triggerDragStart(columnElement);
44+
await t.wait(500); // wait for dropzone animation to finish
45+
46+
await triggerDragEnd(columnElement);
47+
await t.wait(500); // wait for dropzone animation to finish
48+
49+
const a11yCheckConfig = {
50+
rules: { 'color-contrast': { enabled: false } },
51+
};
52+
await a11yCheck(t, a11yCheckConfig, CARD_VIEW_SELECTOR);
53+
}).before(async () => createWidget('dxCardView', {
54+
allowColumnReordering: true,
55+
columnChooser: {
56+
enabled: true,
57+
},
58+
height: 600,
59+
columns: [
60+
{ dataField: 'Column 1', visible: false },
61+
],
62+
}));
63+
64+
test('dropzone appears in headerPanel when drag from columnChooser a column with allowReordering: false', async (t) => {
65+
const cardView = new CardView(CARD_VIEW_SELECTOR);
66+
const columnElement = getColumnItem(cardView, 0, 'columnChooser');
67+
68+
await cardView.apiShowColumnChooser();
69+
70+
await triggerDragStart(columnElement);
71+
await t.wait(500); // wait for dropzone animation to finish
72+
73+
await triggerDragEnd(columnElement);
74+
await t.wait(500); // wait for dropzone animation to finish
75+
76+
await a11yCheck(t, {}, CARD_VIEW_SELECTOR);
77+
}).before(async () => createWidget('dxCardView', {
78+
allowColumnReordering: true,
79+
columnChooser: {
80+
enabled: true,
81+
},
82+
height: 600,
83+
columns: [
84+
{ dataField: 'Column 1' },
85+
{ dataField: 'Column 2', visible: false, allowReordering: false },
86+
],
87+
}));

0 commit comments

Comments
 (0)