cypress 13.3.0 → 13.3.1

package/react18/react18/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@cypress/react18",
+  "version": "0.0.0-development",
+  "description": "Test React components using Cypress",
+  "main": "dist/cypress-react.cjs.js",
+  "scripts": {
+    "build": "rimraf dist && rollup -c rollup.config.mjs",
+    "postbuild": "node ../../scripts/sync-exported-npm-with-cli.js",
+    "check-ts": "tsc --noEmit",
+    "watch": "yarn build --watch --watch.exclude ./dist/**/*",
+    "lint": "eslint --ext .js,.jsx,.ts,.tsx,.json, ."
+  },
+  "devDependencies": {
+    "@cypress/mount-utils": "0.0.0-development",
+    "@cypress/react": "0.0.0-development",
+    "@rollup/plugin-commonjs": "^17.1.0",
+    "@rollup/plugin-node-resolve": "^11.1.1",
+    "@types/react": "^16",
+    "@types/react-dom": "^16",
+    "cypress": "0.0.0-development",
+    "react": "^16",
+    "react-dom": "^16",
+    "rollup": "3.7.3",
+    "rollup-plugin-typescript2": "^0.29.0",
+    "typescript": "^4.7.4"
+  },
+  "peerDependencies": {
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "cypress": "*",
+    "react": "^18",
+    "react-dom": "^18"
+  },
+  "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/blob/develop/npm/react18/#readme",
+  "bugs": "https://github.com/cypress-io/cypress/issues/new?assignees=&labels=npm%3A%20%40cypress%2Freact18&template=1-bug-report.md&title=",
+  "keywords": [
+    "react",
+    "cypress",
+    "cypress-io",
+    "test",
+    "testing"
+  ],
+  "module": "dist/cypress-react.esm-bundler.js",
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "nx": {
+    "targets": {
+      "build": {
+        "outputs": [
+          "{workspaceRoot}/cli/react18",
+          "{projectRoot}/dist"
+        ]
+      }
+    }
+  }
+}

package/svelte/package.json

@@ -7,7 +7,6 @@
     "prebuild": "rimraf dist",
     "build": "rollup -c rollup.config.mjs",
     "postbuild": "node ../../scripts/sync-exported-npm-with-cli.js",
-    "build-prod": "yarn build",
     "lint": "eslint --ext .js,.jsx,.ts,.tsx,.json, .",
     "check-ts": "tsc --noEmit"
   },
@@ -40,5 +39,18 @@
   "module": "dist/cypress-svelte.esm-bundler.js",
   "publishConfig": {
     "access": "public"
+  },
+  "nx": {
+    "targets": {
+      "build": {
+        "outputs": [
+          "{workspaceRoot}/cli/svelte",
+          "{projectRoot}/dist"
+        ]
+      }
+    },
+    "implicitDependencies": [
+      "!cypress"
+    ]
   }
 }

package/svelte/svelte/README.md

