feat: Component Testing banner #26625

mike-plummer · 2023-04-28T18:10:53Z

Closes Component Testing banner #26511

Additional details

Note: The majority of files touched in this PR are just renaming the loginConnectStore to userProjectStateStore

Creating a new banner to help inform e2e users about component testing. This new banner will display under the following conditions:

No higher-priority banners to display (connection warnings, existing ACI banners, etc)
Cypress use > 4 days
At least 2 days since a previous banner of another type (if any) has been dismissed
At least 1 day since the Nav/CI popup has displayed (if it was previously shown)
Currently in e2e mode
CT is not configured (no component key in config)
At least one supported CT framework exists (anything auto-detected by the onboarding wizard)

Steps to test

Create a new project, name it distinctively (eg ct-banner). Add dependencies that would satisfy at least one of our auto-detected frameworks - for example, next or react + webpack.
Open project in Cypress into e2e mode, scaffold example specs, and close Cypress.
Open Cypress app data location, find project's state.json file (on Mac this will live at ~/Library/Application\ Support/Cypress/cy/production/projects/{project}/state.json, or use Developer Tools > View App Data menu item from launchpad). It should look like this:

{
  "firstOpened": 1682966839869,
  "lastOpened": 1682966839869,
  "lastProjectId": null,
  "specFilter": ""
}

Modify the firstOpened timestamp to a value >= 4 days ago (easy way is to delete the first digit) and save
Reopen project into e2e mode - an ACI banner should display (which one depends on whether you're logged in - doesn't matter for this procedure).
- Refresh the page, verify that banner still displays.
- Close the banner using the "X".
- Refresh and verify no banner displays.
- Close Cypress
state.json file should now look like this - adjust the dismissed timestamp to a value >= 2 days ago

{
  "firstOpened": 682966839869,
  "lastOpened": 1682966881904,
  "lastProjectId": null,
  "specFilter": "",
  "banners": {
    "aci_082022_connectProject": {
      "lastShown": 1682966943916,
      "dismissed": 682967079384
    }
  }
}

Reopen project into e2e mode, new CT Available banner should display
- Banner should detect correct framework, use correct name & logo
- state.json should now look like this:

	{
  "firstOpened": 682966839869,
  "lastOpened": 1682967155424,
  "lastProjectId": null,
  "specFilter": "",
  "banners": {
    "aci_082022_connectProject": {
      "lastShown": 1682966943916,
      "dismissed": 682967079384
    },
    "ct_052023_available": {
      "lastShown": 1682967157281
    }
  }
}

Click "Quick Setup" - verify you are sent into the CT setup flow in launchpad. Go back to e2e mode
Click "Read the docs" - verify CT docs page is opened
Click "Not interested..." link
- Verify survey is opened.
- Verify that banner is now hidden in Cypress. Refresh page, verify banner is still not shown.
Close Cypress, edit state.json to remove dismissed key from ct_052023_available banner. Reopen project
Banner should once again show. Click "X" to dismiss, verify banner is hidden and does not reappear on page refresh.
Extra credit - by deleting the dismissed key and reopening you can validate the various conditions outlined above for when the banner should display/not display (CT not already configured, matching framework detected, etc)

How has the user experience changed?

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-28T19:41:03Z

4 flaky tests on run #46056 ↗︎

0	5193	77	0	4

Details:

