feat: Implement testing type switch promos #26894

mike-plummer · 2023-05-31T18:32:32Z

Closes Add Testing Type switcher to Specs Explorer #26448
Closes Create "Setup CT" Promo #26837
Closes Create "Setup E2E" Promo #26836

Additional details

A new testing type switcher is being added to the Specs Explorer. It has the following behaviors:

If other testing type is configured

no "question mark" icon is displayed
Clicking the other testing type immediately switches the active testing type (closes and reopens browser).

If other testing type is not configured

A question mark icon is displayed
Clicking the other testing type hides the specs list and shows a Promo with informational content about that testing type.
Promo will:
- Record an anon event on display
- Provide a "Quick setup" button that closes browser and sends user to setup flow for other testing type. Clicking button records a machine-collect event
- Provides docs and framework links with appropriate UTM params

Figma

Note: The following discrepancies with the Figma have been surfaced with design and approved:

Different style of Question Mark icon in switcher
Switcher is shorter (complies with DS styling)
No "skeleton" rows are displayed behind promo
There's some extra height from the SpecsList virtualist which causes the promo to center a bit low - going to see how Adam's changes to SpecsList styling impact this

Steps to test

Create a project with CT and E2E set up
Open project using this branch, observe switcher displays with no question mark. Clicking each testing type should move Cypress into target testing type.
Close project. Edit config file and comment out "component" entry. Reopen project into E2E
Switcher should display question mark on CT mode. Click CT button and observe CT promo is displayed. Verify links include appropriate UTM params. Click Quick Setup and verify user is sent to launchpad setup flow for CT.
Close project. Edit config file - uncomment "component" and comment out "e2e" config. Reopen project into CT.
Switcher should display question mark on E2E mode. Click E2E button and observe E2E promo is displayed. Verify links include appropriate UTM params. Click Quick Setup and verify user is sent to E2E mode.

How has the user experience changed?

Both testing types configured

CT not configured

E2E not configured

PR Tasks

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

cypress · 2023-05-31T21:28:34Z

5 flaky tests on run #47125 ↗︎

0	5193	77	0	5

Details:

text formatting
Project: cypress	Commit: `82d0aceaad`
Status: Passed	Duration: 13:25 💡
Started: Jun 6, 2023 12:27 AM	Ended: Jun 6, 2023 12:41 AM

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

View Output Video

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

e2e/origin/navigation.cy.ts • 1 flaky test • 5x-driver-electron

View Output Video

