From dcbbe4a2841cf10d1efd32f60d253693dcef1fbf Mon Sep 17 00:00:00 2001 From: Matt Schile Date: Tue, 3 Dec 2024 10:44:17 -0700 Subject: [PATCH] misc: remove component testing API stubs that were removed in Cypress 11 (#30696) --- cli/CHANGELOG.md | 4 ++ npm/mount-utils/src/index.ts | 44 ------------------- .../component/basic/hello-world.cy.jsx | 6 --- .../cypress/component/basic/unmount/README.md | 12 ++--- .../component/basic/unmount/comp.cy.jsx | 16 +++---- .../cypress/component/basic/unmount/comp.jsx | 4 +- .../component/removedMountingOptions.cy.jsx | 30 ------------- npm/react/src/createMount.ts | 13 ------ npm/react/src/index.ts | 2 - npm/react/src/mount.ts | 10 ----- npm/react/src/mountHook.ts | 9 ---- npm/react/src/types.ts | 7 --- npm/svelte/src/mount.ts | 3 -- .../component/removedMountingOptions.cy.js | 22 ---------- npm/vue/src/index.ts | 33 +------------- packages/driver/src/cypress/error_messages.ts | 36 --------------- .../project-fixtures/svelte/src/mount.cy.js | 12 ----- 17 files changed, 20 insertions(+), 243 deletions(-) delete mode 100644 npm/react/cypress/component/removedMountingOptions.cy.jsx delete mode 100644 npm/react/src/mountHook.ts delete mode 100644 npm/vue/cypress/component/removedMountingOptions.cy.js diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md index 1910e5162fe6..c7a63b2825af 100644 --- a/cli/CHANGELOG.md +++ b/cli/CHANGELOG.md @@ -51,6 +51,10 @@ in this [GitHub issue](https://github.com/cypress-io/cypress/issues/30447). Addr - Fixed a visibility issue for elements with `textContent` but without a width or height. Fixed in [#29688](https://github.com/cypress-io/cypress/pull/29688). Fixes [#29687](https://github.com/cypress-io/cypress/issues/29687). - Elements whose parent elements has `overflow: clip` and no height/width will now correctly show as hidden. Fixed in [#29778](https://github.com/cypress-io/cypress/pull/29778). Fixes [#23852](https://github.com/cypress-io/cypress/issues/23852). +**Misc:** + + - Removed some component testing API stubs that were removed in [Cypress v11.0.0](https://docs.cypress.io/app/references/migration-guide#Component-Testing-Updates). Addressed in [#30696](https://github.com/cypress-io/cypress/pull/30696). Addresses [#30623](https://github.com/cypress-io/cypress/issues/30623). + **Dependency Updates:** - Upgraded `electron` from `27.3.10` to `32.2.0`. Addresses [#29547](https://github.com/cypress-io/cypress/issues/29547). diff --git a/npm/mount-utils/src/index.ts b/npm/mount-utils/src/index.ts index 4d00f3507161..13976996e8f8 100644 --- a/npm/mount-utils/src/index.ts +++ b/npm/mount-utils/src/index.ts @@ -15,14 +15,6 @@ export const getContainerEl = (): HTMLElement => { 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: Record) { - for (const key of ['cssFile', 'cssFiles', 'style', 'styles', 'stylesheet', 'stylesheets'] as const) { - 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 @@ -61,39 +53,3 @@ export function setupHooks (optionalCallback?: Function) { 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') -} - -/** - * 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 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 const injectStylesBeforeElement = ( - options: Partial, - document: Document, - el: HTMLElement | null, -) => { - Cypress.utils.throwErrByPath('mount.inject_styles_before_element') -} diff --git a/npm/react/cypress/component/basic/hello-world.cy.jsx b/npm/react/cypress/component/basic/hello-world.cy.jsx index 7593fd71e05e..6bc8893a70eb 100644 --- a/npm/react/cypress/component/basic/hello-world.cy.jsx +++ b/npm/react/cypress/component/basic/hello-world.cy.jsx @@ -9,10 +9,4 @@ describe('HelloWorld component', () => { mount() cy.contains('Hello World!') }) - - it('errors if passing alias', () => { - expect(() => mount(, { alias: 'foo' })).to.throw( - `passing \`alias\` to mounting options is no longer supported. Use mount(...).as('foo') instead.`, - ) - }) }) diff --git a/npm/react/cypress/component/basic/unmount/README.md b/npm/react/cypress/component/basic/unmount/README.md index 0b5361950e6f..a982c8864b63 100644 --- a/npm/react/cypress/component/basic/unmount/README.md +++ b/npm/react/cypress/component/basic/unmount/README.md @@ -1,21 +1,21 @@ # unmount -If you need to test what the component is doing when it is being unmounted, use `unmount` function. +If you need to test what the component is doing when it is being unmounted simply `mount` a blank component. ```js -import { mount, unmount } from '@cypress/react' +import { mount } from '@cypress/react' it('calls unmount prop', () => { // async command mount(...) - // cy commands - // now let's unmount (async command) - unmount() + // cy commands + // mount a blank component to unmount the previous component + mount(
) // confirm the component has been unmounted // and performed everything needed in its // componentWillUnmount method }) ``` -See [unmount-spec.js](unmount-spec.js) and [comp-spec.js](comp-spec.js) +See [comp-spec.js](comp-spec.js) diff --git a/npm/react/cypress/component/basic/unmount/comp.cy.jsx b/npm/react/cypress/component/basic/unmount/comp.cy.jsx index c6f53a307379..ea665eb674e7 100644 --- a/npm/react/cypress/component/basic/unmount/comp.cy.jsx +++ b/npm/react/cypress/component/basic/unmount/comp.cy.jsx @@ -1,7 +1,7 @@ /// import { Comp } from './comp.jsx' import React from 'react' -import { mount, unmount } from '@cypress/react' +import { mount } from '@cypress/react' it('calls callbacks on mount and unmount', () => { const onMount = cy.stub() @@ -15,14 +15,10 @@ it('calls callbacks on mount and unmount', () => { cy.contains('Component with').should('be.visible') - let stub = cy.stub() + // mount something else to trigger unmount + mount(
) - try { - unmount() - } catch (e) { - expect(e.message).to.eq('`unmount` is no longer supported.') - stub() - } - - expect(stub).to.have.been.calledOnce + cy.then(() => { + expect(onUnmount).to.have.been.calledOnce + }) }) diff --git a/npm/react/cypress/component/basic/unmount/comp.jsx b/npm/react/cypress/component/basic/unmount/comp.jsx index 0cdb87524b58..ed5104b042fa 100644 --- a/npm/react/cypress/component/basic/unmount/comp.jsx +++ b/npm/react/cypress/component/basic/unmount/comp.jsx @@ -1,8 +1,10 @@ import React, { useEffect } from 'react' -export const Comp = ({ onMount }) => { +export const Comp = ({ onMount, onUnmount }) => { useEffect(() => { onMount() + + return onUnmount }, []) return
Component with mount and unmount calls
diff --git a/npm/react/cypress/component/removedMountingOptions.cy.jsx b/npm/react/cypress/component/removedMountingOptions.cy.jsx deleted file mode 100644 index 7fad6402b035..000000000000 --- a/npm/react/cypress/component/removedMountingOptions.cy.jsx +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react' -import { mount } from '@cypress/react' - -describe('removed mounting options', () => { - function Foo () { - return (
foo
) - } - - it('throws error when receiving removed mounting options', () => { - for (const key of ['cssFile', 'cssFiles', 'style', 'styles', 'stylesheet', 'stylesheets']) { - expect(() => mount(, { - [key]: `body { background: red; }`, - })).to.throw( - `The \`${key}\` mounting option is no longer supported.`, - ) - } - }) - - it('throws with custom command', () => { - Cypress.on('fail', (e) => { - expect(e.message).to.contain('The `styles` mounting option is no longer supported.') - - return false - }) - - cy.mount(, { - styles: 'body { background: red; }', - }) - }) -}) diff --git a/npm/react/src/createMount.ts b/npm/react/src/createMount.ts index 6e87da8e68e7..ca708731a0ae 100644 --- a/npm/react/src/createMount.ts +++ b/npm/react/src/createMount.ts @@ -4,7 +4,6 @@ import { getContainerEl, ROOT_SELECTOR, setupHooks, - checkForRemovedStyleOptions, } from '@cypress/mount-utils' import type { InternalMountOptions, MountOptions, MountReturn, UnmountArgs } from './types' @@ -30,14 +29,6 @@ export const makeMountFn = ( throw Error('internalMountOptions must be provided with `render` and `reactDom` parameters') } - // @ts-expect-error - this is removed but we want to check if a user is passing it, and error if they are. - if (options.alias) { - // @ts-expect-error - Cypress.utils.throwErrByPath('mount.alias', options.alias) - } - - checkForRemovedStyleOptions(options) - mountCleanup = internalMountOptions.cleanup return cy @@ -81,10 +72,6 @@ export const makeMountFn = ( return cy.wrap({ component: userComponent, rerender: (newComponent) => makeMountFn('rerender', newComponent, options, key, internalMountOptions), - unmount: () => { - // @ts-expect-error - undocumented API - Cypress.utils.throwErrByPath('mount.unmount') - }, }, { log: false }) }) // by waiting, we delaying test execution for the next tick of event loop diff --git a/npm/react/src/index.ts b/npm/react/src/index.ts index 6bc437fa7577..3bababa408e3 100644 --- a/npm/react/src/index.ts +++ b/npm/react/src/index.ts @@ -2,6 +2,4 @@ export * from './createMount' export * from './mount' -export * from './mountHook' - export * from './types' diff --git a/npm/react/src/mount.ts b/npm/react/src/mount.ts index f1904fac7663..735cdefb1264 100644 --- a/npm/react/src/mount.ts +++ b/npm/react/src/mount.ts @@ -8,7 +8,6 @@ import { import type { MountOptions, InternalMountOptions, - UnmountArgs, } from './index' let root: ReactDOM.Root | null @@ -69,16 +68,7 @@ export function mount (jsx: React.ReactNode, options: MountOptions = {}, rerende function internalUnmount (options = { log: true }) { return makeUnmountFn(options) } -/** - * Removed as of Cypress 11.0.0. - * @see https://on.cypress.io/migration-11-0-0-component-testing-updates - */ -export function unmount (options: UnmountArgs = { log: true }) { - // @ts-expect-error - undocumented API - Cypress.utils.throwErrByPath('mount.unmount') -} -// Re-export this to help with migrating away from `unmount` export { getContainerEl, } diff --git a/npm/react/src/mountHook.ts b/npm/react/src/mountHook.ts deleted file mode 100644 index 9f04544d6b0f..000000000000 --- a/npm/react/src/mountHook.ts +++ /dev/null @@ -1,9 +0,0 @@ -/** - * Mounts a React hook function in a test component for testing. - * Removed as of Cypress 11.0.0. - * @see https://on.cypress.io/migration-11-0-0-component-testing-updates - */ -export const mountHook = (hookFn: (...args: any[]) => T) => { - // @ts-expect-error - internal API - Cypress.utils.throwErrByPath('mount.mount_hook') -} diff --git a/npm/react/src/types.ts b/npm/react/src/types.ts index e9da14f24548..a632ad0607d2 100644 --- a/npm/react/src/types.ts +++ b/npm/react/src/types.ts @@ -44,11 +44,4 @@ export interface MountReturn { * or have asynchronous updates (`useEffect`, `useLayoutEffect`). */ rerender: (component: React.ReactNode) => globalThis.Cypress.Chainable - /** - * Removes the mounted component. - * - * Removed as of Cypress 11.0.0. - * @see https://on.cypress.io/migration-11-0-0-component-testing-updates - */ - unmount: (payload: UnmountArgs) => void // globalThis.Cypress.Chainable> } diff --git a/npm/svelte/src/mount.ts b/npm/svelte/src/mount.ts index 97c073b266d7..a1efd4f04799 100644 --- a/npm/svelte/src/mount.ts +++ b/npm/svelte/src/mount.ts @@ -1,7 +1,6 @@ import { getContainerEl, setupHooks, - checkForRemovedStyleOptions, } from '@cypress/mount-utils' import type { ComponentConstructorOptions, ComponentProps, SvelteComponent } from 'svelte' @@ -61,8 +60,6 @@ export function mount ( Component: SvelteConstructor, options: MountOptions = {}, ): Cypress.Chainable> { - checkForRemovedStyleOptions(options) - return cy.then(() => { // Remove last mounted component if cy.mount is called more than once in a test cleanup() diff --git a/npm/vue/cypress/component/removedMountingOptions.cy.js b/npm/vue/cypress/component/removedMountingOptions.cy.js deleted file mode 100644 index 3e093ba042fd..000000000000 --- a/npm/vue/cypress/component/removedMountingOptions.cy.js +++ /dev/null @@ -1,22 +0,0 @@ -import { mount } from '@cypress/vue' -import { h, defineComponent } from 'vue' - -describe('removed mounting options', () => { - it('throws error when receiving removed mounting options', () => { - const comp = defineComponent({ - setup () { - return () => h('div', 'hello world') - }, - }) - - for (const key of ['cssFile', 'cssFiles', 'style', 'styles', 'stylesheet', 'stylesheets']) { - expect(() => { - return mount(comp, { - [key]: `body { background: red; }`, - }) - }).to.throw( - `The \`${key}\` mounting option is no longer supported.`, - ) - } - }) -}) diff --git a/npm/vue/src/index.ts b/npm/vue/src/index.ts index 92d60b73bc29..b3826b409b69 100644 --- a/npm/vue/src/index.ts +++ b/npm/vue/src/index.ts @@ -23,7 +23,6 @@ import type { MountingOptions as VTUMountingOptions, VueWrapper } from '@vue/tes import { getContainerEl, setupHooks, - checkForRemovedStyleOptions, } from '@cypress/mount-utils' import * as _VueTestUtils from '@vue/test-utils' @@ -393,7 +392,6 @@ export function mount< * }) */ export function mount (componentOptions: any, options: any = {}) { - checkForRemovedStyleOptions(options) // Remove last mounted component if cy.mount is called more than once in a test cleanup() @@ -441,17 +439,7 @@ export function mount (componentOptions: any, options: any = {}) { component: wrapper.vm, } - return new Proxy(Object.create(returnVal), { - get (obj, prop) { - // throw an error if it looks like the caller is trying to call a method on the VueWrapper that was originally returned - if (Reflect.get(wrapper, prop)) { - // @ts-expect-error - internal API - Cypress.utils.throwErrByPath('mount.vue_yielded_value') - } - - return Reflect.get(obj, prop) - }, - }) + return returnVal }) }) } @@ -480,25 +468,6 @@ function getComponentDisplayName (componentOptions: any): string { return DEFAULT_COMP_NAME } -/** - * Helper function for mounting a component quickly in test hooks. - * @example - * import {mountCallback} from '@cypress/vue' - * beforeEach(mountVue(component, options)) - * - * Removed as of Cypress 11.0.0. - * @see https://on.cypress.io/migration-11-0-0-component-testing-updates - */ -export function mountCallback ( - component: any, - options: any = {}, -) { - return () => { - // @ts-expect-error - undocumented API - Cypress.utils.throwErrByPath('mount.mount_callback') - } -} - // Side effects from "import { mount } from '@cypress/'" 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: diff --git a/packages/driver/src/cypress/error_messages.ts b/packages/driver/src/cypress/error_messages.ts index d77a28deaf29..a3a5972ad4b7 100644 --- a/packages/driver/src/cypress/error_messages.ts +++ b/packages/driver/src/cypress/error_messages.ts @@ -1012,42 +1012,6 @@ export default { ].join('\n'), docsUrl: 'https://on.cypress.io/mount', }, - removed_style_mounting_options (key: string) { - return { - message: `The \`${key}\` mounting option is no longer supported.`, - docsUrl: 'https://on.cypress.io/migration-11-0-0-component-testing-updates', - } - }, - cleanup_styles: { - message: `\`cleanupStyles\` is no longer supported.`, - docsUrl: 'https://on.cypress.io/migration-11-0-0-component-testing-updates', - }, - inject_styles_before_element: { - message: `\`injectStylesBeforeElement\` is no longer supported.`, - docsUrl: 'https://on.cypress.io/migration-11-0-0-component-testing-updates', - }, - mount_hook: { - message: `\`mountHook\` is no longer supported.`, - docsUrl: 'https://on.cypress.io/migration-11-0-0-component-testing-updates', - }, - unmount: { - message: `\`unmount\` is no longer supported.`, - docsUrl: 'https://on.cypress.io/migration-11-0-0-component-testing-updates', - }, - mount_callback: { - message: `\`mountCallback\` is no longer supported.`, - docsUrl: 'https://on.cypress.io/migration-11-0-0-component-testing-updates', - }, - vue_yielded_value: { - message: 'As of Cypress 11, mount now yields an object with VueWrapper and the component as properties. Destructure using `{ wrapper, component }` to access the VueWrapper and component.', - docsUrl: 'https://on.cypress.io/migration-11-0-0-component-testing-updates', - }, - alias (alias: string) { - return { - message: `passing \`alias\` to mounting options is no longer supported. Use mount(...).as('${alias}') instead.`, - docsUrl: 'https://on.cypress.io/migration-11-0-0-component-testing-updates', - } - }, }, navigation: { diff --git a/system-tests/project-fixtures/svelte/src/mount.cy.js b/system-tests/project-fixtures/svelte/src/mount.cy.js index 6aa6564c6823..da5bb9b89cad 100644 --- a/system-tests/project-fixtures/svelte/src/mount.cy.js +++ b/system-tests/project-fixtures/svelte/src/mount.cy.js @@ -85,18 +85,6 @@ describe('Svelte mount', () => { }) }) - it('throws error when receiving removed mounting option', () => { - Cypress.on('fail', (e) => { - expect(e.message).to.contain('The `styles` mounting option is no longer supported.') - - return false - }) - - cy.mount(Counter, { - styles: `body { background: red; }`, - }) - }) - context('teardown', () => { beforeEach(() => { // component-index.html has anchor element within [data-cy-root] so base # of elements is 1