@@ -0,0 +1,15 @@
+# @cypress/svelte
+
+Mount Svelte components in the open source [Cypress.io](https://www.cypress.io/) test runner **v10.7.0+**
+
+> **Note:** This package is bundled with the `cypress` package and should not need to be installed separately. See the [Svelte Component Testing Docs](https://docs.cypress.io/guides/component-testing/svelte/overview) for mounting Svelte components. Installing and importing `mount` from `@cypress/svelte` should only be done for advanced use-cases.
+
+## Development
+
+Run `yarn build` to compile and sync packages to the `cypress` cli package.
+
+Run `yarn cy:open` to open Cypress component testing against real-world examples.
+
+Run `yarn test` to execute headless Cypress tests.
+
+## [Changelog](./CHANGELOG.md)

package/svelte/svelte/dist/cypress-svelte.cjs.js

@@ -0,0 +1,122 @@
+
+/**
+ * @cypress/svelte v0.0.0-development
+ * (c) 2023 Cypress.io
+ * Released under the MIT License
+ */
+
+'use strict';
+
+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
+ */
+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.`);
+};
+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
+ */
+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:after:run:async', () => {
+        optionalCallback === null || optionalCallback === void 0 ? void 0 : optionalCallback();
+    });
+}
+
+const DEFAULT_COMP_NAME = 'unknown';
+let componentInstance;
+const cleanup = () => {
+    componentInstance === null || componentInstance === void 0 ? void 0 : componentInstance.$destroy();
+};
+// Extract the component name from the object passed to mount
+const getComponentDisplayName = (Component) => {
+    if (Component.name) {
+        const [, match] = /Proxy\<(\w+)\>/.exec(Component.name) || [];
+        return match || Component.name;
+    }
+    return DEFAULT_COMP_NAME;
+};
+/**
+ * Mounts a Svelte component inside the Cypress browser
+ *
+ * @param {SvelteConstructor<T>} Component Svelte component being mounted
+ * @param {MountReturn<T extends SvelteComponent>} options options to customize the component being mounted
+ * @returns Cypress.Chainable<MountReturn>
+ *
+ * @example
+ * import Counter from './Counter.svelte'
+ * import { mount } from 'cypress/svelte'
+ *
+ * it('should render', () => {
+ *   mount(Counter, { props: { count: 42 } })
+ *   cy.get('button').contains(42)
+ * })
+ *
+ * @see {@link https://on.cypress.io/mounting-svelte} for more details.
+ */
+function mount(Component, options = {}) {
+    checkForRemovedStyleOptions(options);
+    return cy.then(() => {
+        // Remove last mounted component if cy.mount is called more than once in a test
+        cleanup();
+        const target = getContainerEl();
+        const ComponentConstructor = (Component.default || Component);
+        componentInstance = new ComponentConstructor(Object.assign({ target }, options));
+        // by waiting, we are delaying test execution for the next tick of event loop
+        // and letting hooks and component lifecycle methods to execute mount
+        return cy.wait(0, { log: false }).then(() => {
+            if (options.log !== false) {
+                const mountMessage = `<${getComponentDisplayName(Component)} ... />`;
+                Cypress.log({
+                    name: 'mount',
+                    message: [mountMessage],
+                });
+            }
+        })
+            .wrap({ component: componentInstance }, { log: false });
+    });
+}
+// Side effects from "import { mount } from '@cypress/<my-framework>'" are annoying, we should avoid doing this
+// by creating an explicit function/import that the user can register in their 'component.js' support file,
+// such as:
+//    import 'cypress/<my-framework>/support'
+// or
+//    import { registerCT } from 'cypress/<my-framework>'
+//    registerCT()
+// Note: This would be a breaking change
+setupHooks(cleanup);
+
+exports.mount = mount;

package/svelte/svelte/dist/cypress-svelte.esm-bundler.js

@@ -0,0 +1,120 @@
+
+/**
+ * @cypress/svelte v0.0.0-development
+ * (c) 2023 Cypress.io
+ * Released under the MIT License
+ */
+
+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
+ */
+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.`);
+};
+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
+ */
+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:after:run:async', () => {
+        optionalCallback === null || optionalCallback === void 0 ? void 0 : optionalCallback();
+    });
+}
+
+const DEFAULT_COMP_NAME = 'unknown';
+let componentInstance;
+const cleanup = () => {
+    componentInstance === null || componentInstance === void 0 ? void 0 : componentInstance.$destroy();
+};
+// Extract the component name from the object passed to mount
+const getComponentDisplayName = (Component) => {
+    if (Component.name) {
+        const [, match] = /Proxy\<(\w+)\>/.exec(Component.name) || [];
+        return match || Component.name;
+    }
+    return DEFAULT_COMP_NAME;
+};
+/**
+ * Mounts a Svelte component inside the Cypress browser
+ *
+ * @param {SvelteConstructor<T>} Component Svelte component being mounted
+ * @param {MountReturn<T extends SvelteComponent>} options options to customize the component being mounted
+ * @returns Cypress.Chainable<MountReturn>
+ *
+ * @example
+ * import Counter from './Counter.svelte'
+ * import { mount } from 'cypress/svelte'
+ *
+ * it('should render', () => {
+ *   mount(Counter, { props: { count: 42 } })
+ *   cy.get('button').contains(42)
+ * })
+ *
+ * @see {@link https://on.cypress.io/mounting-svelte} for more details.
+ */
+function mount(Component, options = {}) {
+    checkForRemovedStyleOptions(options);
+    return cy.then(() => {
+        // Remove last mounted component if cy.mount is called more than once in a test
+        cleanup();
+        const target = getContainerEl();
+        const ComponentConstructor = (Component.default || Component);
+        componentInstance = new ComponentConstructor(Object.assign({ target }, options));
+        // by waiting, we are delaying test execution for the next tick of event loop
+        // and letting hooks and component lifecycle methods to execute mount
+        return cy.wait(0, { log: false }).then(() => {
+            if (options.log !== false) {
+                const mountMessage = `<${getComponentDisplayName(Component)} ... />`;
+                Cypress.log({
+                    name: 'mount',
+                    message: [mountMessage],
+                });
+            }
+        })
+            .wrap({ component: componentInstance }, { log: false });
+    });
+}
+// Side effects from "import { mount } from '@cypress/<my-framework>'" are annoying, we should avoid doing this
+// by creating an explicit function/import that the user can register in their 'component.js' support file,
+// such as:
+//    import 'cypress/<my-framework>/support'
+// or
+//    import { registerCT } from 'cypress/<my-framework>'
+//    registerCT()
+// Note: This would be a breaking change
+setupHooks(cleanup);
+
+export { mount };

