Skip to content

Commit d149fb0

Browse files
nnaydenownnaydenow
authored
chore: use correct jsx in cypress mount function (#11247)
- Add `ui5/webcomponents-base` as a peer dependency to ensure consistency in JSX modules usage for tests and component development within the respective package. - Remove unnecessary TypeScript configurations. - Introduce new commands to check whether `ui5-dialog`, `ui5-popover`, and `ui5-responsive-popover` are open, improving the stability of component tests in certain composition scenarios (e.g., `ui5-combobox`). - Adjust the build order of Cypress packages, as `cypress-internal` depends on `cypress-ct-ui5-webc`. - Require either a build or a running development server for test execution.
1 parent 880bc0d commit d149fb0

File tree

21 files changed

+148
-109
lines changed

21 files changed

+148
-109
lines changed

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
"build": "yarn ci:releasebuild && yarn ci:test:prepare",
4141
"test": "yarn wsrun --exclude-missing test",
4242
"test:prepare": "yarn ci:test:prepare && yarn generate",
43-
"ci:test:prepare": "yarn workspace @ui5/cypress-internal build && yarn workspace @ui5/cypress-ct-ui5-webc build",
43+
"ci:test:prepare": "yarn workspace @ui5/cypress-ct-ui5-webc build && yarn workspace @ui5/cypress-internal build",
4444

4545

4646
"ci:releasebuild": "npm-run-all --sequential generate ts generateProd generateAPI",

‎packages/ai/cypress/support/component.ts

-19
Original file line numberDiff line numberDiff line change
@@ -15,22 +15,3 @@
1515

1616
// Import commands.js using ES2015 syntax:
1717
import './commands'
18-
19-
import { mount } from '@ui5/cypress-ct-ui5-webc'
20-
21-
// Augment the Cypress namespace to include type definitions for
22-
// your custom command.
23-
// Alternatively, can be defined in cypress/support/component.d.ts
24-
// with a <reference path="./component" /> at the top of your spec.
25-
declare global {
26-
namespace Cypress {
27-
interface Chainable {
28-
mount: typeof mount
29-
}
30-
}
31-
}
32-
33-
Cypress.Commands.add('mount', mount)
34-
35-
// Example use:
36-
// cy.mount(MyComponent)

‎packages/ai/cypress/tsconfig.json

+7-3
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
11
{
2-
"extends": "@ui5/webcomponents-tools/tsconfig.json",
32
"include": [
43
"./**/*"
54
],
65
"compilerOptions": {
7-
"composite": true,
8-
"tsBuildInfoFile": "dist/.tsbuildinfobuild",
6+
"jsx": "react-jsx",
7+
"jsxImportSource": "@ui5/webcomponents-base",
98
"module": "NodeNext",
109
"moduleResolution": "nodenext",
10+
"types": [
11+
"cypress",
12+
"cypress-real-events",
13+
"cypress-axe",
14+
],
1115
"paths": {
1216
"@ui5/webcomponents-base/dist/*": [
1317
"../../base/src/*"

‎packages/base/cypress/support/component.ts

-19
Original file line numberDiff line numberDiff line change
@@ -15,22 +15,3 @@
1515

1616
// Import commands.js using ES2015 syntax:
1717
import './commands'
18-
19-
import { mount } from '@ui5/cypress-ct-ui5-webc'
20-
21-
// Augment the Cypress namespace to include type definitions for
22-
// your custom command.
23-
// Alternatively, can be defined in cypress/support/component.d.ts
24-
// with a <reference path="./component" /> at the top of your spec.
25-
declare global {
26-
namespace Cypress {
27-
interface Chainable {
28-
mount: typeof mount
29-
}
30-
}
31-
}
32-
33-
Cypress.Commands.add('mount', mount)
34-
35-
// Example use:
36-
// cy.mount(MyComponent)

‎packages/cypress-ct-ui5-webc/package.json

+3
Original file line numberDiff line numberDiff line change
@@ -24,5 +24,8 @@
2424
"cypress": "^13.11.0",
2525
"preact": "^10.25.4",
2626
"@cypress/mount-utils": "^4.0.0"
27+
},
28+
"peerDependencies": {
29+
"@ui5/webocmponets-base": "^2.6.0"
2730
}
2831
}

‎packages/cypress-ct-ui5-webc/src/index.ts

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1+
/// <reference types="cypress" />
12
import { setupHooks, getContainerEl } from "@cypress/mount-utils";
2-
import { render } from 'preact';
3-
import type { JSX } from 'preact';
3+
import { render } from '@ui5/webcomponents-base/dist/thirdparty/preact/preact.module.js';
4+
import type { JSX } from '@ui5/webcomponents-base/dist/thirdparty/preact/preact.module.js';
45

56
type Options = Record<string, any>;
67

‎packages/cypress-internal/package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,10 @@
55
"private": true,
66
"scripts": {
77
"build": "tsc && node ./src/copy.js",
8-
"generate": "yarn build",
8+
"generate": "node ./src/copy.js",
99
"clean": "rimraf dist"
1010
},
11+
"types": "./dist/",
1112
"exports": {
1213
"./*": "./dist/*"
1314
},

‎packages/cypress-internal/src/commands.ts

+11
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { mount } from '@ui5/cypress-ct-ui5-webc'
12
import "cypress-real-events";
23
import '@cypress/code-coverage/support';
34
import "./acc_report/support.js";
@@ -29,3 +30,13 @@ const commands = [
2930
commands.forEach(cmd => {
3031
Cypress.Commands.overwrite(cmd as any, realEventCmdCallback)
3132
});
33+
34+
declare global {
35+
namespace Cypress {
36+
interface Chainable {
37+
mount: typeof mount;
38+
}
39+
}
40+
}
41+
42+
Cypress.Commands.add('mount', mount)

‎packages/cypress-internal/src/copy.js

+10-7
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
1-
import { copyFile } from "fs/promises";
1+
import { copyFile, mkdir } from "fs/promises";
22
import path from "path";
33

44
const dirname = import.meta.dirname;
5+
const eslintInputPath = path.join(dirname, "./eslint.cjs");
6+
const eslintOutputPath = path.join(dirname, "../dist/eslint.cjs");
7+
const accReportIndexInputPath = path.join(dirname, "./acc_report/index");
8+
const accReportIndexOutputPath = path.join(dirname, "../dist/acc_report/index");
59

6-
const files = [
7-
8-
];
9-
10-
await copyFile(path.join(dirname, "./eslint.cjs"), path.join(dirname, "../dist/eslint.cjs"))
10+
await mkdir(path.dirname(eslintOutputPath), {recursive: true});
11+
await copyFile(eslintInputPath, eslintOutputPath)
1112
console.log("eslint.cjs copied successfully")
12-
await copyFile(path.join(dirname, "./acc_report/index"), path.join(dirname, "../dist/acc_report/index"))
13+
14+
await mkdir(path.dirname(accReportIndexOutputPath), {recursive: true});
15+
await copyFile(accReportIndexInputPath, accReportIndexOutputPath)
1316
console.log("acc_report/index copied successfully")

‎packages/cypress-internal/tsconfig.json

+3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
{
22
"compilerOptions": {
3+
"composite": true,
34
"outDir": "dist",
45
"rootDir": "src",
56
"skipLibCheck": true,
7+
"tsBuildInfoFile": "dist/.tsbuildinfobuild",
68
"target": "ES6",
79
"module": "ES6",
810
"moduleResolution": "node",
@@ -15,6 +17,7 @@
1517
"strict": true,
1618
"types": [
1719
"cypress",
20+
"cypress-real-events",
1821
"cypress-axe",
1922
]
2023
},

‎packages/fiori/cypress/support/component.ts

-19
Original file line numberDiff line numberDiff line change
@@ -15,22 +15,3 @@
1515

1616
// Import commands.js using ES2015 syntax:
1717
import './commands'
18-
19-
import { mount } from '@ui5/cypress-ct-ui5-webc'
20-
21-
// Augment the Cypress namespace to include type definitions for
22-
// your custom command.
23-
// Alternatively, can be defined in cypress/support/component.d.ts
24-
// with a <reference path="./component" /> at the top of your spec.
25-
declare global {
26-
namespace Cypress {
27-
interface Chainable {
28-
mount: typeof mount
29-
}
30-
}
31-
}
32-
33-
Cypress.Commands.add('mount', mount)
34-
35-
// Example use:
36-
// cy.mount(MyComponent)

‎packages/fiori/cypress/tsconfig.json

+7-3
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
11
{
2-
"extends": "@ui5/webcomponents-tools/tsconfig.json",
32
"include": [
43
"./**/*"
54
],
65
"compilerOptions": {
7-
"composite": true,
8-
"tsBuildInfoFile": "dist/.tsbuildinfobuild",
6+
"jsx": "react-jsx",
7+
"jsxImportSource": "@ui5/webcomponents-base",
98
"module": "NodeNext",
109
"moduleResolution": "nodenext",
10+
"types": [
11+
"cypress",
12+
"cypress-real-events",
13+
"cypress-axe",
14+
],
1115
"paths": {
1216
"@ui5/webcomponents-base/dist/*": [
1317
"../../base/src/*"

‎packages/main/cypress/specs/DateTimePicker.cy.tsx

+14-16
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import DateTimePicker from "../../src/DateTimePicker.js";
22
import { setAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
33
import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js";
4+
import type ResponsivePopover from "../../src/ResponsivePopover.js";
45

56
function DefaultDateTimePicker() {
67
return (
@@ -12,7 +13,7 @@ function DateTimePickerWithMinutes() {
1213
return <DateTimePicker
1314
id="dtMinutes"
1415
formatPattern="dd/MM/yyyy, hh:mm a"
15-
value="13/04/2020, 09:16 AM"/>;
16+
value="13/04/2020, 09:16 AM" />;
1617
}
1718

1819
function DateTimePickerWithSeconds({ initialValue }: { initialValue?: string }) {
@@ -178,12 +179,12 @@ describe("DateTimePicker general interaction", () => {
178179
cy.get("ui5-calendar")
179180
.shadow()
180181
.as("calendar");
181-
182+
182183
cy.get("@calendar")
183184
.find("ui5-daypicker")
184185
.shadow()
185186
.as("daypicker");
186-
187+
187188
cy.get("@daypicker")
188189
.find(".ui5-dp-item--now")
189190
.should("be.focused")
@@ -280,12 +281,12 @@ describe("DateTimePicker general interaction", () => {
280281
cy.get("ui5-calendar")
281282
.shadow()
282283
.as("calendar");
283-
284+
284285
cy.get("@calendar")
285286
.find("ui5-daypicker")
286287
.shadow()
287288
.as("daypicker");
288-
289+
289290
cy.get("@daypicker")
290291
.find(".ui5-dp-item--selected")
291292
.should("be.focused")
@@ -333,13 +334,13 @@ describe("DateTimePicker general interaction", () => {
333334
// Prevent default behavior of ui5-change event.
334335
cy.get("[ui5-datetime-picker]")
335336
.as("dtp")
336-
337+
337338
cy.get("@dtp")
338339
.then($el => {
339-
$el[0].addEventListener("ui5-change", (ev: Event) => {
340-
ev.preventDefault();
340+
$el[0].addEventListener("ui5-change", (ev: Event) => {
341+
ev.preventDefault();
342+
});
341343
});
342-
});
343344

344345
cy.ui5DateTimePickerOpen("#dt");
345346

@@ -364,17 +365,14 @@ describe("DateTimePicker general interaction", () => {
364365

365366
cy.get("@dtp")
366367
.shadow()
367-
.find("[ui5-responsive-popover]")
368-
.should($rp => {
369-
expect($rp.is(":popover-open")).to.be.false;
370-
})
371-
.and("not.have.attr", "open");
368+
.find<ResponsivePopover>("[ui5-responsive-popover]")
369+
.ui5ResponsivePopoverOpened();
372370

373371
cy.get("@dtp")
374372
.shadow()
375373
.find("[ui5-datetime-input]")
376374
.as("input");
377-
375+
378376
cy.get("@input")
379377
.should("be.focused")
380378
.should("have.attr", "value", "");
@@ -454,7 +452,7 @@ describe("DateTimePicker general interaction", () => {
454452
.find("ui5-daypicker")
455453
.shadow()
456454
.as("daypicker");
457-
455+
458456
cy.get("@daypicker")
459457
.find("[data-sap-focus-ref]")
460458
.realClick()

‎packages/main/cypress/specs/base/Events.cy.tsx

+9
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import MultiComboBoxItem from "../../../src/MultiComboBoxItem.js";
1515
import CheckBox from "../../../src/CheckBox.js";
1616
import { setAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
1717
import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js";
18+
import type ResponsivePopover from "../../../src/ResponsivePopover.js";
1819

1920
describe("Event bubbling", () => {
2021
before(() => {
@@ -83,6 +84,9 @@ describe("Event bubbling", () => {
8384

8485
cy.get("@dialog").invoke("attr", "open", true);
8586

87+
cy.get<Dialog>("@dialog")
88+
.ui5DialogOpened()
89+
8690
// act - toggle Input suggestions
8791
cy.get("@input")
8892
.realClick();
@@ -92,6 +96,11 @@ describe("Event bubbling", () => {
9296

9397
cy.realType("a");
9498

99+
cy.get("@input")
100+
.shadow()
101+
.find<ResponsivePopover>("[ui5-responsive-popover]")
102+
.ui5ResponsivePopoverOpened();
103+
95104
cy.get("@input")
96105
.find("[ui5-suggestion-item]")
97106
.eq(1)

‎packages/main/cypress/support/commands.ts

+4-1
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,9 @@ import "./commands/Calendar.commands.js";
4444
import "./commands/ColorPalette.commands.js";
4545
import "./commands/ColorPicker.commands.js";
4646
import "./commands/DateTimePicker.commands.js";
47+
import "./commands/Dialog.commands.ts";
48+
import "./commands/Popover.commands.ts";
49+
import "./commands/ResponsivePopover.commands.js";
4750
import "./commands/DatePicker.commands.js";
4851
import "./commands/Menu.commands.js";
4952
import "./commands/SegmentedButton.commands.js";
@@ -64,7 +67,7 @@ declare global {
6467
ui5ColorPickerToggleColorMode(): Chainable<void>
6568
ui5ColorPickerUpdateInput(name: string, value: string): Chainable<void>
6669
ui5ColorPickerValidateInput(name: string, value: string): Chainable<void>
67-
ui5ColorPaletteCheckSelectedColor(colorPaletteItem: string, values: {r: string, g: string, b: string, a: string}): Chainable<void>
70+
ui5ColorPaletteCheckSelectedColor(colorPaletteItem: string, values: { r: string, g: string, b: string, a: string }): Chainable<void>
6871
ui5ColorPaletteNavigateAndCheckSelectedColor(colorPalette: string, startIndex: number, key: string, expectedValue: string): Chainable<void>
6972
ui5DatePickerGetInnerInput(): Chainable<JQuery<HTMLElement>>
7073
ui5DatePickerGetPopoverDate(timestamp: number): Chainable<JQuery<HTMLElement>>

‎packages/main/cypress/support/commands/Dialog.commands.ts

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import type Dialog from "../../../src/Dialog.js";
2+
import { isPopupOpen } from "./utils/popup-open.js";
3+
4+
Cypress.Commands.add("ui5DialogOpened", { prevSubject: true }, (subject: JQuery<Dialog>) => {
5+
isPopupOpen(subject);
6+
});
7+
8+
declare global {
9+
namespace Cypress {
10+
interface Chainable {
11+
ui5DialogOpened(
12+
this: Chainable<JQuery<Dialog>>
13+
): Chainable<void>;
14+
}
15+
}
16+
}

‎packages/main/cypress/support/commands/Popover.commands.ts

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import type Popover from "../../../src/Popover.js";
2+
import { isPopupOpen } from "./utils/popup-open.js";
3+
4+
Cypress.Commands.add("ui5PopoverOpened", { prevSubject: true }, (subject: JQuery<Popover>) => {
5+
isPopupOpen(subject);
6+
});
7+
8+
declare global {
9+
namespace Cypress {
10+
interface Chainable {
11+
ui5PopoverOpened(
12+
this: Chainable<JQuery<Popover>>
13+
): Chainable<void>;
14+
}
15+
}
16+
}

0 commit comments

Comments
 (0)