feat: Component Testing banner (#26625)

Co-authored-by: elevatebart <bart@cypress.io>

cli/CHANGELOG.md

@@ -3,6 +3,10 @@
 
 _Released 05/09/2023 (PENDING)_
 
+**Features:**
+
+- Added a new informational banner to help get started with component testing from an existing end-to-end test suite. Addresses [#26511](https://github.com/cypress-io/cypress/issues/26511).
+
 **Bugfixes:**
 
 - Fixed an issue in Electron where devtools gets out of sync with the DOM occasionally. Addresses [#15932](https://github.com/cypress-io/cypress/issues/15932).

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",
+    "@cypress-design/vue-icon": "0.22.1",
+    "@cypress-design/vue-statusicon": "0.4.3",
     "@graphql-typed-document-node/core": "^3.1.0",
     "@headlessui/vue": "1.4.0",
     "@iconify/iconify": "2.1.2",

packages/app/src/composables/useRelevantRun.ts

@@ -1,6 +1,6 @@
 import { gql, useSubscription } from '@urql/vue'
 import { Debug_RelevantRuns_SubscriptionDocument, Sidebar_RelevantRuns_SubscriptionDocument } from '@packages/app/src/generated/graphql'
-import { useLoginConnectStore } from '@packages/frontend-shared/src/store/login-connect-store'
+import { useUserProjectStatusStore } from '@packages/frontend-shared/src/store/user-project-status-store'
 
 import { computed } from 'vue'
 import { uniq } from 'lodash'
@@ -43,10 +43,10 @@ gql`
 `
 
 export function useRelevantRun (location: 'SIDEBAR' | 'DEBUG') {
-  const loginConnectStore = useLoginConnectStore()
+  const userProjectStatusStore = useUserProjectStatusStore()
 
   const shouldPause = computed(() => {
-    return !loginConnectStore.project.isProjectConnected
+    return !userProjectStatusStore.project.isProjectConnected
   })
 
   //Switch the subscription query depending on where it was registered from

packages/app/src/debug/DebugContainer.cy.tsx

@@ -1,7 +1,7 @@
 import { DebugSpecListGroupsFragment, DebugSpecListSpecFragment, DebugSpecListTestsFragment, DebugSpecsFragment, DebugSpecsFragmentDoc, UseCohorts_DetermineCohortDocument } from '../generated/graphql-test'
 import DebugContainer from './DebugContainer.vue'
 import { defaultMessages } from '@cy/i18n'
-import { useLoginConnectStore } from '@packages/frontend-shared/src/store/login-connect-store'
+import { useUserProjectStatusStore } from '@packages/frontend-shared/src/store/user-project-status-store'
 import { specsList } from './utils/DebugMapping'
 import { CloudRunStubs, createCloudRun } from '@packages/graphql/test/stubCloudTypes'
 import { DEBUG_SLIDESHOW } from './utils/constants'
@@ -51,31 +51,31 @@ describe('<DebugContainer />', () => {
     }
 
     it('shows not logged in', () => {
-      const loginConnectStore = useLoginConnectStore()
+      const userProjectStatusStore = useUserProjectStatusStore()
 
-      loginConnectStore.setHasInitiallyLoaded()
+      userProjectStatusStore.setHasInitiallyLoaded()
 
       validateEmptyState([defaultMessages.debugPage.emptyStates.connectToCypressCloud, defaultMessages.debugPage.emptyStates.debugDirectlyInCypress, defaultMessages.debugPage.emptyStates.notLoggedInTestMessage])
       cy.findByRole('button', { name: 'Connect to Cypress Cloud' }).should('be.visible')
     })
 
     it('is logged in with no project', () => {
-      const loginConnectStore = useLoginConnectStore()
+      const userProjectStatusStore = useUserProjectStatusStore()
 
-      loginConnectStore.setUserFlag('isLoggedIn', true)
-      loginConnectStore.setProjectFlag('isProjectConnected', false)
-      loginConnectStore.setHasInitiallyLoaded()
+      userProjectStatusStore.setUserFlag('isLoggedIn', true)
+      userProjectStatusStore.setProjectFlag('isProjectConnected', false)
+      userProjectStatusStore.setHasInitiallyLoaded()
 
       validateEmptyState([defaultMessages.debugPage.emptyStates.debugDirectlyInCypress, defaultMessages.debugPage.emptyStates.reviewRerunAndDebug, defaultMessages.debugPage.emptyStates.noProjectTestMessage])
       cy.findByRole('button', { name: 'Connect a Cypress Cloud project' }).should('be.visible')
     })
 
     it('has no runs', () => {
-      const loginConnectStore = useLoginConnectStore()
+      const userProjectStatusStore = useUserProjectStatusStore()
 
-      loginConnectStore.setUserFlag('isLoggedIn', true)
-      loginConnectStore.setProjectFlag('isProjectConnected', true)
-      loginConnectStore.setHasInitiallyLoaded()
+      userProjectStatusStore.setUserFlag('isLoggedIn', true)
+      userProjectStatusStore.setProjectFlag('isProjectConnected', true)
+      userProjectStatusStore.setHasInitiallyLoaded()
       cy.mountFragment(DebugSpecsFragmentDoc, {
         variableTypes: DebugSpecVariableTypes,
         variables: defaultVariables,
@@ -87,11 +87,11 @@ describe('<DebugContainer />', () => {
     })
 
     it('errors', () => {
-      const loginConnectStore = useLoginConnectStore()
+      const userProjectStatusStore = useUserProjectStatusStore()
 
-      loginConnectStore.setUserFlag('isLoggedIn', true)
-      loginConnectStore.setProjectFlag('isProjectConnected', true)
-      loginConnectStore.setHasInitiallyLoaded()
+      userProjectStatusStore.setUserFlag('isLoggedIn', true)
+      userProjectStatusStore.setProjectFlag('isProjectConnected', true)
+      userProjectStatusStore.setHasInitiallyLoaded()
       cy.mountFragment(DebugSpecsFragmentDoc, {
         variableTypes: DebugSpecVariableTypes,
         variables: defaultVariables,
@@ -105,11 +105,11 @@ describe('<DebugContainer />', () => {
 
   describe('run states', { viewportWidth: 900 }, () => {
     beforeEach(() => {
-      const loginConnectStore = useLoginConnectStore()
+      const userProjectStatusStore = useUserProjectStatusStore()
 
-      loginConnectStore.setUserFlag('isLoggedIn', true)
-      loginConnectStore.setProjectFlag('isProjectConnected', true)
-      loginConnectStore.setHasInitiallyLoaded()
+      userProjectStatusStore.setUserFlag('isLoggedIn', true)
+      userProjectStatusStore.setProjectFlag('isProjectConnected', true)
+      userProjectStatusStore.setHasInitiallyLoaded()
     })
 
     function mountTestRun (runName: string) {
@@ -229,14 +229,14 @@ describe('<DebugContainer />', () => {
   })
 
   describe('when logged in and connected', () => {
-    let loginConnectStore
+    let userProjectStatusStore
 
     beforeEach(() => {
-      loginConnectStore = useLoginConnectStore()
+      userProjectStatusStore = useUserProjectStatusStore()
 
-      loginConnectStore.setUserFlag('isLoggedIn', true)
-      loginConnectStore.setProjectFlag('isProjectConnected', true)
-      loginConnectStore.setHasInitiallyLoaded()
+      userProjectStatusStore.setUserFlag('isLoggedIn', true)
+      userProjectStatusStore.setProjectFlag('isProjectConnected', true)
+      userProjectStatusStore.setHasInitiallyLoaded()
     })
 
     it('renders running run', () => {

packages/app/src/debug/DebugContainer.vue

@@ -4,16 +4,16 @@
       <NoInternetConnection v-if="!online">
         {{ t('launchpadErrors.noInternet.connectProject') }}
       </NoInternetConnection>
-      <DebugLoading v-else-if="!loginConnectStore.hasInitiallyLoaded || loginConnectStore.project.isProjectConnected && isLoading" />
+      <DebugLoading v-else-if="!userProjectStatusStore.hasInitiallyLoaded || userProjectStatusStore.project.isProjectConnected && isLoading" />
       <DebugError
         v-else-if="showError"
       />
       <DebugNotLoggedIn
-        v-else-if="!loginConnectStore.user.isLoggedIn"
+        v-else-if="!userProjectStatusStore.user.isLoggedIn"
         data-cy="debug-empty"
       />
       <DebugNoProject
-        v-else-if="!loginConnectStore.project.isProjectConnected"
+        v-else-if="!userProjectStatusStore.project.isProjectConnected"
         data-cy="debug-empty"
       />
       <DebugNoRuns
@@ -85,7 +85,7 @@
 import { gql } from '@urql/vue'
 import { computed } from 'vue'
 import type { CloudRunStatus, DebugSpecsFragment, TestingTypeEnum } from '../generated/graphql'
-import { useLoginConnectStore } from '@packages/frontend-shared/src/store/login-connect-store'
+import { useUserProjectStatusStore } from '@packages/frontend-shared/src/store/user-project-status-store'
 import NoInternetConnection from '@packages/frontend-shared/src/components/NoInternetConnection.vue'
 import DebugLoading from '../debug/empty/DebugLoading.vue'
 import DebugPageHeader from './DebugPageHeader.vue'
@@ -205,7 +205,7 @@ const props = withDefaults(defineProps<{
   currentCommitInfo: undefined,
 })
 
-const loginConnectStore = useLoginConnectStore()
+const userProjectStatusStore = useUserProjectStatusStore()
 
 const cloudProject = computed(() => {
   return props.gql?.currentProject?.cloudProject?.__typename === 'CloudProject'

packages/app/src/debug/empty/DebugEmptyStates.cy.tsx

@@ -4,7 +4,7 @@ import DebugNoRuns from './DebugNoRuns.vue'
 import DebugLoading from './DebugLoading.vue'
 import DebugError from './DebugError.vue'
 import DebugEmptyView from './DebugEmptyView.vue'
-import { useLoginConnectStore } from '@packages/frontend-shared/src/store/login-connect-store'
+import { useUserProjectStatusStore } from '@packages/frontend-shared/src/store/user-project-status-store'
 import { DebugEmptyView_RecordEventDocument, DebugEmptyView_SetPreferencesDocument, UseCohorts_DetermineCohortDocument, _DebugEmptyViewFragment, _DebugEmptyViewFragmentDoc } from '../../generated/graphql-test'
 import { DEBUG_SLIDESHOW } from '../utils/constants'
 
@@ -77,10 +77,10 @@ describe('Debug page empty states', () => {
 
   context('not logged in', () => {
     it('renders', () => {
-      const loginConnectStore = useLoginConnectStore()
+      const userProjectStatusStore = useUserProjectStatusStore()
 
       // We need to set isLoggedIn so that CloudConnectButton shows the correct state
-      loginConnectStore.setUserFlag('isLoggedIn', false)
+      userProjectStatusStore.setUserFlag('isLoggedIn', false)
 
       mountWithGql(<DebugNotLoggedIn />)
 
@@ -90,18 +90,18 @@ describe('Debug page empty states', () => {
     })
 
     it('sends record event upon seeing slideshow', () => {
-      useLoginConnectStore().setUserFlag('isLoggedIn', false)
+      useUserProjectStatusStore().setUserFlag('isLoggedIn', false)
       mountWithGql(<DebugNotLoggedIn />, { debugSlideshowComplete: false })
       cy.get('@recordEvent').should('have.been.calledWithMatch', { campaign: DEBUG_SLIDESHOW.campaigns.login, messageId: Cypress.sinon.match.string, medium: DEBUG_SLIDESHOW.medium, cohort: Cypress.sinon.match(/A|B/) })
     })
   })
 
   context('no project', () => {
     it('renders', () => {
-      const loginConnectStore = useLoginConnectStore()
+      const userProjectStatusStore = useUserProjectStatusStore()
 
       // We need to set isLoggedIn so that CloudConnectButton shows the correct state
-      loginConnectStore.setUserFlag('isLoggedIn', true)
+      userProjectStatusStore.setUserFlag('isLoggedIn', true)
 
       mountWithGql(<DebugNoProject />)
 
@@ -115,7 +115,7 @@ describe('Debug page empty states', () => {
     })
 
     it('sends record event upon seeing slideshow', () => {
-      useLoginConnectStore().setUserFlag('isLoggedIn', false)
+      useUserProjectStatusStore().setUserFlag('isLoggedIn', false)
       mountWithGql(<DebugNoProject />, { debugSlideshowComplete: false })
       cy.get('@recordEvent').should('have.been.calledWithMatch', { campaign: DEBUG_SLIDESHOW.campaigns.connectProject, messageId: Cypress.sinon.match.string, medium: DEBUG_SLIDESHOW.medium, cohort: Cypress.sinon.match(/A|B/) })
     })
@@ -131,7 +131,7 @@ describe('Debug page empty states', () => {
     })
 
     it('sends record event upon seeing slideshow', () => {
-      useLoginConnectStore().setUserFlag('isLoggedIn', false)
+      useUserProjectStatusStore().setUserFlag('isLoggedIn', false)
       mountWithGql(<DebugNoRuns />, { debugSlideshowComplete: false })
       cy.get('@recordEvent').should('have.been.calledWithMatch', { campaign: DEBUG_SLIDESHOW.campaigns.recordRun, messageId: Cypress.sinon.match.string, medium: DEBUG_SLIDESHOW.medium, cohort: Cypress.sinon.match(/A|B/) })
     })
@@ -184,7 +184,7 @@ describe('Debug page empty states', () => {
     }
 
     it('renders slideshow if debugSlideshowComplete = false', () => {
-      useLoginConnectStore().setUserFlag('isLoggedIn', false)
+      useUserProjectStatusStore().setUserFlag('isLoggedIn', false)
       mountWithGql(<DebugNoRuns />, { cohort: 'B', debugSlideshowComplete: false })
       cy.get('@recordEvent').should('have.been.calledWithMatch', { campaign: DEBUG_SLIDESHOW.campaigns.recordRun, messageId: Cypress.sinon.match.string, medium: DEBUG_SLIDESHOW.medium, cohort: Cypress.sinon.match(/A|B/) })
       moveThroughSlideshow({ cohort: 'B', percy: true })
@@ -198,7 +198,7 @@ describe('Debug page empty states', () => {
     })
 
     it('renders default empty state if debugSlideshowComplete = true', () => {
-      useLoginConnectStore().setUserFlag('isLoggedIn', false)
+      useUserProjectStatusStore().setUserFlag('isLoggedIn', false)
       mountWithGql(<DebugNoRuns />, { cohort: 'A', debugSlideshowComplete: true })
       cy.findByTestId('debug-default-empty-state')
 

packages/app/src/navigation/SidebarNavigation.cy.tsx

@@ -3,7 +3,7 @@ import { defaultMessages } from '@cy/i18n'
 import { CloudRunStatus, SidebarNavigationFragment, SidebarNavigationFragmentDoc, SideBarNavigation_SetPreferencesDocument } from '../generated/graphql-test'
 import { CloudRunStubs } from '@packages/graphql/test/stubCloudTypes'
 import { cloneDeep } from 'lodash'
-import { useLoginConnectStore } from '@packages/frontend-shared/src/store/login-connect-store'
+import { useUserProjectStatusStore } from '@packages/frontend-shared/src/store/user-project-status-store'
 
 function mountComponent (props: { initialNavExpandedVal?: boolean, cloudProject?: { status: CloudRunStatus, numFailedTests: number }, isLoading?: boolean, online?: boolean} = {}) {
   const withDefaults = { initialNavExpandedVal: false, isLoading: false, online: true, ...props }
@@ -186,9 +186,9 @@ describe('SidebarNavigation', () => {
     })
 
     it('renders no badge when query is loading', () => {
-      const loginConnectStore = useLoginConnectStore()
+      const userProjectStatusStore = useUserProjectStatusStore()
 
-      loginConnectStore.setProjectFlag('isProjectConnected', true)
+      userProjectStatusStore.setProjectFlag('isProjectConnected', true)
 
       mountComponent({ isLoading: true })
 

packages/app/src/navigation/SidebarNavigation.vue

@@ -108,7 +108,7 @@ import { useI18n } from '@cy/i18n'
 import { useRoute } from 'vue-router'
 import SidebarNavigationHeader from './SidebarNavigationHeader.vue'
 import { useDebounceFn, useWindowSize } from '@vueuse/core'
-import { useLoginConnectStore } from '@packages/frontend-shared/src/store/login-connect-store'
+import { useUserProjectStatusStore } from '@packages/frontend-shared/src/store/user-project-status-store'
 
 const { t } = useI18n()
 
@@ -162,7 +162,7 @@ const props = defineProps<{
 
 const NAV_EXPAND_MIN_SCREEN_WIDTH = 1024
 
-const loginConnectStore = useLoginConnectStore()
+const userProjectStatusStore = useUserProjectStatusStore()
 
 const debugBadge = ref<Badge | undefined>()
 
@@ -171,7 +171,7 @@ const setDebugBadge = useDebounceFn((badge) => {
 }, 500)
 
 watchEffect(() => {
-  if (props.isLoading && loginConnectStore.project.isProjectConnected) {
+  if (props.isLoading && userProjectStatusStore.project.isProjectConnected) {
     setDebugBadge(undefined)
 
     return

packages/app/src/runs/CloudConnectButton.cy.tsx

@@ -1,5 +1,5 @@
 import CloudConnectButton from './CloudConnectButton.vue'
-import { useLoginConnectStore } from '@packages/frontend-shared/src/store/login-connect-store'
+import { useUserProjectStatusStore } from '@packages/frontend-shared/src/store/user-project-status-store'
 
 describe('<CloudConnectButton />', { viewportHeight: 60, viewportWidth: 400 }, () => {
   context('not logged in ', () => {
@@ -11,12 +11,12 @@ describe('<CloudConnectButton />', { viewportHeight: 60, viewportWidth: 400 }, (
   })
 
   context('logged in', () => {
-    let loginConnectStore
+    let userProjectStatusStore
 
     beforeEach(() => {
-      loginConnectStore = useLoginConnectStore()
+      userProjectStatusStore = useUserProjectStatusStore()
 
-      loginConnectStore.setUserFlag('isLoggedIn', true)
+      userProjectStatusStore.setUserFlag('isLoggedIn', true)
     })
 
     it('show project connect if not connected', () => {
@@ -26,7 +26,7 @@ describe('<CloudConnectButton />', { viewportHeight: 60, viewportWidth: 400 }, (
     })
 
     it('uses the store to open the Login Connect modal', () => {
-      loginConnectStore.openLoginConnectModal = cy.spy().as('openLoginConnectModal')
+      userProjectStatusStore.openLoginConnectModal = cy.spy().as('openLoginConnectModal')
       cy.mount(() => <div class="h-screen"><CloudConnectButton utmMedium="testing" /></div>)
 
       cy.contains('button', 'Connect a Cypress Cloud project').click()
@@ -35,7 +35,7 @@ describe('<CloudConnectButton />', { viewportHeight: 60, viewportWidth: 400 }, (
     })
 
     it('uses the store to open the Login Connect modal with utmContent', () => {
-      loginConnectStore.openLoginConnectModal = cy.spy().as('openLoginConnectModal')
+      userProjectStatusStore.openLoginConnectModal = cy.spy().as('openLoginConnectModal')
       cy.mount(() => <div class="h-screen"><CloudConnectButton utmMedium="testing" utmContent="content"/></div>)
 
       cy.contains('button', 'Connect a Cypress Cloud project').click()

packages/app/src/runs/CloudConnectButton.vue

@@ -15,9 +15,9 @@ import ChainIcon from '~icons/cy/chain-link_x16.svg'
 import CypressIcon from '~icons/cy/cypress-logo_x16.svg'
 import Button from '@cy/components/Button.vue'
 import { useI18n } from '@cy/i18n'
-import { useLoginConnectStore } from '@packages/frontend-shared/src/store/login-connect-store'
+import { useUserProjectStatusStore } from '@packages/frontend-shared/src/store/user-project-status-store'
 
-const { openLoginConnectModal, user } = useLoginConnectStore()
+const { openLoginConnectModal, user } = useUserProjectStatusStore()
 
 const { t } = useI18n()
 

packages/app/src/runs/RunsContainer.cy.tsx

@@ -1,7 +1,7 @@
 import RunsContainer from './RunsContainer.vue'
 import { RunsContainerFragmentDoc } from '../generated/graphql-test'
 import { CloudUserStubs } from '@packages/graphql/test/stubCloudTypes'
-import { useLoginConnectStore } from '@packages/frontend-shared/src/store/login-connect-store'
+import { useUserProjectStatusStore } from '@packages/frontend-shared/src/store/user-project-status-store'
 
 import { defaultMessages } from '@cy/i18n'
 
@@ -16,9 +16,9 @@ describe('<RunsContainer />', { keystrokeDelay: 0 }, () => {
 
   context('when the user is logged in', () => {
     beforeEach(() => {
-      const loginConnectStore = useLoginConnectStore()
+      const userProjectStatusStore = useUserProjectStatusStore()
 
-      loginConnectStore.setUserFlag('isLoggedIn', true)
+      userProjectStatusStore.setUserFlag('isLoggedIn', true)
     })
 
     it('renders with expected runs if there is a cloud project id', () => {