package/svelte/svelte/dist/index.d.ts

@@ -0,0 +1,201 @@
+/// <reference types="cypress" />
+
+declare module '*.svelte' {
+    export { SvelteComponentDev as default } from 'svelte/internal';
+}
+
+/**
+ * INTERNAL, DO NOT USE. Code may change at any time.
+ */
+interface Fragment {
+    key: string | null;
+    first: null;
+    c: () => void;
+    l: (nodes: any) => void;
+    h: () => void;
+    m: (target: HTMLElement, anchor: any) => void;
+    p: (ctx: any, dirty: any) => void;
+    r: () => void;
+    f: () => void;
+    a: () => void;
+    i: (local: any) => void;
+    o: (local: any) => void;
+    d: (detaching: 0 | 1) => void;
+}
+interface T$$ {
+    dirty: number[];
+    ctx: null | any;
+    bound: any;
+    update: () => void;
+    callbacks: any;
+    after_update: any[];
+    props: Record<string, 0 | string>;
+    fragment: null | false | Fragment;
+    not_equal: any;
+    before_update: any[];
+    context: Map<any, any>;
+    on_mount: any[];
+    on_destroy: any[];
+    skip_bound: boolean;
+    on_disconnect: any[];
+    root: Element | ShadowRoot;
+}
+/**
+ * Base class for Svelte components. Used when dev=false.
+ */
+declare class SvelteComponent {
+    $$: T$$;
+    $$set?: ($$props: any) => void;
+    $destroy(): void;
+    $on(type: any, callback: any): () => void;
+    $set($$props: any): void;
+}
+
+declare type Props = Record<string, any>;
+interface ComponentConstructorOptions<Props extends Record<string, any> = Record<string, any>> {
+    target: Element | ShadowRoot;
+    anchor?: Element;
+    props?: Props;
+    context?: Map<any, any>;
+    hydrate?: boolean;
+    intro?: boolean;
+    $$inline?: boolean;
+}
+interface SvelteComponentDev$1 {
+    $set(props?: Props): void;
+    $on(event: string, callback: (event: any) => void): () => void;
+    $destroy(): void;
+    [accessor: string]: any;
+}
+/**
+ * Base class for Svelte components with some minor dev-enhancements. Used when dev=true.
+ */
+declare class SvelteComponentDev$1 extends SvelteComponent {
+    /**
+     * @private
+     * For type checking capabilities only.
+     * Does not exist at runtime.
+     * ### DO NOT USE!
+     */
+    $$prop_def: Props;
+    /**
+     * @private
+     * For type checking capabilities only.
+     * Does not exist at runtime.
+     * ### DO NOT USE!
+     */
+    $$events_def: any;
+    /**
+     * @private
+     * For type checking capabilities only.
+     * Does not exist at runtime.
+     * ### DO NOT USE!
+     */
+    $$slot_def: any;
+    constructor(options: ComponentConstructorOptions);
+    $capture_state(): void;
+    $inject_state(): void;
+}
+interface SvelteComponentTyped<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any> {
+    $set(props?: Partial<Props>): void;
+    $on<K extends Extract<keyof Events, string>>(type: K, callback: (e: Events[K]) => void): () => void;
+    $destroy(): void;
+    [accessor: string]: any;
+}
+/**
+ * Base class to create strongly typed Svelte components.
+ * This only exists for typing purposes and should be used in `.d.ts` files.
+ *
+ * ### Example:
+ *
+ * You have component library on npm called `component-library`, from which
+ * you export a component called `MyComponent`. For Svelte+TypeScript users,
+ * you want to provide typings. Therefore you create a `index.d.ts`:
+ * ```ts
+ * import { SvelteComponentTyped } from "svelte";
+ * export class MyComponent extends SvelteComponentTyped<{foo: string}> {}
+ * ```
+ * Typing this makes it possible for IDEs like VS Code with the Svelte extension
+ * to provide intellisense and to use the component like this in a Svelte file
+ * with TypeScript:
+ * ```svelte
+ * <script lang="ts">
+ * 	import { MyComponent } from "component-library";
+ * </script>
+ * <MyComponent foo={'bar'} />
+ * ```
+ *
+ * #### Why not make this part of `SvelteComponent(Dev)`?
+ * Because
+ * ```ts
+ * class ASubclassOfSvelteComponent extends SvelteComponent<{foo: string}> {}
+ * const component: typeof SvelteComponent = ASubclassOfSvelteComponent;
+ * ```
+ * will throw a type error, so we need to separate the more strictly typed class.
+ */
+declare class SvelteComponentTyped<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any> extends SvelteComponentDev$1 {
+    /**
+     * @private
+     * For type checking capabilities only.
+     * Does not exist at runtime.
+     * ### DO NOT USE!
+     */
+    $$prop_def: Props;
+    /**
+     * @private
+     * For type checking capabilities only.
+     * Does not exist at runtime.
+     * ### DO NOT USE!
+     */
+    $$events_def: Events;
+    /**
+     * @private
+     * For type checking capabilities only.
+     * Does not exist at runtime.
+     * ### DO NOT USE!
+     */
+    $$slot_def: Slots;
+    constructor(options: ComponentConstructorOptions<Props>);
+}
+/**
+ * Convenience type to get the props the given component expects. Example:
+ * ```html
+ * <script lang="ts">
+ * 	import type { ComponentProps } from 'svelte';
+ * 	import Component from './Component.svelte';
+ *
+ * 	const props: ComponentProps<Component> = { foo: 'bar' }; // Errors if these aren't the correct props
+ * </script>
+ * ```
+ */
+declare type ComponentProps<Component extends SvelteComponent> = Component extends SvelteComponentTyped<infer Props> ? Props : never;
+
+declare type SvelteConstructor<T> = new (...args: any[]) => T;
+declare type SvelteComponentOptions<T extends SvelteComponentDev$1> = Omit<ComponentConstructorOptions<ComponentProps<T>>, 'hydrate' | 'target' | '$$inline'>;
+interface MountOptions<T extends SvelteComponentDev$1> extends SvelteComponentOptions<T> {
+    log?: boolean;
+}
+interface MountReturn<T extends SvelteComponentDev$1> {
+    component: T;
+}
+/**
+ * Mounts a Svelte component inside the Cypress browser
+ *
+ * @param {SvelteConstructor<T>} Component Svelte component being mounted
+ * @param {MountReturn<T extends SvelteComponent>} options options to customize the component being mounted
+ * @returns Cypress.Chainable<MountReturn>
+ *
+ * @example
+ * import Counter from './Counter.svelte'
+ * import { mount } from 'cypress/svelte'
+ *
+ * it('should render', () => {
+ *   mount(Counter, { props: { count: 42 } })
+ *   cy.get('button').contains(42)
+ * })
+ *
+ * @see {@link https://on.cypress.io/mounting-svelte} for more details.
+ */
+declare function mount<T extends SvelteComponentDev$1>(Component: SvelteConstructor<T>, options?: MountOptions<T>): Cypress.Chainable<MountReturn<T>>;
+
+export { MountOptions, MountReturn, mount };

