feat(launchpad): update CT setup and config scaffolding #20893

lmiller1990 · 2022-04-03T23:49:12Z

Closes https://cypress-io.atlassian.net/browse/UNIFY-1402

User facing changelog

Update launchpad new project setup to match the new "object" API
No longer choose "Create React App v5" etc during setup - just select "Create React App", etc. There's less options to choose from, since we handle the under-the-hood versioning.
Generate new Object API in cypress.config.js for new project (see images below)
Update which dependencies we ask you to install - we no longer ask for webpack-dev-server, @cypress/react, etc. We only ask for things like typescript, @vue/cli (if you chose vue-cli, next, etc).

Additional details

Video demo (shows slight bug in generated cypress.config.js, fixed since recording).

Do not show specific versions of Vue CLI, react-scripts etc.

Do not show Webpack v4 and v5 - just "webpack"

Dependency Install Screen w/ Invalid Version

Note: there's not such Vue 4, I just hacked node_modules to show how it looks if you have a version outside the expected one.
Note: it will not ask you to install packages you've already got (note npm install command only has vue).
Note: npm install vue instead of npm install vue@3 - 3 is the default. If you need a non default version, it'll tell you npm install blah@version.

New `cypress.config.js` using Object API (which is not functioning until #20861 lands)

Another example via Percy Diff

https://percy.io/cypress-io/cypress/builds/17057778/changed/958248060?browser=chrome&browser_ids=23&subcategories=unreviewed%2Cchanges_requested&viewLayout=side-by-side&viewMode=new&width=800&widths=800

How has the user experience changed?

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?
Have new configuration options been added to the cypress.schema.json?

cypress-bot · 2022-04-03T23:49:14Z

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-04-04T01:17:36Z

Test summary

17872 • 0 • 217 • 0 • 1

Run details


Project	cypress
Status	Passed
Commit	`c51a34c`
Started	Apr 14, 2022 5:14 PM
Ended	Apr 14, 2022 5:28 PM
Duration	14:04 💡
OS	Linux Debian - 10.10
Browser	Multiple

View run in Cypress Dashboard ➡️

Flakiness

	cypress/e2e/commands/net_stubbing.cy.ts		1
1	network stubbing > intercepting request > can delay and throttle a StaticResponse

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

lmiller1990 · 2022-04-07T01:53:44Z

Looks good, added a comment. Also does this PR automatically skip the "dependencies" page if we've detected all of the dependencies exit?

@tgriesser I didn't implement that - the ticket says we can go either way. I just went with the "default" workflow, which just shows and confirms all the dependencies, if the user has them installed. The user can then just click continue. I made it more explicit in the tests that use the system-tests infrastructure to install the node modules. See: b487860

Here's how it looks, screenshot from an e2e test:

lmiller1990 · 2022-04-11T04:47:30Z

@tgriesser @ZachJW34 please re-review, I merged in 10.0-release and responded to all comments.

We can merge this last once the other tickets for the CT stuff are done, but still good to review so it's ready to go.

ZachJW34

Went through the deps, this is what I think we should land on for the required deps permutations:

Enumerated options:

| framework        | bundler | required deps                   |
| ---------------- | ------- | ------------------------------- |
| react            | webpack | react >= 16, webpack >= 4       |
| create-react-app | webpack | react >= 16, react-scripts >=4  |
| next             | webpack | next >= 11, react >= 16         |
| vue              | webpack | vue >= 2, webpack >= 4          |
| vue-cli          | webpack | vue >= 2, @vue/cli-service >= 4 |
| nuxt             | webpack | vue = 2, nuxt = 2               |
| react            | vite    | react >=16, vite >= 2           |
| vue              | vite    | vue >= 2, vite >= 2             |

> Note: `typescript` is a required dependency (for all projects) if the user chooses typescript during project setup

My reasoning behind the list is that we should only ask them to install deps we know we need for ct to work. For create-react-app, all we need is react and react-scripts. We don't need webpack since we can source it from react-scripts. Same for vue-cli.

I think we should get all the presets merged and then come to a final decision on this list. I'd like to update the tech-brief with this list as well.

ZachJW34 · 2022-04-11T19:45:52Z

packages/scaffold-config/src/frameworks.ts

-      import { devServer } from '@cypress/react/plugins/react-scripts'
+  }
+
+  return dedent`


The cypress.config.js should also use defineConfig if it is available.

Did not realise. I will make this change at the end once all the presets are merged, along with updating the dependencies based on whatever decision we arrive at.

tbiethman · 2022-04-12T22:28:38Z

packages/data-context/src/actions/WizardActions.ts


    await this.detectLanguage()
    debug('detectedLanguage %s', this.data.detectedLanguage)
    this.data.chosenLanguage = this.data.detectedLanguage || 'js'

    try {
-      const detected = detect(await fs.readJson(path.join(this.ctx.currentProject, 'package.json')))
+      const detected = detect(this.ctx.currentProject)


Can we remove the try/catch now that we're not awaiting? Nothing else seems like it should (reasonably) throw.

lmiller1990 · 2022-04-13T05:29:50Z

Ok, Object API seems in a working state - I'll give this one a bit more of a test and get it merged.

Edit: still blocked by various things... see this message.

* fix: small ui tweaks for switch testing type (#20901) * fix: add missing component-index.html (#20926) * move files from data-context to scaffold-config * dynamically modify support file based on selected framework * scaffold correct supportFile for CT based on framework * update scaffolded files Co-authored-by: Zachary Williams <ZachJW34@gmail.com>

* 10.0-release: (25 commits) fix: stop running spec when switching specs (#21038) fix: remove asset size warnings and enable nuxt e2e tests (#21074) feat: swap the #__cy_root id selector to become data-cy-root for component mounting (#20951) fix: Doc changes around vue2 (#21066) feat: Add vue2 package from npm/vue/v2 branch (#21026) skip failing test fix: add possible frameworks to object API config (#21056) fix snapshot spacing fix system test fix snapshot update snapshots rename spec files rename files update snapshots release 9.5.4 [skip ci] fix(regression): cy.pause() should not be ignored with `cypress run --headed --no-exit` (#20877) fix: add missing Cypress.Commands.addAll() types (#20894) chore: Don't store video and screenshot artifacts for runs (#20979) chore: Update Chrome (beta) to 101.0.4951.26 (#20957) chore: remove parallelism from test-binary-against-repo jobs (#21004) ...

tgriesser

It's all coming together!

…e-config * 10.0-release: fix: make error on integration folder point to e2e (#20853) fix(unify): Update Cypress Dashboard Service Link in Login Modal (#21084) chore: fix windows node_modules install step (#21098) fix: webpack integration tests for app w webpack-dev-server-fresh (#21093) fix: move non spec files on migration (#21054) Bumping electron version in root chore(deps): Bumping electron dependency to 15.5.1 (#21072) fix: resolves correctly specPattern (#21057) feat: replace reconfigure button on settings page with link to config doc (#21077) feat(launchpad): update CT setup and config scaffolding (#20893) fix: cy.type('{enter}') on <input> elements submits the form correctly after Firefox 98. (#21042) chore: making the npm deps for vue, react, and vue2 use 0.0.0-dev (#21081) fix(cli): show additional mitigation steps for max path length error (#21047) fix: Plugin error when sending on disconnected IPC channel (#21011) chore: add internal types for cy.session command (#21028) chore: Update Chrome (stable) to 100.0.4896.88 (#21043)

lmiller1990 added 5 commits March 31, 2022 14:51

wip

bc6e107

wip

01c38e1

wip on ct tests

b67daee

refactor

915e911

move wizard state to coreData

f6bf409

lmiller1990 added 3 commits April 4, 2022 10:43

fix types

31eb903

update ui

b1c1f79

merge in origin

c264393

lmiller1990 added 15 commits April 4, 2022 12:17

fix tests

993b401

fix tests

cd54481

fix lint

5c336fe

fix tests

892111b

update e2e tests

91292c7

fix test

0979495

fixing tests

4d19502

fix globs

2ae5a2a

remove accidental files

179a9a8

add comment to test

4a0319c

handle case of no global cypress

a90df0f

fix bugs

834d056

fix test

51ae6ab

update versions

b7e5254

fix tests

7c27cc2

lmiller1990 requested review from a team, jennifer-shehane and ZachJW34 and removed request for a team and jennifer-shehane April 4, 2022 08:45

lmiller1990 added 2 commits April 7, 2022 11:49

remove old code

95c55ce

typo

f5a8537

davidmunechika requested a review from tbiethman April 7, 2022 15:34

jennifer-shehane assigned lmiller1990 Apr 8, 2022

lmiller1990 added 2 commits April 11, 2022 12:46

merge in remote

83a48d7

update test

1992e75

ZachJW34 reviewed Apr 11, 2022

View reviewed changes

ZachJW34 requested review from ZachJW34 April 11, 2022 19:52

tbiethman reviewed Apr 12, 2022

View reviewed changes

tgriesser and others added 2 commits April 12, 2022 22:08

Merge branch '10.0-release' into lmiller1990/UNIFY-1402

1f65611

remove superfulous try/catch

cc5d32b

lmiller1990 and others added 3 commits April 13, 2022 15:48

one last file missed in merge

6dfbfc5

tgriesser self-requested a review April 14, 2022 14:07

see if this fixes percy errors?

9fabb91

tgriesser approved these changes Apr 14, 2022

View reviewed changes

tgriesser requested a review from tbiethman April 14, 2022 14:34

ZachJW34 approved these changes Apr 14, 2022

View reviewed changes

ZachJW34 and others added 3 commits April 14, 2022 11:02

Merge branch '10.0-release' into lmiller1990/UNIFY-1402

c87e9de

Fix types

7bd810c

Merge branch '10.0-release' into lmiller1990/UNIFY-1402

c51a34c

ZachJW34 approved these changes Apr 14, 2022

View reviewed changes

ZachJW34 merged commit f8621da into 10.0-release Apr 14, 2022

ZachJW34 deleted the lmiller1990/UNIFY-1402 branch April 14, 2022 17:34

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(launchpad): update CT setup and config scaffolding #20893

feat(launchpad): update CT setup and config scaffolding #20893

lmiller1990 commented Apr 3, 2022 •

edited

Loading

cypress-bot bot commented Apr 3, 2022

cypress bot commented Apr 4, 2022 •

edited

Loading

lmiller1990 commented Apr 7, 2022 •

edited

Loading

lmiller1990 commented Apr 11, 2022 •

edited

Loading

ZachJW34 left a comment

ZachJW34 Apr 11, 2022

lmiller1990 Apr 11, 2022

tbiethman Apr 12, 2022

lmiller1990 Apr 13, 2022

lmiller1990 commented Apr 13, 2022 •

edited

Loading

tgriesser left a comment

feat(launchpad): update CT setup and config scaffolding #20893

feat(launchpad): update CT setup and config scaffolding #20893

Conversation

lmiller1990 commented Apr 3, 2022 • edited Loading

User facing changelog

Additional details

Do not show specific versions of Vue CLI, react-scripts etc.

Do not show Webpack v4 and v5 - just "webpack"

Dependency Install Screen w/ Invalid Version

New cypress.config.js using Object API (which is not functioning until #20861 lands)

Another example via Percy Diff

How has the user experience changed?

PR Tasks

cypress-bot bot commented Apr 3, 2022

cypress bot commented Apr 4, 2022 • edited Loading

Test summary

Run details

Flakiness

lmiller1990 commented Apr 7, 2022 • edited Loading

lmiller1990 commented Apr 11, 2022 • edited Loading

ZachJW34 left a comment

Choose a reason for hiding this comment

ZachJW34 Apr 11, 2022

Choose a reason for hiding this comment

lmiller1990 Apr 11, 2022

Choose a reason for hiding this comment

tbiethman Apr 12, 2022

Choose a reason for hiding this comment

lmiller1990 Apr 13, 2022

Choose a reason for hiding this comment

lmiller1990 commented Apr 13, 2022 • edited Loading

tgriesser left a comment

Choose a reason for hiding this comment

lmiller1990 commented Apr 3, 2022 •

edited

Loading

New `cypress.config.js` using Object API (which is not functioning until #20861 lands)

cypress bot commented Apr 4, 2022 •

edited

Loading

lmiller1990 commented Apr 7, 2022 •

edited

Loading

lmiller1990 commented Apr 11, 2022 •

edited

Loading

lmiller1990 commented Apr 13, 2022 •

edited

Loading