Test		Artifacts
delayed navigation > errors > redirects to an unexpected cross-origin and calls another command in the cy.origin command		`Output` `Video`

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`

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

astone123 · 2023-06-01T15:35:55Z

A couple of questions before I dive into the code:

Should the testing type switcher persist state if the user navigates to a different page and then back to the specs list? Right now if you navigate to a testing type and see the promo, then navigate away and back to it, the switcher goes back to the current testing type. This makes intuitive sense to me, I just want to make sure that was intentional.
There's some weirdness in the UI:

After switching testing types once I saw it like this (this was immediately after I used the switcher to set up e2e testing, not sure if relevant):

Also, it looks like every time we switch testing types using the switcher, the selected UI testing type shows up during the loading state for the browser. For example (can't believe I screenshotted this fast enough)

This looks kind of strange to me. Anything we can do about that?

mike-plummer · 2023-06-01T15:44:44Z

@astone123

Correct, there are no state persistence requirements for the switcher, so the expectation at present is that it will always default to the "active" testing type after a refresh or navigation
Weird. I'll take a look at the horizontal overlap issue, might be conflicting with the grid column widths we're using in the header
I saw that yesterday while demoing with Mark - I think there may be a hard z-index override on that component. I'll take a look

astone123

Just a few comments. Also I'm curious why the snapshot cache files were updated?

cli/CHANGELOG.md

packages/app/cypress/e2e/specs_list_switcher.cy.ts

packages/app/src/specs/TestingTypePromo.cy.tsx

mike-plummer · 2023-06-01T18:19:52Z

Just a few comments. Also I'm curious why the snapshot cache files were updated?

@astone123 kitchensink and unit tests are failing due to weird errors related to require & package.json. I ran the snapshot update task just to make sure it wasn't a snapshot mismatch since there are updates to the yarn.lock in this PR

astone123 · 2023-06-01T18:57:43Z

Just tested again. I'm not seeing the issues that I saw before. One more thing, should the bottom of the promo have this much padding? Looks a little off to me

* Fix issue with yarn.lock * Fix extra padding at bottom of promo * Add tests for utm params * Add test for switching testing type when both configured * Fix changelog version

mike-plummer · 2023-06-01T19:07:52Z

Just tested again. I'm not seeing the issues that I saw before. One more thing, should the bottom of the promo have this much padding? Looks a little off to me

@astone123 Removed extra padding in latest commit

marktnoonan · 2023-06-01T20:07:02Z

Still testing, here's an edge case I found - if I remove the component testing configuration while CT is open, we don't seem to handle that, and the UI gets to an undefined state (no "project/branch" item in the top left of the nav).

I guess ideally we'd put you back at the launchpad to choose your testing type again and either you open e2e or set up CT.

I haven't tested the current behavior, maybe this PR doesn't have anything to do with it.

packages/app/src/specs/TestingTypePromo.vue

astone123 · 2023-06-01T20:41:53Z

@mike-plummer One more minor thing I'm seeing - when I launch a project that has e2e configured but not CT, when the app loads I see the CT promo flash on screen very quickly. Probably not a huge deal, but I imagine we could prevent that from happening for a smoother experience.

For example
https://www.loom.com/share/f40652ad01994d458c50bc52e880d7fc

marktnoonan · 2023-06-01T20:50:09Z

Overall this is looking really great. One question on the size of the full-width version, I couldn't put my finger on this yesterday when we talked about the button size.

In Figma the full-width variant is 858px. This produces less text wrapping and a good amount of space between the title and the button:

It looks like our promo component doesn't get bigger than 480px. Is this known/intentional at this point, based on other existing uses of PromoCard?

astone123 · 2023-06-05T18:09:20Z

@marktnoonan looks good overall, but I'm still seeing this behavior that I mentioned in this comment. Not a huge issue but it would be nice if it was an easy change

Edit: Actually what I'm seeing now is that the e2e promo is flashing on screen (which is the testing type that is configured)

packages/app/src/composables/useTestingType.ts

astone123

I just tested again, looks good!

Co-authored-by: Stokes Player <[email protected]>

astone123 · 2023-06-05T23:22:19Z

Fixed this issue in 707350f

https://www.loom.com/share/abac6ed229394f90b5cf5b923ce27034

lmiller1990 · 2023-06-06T01:31:49Z

I think I still saw the flashing banner bug, but I realized it was another banner. I am unsure if it was introduced here, but I suspect it was not. I'll find out.

Here's the bug recorded. It only happens sometimes, the first time you open a project?

bug.mov

lmiller1990 · 2023-06-06T01:32:10Z

The actual feature works great, I tested it out, looks good!

lmiller1990 · 2023-06-06T01:56:24Z

I re-ran yarn and I can no longer reproduce the flicking bug I found on either this branch or develop. I'm not sure why it happened, but I don't think it was introduced here at any rate.

Edit, maybe I'd missed 54cb1a0 where @marktnoonan fixed the issue. It seems fine now!

lmiller1990 · 2023-06-06T02:00:36Z

I pushed a single commit after getting it all green that removed a superfluous snapshot (this component is captured in several others): 59df96a.

cypress-bot · 2023-06-07T17:26:09Z

Released in 12.14.0.

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

mike-plummer added 9 commits May 30, 2023 15:04

feat: Implement testing type switch promos

9f753af

Add tests, changelog entry

a1d6183

Add tests

f3f447c

Fix button styling

99bf726

Styling fixes, add framework links

e7b8574

Add missing testId

e0e6fd3

run ci

a1d733f

Fix spec

6d6453b

Merge branch 'develop' into mikep/589-testing-type-switch

aa45c66

mike-plummer requested a review from a team May 31, 2023 20:58

mike-plummer marked this pull request as ready for review May 31, 2023 20:58

cypress-bot[bot] and others added 2 commits June 1, 2023 15:09

chore: updating v8 snapshot cache

18ea97e

Merge branch 'develop' into mikep/589-testing-type-switch

8462979

chore: updating v8 snapshot cache

af2d7b8

cypress-bot[bot] and others added 3 commits June 1, 2023 16:11

chore: updating v8 snapshot cache

170adf7

Fix styling issues

0c463c3

Merge branch 'develop' into mikep/589-testing-type-switch

8b4e9b0

astone123 reviewed Jun 1, 2023

View reviewed changes

cli/CHANGELOG.md Outdated Show resolved Hide resolved

packages/app/cypress/e2e/specs_list_switcher.cy.ts Show resolved Hide resolved

packages/app/src/specs/TestingTypePromo.cy.tsx Show resolved Hide resolved

Resolve code review findings

66c1ae9

* Fix issue with yarn.lock * Fix extra padding at bottom of promo * Add tests for utm params * Add test for switching testing type when both configured * Fix changelog version

Merge branch 'develop' into mikep/589-testing-type-switch

4009213

marktnoonan reviewed Jun 1, 2023

View reviewed changes

packages/app/src/specs/TestingTypePromo.vue Outdated Show resolved Hide resolved

marktnoonan added 6 commits June 5, 2023 13:10

Merge branch 'develop' into mikep/589-testing-type-switch

29546a3

fix flaky test

33766bf

update tests for responsive text changes

32971d6

update changelog

aa4dde8

restore spacing between header items

ad808b8

Merge branch 'develop' into mikep/589-testing-type-switch

f5bbb2d

marktnoonan added 3 commits June 5, 2023 14:36

Merge branch 'develop' into mikep/589-testing-type-switch

b17c262

avoid occasional flash of promo on page load

54cb1a0

update text handling

22d6f5a

astone123 reviewed Jun 5, 2023

View reviewed changes

packages/app/src/composables/useTestingType.ts Show resolved Hide resolved

astone123 self-requested a review June 5, 2023 20:13

astone123 approved these changes Jun 5, 2023

View reviewed changes

astone123 and others added 5 commits June 5, 2023 15:25

fix types and tests

c6b40b4

Update packages/app/src/specs/SpecsList.vue

890e021

Co-authored-by: Stokes Player <[email protected]>

Merge branch 'develop' into mikep/589-testing-type-switch

089df97

updated final e2e bullet

19cf7a6

fix question mark icon flashing

707350f

text formatting

82d0ace

remove superfluous snapshot [skip ci]

59df96a

lmiller1990 merged commit 25582dd into develop Jun 6, 2023

lmiller1990 deleted the mikep/589-testing-type-switch branch June 6, 2023 02:02

astone123 mentioned this pull request Jun 6, 2023

chore: stabilize side navigation bar during loading and switching testing types #26953

Merged

cypress-bot bot locked as resolved and limited conversation to collaborators Jun 7, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Implement testing type switch promos #26894

feat: Implement testing type switch promos #26894

mike-plummer commented May 31, 2023 •

edited by astone123

Loading

cypress bot commented May 31, 2023 •

edited

Loading

astone123 commented Jun 1, 2023

mike-plummer commented Jun 1, 2023

astone123 left a comment

mike-plummer commented Jun 1, 2023 •

edited

Loading

astone123 commented Jun 1, 2023

mike-plummer commented Jun 1, 2023

marktnoonan commented Jun 1, 2023

astone123 commented Jun 1, 2023

marktnoonan commented Jun 1, 2023

astone123 commented Jun 5, 2023 •

edited

Loading

astone123 left a comment

astone123 commented Jun 5, 2023

lmiller1990 commented Jun 6, 2023

lmiller1990 commented Jun 6, 2023

lmiller1990 commented Jun 6, 2023 •

edited

Loading

lmiller1990 commented Jun 6, 2023

cypress-bot bot commented Jun 7, 2023

feat: Implement testing type switch promos #26894

feat: Implement testing type switch promos #26894

Conversation

mike-plummer commented May 31, 2023 • edited by astone123 Loading

Additional details

If other testing type is configured

If other testing type is not configured

Steps to test

How has the user experience changed?

PR Tasks

cypress bot commented May 31, 2023 • edited Loading

5 flaky tests on run #47125 ↗︎

astone123 commented Jun 1, 2023

mike-plummer commented Jun 1, 2023

astone123 left a comment

Choose a reason for hiding this comment

mike-plummer commented Jun 1, 2023 • edited Loading

astone123 commented Jun 1, 2023

mike-plummer commented Jun 1, 2023

marktnoonan commented Jun 1, 2023

astone123 commented Jun 1, 2023

marktnoonan commented Jun 1, 2023

astone123 commented Jun 5, 2023 • edited Loading

astone123 left a comment

Choose a reason for hiding this comment

astone123 commented Jun 5, 2023

lmiller1990 commented Jun 6, 2023

lmiller1990 commented Jun 6, 2023

lmiller1990 commented Jun 6, 2023 • edited Loading

lmiller1990 commented Jun 6, 2023

cypress-bot bot commented Jun 7, 2023

mike-plummer commented May 31, 2023 •

edited by astone123

Loading

cypress bot commented May 31, 2023 •

edited

Loading

mike-plummer commented Jun 1, 2023 •

edited

Loading

astone123 commented Jun 5, 2023 •

edited

Loading

lmiller1990 commented Jun 6, 2023 •

edited

Loading