feat: warn when detecting unsupported dependencies for component testing #22964

lmiller1990 · 2022-07-28T07:28:39Z

Closes Add runtime semver checks ensuring the version of vite / other external dependencies #22025

User facing changelog

N/A

Additional details

Add some runtime checks for CT deps, like vite, react, etc. We do these during setup. Now, we also do it each launch. This will help warn users if they've updated a dependency (like Vite) to a new version we haven't yet got official support for.

Steps to test

You will need a project with some mismatched dependencies. This PR includes one called component-testing-outdated-dependencies, you could test with that, if you want. Run yarn install inside it, fire up Cypress and choose that project. You should see the appropriate warnings.

How has the user experience changed?

Launchpad now shows a warning with the mismatched dependencies, what you should have provided, and what you did provide. TBA: the exact text, this screenshot is just showing how it looks right now. @christopherfrance will provide the correct text, as discussed here.

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)
Has a PR for user-facing changes been opened in cypress-documentation?
Have API changes been updated in the type definitions?

cypress-bot · 2022-07-28T07:28:42Z

Thanks for taking the time to open a PR!

Create a Draft Pull Request if your PR is not ready for review. Mark the PR as Ready for Review when you're ready for a Cypress team member to review the PR.
Become familiar with the Code Review Checklist for guidelines on coding standards and what needs to be done before a PR can be merged.

cypress · 2022-07-28T08:13:19Z

Test summary

9380 • 0 • 118 • 0 • 0

Run details


Project	cypress
Status	Passed
Commit	`d17479b`
Started	Aug 1, 2022 12:57 AM
Ended	Aug 1, 2022 1:12 AM
Duration	15:34 💡
OS	Linux Debian - 11.3
Browser	Multiple

View run in Cypress Dashboard ➡️

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

cbfrance · 2022-07-28T15:41:56Z

Thanks @lmiller1990 this looks like a good improvement from design perspective.

There are two changes being discussed in this thread:

DONE: Remove Restart button since it seems unlikely to work as expected.

TODO: The last line could more actionable / explain what to do next. Here is our suggestion (to
replace Cypress may not function as expected) — If you're experiencing problems, downgrade dependencies and restart Cypress.

ZachJW34 · 2022-07-28T16:36:51Z

packages/data-context/src/data/ProjectConfigManager.ts

+    const devServerOptions = this._cachedLoadConfig.initialConfig.component.devServer
+
+    const bundler = WIZARD_BUNDLERS.find((x) => x.type === devServerOptions.bundler)
+    const framework = WIZARD_FRAMEWORKS.find((x) => x.type === devServerOptions.framework)


Suggested change

const framework = WIZARD_FRAMEWORKS.find((x) => x.type === devServerOptions.framework)

const framework = WIZARD_FRAMEWORKS.find((x) => x.configFramework === devServerOptions.framework)

The framework.type doesn't match to the devServer.framework.

Making this change creates an issue though. With the current code, there is no way to distinguish between a vueclivue2 app and a vueclivue3 app. The frameworks.find will find the first framework framework matching the configFramework. In the case of loading a vueclivue3 app, you'll get a warning stating that the vue version is out of date which is incorrect.

Not sure the best way to solve this. You would have to have additional logic to narrow down frameworks that have a matching configFramework (which in this case is only vue-cli), but this isn't deterministic since the deps we are trying to verify can be greater or smaller.

Hmmm you are right - I wonder why TS isn't erroring, I guess because some of them happen to match up?

Ok, so the solution would likely be:

grab all frameworks that match vue-cli (so we have vueclivue2 and vueclivue3`)

check each one, see if deps match

if they do we are golden

if none of them match, error out

The challenge is how we get a nice warning message... there isn't a super clean way to know if they want vueclivue2 or vueclivue3. We could have some logic to intelligently infer this, or just make a more generic warning. I'll see what I can come up with.

ZachJW34 · 2022-07-28T16:56:47Z

packages/frontend-shared/src/warning/Warning.vue

 </script>
+
+<style lang="scss">
+.warning-markdown {


Any reason to not use tailwind?

Done - I still need to do .warning-markdown > ul since you cannot nest selectors using Tailwind, but I changed it to use @apply.

The reason I did it like this is we need to style the <ul> which is part of the generated HTML in the errors package. I tried adding it with the rest of the styles but it's getting clobbered by something else and the styles aren't applied:

Updated the code leaving a comment - not sure if this ever will be addressed, but at least it'll point people to the right place if they want to expand on the styling.

packages/scaffold-config/src/dependencies.ts

packages/errors/src/errors.ts

lmiller1990 · 2022-07-29T06:03:07Z

@ZachJW34 @christopherfrance I updated the warning message and styling.

lmiller1990 · 2022-07-29T06:55:17Z

@ZachJW34 updated the logic to handle the case you pointed out and added tests around it, good catch.

ZachJW34

My comments are addressed! Tested it out and works great. One small question

packages/data-context/src/data/ProjectConfigManager.ts

rockindahizzy

LGTM!

cypress-bot · 2022-08-02T17:17:51Z

Released in 10.4.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v10.4.0, please open a new issue.

lmiller1990 added 4 commits July 28, 2022 16:26

wip: basic implementation

8b88d8d

update dependencies to have maxVersion

c06cd83

handle promises correctly

b6b8f7b

fix test

00b70e7

lmiller1990 changed the title ~~wip: basic implementation~~ feat: warn when detecting unsupported dependencies for component testing Jul 28, 2022

lmiller1990 added 2 commits July 28, 2022 17:39

update test project and styling

41fd73f

only check for CT deps in CT

462f606

lmiller1990 marked this pull request as ready for review July 28, 2022 07:45

lmiller1990 requested review from a team as code owners July 28, 2022 07:45

lmiller1990 requested review from nagash77 and removed request for a team and nagash77 July 28, 2022 07:45

lmiller1990 added 2 commits July 28, 2022 18:38

install required deps

b9b1c20

revert

4a904bd

ZachJW34 suggested changes Jul 28, 2022

View reviewed changes

rework detection and extend tests

499ca0a

lmiller1990 requested a review from ZachJW34 July 29, 2022 06:50

lmiller1990 added 2 commits July 29, 2022 16:53

remove unused code

eed378e

remove more code

0e9e9b0

rockindahizzy self-requested a review July 29, 2022 14:11

ZachJW34 approved these changes Jul 29, 2022

View reviewed changes

packages/data-context/src/data/ProjectConfigManager.ts Show resolved Hide resolved

rockindahizzy approved these changes Jul 29, 2022

View reviewed changes

Merge branch 'develop' into lmiller/add-runtime-check-for-ct-deps

d17479b

lmiller1990 merged commit cbb5e35 into develop Aug 1, 2022

lmiller1990 deleted the lmiller/add-runtime-check-for-ct-deps branch August 1, 2022 01:40

cypress-bot bot locked as resolved and limited conversation to collaborators Aug 2, 2022

	const framework = WIZARD_FRAMEWORKS.find((x) => x.type === devServerOptions.framework)
	const framework = WIZARD_FRAMEWORKS.find((x) => x.configFramework === devServerOptions.framework)

feat: warn when detecting unsupported dependencies for component testing #22964

feat: warn when detecting unsupported dependencies for component testing #22964

Uh oh!

Conversation

lmiller1990 commented Jul 28, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

User facing changelog

Additional details

Steps to test

How has the user experience changed?

PR Tasks

Uh oh!

cypress-bot bot commented Jul 28, 2022

Uh oh!

cypress bot commented Jul 28, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Test summary

Run details

Uh oh!

cbfrance commented Jul 28, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ZachJW34 Jul 28, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lmiller1990 Jul 29, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lmiller1990 Jul 29, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ZachJW34 Jul 28, 2022

Choose a reason for hiding this comment

Uh oh!

lmiller1990 Jul 29, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

lmiller1990 commented Jul 29, 2022

Uh oh!

lmiller1990 commented Jul 29, 2022

Uh oh!

ZachJW34 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

rockindahizzy left a comment

Choose a reason for hiding this comment

Uh oh!

cypress-bot bot commented Aug 2, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

lmiller1990 commented Jul 28, 2022 •

edited

Loading

cypress bot commented Jul 28, 2022 •

edited

Loading

cbfrance commented Jul 28, 2022 •

edited

Loading

ZachJW34 Jul 28, 2022 •

edited

Loading

lmiller1990 Jul 29, 2022 •

edited

Loading

lmiller1990 Jul 29, 2022 •

edited

Loading

lmiller1990 Jul 29, 2022 •

edited

Loading