Skip to content

Commit 3a29941

Browse files
EugeniyKiyashkoEugeniyKiyashko
committed
remove shadow dom pages
1 parent 1aee4b3 commit 3a29941

File tree

27 files changed

+112
-242
lines changed

27 files changed

+112
-242
lines changed

‎apps/demos/testing/skipped-tests.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,6 @@ export const skippedTests = {
129129
DataGrid: ['SignalRService', 'MultipleRecordSelectionModes', 'RemoteCRUDOperations'],
130130
Map: ['ProvidersAndTypes', 'Markers', 'Routes'],
131131
Gantt: ['TaskTemplate', 'Validation'],
132-
Stepper: ['StepTemplate'],
133132
},
134133
React: {
135134
DataGrid: ['Toolbar', 'SignalRService', 'MultipleRecordSelectionModes'],

‎e2e/testcafe-devextreme/helpers/accessibility/test.ts‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ export interface Configuration<TComponentOptions = unknown> {
1111
a11yCheckConfig?: A11yCheckOptions;
1212
selector?: ElementContext;
1313
created?: (t: TestController, optionConfiguration?: TComponentOptions) => Promise<void>;
14-
meta?: Record<string, unknown>;
1514
}
1615

1716
export const defaultSelector = '#container';
@@ -40,15 +39,12 @@ export const testAccessibility = <TComponentOptions = unknown>(
4039
selector = defaultSelector,
4140
a11yCheckConfig = defaultA11yCheckConfig,
4241
created = defaultCreated,
43-
meta: testMeta,
4442
} = configuration;
4543

4644
const optionConfigurations = getOptionConfigurations(options);
4745

4846
optionConfigurations.forEach((optionConfiguration, index) => {
49-
const testFn = testMeta ? test.meta(testMeta) : test;
50-
51-
testFn(`${component}: test with axe #${index}`, async (t) => {
47+
test(`${component}: test with axe #${index}`, async (t) => {
5248
await a11yCheck(t, a11yCheckConfig, selector, optionConfiguration);
5349
}).before(async (t) => {
5450
await createWidget(

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

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,7 @@ import { pathToFileURL } from 'url';
22
import { join } from 'path';
33

44
export default (currentDir: string, pagePath: string): string => {
5-
let path = pagePath;
6-
7-
if (process.env.shadowDom === 'true') {
8-
const lastIndexOfSlash = path.lastIndexOf('/');
9-
10-
path = `${path.substring(0, lastIndexOfSlash + 1)}shadowDom/${path.substring(lastIndexOfSlash + 1)}`;
11-
}
5+
const path = pagePath;
126

137
const fullPath = join(currentDir, path);
148

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

Lines changed: 5 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -61,67 +61,23 @@ export async function loadAxeCore(t: TestController): Promise<void> {
6161
})).with({ boundTestRun: t })();
6262
}
6363

64-
export async function loadGantt(t: TestController): Promise<void> {
64+
export async function loadShadowDomExtension(t: TestController): Promise<void> {
6565
await ClientFunction(() => new Promise<void>((resolve, reject) => {
66-
if (document.getElementById('dx-gantt-script')) {
66+
if (document.getElementById('shadow-dom-extension-script')) {
6767
resolve();
6868
return;
6969
}
7070

7171
const script = document.createElement('script');
72-
script.id = 'dx-gantt-script';
73-
script.src = '../../../packages/devextreme/artifacts/js/dx-gantt.min.js';
72+
script.id = 'shadow-dom-extension-script';
73+
script.src = '../../helpers/shadowDom/shadowDomExtension.js';
7474
// @ts-expect-error ts-error
7575
script.onload = resolve;
7676
script.onerror = reject;
77-
document.head.prepend(script);
78-
})).with({ boundTestRun: t })();
79-
}
80-
81-
export async function loadQuill(t: TestController): Promise<void> {
82-
await ClientFunction(() => new Promise<void>((resolve, reject) => {
83-
// @ts-expect-error ts-error
84-
if (window.Quill) {
85-
resolve();
86-
return;
87-
}
88-
89-
const script = document.createElement('script');
90-
script.id = 'dx-quill-script';
91-
script.src = '../../../packages/devextreme/artifacts/js/dx-quill.min.js';
92-
// @ts-expect-error ts-error
93-
script.onload = resolve;
94-
script.onerror = reject;
95-
document.head.prepend(script);
96-
})).with({ boundTestRun: t })();
97-
}
98-
99-
export async function loadDevExtreme(t: TestController): Promise<void> {
100-
await ClientFunction(() => new Promise<void>((resolve, reject) => {
101-
if (document.getElementById('dx-all-script')) {
102-
resolve();
103-
return;
104-
}
105-
106-
const script = document.createElement('script');
107-
script.id = 'dx-all-script';
108-
script.src = '../../../packages/devextreme/artifacts/js/dx.all.js';
109-
// @ts-expect-error ts-error
110-
script.onload = resolve;
111-
script.onerror = reject;
112-
document.head.prepend(script);
77+
document.head.appendChild(script);
11378
})).with({ boundTestRun: t })();
11479
}
11580

116-
export async function removeScript(t: TestController, scriptId: string): Promise<void> {
117-
await ClientFunction((id: string) => {
118-
const script = document.getElementById(id);
119-
if (script) {
120-
script.remove();
121-
}
122-
}).with({ boundTestRun: t })(scriptId);
123-
}
124-
12581
export const addShadowRootTree = async (t: TestController): Promise<void> => {
12682
await ClientFunction(() => {
12783
const root = document.querySelector('#parentContainer') as HTMLElement;

‎e2e/testcafe-devextreme/runner.ts‎

Lines changed: 6 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,7 @@ import {
99
addShadowRootTree,
1010
clearTestPage,
1111
loadAxeCore,
12-
loadDevExtreme,
13-
loadGantt,
14-
loadQuill,
15-
removeScript,
12+
loadShadowDomExtension,
1613
} from './helpers/testPageUtils';
1714
import { getCurrentTheme } from './helpers/themeUtils';
1815

@@ -233,22 +230,15 @@ async function main() {
233230
hooks: {
234231
test: {
235232
before: async (t: TestController) => {
233+
if (args.shadowDom) {
234+
await loadShadowDomExtension(t);
235+
await addShadowRootTree(t);
236+
}
237+
236238
if (!componentFolder.includes('accessibility')) {
237239
// @ts-expect-error ts-errors
238240
const { meta } = t.testRun.test;
239241

240-
if (meta?.loadGantt) {
241-
await removeScript(t, 'dx-all-script');
242-
await loadGantt(t);
243-
await loadDevExtreme(t);
244-
}
245-
246-
if (meta?.loadQuill) {
247-
await removeScript(t, 'dx-all-script');
248-
await loadQuill(t);
249-
await loadDevExtreme(t);
250-
}
251-
252242
await ClientFunction(() => {
253243
if (document.activeElement && document.activeElement !== document.body) {
254244
(document.activeElement as HTMLElement).blur();
@@ -265,10 +255,6 @@ async function main() {
265255
await loadAxeCore(t);
266256
}
267257

268-
if (args.shadowDom) {
269-
await addShadowRootTree(t);
270-
}
271-
272258
const currentTheme = await getCurrentTheme(t) || 'fluent.blue.light';
273259
const newTheme = args.theme || 'fluent.blue.light';
274260

@@ -277,9 +263,7 @@ async function main() {
277263
}
278264
},
279265
after: async (t: TestController) => {
280-
// if (componentFolder.includes('accessibility')) {
281266
await clearTestPage(t);
282-
// }
283267
},
284268
},
285269
},

‎e2e/testcafe-devextreme/tests/accessibility/dataGrid/fixedColumns.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ test('Accessibility: Scrollable should have focusable element when navigate thro
8383
}
8484
}).before(async () => createWidget('dxDataGrid', getGridConfig()));
8585

86-
test.meta({ unstable: true })('Accessibility: Scrollable should always have focusable element when navigate back to column headers', async (t) => {
86+
test('Accessibility: Scrollable should always have focusable element when navigate back to column headers', async (t) => {
8787
const dataGrid = new DataGrid('#container');
8888

8989
// focus first cell in second row

‎e2e/testcafe-devextreme/tests/accessibility/htmlEditor.ts‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const MENU_ITEM_CLASS = 'dx-menu-item';
99
const SUBMENU_CLASS = 'dx-submenu';
1010

1111
fixture.disablePageReloads`Accessibility`
12-
.page(url(__dirname, '../container.html'));
12+
.page(url(__dirname, '../container-extended.html'));
1313

1414
const markup = '<p>He<em>llo</em></p>';
1515

@@ -42,7 +42,6 @@ const configuration: Configuration = {
4242
a11yCheckConfig,
4343
options,
4444
created,
45-
meta: { loadQuill: true },
4645
};
4746

4847
testAccessibility(configuration);
@@ -78,7 +77,6 @@ const aiConfiguration: Configuration = {
7877
a11yCheckConfig,
7978
options: aiOptions,
8079
created: aiCreated,
81-
meta: { loadQuill: true },
8280
};
8381

8482
testAccessibility(aiConfiguration);

‎e2e/testcafe-devextreme/tests/cardView/keyboardNavigation/header.functional.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ test('Should continue arrow navigation from last focused item', async (t) => {
8787
height: 700,
8888
}));
8989

90-
test.meta({ unstable: true })('Should enable sorting by Enter', async (t) => {
90+
test('Should enable sorting by Enter', async (t) => {
9191
const cardView = new CardView(CARD_VIEW_SELECTOR);
9292

9393
await t
@@ -113,7 +113,7 @@ test.meta({ unstable: true })('Should enable sorting by Enter', async (t) => {
113113
height: 700,
114114
}));
115115

116-
test.meta({ unstable: true })('Should switch sorting by Enter', async (t) => {
116+
test('Should switch sorting by Enter', async (t) => {
117117
const cardView = new CardView(CARD_VIEW_SELECTOR);
118118

119119
await t
@@ -139,7 +139,7 @@ test.meta({ unstable: true })('Should switch sorting by Enter', async (t) => {
139139
height: 700,
140140
}));
141141

142-
test.meta({ unstable: true })('Should clear sorting by ctrl+Enter', async (t) => {
142+
test('Should clear sorting by ctrl+Enter', async (t) => {
143143
const cardView = new CardView(CARD_VIEW_SELECTOR);
144144

145145
await t
@@ -177,7 +177,7 @@ test.meta({ unstable: true })('Should clear sorting by ctrl+Enter', async (t) =>
177177
height: 700,
178178
}));
179179

180-
test.meta({ unstable: true })('Should enable multi field sorting by shift+Enter', async (t) => {
180+
test('Should enable multi field sorting by shift+Enter', async (t) => {
181181
const cardView = new CardView(CARD_VIEW_SELECTOR);
182182

183183
await t

‎e2e/testcafe-devextreme/tests/common/gantt/common.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ import { appendElementTo } from '../../../helpers/domUtils';
88

99
const TOOLBAR_ITEM_BUTTON = '.dx-button';
1010

11-
fixture.disablePageReloads`Gantt`
12-
.page(url(__dirname, '../../container.html'));
11+
fixture`Gantt`
12+
.page(url(__dirname, '../../container-extended.html'));
1313

1414
const data = {
1515
tasks: [{
@@ -117,7 +117,7 @@ const data = {
117117
}],
118118
};
119119

120-
test.meta({ loadGantt: true })('Gantt - show resources button should not have focus state (T1264485)', async (t) => {
120+
test('Gantt - show resources button should not have focus state (T1264485)', async (t) => {
121121
const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
122122

123123
await t
@@ -138,7 +138,7 @@ test.meta({ loadGantt: true })('Gantt - show resources button should not have fo
138138
}, `#${id}`);
139139
});
140140

141-
test.meta({ loadGantt: true })('Gantt - show dependencies button should not have focus state (T1264485)', async (t) => {
141+
test('Gantt - show dependencies button should not have focus state (T1264485)', async (t) => {
142142
const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
143143

144144
await t

‎e2e/testcafe-devextreme/tests/container-extended.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>TestCafe Tests Container</title>
5+
6+
<link rel="dx-theme" data-theme="generic.light" href="../../../packages/devextreme/artifacts/css/dx.light.css" data-active="true">
7+
<link rel="dx-theme" data-theme="generic.light.compact" href="../../../packages/devextreme/artifacts/css/dx.light.compact.css" data-active="false">
8+
<link rel="dx-theme" data-theme="generic.dark" href="../../../packages/devextreme/artifacts/css/dx.dark.css" data-active="false">
9+
<link rel="dx-theme" data-theme="generic.contrast" href="../../../packages/devextreme/artifacts/css/dx.contrast.css" data-active="false">
10+
<link rel="dx-theme" data-theme="material.blue.light" href="../../../packages/devextreme/artifacts/css/dx.material.blue.light.css" data-active="false">
11+
<link rel="dx-theme" data-theme="material.blue.light.compact" href="../../../packages/devextreme/artifacts/css/dx.material.blue.light.compact.css" data-active="false">
12+
<link rel="dx-theme" data-theme="material.blue.dark" href="../../../packages/devextreme/artifacts/css/dx.material.blue.dark.css" data-active="false">
13+
<link rel="dx-theme" data-theme="fluent.blue.light" href="../../../packages/devextreme/artifacts/css/dx.fluent.blue.light.css" data-active="false">
14+
<link rel="dx-theme" data-theme="fluent.blue.light.compact" href="../../../packages/devextreme/artifacts/css/dx.fluent.blue.light.compact.css" data-active="false">
15+
<link rel="dx-theme" data-theme="fluent.blue.dark" href="../../../packages/devextreme/artifacts/css/dx.fluent.blue.dark.css" data-active="false">
16+
<link rel="dx-theme" data-theme="fluent.saas.light" href="../../../packages/devextreme/artifacts/css/dx.fluent.saas.light.css" data-active="false">
17+
<link rel="dx-theme" data-theme="fluent.saas.dark" href="../../../packages/devextreme/artifacts/css/dx.fluent.saas.dark.css" data-active="false">
18+
<link rel="dx-theme" data-theme="generic.greenmist" href="../../../packages/devextreme/artifacts/css/dx.greenmist.css" data-active="false">
19+
20+
<link rel="stylesheet" type="text/css" href="../../../packages/devextreme/node_modules/devexpress-gantt/dist/dx-gantt.min.css"/>
21+
22+
<script type="text/javascript" src="../../../packages/devextreme/artifacts/js/jquery.min.js"></script>
23+
<script type="text/javascript" src="../../../packages/devextreme/artifacts/js/dx-quill.min.js"></script>
24+
<script type="text/javascript" src="../../../packages/devextreme/artifacts/js/dx-gantt.min.js"></script>
25+
<script type="text/javascript" src="../../../packages/devextreme/artifacts/js/dx.all.js"></script>
26+
<script type="text/javascript" src="../../../packages/devextreme/artifacts/js/dx.aspnet.data.js"></script>
27+
28+
<style>
29+
* { caret-color: transparent !important; }
30+
.dx-scheduler .dx-scrollable-scroll { visibility: hidden !important; }
31+
</style>
32+
</head>
33+
<body class="dx-surface">
34+
<div id="parentContainer" role="main">
35+
<h1 style="position: fixed; left: 0; top: 0; clip: rect(1px, 1px, 1px, 1px);">Test header</h1>
36+
37+
<div id="container">
38+
</div>
39+
<div id="otherContainer">
40+
</div>
41+
</div>
42+
</body>
43+
</html>

0 commit comments

Comments
 (0)