package/svelte/svelte/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@cypress/svelte",
+  "version": "0.0.0-development",
+  "description": "Browser-based Component Testing for Svelte.js with Cypress.io 🧡",
+  "main": "dist/cypress-svelte.cjs.js",
+  "scripts": {
+    "prebuild": "rimraf dist",
+    "build": "rollup -c rollup.config.mjs",
+    "postbuild": "node ../../scripts/sync-exported-npm-with-cli.js",
+    "lint": "eslint --ext .js,.jsx,.ts,.tsx,.json, .",
+    "check-ts": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "@cypress/mount-utils": "0.0.0-development",
+    "svelte": "^3.49.0",
+    "typescript": "^4.7.4"
+  },
+  "peerDependencies": {
+    "cypress": ">=10.6.0",
+    "svelte": ">=3.0.0"
+  },
+  "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/blob/develop/npm/svelte/#readme",
+  "bugs": "https://github.com/cypress-io/cypress/issues/new?assignees=&labels=npm%3A%20%40cypress%2Fsvelte&template=1-bug-report.md&title=",
+  "keywords": [
+    "cypress",
+    "svelte",
+    "testing",
+    "component testing"
+  ],
+  "module": "dist/cypress-svelte.esm-bundler.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "nx": {
+    "targets": {
+      "build": {
+        "outputs": [
+          "{workspaceRoot}/cli/svelte",
+          "{projectRoot}/dist"
+        ]
+      }
+    },
+    "implicitDependencies": [
+      "!cypress"
+    ]
+  }
+}

