chore: add testing package

[nnaydenow]

Add a new @ui5/webcomponents-testing npm package to provide a standard testing setup (Cypress, etc.) for main, fiori, base, and external packages.

Cypress Test Folder Structure

Here’s how the Cypress folder structure should look:

project_root/
│
├── cypress.config.js
├── cypress/
│   ├── support/
│   │   └── component.js
│   └── specs/
│       └── MyComponent.cy.js

Configuration File (cypress.config.js)

To configure Cypress for UI5 Web Components testing, import defineCypressConfig from @ui5/webcomponents-testing and re-export it in your cypress.config.js file. The defineCypressConfig function serves as a wrapper around Cypress's defineConfig function and includes predefined settings tailored for UI5 Web Components.

import { defineCypressConfig } from "@ui5/webcomponents-testing/cypress/config.js";

export default defineCypressConfig({});

Component Support File (cypress/support/component.js)

Cypress requires a support file for component testing. To set this up, import the support file from @ui5/webcomponents-testing/cypress/support/component.js, which provides the necessary mount function for your component tests.

import "@ui5/webcomponents-testing/cypress/support/component.js";

ESLint Configuration

To enable ESLint for your test files, import Cypress overrides from the @ui5/webcomponents-testing package. This integration ensures that ESLint is correctly applied to your test files.

const config = require("@ui5/webcomponents-tools/components-package/eslint.js");
const testEslint = require("@ui5/webcomponents-testing/eslint.cjs");

testEslint.forEach(override => {
    config.overrides?.push(override);
});

module.exports = config;

Vite Configuration (vite.config.js)

If a vite.config.js file exists in the project root, it will be automatically detected and used. If the file is located elsewhere, you need to specify its path explicitly:

import { defineCypressConfig } from "@ui5/webcomponents-testing/cypress/config.js";

export default defineCypressConfig({
    component: {
        devServer: {
            viteConfig: "./config/vite.config.mjs",
        }
    }
});

Note: If the path is not specified, the default Vite configuration for component packages will be utilized.

Related to: #10055.