This commit is contained in:
Lukáš Kaňka
2023-08-15 18:35:50 +02:00
commit ea3e372146
10019 changed files with 2548539 additions and 0 deletions

View File

@ -0,0 +1,140 @@
# @cypress/mount-utils
> **Note** this package is not meant to be used outside of cypress component testing.
This library exports some shared types and utility functions designed to build adapters for components frameworks.
It is used in:
- [`@cypress/react`](https://github.com/cypress-io/cypress/tree/develop/npm/react)
- [`@cypress/vue`](https://github.com/cypress-io/cypress/tree/develop/npm/vue)
- [`@cypress/svelte`](https://github.com/cypress-io/cypress/tree/develop/npm/svelte)
- [`@cypress/angular`](https://github.com/cypress-io/cypress/tree/develop/npm/angular)
## What is a Mount Adapter?
All Component Tests require a component to be **mounted**. This is generally done with a custom command, `cy.mount` by default.
### Requirements
All the functionality used to create the first party Mount adapters is available to support third parties adapters. At minimum, a Mount Adapter must:
- Receive a component as the first argument. This could be class, function etc - depends on the framework.
- Return a Cypress Chainable (for example using `cy.wrap`) that resolves whatever is idiomatic for your framework
- Call `getContainerEl` to access the root DOM element
In addition, we recommend that Mount Adapters:
- call `setupHooks` to register the required lifecycle hooks for `@cypress/mount-utils` to work
### Example Mount Adapter: Web Components
Here's a simple yet realistic example of Mount Adapter targeting Web Components. It uses utilities from this package (`@cypress/mount-utils`) This is recommended, so your adapter behaves similar to the first party Mount Adapters.
```ts
import {
ROOT_SELECTOR,
setupHooks,
getContainerEl
} from "@cypress/mount-utils";
Cypress.on("run:start", () => {
// Consider doing a check to ensure your adapter only runs in Component Testing mode.
if (Cypress.testingType !== "component") {
return;
}
Cypress.on("test:before:run", () => {
// Do some cleanup from previous test - for example, clear the DOM.
getContainerEl().innerHTML = "";
});
});
function maybeRegisterComponent<T extends CustomElementConstructor>(
name: string,
webComponent: T
) {
// Avoid double-registering a Web Component.
if (window.customElements.get(name)) {
return;
}
window.customElements.define(name, webComponent);
}
export function mount(
webComponent: CustomElementConstructor
): Cypress.Chainable {
// Get root selector defined in `cypress/support.component-index.html
const $root = document.querySelector(ROOT_SELECTOR)!;
// Change to kebab-case to comply with Web Component naming convention
const name = webComponent.name
.replace(/([a-z09])([A-Z])/g, "$1-$2")
.toLowerCase();
/// Register Web Component
maybeRegisterComponent(name, webComponent);
// Render HTML containing component.
$root.innerHTML = `<${name} id="root"></${name}>`;
// Log a messsage in the Command Log.
Cypress.log({
name: "mount",
message: [`<${name} ... />`],
});
// Return a `Cypress.Chainable` that returns whatever is idiomatic
// in the framework your mount adapter targets.
return cy.wrap(document.querySelector("#root"), { log: false });
}
// Setup Cypress lifecycle hooks.
setupHooks();
```
Usage:
```ts
// User will generally register a `cy.mount` command in `cypress/support/component.js`:
import { mount } from '@package/cypress-web-components'
Cypress.Commands.add('mount', mount)
// Test
export class WebCounter extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.innerHTML = `
<div>
<button>Counter</button>
</div>`;
}
}
describe('web-component.cy.ts', () => {
it('playground', () => {
cy.mount(WebCounter)
})
})
```
For more robust, production ready examples, check out our first party adapters.
## Compatibility
| @cypress/mount-utils | cypress |
| -------------------- | ------- |
| <= v1 | <= v9 |
| >= v2 | >= v10 |
## Changelog
[Changelog](./CHANGELOG.md)

View File

@ -0,0 +1,40 @@
export declare const ROOT_SELECTOR = "[data-cy-root]";
/**
* Gets the root element used to mount the component.
* @returns {HTMLElement} The root element
* @throws {Error} If the root element is not found
*/
export declare const getContainerEl: () => HTMLElement;
export declare function checkForRemovedStyleOptions(mountingOptions: Record<string, any>): void;
/**
* Utility function to register CT side effects and run cleanup code during the "test:before:run" Cypress hook
* @param optionalCallback Callback to be called before the next test runs
*/
export declare function setupHooks(optionalCallback?: Function): void;
/**
* Remove any style or extra link elements from the iframe placeholder
* left from any previous test
*
* Removed as of Cypress 11.0.0
* @see https://on.cypress.io/migration-11-0-0-component-testing-updates
*/
export declare function cleanupStyles(): void;
/**
* Additional styles to inject into the document.
* A component might need 3rd party libraries from CDN,
* local CSS files and custom styles.
*
* Removed as of Cypress 11.0.0.
* @see https://on.cypress.io/migration-11-0-0-component-testing-updates
*/
export declare type StyleOptions = unknown;
/**
* Injects custom style text or CSS file or 3rd party style resources
* into the given document.
*
* Removed as of Cypress 11.0.0.
* @see https://on.cypress.io/migration-11-0-0-component-testing-updates
*/
export declare const injectStylesBeforeElement: (options: Partial<StyleOptions & {
log: boolean;
}>, document: Document, el: HTMLElement | null) => void;

View File

@ -0,0 +1,68 @@
export const ROOT_SELECTOR = '[data-cy-root]';
/**
* Gets the root element used to mount the component.
* @returns {HTMLElement} The root element
* @throws {Error} If the root element is not found
*/
export const getContainerEl = () => {
const el = document.querySelector(ROOT_SELECTOR);
if (el) {
return el;
}
throw Error(`No element found that matches selector ${ROOT_SELECTOR}. Please add a root element with data-cy-root attribute to your "component-index.html" file so that Cypress can attach your component to the DOM.`);
};
export function checkForRemovedStyleOptions(mountingOptions) {
for (const key of ['cssFile', 'cssFiles', 'style', 'styles', 'stylesheet', 'stylesheets']) {
if (mountingOptions[key]) {
Cypress.utils.throwErrByPath('mount.removed_style_mounting_options', key);
}
}
}
/**
* Utility function to register CT side effects and run cleanup code during the "test:before:run" Cypress hook
* @param optionalCallback Callback to be called before the next test runs
*/
export function setupHooks(optionalCallback) {
// We don't want CT side effects to run when e2e
// testing so we early return.
// System test to verify CT side effects do not pollute e2e: system-tests/test/e2e_with_mount_import_spec.ts
if (Cypress.testingType !== 'component') {
return;
}
// When running component specs, we cannot allow "cy.visit"
// because it will wipe out our preparation work, and does not make much sense
// thus we overwrite "cy.visit" to throw an error
Cypress.Commands.overwrite('visit', () => {
throw new Error('cy.visit from a component spec is not allowed');
});
Cypress.Commands.overwrite('session', () => {
throw new Error('cy.session from a component spec is not allowed');
});
Cypress.Commands.overwrite('origin', () => {
throw new Error('cy.origin from a component spec is not allowed');
});
// @ts-ignore
Cypress.on('test:before:run', () => {
optionalCallback === null || optionalCallback === void 0 ? void 0 : optionalCallback();
});
}
/**
* Remove any style or extra link elements from the iframe placeholder
* left from any previous test
*
* Removed as of Cypress 11.0.0
* @see https://on.cypress.io/migration-11-0-0-component-testing-updates
*/
export function cleanupStyles() {
Cypress.utils.throwErrByPath('mount.cleanup_styles');
}
/**
* Injects custom style text or CSS file or 3rd party style resources
* into the given document.
*
* Removed as of Cypress 11.0.0.
* @see https://on.cypress.io/migration-11-0-0-component-testing-updates
*/
export const injectStylesBeforeElement = (options, document, el) => {
Cypress.utils.throwErrByPath('mount.inject_styles_before_element');
};

View File

@ -0,0 +1,37 @@
{
"name": "@cypress/mount-utils",
"version": "0.0.0-development",
"description": "Shared utilities for the various component testing adapters",
"main": "dist/index.js",
"scripts": {
"build": "tsc || echo 'built, with type errors'",
"postbuild": "node ../../scripts/sync-exported-npm-with-cli.js",
"build-prod": "yarn build",
"check-ts": "tsc --noEmit",
"watch": "tsc -w",
"lint": "eslint --ext .js,.ts,.json, ."
},
"dependencies": {},
"devDependencies": {
"@rollup/plugin-commonjs": "^17.1.0",
"@rollup/plugin-node-resolve": "^11.1.1",
"rollup": "3.7.3",
"rollup-plugin-dts": "5.0.0",
"rollup-plugin-typescript2": "^0.29.0",
"typescript": "^4.7.4"
},
"files": [
"dist"
],
"types": "dist/index.d.ts",
"license": "MIT",
"repository": {
"type": "git",
"url": "https://github.com/cypress-io/cypress.git"
},
"homepage": "https://github.com/cypress-io/cypress/tree/develop/npm/mount-utils#readme",
"bugs": "https://github.com/cypress-io/cypress/issues/new?template=1-bug-report.md",
"publishConfig": {
"access": "public"
}
}