fix: Subscribe to framework detection changes in wizard #26437

mike-plummer · 2023-04-05T16:05:17Z

Closes CT framework detection can fail due to open mode not waiting for DataContext to initialize #26388

Additional details

Launchpad does not wait for the data context to initialize in case there are significant slowdowns which would make the UI non-responsive on launch. This can cause the CT framework auto-detection to not populate if the detection is somehow delayed (complex project, slow machine, etc) - the detection occurs correctly but the GQL query in the Vue component has already resolved so the result is not reflected in the UI.

This PR adds a subscription so the Vue component can listen for updates to this data and reflect them in the UI.

Steps to test

On develop, add a delay to wizard initialization by updating the initialize function with this line:

// WizardActions.ts
async initialize () {
  await new Promise((resolve) => setTimeout(resolve, 5000))
  ...

Create a new empty CT project: npm create vite@latest, use any supported framework & options
Install project dependencies and add Cypress: cd <project dir>, npm i, npm i -D cypress
Open project directly into CT mode: cd <cypress repo> , yarn cypress:open --project <path to project> --component
Observe that UI does not detect framework/bundler, stays on "Pick a framework"
Switch to this branch, repeat procedure
Observe framework & bundler are reflected in the UI after small delay

How has the user experience changed?

Before

before.mov

After

after.mov

PR Tasks

Have tests been added/updated?
[na] Has a PR for user-facing changes been opened in cypress-documentation?
[na] Have API changes been updated in the type definitions?

cypress · 2023-04-05T16:36:13Z

25 flaky tests on run #45414 ↗︎

0	26909	1281	0	25

Details:

trigger ci
Project: cypress	Commit: `cddbd4a01c`
Status: Passed	Duration: 18:54 💡
Started: Apr 10, 2023 9:08 PM	Ended: Apr 10, 2023 9:27 PM

cypress/cypress.cy.js • 3 flaky tests • 5x-driver-electron

View Output Video

Test		Artifacts
... > correctly returns currentRetry		`Output` `Video`
... > correctly returns currentRetry		`Output` `Video`
... > correctly returns currentRetry		`Output` `Video`

create-from-component.cy.ts • 1 flaky test • app-e2e

View Output Video

Test		Artifacts
... > runs generated spec		`Output` `Screenshots` `Video`

specs_list_latest_runs.cy.ts • 2 flaky tests • app-e2e

View Output Video

Test		Artifacts
App/Cloud Integration - Latest runs and Average duration > when no runs are recorded > shows placeholders for all visible specs		`Output` `Screenshots` `Video`
App/Cloud Integration - Latest runs and Average duration > when offline > shows offline alert then hides it after coming online		`Output` `Screenshots` `Video`

cypress-origin-communicator.cy.ts • 1 flaky test • app-e2e

View Output Video

Test		Artifacts
Cypress In Cypress Origin Communicator > cy.origin passivity with app interactions > passes upon test reload mid test execution		`Output` `Screenshots` `Video`

commands/net_stubbing.cy.ts • 1 flaky test • 5x-driver-firefox

View Output Video

Test		Artifacts
network stubbing > intercepting request > can delay and throttle a StaticResponse		`Output`

The first 5 flaky specs are shown, see all 12 specs in Cypress Cloud.

_{This comment has been generated by cypress-bot as a result of this
project's GitHub integration settings.}

lmiller1990 · 2023-04-06T03:37:53Z

Mine shows up immediately regardless, even if I have the setTimeout. 🤔 Any ideas?

bug.mov

lmiller1990

Code looks good but I could not run the test plan - any ideas what I might be missing? Is there another step?

mike-plummer · 2023-04-06T14:07:41Z

Code looks good but I could not run the test plan - any ideas what I might be missing? Is there another step?

@lmiller1990 Try yarn dev instead of yarn cypress:open? I was probably running against previously-built state when putting that test procedure together; IIRC cypress:open doesn't trigger any rebuild

jordanpowell88

The code looks good to me but the after video is less than ideal UX to me. Nothing indicates that we are doing work to search for your framework. Do we have a less disruptive way of alerting the user we are loading something after the initial paint?

mike-plummer · 2023-04-07T15:00:23Z

The code looks good to me but the after video is less than ideal UX to me. Nothing indicates that we are doing work to search for your framework. Do we have a less disruptive way of alerting the user we are loading something after the initial paint?

@jordanpowell88 The five second delay is just to accentuate this scenario and make it more observable - in reality, this typically occurs within hundreds of milliseconds and occasionally happens to just miss the point where the gql query is resolved for the vue component. Unless the user is on a massively slow machine this shouldn't ever be observed as anything more than a "blip"

jordanpowell88 · 2023-04-07T15:07:50Z

The code looks good to me but the after video is less than ideal UX to me. Nothing indicates that we are doing work to search for your framework. Do we have a less disruptive way of alerting the user we are loading something after the initial paint?

@jordanpowell88 The five second delay is just to accentuate this scenario and make it more observable - in reality, this typically occurs within hundreds of milliseconds and occasionally happens to just miss the point where the gql query is resolved for the vue component. Unless the user is on a massively slow machine this shouldn't ever be observed as anything more than a "blip"

Ok that makes sense. I must have missed this context

lmiller1990 · 2023-04-09T23:46:41Z

I tested locally, works great 💯

emilyrohrbough · 2023-04-10T13:22:20Z

packages/server/lib/modes/interactive.ts

@@ -158,6 +158,10 @@ export = {
  },

  async run (options: LaunchArgs, _loading: Promise<void>) {
+    // Note: We do not await the `_loading` promise here since initializing
+    // the data context can significantly delay initial render of the UI
+    // https://github.com/cypress-io/cypress/issues/26388#issuecomment-1492616609


This is good context, but might be worth pointed to code vs a github comment in the event this is code ever changes so this stays "true" and/or relevant.

marktnoonan

Works well, and code looks good

Comment answered

…6437)

* feat/protocol: (45 commits) chore: adding support for url:changed (#26519) chore: adding viewport:changed to protocol (#26508) chore: Reduce dependencies and binary size, add circle ci detector (#26522) chore: 12.10.0 release (#26517) test: fix flaky tests (#26505) chore: Check project dependencies for CT compatibility (#26497) chore: update vm2 to 3.9.16 (#26489) chore: enable builds on feat/protocol branch (#26506) chore: [skip ci] update to labels looked at by stalebot (#26496) chore: connecting to electron browser (#26471) chore: [skip ci] turning on stale bot (#26488) chore: fix issue with logs without wallClockUpdatedAt (#26473) Update triage_add_to_project.yml chore: Update Chrome (stable) to 112.0.5615.49 and Chrome (beta) to 113.0.5672.24 (#26434) feat: display framework definition errors (#26183) fix: correctly resolve dependencies for CT onboarding when using Yarn Plug n Play (#26452) fix: Subscribe to framework detection changes in wizard (#26437) fix: make clicks on type('{enter}') composed (#26395) chore: update add-to-project workflow (#26439) chore: Pass telemetry resources from the node process to the browser (#26468) ...

fix: Subscribe to framework detection changes in wizard

312b433

mike-plummer requested review from astone123 and lmiller1990 April 5, 2023 16:05

lmiller1990 reviewed Apr 6, 2023

View reviewed changes

Merge branch 'develop' into mikep/26388-detect-framework-subscription

360319e

mike-plummer requested a review from a team April 7, 2023 14:05

jordanpowell88 previously requested changes Apr 7, 2023

View reviewed changes

lmiller1990 self-requested a review April 9, 2023 23:46

lmiller1990 approved these changes Apr 9, 2023

View reviewed changes

emilyrohrbough reviewed Apr 10, 2023

View reviewed changes

marktnoonan approved these changes Apr 10, 2023

View reviewed changes

Merge branch 'develop' into mikep/26388-detect-framework-subscription

860abc4

trigger ci

cddbd4a

mike-plummer merged commit fdb5642 into develop Apr 10, 2023

mike-plummer deleted the mikep/26388-detect-framework-subscription branch April 10, 2023 22:34

astone123 pushed a commit to kgroat/cypress that referenced this pull request Apr 19, 2023

fix: Subscribe to framework detection changes in wizard (cypress-io#2…

049b007

…6437)

marktnoonan mentioned this pull request May 9, 2023

CT onboarding hangs waiting for dependency installation #26685

Closed

MikeMcC399 mentioned this pull request Aug 1, 2023

CT setup detection may fail if launchpad skipped (--component used to open) #27410

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: Subscribe to framework detection changes in wizard #26437

fix: Subscribe to framework detection changes in wizard #26437

mike-plummer commented Apr 5, 2023

cypress bot commented Apr 5, 2023 •

edited

Loading

lmiller1990 commented Apr 6, 2023

lmiller1990 left a comment

mike-plummer commented Apr 6, 2023

jordanpowell88 left a comment

mike-plummer commented Apr 7, 2023

jordanpowell88 commented Apr 7, 2023

lmiller1990 commented Apr 9, 2023

emilyrohrbough Apr 10, 2023

marktnoonan left a comment

fix: Subscribe to framework detection changes in wizard #26437

fix: Subscribe to framework detection changes in wizard #26437

Conversation

mike-plummer commented Apr 5, 2023

Additional details

Steps to test

How has the user experience changed?

PR Tasks

cypress bot commented Apr 5, 2023 • edited Loading

25 flaky tests on run #45414 ↗︎

lmiller1990 commented Apr 6, 2023

lmiller1990 left a comment

Choose a reason for hiding this comment

mike-plummer commented Apr 6, 2023

jordanpowell88 left a comment

Choose a reason for hiding this comment

mike-plummer commented Apr 7, 2023

jordanpowell88 commented Apr 7, 2023

lmiller1990 commented Apr 9, 2023

emilyrohrbough Apr 10, 2023

Choose a reason for hiding this comment

marktnoonan left a comment

Choose a reason for hiding this comment

cypress bot commented Apr 5, 2023 •

edited

Loading