chore: create testing package

[nnaydenow]

@ui5/cy-common

An internal package used within the monorepo that consolidates reusable Cypress-related code. This includes:

• Cypress configurations shared across multiple packages.
• Overrides for cypress-real-events commands to ensure proper interaction with web components inside the shadow DOM.

The cypress-real-events overrides ensure that commands wait for web components to fully load their content before interacting with them, improving test reliability.

@ui5/cypress-ct-ui5-webc

This package provides a custom Cypress framework and a mount function specifically for UI5 web components.

Installation Requirements

Before using @ui5/cypress-ct-ui5-webc, ensure that Cypress is installed in your project. If not, you can set it up by running:

npx cypress open

This will launch the Cypress configuration wizard, allowing you to choose the appropriate testing type.

Automatic Setup

If you select Component Testing, Cypress will automatically detect the UI5 Web Components framework (if @ui5/cypress-ct-ui5-webc is installed). It will generate:

• A cypress.config.js (or .ts) file with default settings.
• A cypress/support/component.js (or .ts) file for additional configurations.

Updating an Existing Cypress Configuration

If your project already has a Cypress setup, make sure it has installed @ui5/cypress-ct-ui5-webc.

1. Update cypress.config.js

Modify your existing cypress.config.js (or .ts) to ensure it contains the component testing configuration:

import { defineConfig } from "cypress";

export default defineConfig({
    component: {
        devServer: {
            framework: "@ui5/cypress-ct-ui5-webc",
            bundler: "vite",
        },
    },
});

2. Ensure the Mount Function is Registered

Modify your cypress/support/component.js file to include the mount function without removing existing configurations:

import { mount } from '@ui5/cypress-ct-ui5-webc';

Cypress.Commands.add('mount', mount);

• Enable eslint for tests