feat: debug page tutorial slideshow (#25886)

* feat: debug page tutorial slideshow

* fix tests, add changelog entry

* address feedback

* update changelog

cli/CHANGELOG.md

@@ -7,6 +7,7 @@ _Released 03/1/2023 (PENDING)_
 
 - It is now possible to set `hostOnly` cookies with [`cy.setCookie()`](https://docs.cypress.io/api/commands/setcookie) for a given domain. Addresses [#16856](https://github.com/cypress-io/cypress/issues/16856) and [#17527](https://github.com/cypress-io/cypress/issues/17527).
 - Added a Public API for third party component libraries to define a Framework Definition, embedding their library into the Cypress onboarding workflow. Learn more [here](https://docs.cypress.io/guides/component-testing/third-party-definitions). Implemented in [#25780](https://github.com/cypress-io/cypress/pull/25780) and closes [#25638](https://github.com/cypress-io/cypress/issues/25638).
+- Added a Debug Page tutorial slideshow for projects that are not connected to Cypress Cloud. Addresses [#25768](https://github.com/cypress-io/cypress/issues/25768).
 
 **Bugfixes:**
 

packages/app/package.json

@@ -20,8 +20,8 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "@cypress-design/vue-icon": "^0.15.0",
-    "@cypress-design/vue-statusicon": "0.2.1",
+    "@cypress-design/vue-icon": "^0.18.0",
+    "@cypress-design/vue-statusicon": "0.2.4",
     "@graphql-typed-document-node/core": "^3.1.0",
     "@headlessui/vue": "1.4.0",
     "@iconify/iconify": "2.1.2",

packages/app/src/components/Slideshow.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="relative">
+    <!-- leave-to classes are marked absolute to allow the entering component to
+    animate on top of the leaving component, creating a fading animation with no thrashing -->
+    <transition
+      enter-from-class="opacity-0"
+      enter-active-class="transition duration-300 ease-out"
+      enter-to-class="opacity-100"
+      leave-from-class="opacity-100 absolute"
+      leave-active-class="transition duration-300 ease-in absolute"
+      leave-to-class="opacity-0 absolute"
+    >
+      <component
+        :is="current.component"
+        v-bind="current.props"
+        :key="step"
+        :step="step"
+        :total-steps="steps.length"
+        :increment-step="incrementStep"
+        :decrement-step="decrementStep"
+      />
+    </transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+import { computed } from 'vue'
+import type { Component } from 'vue'
+
+export type SlideshowStep = {
+  component: Component
+  props: Record<string, any>
+}
+
+const props = defineProps<{
+  modelValue: number
+  steps: SlideshowStep[]
+}>()
+const emit = defineEmits(['update:modelValue', 'slideshowComplete'])
+const step = useVModel(props, 'modelValue', emit)
+
+const current = computed(() => props.steps[step.value])
+
+const incrementStep = () => {
+  const nextStep = step.value + 1
+
+  if (nextStep < props.steps.length) {
+    step.value = nextStep
+  } else {
+    step.value = 0
+    emit('slideshowComplete')
+  }
+}
+const decrementStep = () => step.value -= 1
+
+</script>

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

@@ -1,9 +1,10 @@
-import { DebugSpecListGroupsFragment, DebugSpecListSpecFragment, DebugSpecListTestsFragment, DebugSpecsFragmentDoc } from '../generated/graphql-test'
+import { DebugSpecListGroupsFragment, DebugSpecListSpecFragment, DebugSpecListTestsFragment, 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 { specsList } from './utils/DebugMapping'
 import { CloudRunStubs } from '@packages/graphql/test/stubCloudTypes'
+import { DEBUG_SLIDESHOW } from './utils/constants'
 
 const DebugSpecVariableTypes = {
   hasNextRun: 'Boolean',
@@ -22,13 +23,24 @@ describe('<DebugContainer />', () => {
 
   describe('empty states', () => {
     const validateEmptyState = (expectedMessages: string[]) => {
+      cy.stubMutationResolver(UseCohorts_DetermineCohortDocument, (defineResult) => {
+        return defineResult({ determineCohort: { __typename: 'Cohort', name: DEBUG_SLIDESHOW.id, cohort: 'A' } })
+      })
+
       cy.mountFragment(DebugSpecsFragmentDoc, {
         variableTypes: DebugSpecVariableTypes,
         variables: {
           hasNextRun: false,
           runNumber: 1,
           nextRunNumber: -1,
         },
+        onResult: (res) => {
+          if (res.currentProject) {
+            res.currentProject.savedState = {
+              debugSlideshowComplete: true,
+            }
+          }
+        },
         render: (gqlVal) => <DebugContainer gql={gqlVal} />,
       })
 

packages/app/src/debug/DebugContainer.vue

@@ -163,6 +163,7 @@ fragment DebugSpecs on Query {
     }
     currentTestingType
   }
+  ..._DebugEmptyView
 }
 `
 

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

@@ -4,6 +4,58 @@ import DebugNoRuns from './DebugNoRuns.vue'
 import DebugLoading from './DebugLoading.vue'
 import DebugError from './DebugError.vue'
 import { useLoginConnectStore } from '@packages/frontend-shared/src/store/login-connect-store'
+import { DebugEmptyView_RecordEventDocument, DebugEmptyView_SetPreferencesDocument, UseCohorts_DetermineCohortDocument, _DebugEmptyViewFragment, _DebugEmptyViewFragmentDoc } from '../../generated/graphql-test'
+import { DEBUG_SLIDESHOW } from '../utils/constants'
+
+function mountWithGql (component: JSX.Element, gqlOptions?: { debugSlideshowComplete?: boolean, cohort?: 'A' | 'B' }) {
+  let gql: _DebugEmptyViewFragment
+  const opts = { debugSlideshowComplete: true, cohort: 'A', ...gqlOptions }
+
+  cy.stubMutationResolver(UseCohorts_DetermineCohortDocument, (defineResult) => {
+    return defineResult({ determineCohort: { __typename: 'Cohort', name: DEBUG_SLIDESHOW.id, cohort: opts.cohort } })
+  })
+
+  const recordEvent = cy.stub().as('recordEvent')
+  const storeSlideshowComplete = cy.stub().as('storeSlideshowComplete')
+
+  cy.stubMutationResolver(DebugEmptyView_RecordEventDocument, (defineResult, args) => {
+    recordEvent(args)
+
+    return defineResult({ recordEvent: true })
+  })
+
+  cy.stubMutationResolver(DebugEmptyView_SetPreferencesDocument, (defineResult, args) => {
+    storeSlideshowComplete(args)
+
+    return defineResult({
+      setPreferences: {
+        __typename: 'Query',
+        currentProject: {
+          __typename: 'CurrentProject',
+          id: gql.currentProject?.id!,
+          savedState: {
+            debugSlideshowComplete: true,
+          },
+        },
+      },
+    })
+  })
+
+  cy.mountFragment(_DebugEmptyViewFragmentDoc, {
+    onResult: (res) => {
+      if (res.currentProject) {
+        res.currentProject.savedState = {
+          debugSlideshowComplete: opts.debugSlideshowComplete,
+        }
+
+        gql = res
+      }
+    },
+    render: () => {
+      return component
+    },
+  })
+}
 
 describe('Debug page empty states', () => {
   context('not logged in', () => {
@@ -13,12 +65,18 @@ describe('Debug page empty states', () => {
       // We need to set isLoggedIn so that CloudConnectButton shows the correct state
       loginConnectStore.setUserFlag('isLoggedIn', false)
 
-      cy.mount(<DebugNotLoggedIn />)
+      mountWithGql(<DebugNotLoggedIn />)
 
       cy.findByRole('link', { name: 'Learn about debugging CI failures in Cypress' }).should('have.attr', 'href', 'https://on.cypress.io/debug-page?utm_source=Binary%3A+Launchpad&utm_medium=Debug+Tab&utm_campaign=Learn+More')
 
       cy.percySnapshot()
     })
+
+    it('sends record event upon seeing slideshow', () => {
+      useLoginConnectStore().setUserFlag('isLoggedIn', false)
+      mountWithGql(<DebugNotLoggedIn />, { debugSlideshowComplete: false })
+      cy.get('@recordEvent').should('have.been.calledWithMatch', { campaign: DEBUG_SLIDESHOW.campaigns.login })
+    })
   })
 
   context('no project', () => {
@@ -28,43 +86,107 @@ describe('Debug page empty states', () => {
       // We need to set isLoggedIn so that CloudConnectButton shows the correct state
       loginConnectStore.setUserFlag('isLoggedIn', true)
 
-      cy.mount(<DebugNoProject />)
+      mountWithGql(<DebugNoProject />)
 
       cy.findByRole('link', { name: 'Learn about project setup in Cypress' }).should('have.attr', 'href', 'https://on.cypress.io/adding-new-project?utm_source=Binary%3A+Launchpad&utm_medium=Debug+Tab&utm_campaign=Learn+More')
 
       cy.percySnapshot()
 
-      cy.viewport(600, 600)
+      cy.viewport(700, 700)
 
       cy.percySnapshot('responsive')
     })
+
+    it('sends record event upon seeing slideshow', () => {
+      useLoginConnectStore().setUserFlag('isLoggedIn', false)
+      mountWithGql(<DebugNoProject />, { debugSlideshowComplete: false })
+      cy.get('@recordEvent').should('have.been.calledWithMatch', { campaign: DEBUG_SLIDESHOW.campaigns.connectProject })
+    })
   })
 
   context('no runs', () => {
     it('renders', () => {
-      cy.mount(<DebugNoRuns />)
+      mountWithGql(<DebugNoRuns />)
 
       cy.findByRole('link', { name: 'Learn about recording a run to Cypress Cloud' }).should('have.attr', 'href', 'https://on.cypress.io/cypress-run-record-key?utm_source=Binary%3A+Launchpad&utm_medium=Debug+Tab&utm_campaign=Learn+More')
 
       cy.percySnapshot()
     })
+
+    it('sends record event upon seeing slideshow', () => {
+      useLoginConnectStore().setUserFlag('isLoggedIn', false)
+      mountWithGql(<DebugNoRuns />, { debugSlideshowComplete: false })
+      cy.get('@recordEvent').should('have.been.calledWithMatch', { campaign: DEBUG_SLIDESHOW.campaigns.recordRun })
+    })
   })
 
   context('loading', () => {
     it('renders', () => {
-      cy.mount(<DebugLoading />)
+      mountWithGql(<DebugLoading />)
 
       cy.percySnapshot()
     })
   })
 
   context('error', () => {
     it('renders', () => {
-      cy.mount(<DebugError />)
+      mountWithGql(<DebugError />)
 
       cy.findByRole('link', { name: 'Learn about debugging CI failures in Cypress' }).should('have.attr', 'href', 'https://on.cypress.io/debug-page?utm_source=Binary%3A+Launchpad&utm_medium=Debug+Tab&utm_campaign=Learn+More')
 
       cy.percySnapshot()
     })
+
+    it('does not render slideshow on error page', () => {
+      mountWithGql(<DebugError />, { debugSlideshowComplete: false })
+      cy.get('@recordEvent').should('not.have.been.called')
+      cy.findByTestId('debug-default-empty-state').should('be.visible')
+      cy.findByTestId('debug-slideshow-slide').should('not.exist')
+    })
+  })
+
+  context('slideshow', () => {
+    function moveThroughSlideshow (options: { cohort: 'A' | 'B', percy?: boolean }) {
+      for (const step of [1, 2, 3]) {
+        const { title, description } = cy.i18n.debugPage.emptyStates.slideshow[`step${step}`]
+        const imageSrc = `debug-guide-${options.cohort === 'A' ? 'skeleton' : 'text'}-${step}.png`
+
+        cy.findByAltText('Debug tutorial').should('have.attr', 'src').should('include', imageSrc)
+        cy.contains('h2', title)
+        cy.contains('p', description)
+        cy.findByTestId('debug-slideshow-step').contains(`${step}/3`)
+        cy.contains('button', 'Previous').should(step === 1 ? 'not.exist' : 'be.visible')
+        if (options.percy) {
+          cy.percySnapshot(`slideshow step ${step}`)
+        }
+
+        cy.contains('button', step === 3 ? 'Done' : 'Next').click()
+      }
+
+      cy.findByTestId('debug-slideshow-slide').should('not.exist')
+    }
+
+    it('renders slideshow if debugSlideshowComplete = false', () => {
+      useLoginConnectStore().setUserFlag('isLoggedIn', false)
+      mountWithGql(<DebugNoRuns />, { cohort: 'B', debugSlideshowComplete: false })
+      cy.get('@recordEvent').should('have.been.calledWithMatch', { campaign: DEBUG_SLIDESHOW.campaigns.recordRun })
+      moveThroughSlideshow({ cohort: 'B', percy: true })
+      cy.get('@storeSlideshowComplete').should('have.been.called')
+
+      // Can still move through slideshow, does not record events after completion
+      cy.contains('button', 'Info').click()
+      cy.get('@recordEvent').should('not.have.been.calledTwice')
+      moveThroughSlideshow({ cohort: 'B' })
+      cy.get('@storeSlideshowComplete').should('not.have.been.calledTwice')
+    })
+
+    it('renders default empty state if debugSlideshowComplete = true', () => {
+      useLoginConnectStore().setUserFlag('isLoggedIn', false)
+      mountWithGql(<DebugNoRuns />, { cohort: 'A', debugSlideshowComplete: true })
+      cy.findByTestId('debug-default-empty-state')
+
+      cy.contains('button', 'Info').click()
+      moveThroughSlideshow({ cohort: 'A', percy: true })
+    })
   })
 })