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

fix: remove some CT functions and props #24419

Merged
merged 33 commits into from
Nov 4, 2022

Conversation

astone123
Copy link
Contributor

@astone123 astone123 commented Oct 27, 2022

User facing changelog

  • Styles, CSS and Stylesheet injections into mount have been removed
  • cypress/react mountHook function no longer exists
  • cypress/react unmount function is no longer exported
  • Mounted React components are no longer aliased by default
  • cypress/vue and cypress/vue2 no longer export mountCallback. Use mount directly
  • cypress/react no longer exports mount as a default export. Use destructuring: import { mount } from 'cypress/react'.

Additional details

For GA we're taking the opportunity to make breaking changes to clean things up and remove functionality that we don't need anymore. This PR does the following:

  • Removes the ability to inject styles into components via mount
    • Styles should either be defined in the spec file, the component support file, or in the component file itself
  • Removes mountHook and related examples and tests from cypress/react
  • Makes unmount internal only for React - no longer exported for use outside of the cypress/react package
  • Removes the aliasing of mounted React components by default
  • Removes mountCallback from cypress/vue and cypress/vue2
    • mount should be used directly instead

NOTE: There are a bunch of example tests in npm/vue that we're not running in CI, and I can't get them to pass. I decided to leave all of those as they were (some are still injecting styles and/or using mountCallback which is now invalid as of this PR). I created an issue to handle these tests here #24423

Steps to test

I tried to break these up into small commits since there are a fair amount of changes here. It starts pretty clean in the top commits but towards the end things get a little more messy once I realized that I had broken some tests.

A lot of these are documentation changes so there's not much to test there, but it would be good to review the Percy snapshot changes and of course, the code changes.

PR Tasks

  • Have tests been added/updated?
  • Has the original issue (or this PR, if no issue exists) been tagged with a release in ZenHub? (user-facing changes only)
  • [na] Has a PR for user-facing changes been opened in cypress-documentation? I looked through the docs and I didn't see anything that needed to be updated based on these changes
  • [na] Have API changes been updated in the type definitions?

@cypress-bot
Copy link
Contributor

cypress-bot bot commented Oct 27, 2022

Thanks for taking the time to open a PR!

@cypress
Copy link

cypress bot commented Oct 27, 2022



Test summary

70 0 12 0Flakiness 2


Run details

Project cypress
Status Passed
Commit bc9d8cd
Started Nov 4, 2022 4:46 AM
Ended Nov 4, 2022 5:04 AM
Duration 18:16 💡
OS Linux Debian -
Browser Chrome 106

View run in Cypress Dashboard ➡️


Flakiness

cypress/e2e/angular.cy.ts Flakiness
1 Working with angular-15 > should mount a passing test
2 Working with angular-15 > should live-reload on src changes

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

@astone123 astone123 requested a review from a team October 27, 2022 19:06
@astone123 astone123 marked this pull request as ready for review October 27, 2022 19:06
@astone123 astone123 linked an issue Oct 27, 2022 that may be closed by this pull request
Copy link
Contributor

@ZachJW34 ZachJW34 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Most of the changes look good, but the unmount export needs to stick around if we are following the no-dead-end philosophy.

npm/react/src/createMount.ts Show resolved Hide resolved
@@ -47,6 +47,6 @@ export function mount (jsx: React.ReactNode, options: MountOptions = {}, rerende
return makeMountFn('mount', jsx, { ReactDom: ReactDOM, ...options }, rerenderKey, internalOptions)
}

export function unmount (options = { log: true }) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a dead-end, we should still export it but throw an error in the exported version.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we deprecate and warn -> remove in v12? Just to make migration a bit smoother.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think marking as deprecated as Lachlan suggests makes sense. As far as erroring or warning, my vote is to stay with erroring based on the assumption that someone calling unmount is either wanting to test the "unmount" behavior or perform some sort of cleanup. Not erroring would most likely cause some sort of other error or problem that would be harder to track down. I could be swayed otherwise though.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fine with a straight up deprecation and error if we have a obvious alternative/migration strategy - a straight up deprecation without a recommendation is like "your test is broken now, good luck fixing it" which is not a nice DX.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ZachJW34 @astone123 @warrensplayer I thought about this a bit more. Here's my recommendations. I added some commits to make sure everything works (seems fine).

  1. Export this, but error. The error contains a link to the migration guide. Added here.
  2. Have a non exported unmount (I called it internalUnmount) we use for unmounting the component.
  3. Provide a migration strategy. I added an example showing how to unmount without unmount here and in my migration docs.

npm/react/src/createMount.ts Show resolved Hide resolved
@rockindahizzy rockindahizzy self-requested a review October 28, 2022 18:32
Copy link
Contributor

@lmiller1990 lmiller1990 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Left some comments, going to post a little more in Slack.