package/types/cypress.d.ts

@@ -3318,7 +3318,7 @@ declare namespace Cypress {
 
   interface CypressComponentDependency {
     /**
-     * Unique idenitifer.
+     * Unique identifier.
      * @example 'reactscripts'
      */
     type: string
@@ -3453,7 +3453,7 @@ declare namespace Cypress {
     componentIndexHtml?: () => string
 
     /**
-     * Used for the Create From Comopnent feature.
+     * Used for the Create From Component feature.
      * This is currently not supported for third party frameworks.
      */
     specPattern?: '**/*.cy.ts'

package/vue/package.json

@@ -4,7 +4,6 @@
   "description": "Browser-based Component Testing for Vue.js with Cypress.io ✌️🌲",
   "main": "dist/cypress-vue.cjs.js",
   "scripts": {
-    "build-prod": "yarn build",
     "cy:open": "node ../../scripts/cypress.js open --component --project ${PWD}",
     "cy:run": "node ../../scripts/cypress.js run --component --project ${PWD}",
     "build": "rimraf dist && rollup -c rollup.config.mjs",
@@ -80,5 +79,18 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "nx": {
+    "targets": {
+      "build": {
+        "dependsOn": [
+          "!@cypress/react18:build"
+        ],
+        "outputs": [
+          "{workspaceRoot}/cli/vue",
+          "{projectRoot}/dist"
+        ]
+      }
+    }
   }
 }

package/vue/vue/README.md

@@ -0,0 +1,14 @@
+# @cypress/vue
+
+Mount Vue 3 components in the open source [Cypress.io](https://www.cypress.io/) test runner
+
+> **Note:** This package is bundled with the `cypress` package and should not need to be installed separately. See the [Vue Component Testing Docs](https://docs.cypress.io/guides/component-testing/vue/overview) for mounting Vue components. Installing and importing `mount` from `@cypress/vue` should only be done for advanced use-cases.
+## Development
+
+Run `yarn build` to compile and sync packages to the `cypress` cli package.
+
+Run `yarn cy:open` to open Cypress component testing against real-world examples.
+
+Run `yarn test` to execute headless Cypress tests.
+
+## [Changelog](./CHANGELOG.md)