cypress 10.11.0 → 11.0.0

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

@@ -6,6 +6,11 @@
  */
 
 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) {
@@ -13,122 +18,19 @@ const getContainerEl = () => {
     }
     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.`);
 };
-/**
- * Remove any style or extra link elements from the iframe placeholder
- * left from any previous test
- *
- */
-function cleanupStyles() {
-    const styles = document.body.querySelectorAll('[data-cy=injected-style-tag]');
-    styles.forEach((styleElement) => {
-        if (styleElement.parentElement) {
-            styleElement.parentElement.removeChild(styleElement);
-        }
-    });
-    const links = document.body.querySelectorAll('[data-cy=injected-stylesheet]');
-    links.forEach((link) => {
-        if (link.parentElement) {
-            link.parentElement.removeChild(link);
+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);
         }
-    });
-}
-/**
- * Insert links to external style resources.
- */
-function insertStylesheets(stylesheets, document, el) {
-    stylesheets.forEach((href) => {
-        const link = document.createElement('link');
-        link.type = 'text/css';
-        link.rel = 'stylesheet';
-        link.href = href;
-        link.dataset.cy = 'injected-stylesheet';
-        document.body.insertBefore(link, el);
-    });
-}
-/**
- * Inserts a single stylesheet element
- */
-function insertStyles(styles, document, el) {
-    styles.forEach((style) => {
-        const styleElement = document.createElement('style');
-        styleElement.dataset.cy = 'injected-style-tag';
-        styleElement.appendChild(document.createTextNode(style));
-        document.body.insertBefore(styleElement, el);
-    });
-}
-function insertSingleCssFile(cssFilename, document, el, log) {
-    return cy.readFile(cssFilename, { log }).then((css) => {
-        const style = document.createElement('style');
-        style.appendChild(document.createTextNode(css));
-        document.body.insertBefore(style, el);
-    });
-}
-/**
- * Reads the given CSS file from local file system
- * and adds the loaded style text as an element.
- */
-function insertLocalCssFiles(cssFilenames, document, el, log) {
-    return Cypress.Promise.mapSeries(cssFilenames, (cssFilename) => {
-        return insertSingleCssFile(cssFilename, document, el, log);
-    });
+    }
 }
 /**
- * Injects custom style text or CSS file or 3rd party style resources
- * into the given document.
+ * 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
  */
-const injectStylesBeforeElement = (options, document, el) => {
-    if (!el)
-        return;
-    // first insert all stylesheets as Link elements
-    let stylesheets = [];
-    if (typeof options.stylesheet === 'string') {
-        stylesheets.push(options.stylesheet);
-    }
-    else if (Array.isArray(options.stylesheet)) {
-        stylesheets = stylesheets.concat(options.stylesheet);
-    }
-    if (typeof options.stylesheets === 'string') {
-        options.stylesheets = [options.stylesheets];
-    }
-    if (options.stylesheets) {
-        stylesheets = stylesheets.concat(options.stylesheets);
-    }
-    insertStylesheets(stylesheets, document, el);
-    // insert any styles as <style>...</style> elements
-    let styles = [];
-    if (typeof options.style === 'string') {
-        styles.push(options.style);
-    }
-    else if (Array.isArray(options.style)) {
-        styles = styles.concat(options.style);
-    }
-    if (typeof options.styles === 'string') {
-        styles.push(options.styles);
-    }
-    else if (Array.isArray(options.styles)) {
-        styles = styles.concat(options.styles);
-    }
-    insertStyles(styles, document, el);
-    // now load any css files by path and add their content
-    // as <style>...</style> elements
-    let cssFiles = [];
-    if (typeof options.cssFile === 'string') {
-        cssFiles.push(options.cssFile);
-    }
-    else if (Array.isArray(options.cssFile)) {
-        cssFiles = cssFiles.concat(options.cssFile);
-    }
-    if (typeof options.cssFiles === 'string') {
-        cssFiles.push(options.cssFiles);
-    }
-    else if (Array.isArray(options.cssFiles)) {
-        cssFiles = cssFiles.concat(options.cssFiles);
-    }
-    return insertLocalCssFiles(cssFiles, document, el, options.log);
-};
 function setupHooks(optionalCallback) {
-    // Consumed by the framework "mount" libs. A user might register their own mount in the scaffolded 'commands.js'
-    // file that is imported by e2e and component support files by default. We don't want CT side effects to run when e2e
+    // 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') {
@@ -143,7 +45,6 @@ function setupHooks(optionalCallback) {
     // @ts-ignore
     Cypress.on('test:before:run', () => {
         optionalCallback === null || optionalCallback === void 0 ? void 0 : optionalCallback();
-        cleanupStyles();
     });
 }
 
@@ -175,11 +76,15 @@ const getComponentDisplayName = (Component) => {
  *   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();
-        injectStylesBeforeElement(options, document, target);
         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
@@ -190,7 +95,7 @@ function mount(Component, options = {}) {
                 Cypress.log({
                     name: 'mount',
                     message: [mountMessage],
-                }).snapshot('mounted').end();
+                });
             }
         })
             .wrap({ component: componentInstance }, { log: false });

package/svelte/dist/index.d.ts

@@ -1 +1,201 @@
-export * from './mount';
+/// <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/types/cypress.d.ts

@@ -775,20 +775,20 @@ declare namespace Cypress {
     clear(options?: Partial<ClearOptions>): Chainable<Subject>
 
     /**
-     * Clear a specific browser cookie.
+     * Clear a specific browser cookie for the current superdomain or for the domain specified.
      * Cypress automatically clears all cookies before each test to prevent state from being shared across tests. You shouldn't need to use this command unless you're using it to clear a specific cookie inside a single test.
      *
      * @see https://on.cypress.io/clearcookie
      */
-    clearCookie(name: string, options?: Partial<Loggable & Timeoutable>): Chainable<null>
+    clearCookie(name: string, options?: CookieOptions): Chainable<null>
 
     /**
-     * Clear all browser cookies.
-     * Cypress automatically clears all cookies before each test to prevent state from being shared across tests. You shouldn't need to use this command unless you're using it to clear a specific cookie inside a single test.
+     * Clear all browser cookies for the current superdomain or for the domain specified.
+     * Cypress automatically clears all cookies before each test to prevent state from being shared across tests. You shouldn't need to use this command unless you're using it to clear all cookies or specific cookies inside a single test.
      *
      * @see https://on.cypress.io/clearcookies
      */
-    clearCookies(options?: Partial<Loggable & Timeoutable>): Chainable<null>
+    clearCookies(options?: CookieOptions): Chainable<null>
 
     /**
      * Clear data in local storage.
@@ -1089,7 +1089,7 @@ declare namespace Cypress {
       *
       * @see https://on.cypress.io/session
       */
-    session(id: string | object, setup?: () => void, options?: SessionOptions): Chainable<null>
+    session(id: string | object, setup: () => void, options?: SessionOptions): Chainable<null>
 
     /**
      * Get the window.document of the page that is currently active.
@@ -1248,18 +1248,18 @@ declare namespace Cypress {
     get<S = any>(alias: string, options?: Partial<Loggable & Timeoutable & Withinable & Shadow>): Chainable<S>
 
     /**
-     * Get a browser cookie by its name.
+     * Get a browser cookie by its name for the current superdomain or for the domain specified.
      *
      * @see https://on.cypress.io/getcookie
      */
-    getCookie(name: string, options?: Partial<Loggable & Timeoutable>): Chainable<Cookie | null>
+    getCookie(name: string, options?: CookieOptions): Chainable<Cookie | null>
 
     /**
-     * Get all of the browser cookies.
+     * Get all of the browser cookies for the current superdomain or for the domain specified.
      *
      * @see https://on.cypress.io/getcookies
      */
-    getCookies(options?: Partial<Loggable & Timeoutable>): Chainable<Cookie[]>
+    getCookies(options?: CookieOptions): Chainable<Cookie[]>
 
     /**
      * Navigate back or forward to the previous or next URL in the browser's history.
@@ -2633,6 +2633,14 @@ declare namespace Cypress {
     cmdKey: boolean
   }
 
+  interface CookieOptions extends Partial<Loggable & Timeoutable> {
+    /**
+     * Domain to set cookies on or get cookies from
+     * @default superdomain of the current app under test
+     */
+    domain?: string
+  }
+
   interface PEMCert {
     /**
      * Path to the certificate file, relative to project root.

package/vue/CHANGELOG.md

@@ -1,3 +1,37 @@
+# [@cypress/vue-v5.0.1](https://github.com/cypress-io/cypress/compare/@cypress/vue-v5.0.0...@cypress/vue-v5.0.1) (2022-11-08)
+
+
+### Bug Fixes
+
+* make component derived info not throw ([#24571](https://github.com/cypress-io/cypress/issues/24571)) ([838dd4f](https://github.com/cypress-io/cypress/commit/838dd4fa2e0ec56633d0af2faf10a47d190b5594))
+
+# [@cypress/vue-v5.0.0](https://github.com/cypress-io/cypress/compare/@cypress/vue-v4.2.2...@cypress/vue-v5.0.0) (2022-11-07)
+
+
+### Bug Fixes
+
+* remove dependence on @cypress/<dep> types ([#24415](https://github.com/cypress-io/cypress/issues/24415)) ([58e0ab9](https://github.com/cypress-io/cypress/commit/58e0ab91604618ea6f75932622f7e66e419270e6))
+* remove last mounted component upon subsequent mount calls ([#24470](https://github.com/cypress-io/cypress/issues/24470)) ([f39eb1c](https://github.com/cypress-io/cypress/commit/f39eb1c19e0923bda7ae263168fc6448da942d54))
+* remove some CT functions and props ([#24419](https://github.com/cypress-io/cypress/issues/24419)) ([294985f](https://github.com/cypress-io/cypress/commit/294985f8b3e0fa00ed66d25f88c8814603766074))
+
+
+### Features
+
+* include component and wrapper in return type for vue mount adapter ([#24479](https://github.com/cypress-io/cypress/issues/24479)) ([33875d7](https://github.com/cypress-io/cypress/commit/33875d75505416b1f65ca7c6d5dedc46f3289f1b))
+
+
+### BREAKING CHANGES
+
+* remove last mounted component upon subsequent mount calls of mount
+* Vue mount returns wrapper and component rather than wrapper only
+
+# [@cypress/vue-v4.2.2](https://github.com/cypress-io/cypress/compare/@cypress/vue-v4.2.1...@cypress/vue-v4.2.2) (2022-11-01)
+
+
+### Bug Fixes
+
+* Hovering over mount in command log does not show component in AUT ([#24346](https://github.com/cypress-io/cypress/issues/24346)) ([355d210](https://github.com/cypress-io/cypress/commit/355d2101d38ea4d1e93b9c571cf77babab2bbbfc))
+
 # [@cypress/vue-v4.2.1](https://github.com/cypress-io/cypress/compare/@cypress/vue-v4.2.0...@cypress/vue-v4.2.1) (2022-10-13)
 
 

package/vue/README.md

@@ -34,23 +34,19 @@ describe('HelloWorld component', () => {
 
 Look at the examples in [cypress/component](cypress/component) folder. Here is the list of examples showing various testing scenarios.
 
-### Options
+### Styles
 
-You can pass additional styles, css files and external stylesheets to load, see [docs/styles.md](./docs/styles.md) for full list.
+One option for styling your components is to import stylesheets into your test file. See [docs/styles.md](./docs/styles.md) for full list of options.
 
 ```js
 import Todo from './Todo.vue'
+import '../styles/main.css'
 const todo = {
   id: '123',
   title: 'Write more tests',
 }
 
-mount(Todo, {
-  propsData: { todo },
-  stylesheets: [
-    'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css',
-  ],
-})
+mount(Todo, { props: { todo } })
 ```
 
 ### Global Vue Options