Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: add testing package #10065

Open
wants to merge 22 commits into
base: main
Choose a base branch
from
Open

chore: add testing package #10065

wants to merge 22 commits into from

Conversation

nnaydenow
Copy link
Contributor

@nnaydenow nnaydenow commented Oct 21, 2024

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.

@nnaydenow nnaydenow requested review from ilhan007 and pskelin and removed request for ilhan007 October 25, 2024 10:26
@nnaydenow nnaydenow marked this pull request as ready for review October 25, 2024 11:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant