chore: enable JSX in Cypress tests (#10653)

Enable JSX syntax in Cypress tests, further improving the test dev experience as we get TS checks and auto completion for the web components.

**Note**: From now on, any changes to tests or creating new tests should use `jsx` for test mounting, instead of `lit-html`. As the same syntax rules apply as in the component templates, there is nothing new to learn and switching is straightforward.

**Before:**

```ts
cy.mount(html`<ui5-card>
	  <ui5-card-header
                  id="cardHeader2"
		  slot="header"
		  additional-text="4 of 10"
		  title-text="Quick Links"
		  subtitle-text="Quick links sub title"
		  interactive
	  >
	  </ui5-card-header>
       </ui5-card>
`);
```

**After**:
```tsx
cy.mount(<Card>
	  <CardHeader
		  id="cardHeader1"
		  slot="header"
		  additionalText="4 of 10"
		  titleText="Quick Links"
		  subtitleText="Quick links sub title"
		  interactive={true}
	  >
	  </CardHeader>
       </Card>
);
```

.github/workflows/ci-test-website.yaml

@@ -13,7 +13,7 @@ jobs:
     - uses: actions/checkout@v4
     - uses: actions/[email protected]
       with:
-        node-version: 20
+        node-version: 22
         cache: 'yarn'
 
     - name: Install and Build

.github/workflows/ci-test.yaml

@@ -16,7 +16,7 @@ jobs:
 
     - uses: actions/[email protected]
       with:
-        node-version: 20
+        node-version: 22
         cache: 'yarn'
 
     - name: Install Dependencies

.github/workflows/deploy-website-auto.yaml

@@ -16,7 +16,7 @@ jobs:
     - uses: actions/checkout@v4
     - uses: actions/[email protected]
       with:
-        node-version: 20
+        node-version: 22
         cache: 'yarn'
 
     - name: Install and Build

.github/workflows/deploy-website-manually.yaml

@@ -15,7 +15,7 @@ jobs:
     - uses: actions/checkout@v4
     - uses: actions/[email protected]
       with:
-        node-version: 20
+        node-version: 22
         cache: 'yarn'
 
     - name: Install and Build

.github/workflows/deploy-website-on-release.yaml

@@ -14,7 +14,7 @@ jobs:
     - uses: actions/checkout@v4
     - uses: actions/[email protected]
       with:
-        node-version: 20
+        node-version: 22
         cache: 'yarn'
 
     - name: Install and Build

.github/workflows/issues-handling.yaml

@@ -16,7 +16,7 @@ jobs:
         fetch-depth: 0
     - uses: actions/[email protected]
       with:
-        node-version: 20
+        node-version: 22
         cache: 'yarn'
 
     - name: Install

.github/workflows/lint.yaml

@@ -13,7 +13,7 @@ jobs:
 
     - uses: actions/[email protected]
       with:
-        node-version: 20
+        node-version: 22
         cache: 'yarn'
 
     - name: Install Dependencies

.github/workflows/merge-release-changelog.yaml

@@ -16,7 +16,7 @@ jobs:
         fetch-depth: 0
     - uses: actions/[email protected]
       with:
-        node-version: 20
+        node-version: 22
         cache: 'yarn'
 
     - name: Install

.github/workflows/release-downport.yaml

@@ -22,7 +22,7 @@ jobs:
         fetch-depth: 0
     - uses: actions/[email protected]
       with:
-        node-version: 20
+        node-version: 22
         cache: 'yarn'
 
     - name: Install

.github/workflows/release-experimental.yaml

@@ -10,7 +10,7 @@ jobs:
     - uses: actions/checkout@v4
     - uses: actions/[email protected]
       with:
-        node-version: 20
+        node-version: 22
         cache: 'yarn'
 
     - name: Install

.github/workflows/release-rc-auto.yaml

@@ -18,7 +18,7 @@ jobs:
         fetch-depth: 0
     - uses: actions/[email protected]
       with:
-        node-version: 20
+        node-version: 22
         cache: 'yarn'
 
     - name: Install

.github/workflows/release-rc.yaml

@@ -13,7 +13,7 @@ jobs:
         fetch-depth: 0
     - uses: actions/[email protected]
       with:
-        node-version: 20
+        node-version: 22
         cache: 'yarn'
 
     - name: Install

.github/workflows/release-stable.yaml

@@ -27,7 +27,7 @@ jobs:
         fetch-depth: 0
     - uses: actions/[email protected]
       with:
-        node-version: 20
+        node-version: 22
         cache: 'yarn'
 
     - name: Install

docs/4-development/02-component.md

@@ -58,39 +58,39 @@ class MyDemoComponent extends UI5Element {
 **Note:** As per the HTML specification, the tag name must contain a dash ('-').
 
 ### renderer
-This option specifies the rendering engine for the component. UI5 Web Components are agnostic of the DOM rendering engine used. However, all standard UI5 Web Components (`@ui5/webcomponents`, `@ui5/webcomponents-fiori`, etc.) use [lit-html](https://github.com/Polymer/lit-html) as the rendering technology of choice.
+This option specifies the rendering engine for the component. UI5 Web Components are agnostic of the DOM rendering engine used. However, all standard UI5 Web Components (`@ui5/webcomponents`, `@ui5/webcomponents-fiori`, etc.) use [preact](https://github.com/preactjs/preact) as the rendering technology of choice.
 
 ```ts
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 
 @customElement({
-    renderer: litRender
+    renderer: jsxRenderer
 })
 class MyDemoComponent extends UI5Element {
     // class implementation
 }
 ```
 
 ### template
-This option accepts a template in a format that your defined renderer will understand.
+This option accepts a template in a format that your defined renderer will understand. Standard UI5 Web Components use JSX templates.
 
 ```ts
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import MyDemoComponentTemplate from "./generated/templates/MyDemoComponentTemplate.lit.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import MyDemoComponentTemplate from "./MyDemoComponentTemplate.js";
 
 @customElement({
+    renderer: jsxRenderer,
     template: MyDemoComponentTemplate
 })
 class MyDemoComponent extends UI5Element {
     // class implementation
 }
 ```
 
-**Note:** Standard UI5 Web Components use Handlebars templates that are automatically converted to `lit-html` syntax by the build script. If you have a `MyDemoComponentTemplate.hbs`, the build script will create a `generated/templates/DemoTemplate.lit.ts` file for you.
-
 ### styles
 This option accepts either component styles or an array of component styles that should be inserted inside the shadow root of the component.
 

docs/4-development/10-testing.md

@@ -225,21 +225,19 @@ For each package in your project, include a `cypress` folder at the root level w
 To write tests for a specific component, create a file in the respective package's specs folder:
 
 ```
-{packageName}/cypress/specs/MyComponent.cy.ts
+{packageName}/cypress/specs/MyComponent.cy.tsx
 ```
 
-We utilize component testing for UI5 web components, which involves mounting the component you intend to test. Our custom `mount` function leverages Lit for rendering components.
+We utilize component testing for UI5 web components, which involves mounting the component you intend to test. Our custom `mount` function leverages `preact` with `JSX` syntax for rendering components.
 
 **Example Test File:**
 
 ```typescript
-import { html } from "lit";
+describe("MyComponent Rendering", () => {
+  it("MyComponent exists", () => {
+    cy.mount(<MyComponent></MyComponent>);
 
-describe("Demo", () => {
-  it("Button exists", () => {
-    cy.mount(html`<ui5-test-generic></ui5-test-generic>`);
-
-    cy.get("[ui5-button]").should("exist");
+    cy.get("[my-component]").should("exist");
   });
 });
 ```
@@ -301,7 +299,7 @@ With Cypress component testing, we can efficiently verify if events are fired us
 **Example:**
 
 ```typescript
-cy.mount(html`<ui5-button></ui5-button>`);
+cy.mount(<Button></Button>`);
 
 cy.get("[ui5-button]").then(($button) => {
   cy.spy($button[0], "click").as("clickEvent");
@@ -332,7 +330,7 @@ describe("Configuration Example", () => {
   };
 
   before(() => {
-    cy.mount(html`<ui5-test-generic></ui5-test-generic>`, {
+    cy.mount(<MyComponent></MyComponent>, {
       ui5Configuration: config,
     });
 
@@ -381,7 +379,7 @@ To simulate mobile testing conditions, use the `ui5SimulateDevice` Cypress comma
 **Example:**
 
 ```typescript
-cy.mount(html`<ui5-button></ui5-button>`);
+cy.mount(<Button></Button>);
 
 cy.ui5SimulateDevice("phone"); // Simulates a phone device
 
@@ -426,7 +424,7 @@ import "./myComponentCommands";
 ```typescript
 describe("My Component Tests", () => {
   it("should click my component", () => {
-    cy.mount(html`<my-component></my-component>`);
+    cy.mount(<MyComponent></MyComponent>);
 
     cy.clickMyComponent("my-component");
   });

packages/ai/.eslintignore

@@ -8,5 +8,6 @@ bundle.*.js
 rollup.config*.js
 wdio.conf.cjs
 postcss.config.cjs
+cypress.config.js
 package-scripts.cjs
 .eslintrc.cjs

packages/ai/cypress.config.js

@@ -0,0 +1,10 @@
+import cypressConfig from "@ui5/webcomponents-tools/components-package/cypress.config.js";
+import path from "path";
+import { fileURLToPath } from "node:url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+cypressConfig.component.supportFile = path.join(__dirname, "cypress/support/component.ts");
+
+export default cypressConfig;

packages/ai/cypress/specs/Button.cy.tsx

@@ -0,0 +1,14 @@
+import Button from "../../src/Button.js";
+import ButtonState from "../../src/ButtonState.js";
+
+describe("Initial rendering", () => {
+	it("tests no config provided", () => {
+		cy.mount(
+			<Button>
+				<ButtonState name="generate" text="Generate" icon="ai">Click me</ButtonState>
+				<ButtonState name="generating" text="Stop Generating" icon="stop">Click me</ButtonState>
+				<ButtonState name="revise" text="Revise" icon="ai">Click me</ButtonState>
+			</Button>
+		);
+	});
+});

packages/ai/cypress/support/commands.ts

@@ -0,0 +1 @@
+import "../../../main/cypress/support/commands.js";

packages/ai/cypress/support/component.ts

@@ -0,0 +1,3 @@
+import "@ui5/webcomponents-tools/components-package/cypress/support/component.js";
+
+import "./commands.js";

packages/ai/cypress/tsconfig.json

@@ -0,0 +1,44 @@
+{
+	"extends": "@ui5/webcomponents-tools/tsconfig.json",
+	"include": [
+		"./**/*"
+	],
+	"compilerOptions": {
+		"types": ["@ui5/webcomponents-tools"],
+		"composite": true,
+		"tsBuildInfoFile": "dist/.tsbuildinfobuild",
+		"module": "NodeNext",
+		"moduleResolution": "nodenext",
+		"paths": {
+			"@ui5/webcomponents-base/dist/*": [
+				"../../base/src/*"
+			],
+			"@ui5/webcomponents/dist/*": [
+				"../../main/src/*"
+			],
+			"@ui5/webcomponents-localization/dist/*": [
+				"../../localization/src/*"
+			],
+			"@ui5/webcomponents-theming/dist/*": [
+				"../../theming/src/*"
+			],
+			"@ui5/webcomponents-icons/dist/*": [
+				"../../icons/src/*"
+			],
+			"@ui5/webcomponents-icons-business-suite/dist/*": [
+				"../../icons-business-suite/src/*"
+			],
+			"@ui5/webcomponents-icons-tnt/dist/*": [
+				"../../icons-tnt/src/*"
+			]
+		},
+	},
+	"references": [
+		{
+			"path": "../"
+		},
+		{
+			"path": "../../main/cypress"
+		}
+	]
+}

packages/ai/package.json

@@ -25,7 +25,9 @@
     "generate": "nps generate",
     "generateAPI": "nps generateAPI",
     "bundle": "nps build.bundle",
-    "test": "wc-dev test",
+    "test": "nps test-cy-ci",
+    "test:cypress": "nps test-cy-ci",
+    "test:cypress:open": "nps test-cy-open",
     "test:ssr": "node -e \"import('./test/ssr/component-imports.js')\"",
     "create-ui5-element": "wc-create-ui5-element",
     "prepublishOnly": "tsc -b"

packages/ai/tsconfig.json

@@ -7,30 +7,51 @@
 	"compilerOptions": {
 		"outDir": "dist",
 		"experimentalDecorators": true,
-		"verbatimModuleSyntax": true,
+		"composite": true,
+		"rootDir": "src",
+		"tsBuildInfoFile": "dist/.tsbuildinfo",
 		"module": "NodeNext",
 		"moduleResolution": "NodeNext",
+		"verbatimModuleSyntax": true,
 		"paths": {
 			"@ui5/webcomponents-base/dist/*": [
 				"../base/src/*"
 			],
-			"@ui5/webcomponents/dist/*": [
-				"../main/src/*"
+			"@ui5/webcomponents-localization/dist/*": [
+				"../localization/src/*"
 			],
 			"@ui5/webcomponents-theming/dist/*": [
 				"../theming/src/*"
 			],
+			"@ui5/webcomponents-icons/dist/*": [
+				"../icons/src/*"
+			],
+			"@ui5/webcomponents-icons-business-suite/dist/*": [
+				"../icons-business-suite/src/*"
+			],
+			"@ui5/webcomponents-icons-tnt/dist/*": [
+				"../icons-tnt/src/*"
+			]
 		},
 	},
 	"references": [
 		{
 			"path": "../base"
 		},
 		{
-			"path": "../main"
+			"path": "../localization"
 		},
 		{
 			"path": "../theming"
 		},
+		{
+			"path": "../icons"
+		},
+		{
+			"path": "../icons-business-suite"
+		},
+		{
+			"path": "../icons-tnt"
+		},
 	]
 }