Fix button size
Project: cypress	Commit: `c4db763a28`
Status: Passed	Duration: 13:22 💡
Started: May 5, 2023 8:14 PM	Ended: May 5, 2023 8:27 PM

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`

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.}

* Hook up switch to CT mutation * Persist dismissal on survey click * add link placeholders

* Support new endpoint for identifiable events * Collect event when button used in CT banner * Refactor machine id into coreData so it can be queried using gql

packages/app/src/specs/banners/ComponentTestingAvailableBanner.vue

lmiller1990 · 2023-05-04T02:30:54Z

packages/app/package.json

@@ -20,8 +20,9 @@
  },
  "dependencies": {},
  "devDependencies": {
-    "@cypress-design/vue-icon": "0.20.0",
-    "@cypress-design/vue-statusicon": "0.3.0",
+    "@cypress-design/vue-button": "0.9.2",


lmiller1990

Minor comments, I will test it now.

lmiller1990 · 2023-05-04T02:37:20Z

packages/app/src/specs/banners/TrackedBanner.vue

-onMounted(() => {
-  updateBannerState('lastShown')
+onMounted(async () => {
+  await updateBannerState('lastShown')


I don't think this await actually does anything - the hooks are async, onMounted will run the execution will go on without waiting. Was this just a style change?

Mostly stylistic - I made the updateBannerSync function async, so flowed the await up through all usages just so the Promise-nature isn't lost. Probably a no-op for now, but if additional logic is added to onMounted in the future it will at least execute in order within the callback

lmiller1990 · 2023-05-04T02:38:53Z

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

@@ -100,6 +100,14 @@ export class WizardActions {

    this.resetWizard()

+    await this.initializeFramework()


Is this somehow related to this feature, or is it just a drive by bug fix?

I pulled out the new initializeFramework action so we could trigger the existing "framework & bundler detection" logic while in e2e mode without touching other wizard stuff. I probably could have just used the existing initialize action since all it does is a reset then this logic, but I wanted to have a clean action in case there were updates to the wizard initialization flow in the future that we wouldn't want to fire while in e2e

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

lmiller1990 · 2023-05-04T03:01:37Z

It worked

I found it was not working - I forgot to do yarn install in my new project. The project must not just have the deps in package.json but also have installed them.

I did the full workflow and got this, which is expected, since I don't have a CLI installed in the project

Looks like it works to me! Curious to track how many people will see this banner.

warrensplayer

I am still working on actually setting up a project of my own to test, but wanted to share these comments.

The big question I have is about our own monorepo. When I open the App or Launchpad packages in E2E mode then I get a banner to set up Angular. (see screenshot). Is it detecting the Angular in our dependencies from our CT mount adaptor? Should the logic be more specific on what it is searching for monorepos? Should we test this via some system tests to make sure it is giving accurate information with different types of project setups?

packages/app/src/specs/SpecsListBanners.vue

warrensplayer · 2023-05-04T00:10:46Z

packages/app/package.json

+    "@cypress-design/vue-icon": "0.22.1",
+    "@cypress-design/vue-statusicon": "0.4.3",


Why were vue-icon and vue-statusicon updated with this PR? Are these versions that we should have upgraded with the move to Tailwind?

Bumped those as part of troubleshooting the issues with @cypress-design/vue-button, and now that we're pulling in the latest @cypress-design/css I figured we'd want to keep the updates in case there were cross-package compatibility issues

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

packages/app/src/specs/banners/ComponentTestingAvailableBanner.vue

* Encapsulate status determination inside `PromptManager` * Use existing `isCTConfigured` flag to standardize detection logic * Fix incorrect icon rotation in Alert header

mike-plummer · 2023-05-04T18:27:26Z

@warrensplayer Made a small update to use an existing isCTConfigured flag rather than deriving my own - after that change I can't reproduce the banner showing up when CT is already set up like you described. LMK if you still see it

warrensplayer · 2023-05-04T19:51:07Z

@warrensplayer Made a small update to use an existing isCTConfigured flag rather than deriving my own - after that change I can't reproduce the banner showing up when CT is already set up like you described. LMK if you still see it

Looks like that fixed it for me as well.

lmiller1990

Good catch @warrensplayer - we definitely don't want to recommending configuring CT if it is already configured.

The rest of this looks good to me!

warrensplayer

All of my concerns were addressed

marktnoonan

Whoops I just noticed a comment I had in draft. I haven't gone through the code in detail but based on the other reviews I don't see a need to, so just a comment about the button size.

packages/app/src/specs/banners/ComponentTestingAvailableBanner.vue

cypress-bot · 2023-05-12T17:36:43Z

Released in 12.12.0.

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

mike-plummer added 13 commits April 27, 2023 08:04

feat: Component Testing banner

67ff22c

Rename store, split cloud vs project states

1f31e84

Support fallback specslist banner flow

6fdfa73

Merge branch 'develop' into mikep/26511-ct-banner

d5ba461

Test updates

812b697

Fix test

cb2321e

Fix icon resolution, trigger framework detection

b354e4f

Fix banner condition

2401d6c

Implement 2 day restriction

a2fa465

Merge branch 'develop' into mikep/26511-ct-banner

86a8eba

Add changelog entry

3edc399

trigger ci

21bbfc0

run ci

9185003

mike-plummer and others added 10 commits May 1, 2023 08:40

Fix test

d4a664a

Updates

960c912

* Hook up switch to CT mutation * Persist dismissal on survey click * add link placeholders

Capture bundler & machine_id, add utm params

8c9ea3f

Merge branch 'develop' into mikep/26511-ct-banner

e9f5f02

Updates

6025c4c

* Support new endpoint for identifiable events * Collect event when button used in CT banner * Refactor machine id into coreData so it can be queried using gql

Merge branch 'develop' into mikep/26511-ct-banner

2988707

run ci

5b13c70

Fix ts

d4442b4

run ci

960d6ed

Update test

68a76e2

lmiller1990 changed the title ~~feat: Component Testing banner~~ feat: [No Merge, pending design updates] Component Testing banner May 2, 2023

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

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

mike-plummer added 3 commits May 2, 2023 16:25

Fix base render test

274373e

Update UX, record events on links

1b97952

Merge branch 'develop' into mikep/26511-ct-banner

6022768

marktnoonan reviewed May 3, 2023

View reviewed changes

packages/app/src/specs/banners/ComponentTestingAvailableBanner.vue Outdated Show resolved Hide resolved

mike-plummer and others added 4 commits May 3, 2023 13:21

Use design system button, fix link styles

3b6336a

Update event endpoint, update design system deps

e173d41

fix tailwind watchers

1799108

Merge branch 'develop' into mikep/26511-ct-banner

82b643f

lmiller1990 reviewed May 4, 2023

View reviewed changes

warrensplayer reviewed May 4, 2023

View reviewed changes

mike-plummer added 3 commits May 4, 2023 09:43

Address comments from review

dce75c7

* Encapsulate status determination inside `PromptManager` * Use existing `isCTConfigured` flag to standardize detection logic * Fix incorrect icon rotation in Alert header

Merge branch 'develop' into mikep/26511-ct-banner

25631e4

Use import instead of require

7bf73c6

mike-plummer changed the title ~~feat: [No Merge, pending design updates] Component Testing banner~~ feat: Component Testing banner May 4, 2023

lmiller1990 self-requested a review May 4, 2023 21:51

lmiller1990 approved these changes May 4, 2023

View reviewed changes

warrensplayer approved these changes May 5, 2023

View reviewed changes

marktnoonan reviewed May 5, 2023

View reviewed changes

packages/app/src/specs/banners/ComponentTestingAvailableBanner.vue Show resolved Hide resolved

Fix button size

c4db763

mike-plummer merged commit adc4c5e into develop May 5, 2023
76 of 78 checks passed

mike-plummer deleted the mikep/26511-ct-banner branch May 5, 2023 21:07

cypress-bot bot locked as resolved and limited conversation to collaborators May 12, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Component Testing banner #26625

feat: Component Testing banner #26625

mike-plummer commented Apr 28, 2023 •

edited

cypress bot commented Apr 28, 2023 •

edited

lmiller1990 May 4, 2023

lmiller1990 left a comment

lmiller1990 May 4, 2023

mike-plummer May 4, 2023

lmiller1990 May 4, 2023

mike-plummer May 4, 2023

lmiller1990 commented May 4, 2023

warrensplayer left a comment

warrensplayer May 4, 2023

mike-plummer May 4, 2023

mike-plummer commented May 4, 2023

warrensplayer commented May 4, 2023

lmiller1990 left a comment

warrensplayer left a comment

marktnoonan left a comment

cypress-bot bot commented May 12, 2023

		@@ -100,6 +100,14 @@ export class WizardActions {

		this.resetWizard()

		await this.initializeFramework()

		"@cypress-design/vue-icon": "0.22.1",
		"@cypress-design/vue-statusicon": "0.4.3",

feat: Component Testing banner #26625

feat: Component Testing banner #26625

Conversation

mike-plummer commented Apr 28, 2023 • edited

Additional details

Steps to test

How has the user experience changed?

PR Tasks

cypress bot commented Apr 28, 2023 • edited

4 flaky tests on run #46056 ↗︎

lmiller1990 May 4, 2023

Choose a reason for hiding this comment

lmiller1990 left a comment

Choose a reason for hiding this comment

lmiller1990 May 4, 2023

Choose a reason for hiding this comment

mike-plummer May 4, 2023

Choose a reason for hiding this comment

lmiller1990 May 4, 2023

Choose a reason for hiding this comment

mike-plummer May 4, 2023

Choose a reason for hiding this comment

lmiller1990 commented May 4, 2023

warrensplayer left a comment

Choose a reason for hiding this comment

warrensplayer May 4, 2023

Choose a reason for hiding this comment

mike-plummer May 4, 2023

Choose a reason for hiding this comment

mike-plummer commented May 4, 2023

warrensplayer commented May 4, 2023

lmiller1990 left a comment

Choose a reason for hiding this comment

warrensplayer left a comment

Choose a reason for hiding this comment

marktnoonan left a comment

Choose a reason for hiding this comment

cypress-bot bot commented May 12, 2023

mike-plummer commented Apr 28, 2023 •

edited

cypress bot commented Apr 28, 2023 •

edited