npm/mount-utils/src/index.ts Show resolved Hide resolved
npm/mount-utils/src/index.ts Outdated Show resolved Hide resolved
npm/react/README.md Outdated Show resolved Hide resolved
@@ -47,6 +47,6 @@ export function mount (jsx: React.ReactNode, options: MountOptions = {}, rerende
return makeMountFn('mount', jsx, { ReactDom: ReactDOM, ...options }, rerenderKey, internalOptions)
}

export function unmount (options = { log: true }) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we deprecate and warn -> remove in v12? Just to make migration a bit smoother.

npm/vue/src/index.ts Outdated Show resolved Hide resolved
Copy link
Contributor

@warrensplayer warrensplayer left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A few comments and suggestions...

npm/react/docs/styles.md Outdated Show resolved Hide resolved
@@ -41,6 +41,25 @@ it('is stylish', () => {
})
```

## Import from support file

If you have stylesheets that should apply to all of your components, you can import those from your component support file.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
If you have stylesheets that should apply to all of your components, you can import those from your component support file.
If you have stylesheets that should apply to all of your components, you can import those in your component support file.


// pause to show it
cy.wait(1000)
cy.get('.square').click()
cy.wait(1000)

// check if style was applied
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could probably leave this comment.

@@ -1,21 +0,0 @@
# unmount
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are other tests that were changed to remove the unmount command and replace it with mounting a new test component instead to cause the original mounted component to unmount. Should we keep this unmount directory here and rewrite the examples to explicitly show how to test unmount functionality in a component or do those other examples suffice?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, agreed, I was thinking this same thing, I'm going to revive this directory and explain the migration path.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done b253b7f

npm/react18/src/index.ts Outdated Show resolved Hide resolved
@@ -47,6 +47,6 @@ export function mount (jsx: React.ReactNode, options: MountOptions = {}, rerende
return makeMountFn('mount', jsx, { ReactDom: ReactDOM, ...options }, rerenderKey, internalOptions)
}

export function unmount (options = { log: true }) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think marking as deprecated as Lachlan suggests makes sense. As far as erroring or warning, my vote is to stay with erroring based on the assumption that someone calling unmount is either wanting to test the "unmount" behavior or perform some sort of cleanup. Not erroring would most likely cause some sort of other error or problem that would be harder to track down. I could be swayed otherwise though.

@rockindahizzy rockindahizzy removed their request for review October 31, 2022 21:01
@lmiller1990
Copy link
Contributor

lmiller1990 commented Nov 1, 2022

Okay, pushed two commits.

  1. b253b7f
  • added back unmount test and show how to handle it without unmount
  • exported getContainerEl from cypress/react - needed for migrating unmount

I also wrote a list of deprecations and how to migrate, we should publish this somewhere and link to it as part of the error messages.

https://docs.google.com/document/d/1n4H0ADl0QNBWqbtGiKg4AzC0v8pQ8wZL0YLZeOCOg94/edit#heading=h.1mpc0zpa6u62

  1. Improved errors e8af254

Errors now link to migration guide. This is a better DX - it gives the user something actionable.

@lmiller1990
Copy link
Contributor

@ZachJW34 proxy 299efd8

@lmiller1990
Copy link
Contributor

lmiller1990 commented Nov 3, 2022

On links: 6e98295

Consolidated in the same place in the same fashion as E2E does it.

@lmiller1990
Copy link
Contributor

Note: on links appear like this (note they have a "Learn More" link pointing to on.cypress.io...

image

@@ -1,4 +1,4 @@
import { JSX } from './createMount'
type JSX = Function & { displayName: string }
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just out of curiosity: What is the reason we define it this way?

Copy link
Contributor

@rockindahizzy rockindahizzy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added some minor things, overall this looks close!

Copy link
Contributor

@warrensplayer warrensplayer left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Mostly small stuff. I really like the checks and the error messages for all the removed items. This going to make it super easy for anyone to fix any issues they have after upgrading.

npm/vue2/docs/styles.md Outdated Show resolved Hide resolved
npm/vue2/docs/styles.md Outdated Show resolved Hide resolved
npm/mount-utils/src/index.ts Show resolved Hide resolved
npm/react/docs/styles.md Outdated Show resolved Hide resolved
npm/vue/src/index.ts Outdated Show resolved Hide resolved
npm/vue/src/index.ts Outdated Show resolved Hide resolved
packages/driver/src/cypress/error_messages.ts Outdated Show resolved Hide resolved
Copy link
Contributor

@warrensplayer warrensplayer left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking good to me.

Copy link
Contributor

@rockindahizzy rockindahizzy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My concerns were addressed. Thanks for all the hard work on this!

Copy link
Contributor

@ZachJW34 ZachJW34 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ship it!

@lmiller1990 lmiller1990 merged commit 294985f into release/11.0.0 Nov 4, 2022
@lmiller1990 lmiller1990 deleted the astone123/ct-functionality branch November 4, 2022 05:05
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.

Removal of erraneous functionality in CT
5 participants