chore: fix tests that visit the runner on windows and do some other c…

…leanup (#20592)

circle.yml

@@ -29,7 +29,7 @@ mainBuildFilters: &mainBuildFilters
       only:
         - develop
         - 10.0-release
-        - marktnoonan/backmerge-develop-3-8-22
+        - UNIFY-1294-specs-list-flake
 
 # usually we don't build Mac app - it takes a long time
 # but sometimes we want to really confirm we are doing the right thing
@@ -39,7 +39,7 @@ macWorkflowFilters: &mac-workflow-filters
     or:
     - equal: [ develop, << pipeline.git.branch >> ]
     - equal: [ '10.0-release', << pipeline.git.branch >> ]
-    - equal: [ marktnoonan/backmerge-develop-3-8-22, << pipeline.git.branch >> ]
+    - equal: [ UNIFY-1294-specs-list-flake, << pipeline.git.branch >> ]
     - matches:
           pattern: "-release$"
           value: << pipeline.git.branch >>
@@ -49,7 +49,7 @@ windowsWorkflowFilters: &windows-workflow-filters
     or:
     - equal: [ develop, << pipeline.git.branch >> ]
     - equal: [ '10.0-release', << pipeline.git.branch >> ]
-    - equal: [ marktnoonan/backmerge-develop-3-8-22, << pipeline.git.branch >> ]
+    - equal: [ UNIFY-1294-specs-list-flake, << pipeline.git.branch >> ]
     - matches:
           pattern: "-release$"
           value: << pipeline.git.branch >>

packages/app/README.md

@@ -30,7 +30,7 @@ Route configuration that might typically appear in `router.ts` can be set in a `
 ```ts
 <route>
   {
-    name: 'SpecsRunner',
+    name: 'SpecRunner',
     meta: {
       header: false,
       navBarExpandedAllowed: false

packages/app/cypress/e2e/cypress-in-cypress-component.cy.ts

@@ -1,7 +1,8 @@
 import defaultMessages from '@packages/frontend-shared/src/locales/en-US.json'
+import { getPathForPlatform } from '../../src/paths'
 import { snapshotAUTPanel } from './support/snapshot-aut-panel'
 
-describe('Cypress In Cypress', { viewportWidth: 1500 }, () => {
+describe('Cypress In Cypress CT', { viewportWidth: 1500, defaultCommandTimeout: 10000 }, () => {
   beforeEach(() => {
     cy.scaffoldProject('cypress-in-cypress')
     cy.findBrowsers()
@@ -56,6 +57,7 @@ describe('Cypress In Cypress', { viewportWidth: 1500 }, () => {
   })
 
   it('navigation between specs and other parts of the app works', () => {
+    cy.visitApp()
     cy.contains('TestComponent.spec').click()
     cy.get('[data-model-state="passed"]').should('contain', 'renders the test component')
 
@@ -79,11 +81,11 @@ describe('Cypress In Cypress', { viewportWidth: 1500 }, () => {
     const { noSpecErrorTitle, noSpecErrorIntro, noSpecErrorExplainer } = defaultMessages.specPage
     const badFilePath = 'src/DoesNotExist.spec.js'
 
-    cy.visit(`http://localhost:4455/__/#/specs/runner?file=${badFilePath}`)
+    cy.visitApp(`/specs/runner?file=${getPathForPlatform(badFilePath)}`)
     cy.contains(noSpecErrorTitle).should('be.visible')
     cy.contains(noSpecErrorIntro).should('be.visible')
     cy.contains(noSpecErrorExplainer).should('be.visible')
-    cy.contains(badFilePath).should('be.visible')
+    cy.contains(getPathForPlatform(badFilePath)).should('be.visible')
     cy.location()
     .its('href')
     .should('eq', 'http://localhost:4455/__/#/specs')
@@ -98,21 +100,21 @@ describe('Cypress In Cypress', { viewportWidth: 1500 }, () => {
 
     const goodFilePath = 'src/TestComponent.spec.jsx'
 
-    // TODO: Figure out why test is flaky without wait
-    // see: https://cypress-io.atlassian.net/browse/UNIFY-1294
-    cy.wait(2000)
-    cy.visit(`http://localhost:4455/__/#/specs/runner?file=${goodFilePath}`)
+    cy.visitApp(`/specs/runner?file=${getPathForPlatform(goodFilePath)}`)
 
     cy.contains('renders the test component').should('be.visible')
 
     cy.withCtx((ctx) => {
-      ctx.actions.project.setSpecs([])
+      // rename relative path for any specs that happen to be found
+      const specs = ctx.project.specs.map((spec) => ({ ...spec, relative: `${spec.relative}-updated` }))
+
+      ctx.actions.project.setSpecs(specs)
       ctx.emitter.toApp()
     }).then(() => {
       cy.contains(noSpecErrorTitle).should('be.visible')
       cy.contains(noSpecErrorIntro).should('be.visible')
       cy.contains(noSpecErrorExplainer).should('be.visible')
-      cy.contains(goodFilePath).should('be.visible')
+      cy.contains(getPathForPlatform(goodFilePath)).should('be.visible')
       cy.location()
       .its('href')
       .should('eq', 'http://localhost:4455/__/#/specs')

packages/app/cypress/e2e/cypress-in-cypress-e2e.cy.ts

@@ -1,7 +1,8 @@
 import defaultMessages from '@packages/frontend-shared/src/locales/en-US.json'
 import { snapshotAUTPanel } from './support/snapshot-aut-panel'
+import { getPathForPlatform } from '../../src/paths'
 
-describe('Cypress In Cypress', { viewportWidth: 1500 }, () => {
+describe('Cypress In Cypress E2E', { viewportWidth: 1500, defaultCommandTimeout: 10000 }, () => {
   beforeEach(() => {
     cy.scaffoldProject('cypress-in-cypress')
     cy.findBrowsers()
@@ -99,11 +100,11 @@ describe('Cypress In Cypress', { viewportWidth: 1500 }, () => {
     const { noSpecErrorTitle, noSpecErrorIntro, noSpecErrorExplainer } = defaultMessages.specPage
     const badFilePath = 'cypress/e2e/does-not-exist.spec.js'
 
-    cy.visit(`http://localhost:4455/__/#/specs/runner?file=${badFilePath}`)
+    cy.visitApp(`/specs/runner?file=${getPathForPlatform(badFilePath)}`)
     cy.contains(noSpecErrorTitle).should('be.visible')
     cy.contains(noSpecErrorIntro).should('be.visible')
     cy.contains(noSpecErrorExplainer).should('be.visible')
-    cy.contains(badFilePath).should('be.visible')
+    cy.contains(getPathForPlatform(badFilePath)).should('be.visible')
     cy.location()
     .its('href')
     .should('eq', 'http://localhost:4455/__/#/specs')
@@ -120,21 +121,22 @@ describe('Cypress In Cypress', { viewportWidth: 1500 }, () => {
 
     const goodFilePath = 'cypress/e2e/dom-content.spec.js'
 
-    // TODO: Figure out why test is flaky without wait
-    // see: https://cypress-io.atlassian.net/browse/UNIFY-1294
-    cy.wait(2000)
-    cy.visit(`http://localhost:4455/__/#/specs/runner?file=${goodFilePath}`)
+    cy.visit(`http://localhost:4455/__/#/specs/runner?file=${getPathForPlatform(goodFilePath)}`)
 
     cy.contains('Dom Content').should('be.visible')
 
     cy.withCtx((ctx) => {
-      ctx.actions.project.setSpecs([])
+      // rename relative path for any specs that happen to be found
+
+      const specs = ctx.project.specs.map((spec) => ({ ...spec, relative: `${spec.relative}-updated` }))
+
+      ctx.actions.project.setSpecs(specs)
       ctx.emitter.toApp()
     }).then(() => {
       cy.contains(noSpecErrorTitle).should('be.visible')
       cy.contains(noSpecErrorIntro).should('be.visible')
       cy.contains(noSpecErrorExplainer).should('be.visible')
-      cy.contains(goodFilePath).should('be.visible')
+      cy.contains(getPathForPlatform(goodFilePath)).should('be.visible')
       cy.location()
       .its('href')
       .should('eq', 'http://localhost:4455/__/#/specs')

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

@@ -1,10 +1,5 @@
 import defaultMessages from '@packages/frontend-shared/src/locales/en-US.json'
-
-function getPathForPlatform (posixPath: string) {
-  if (Cypress.platform === 'win32') return posixPath.replaceAll('/', '\\')
-
-  return posixPath
-}
+import { getPathForPlatform } from '../../src/paths'
 
 function getRunnerHref (specPath: string) {
   specPath = getPathForPlatform(specPath)

packages/app/src/pages/Specs/Runner.vue

@@ -3,7 +3,7 @@
     <!--
       Run Mode is a more minimal UI.
       It does not render things like the SpecList,
-      Side and Top Nav, etc.
+      Side Nav, etc.
       It also has no GraphQL dependency.
     -->
     <SpecRunnerContainerRunMode
@@ -14,7 +14,7 @@
     <!--
       Open Mode is the full Cypress runner UI -
       including things like the SpecList,
-      Side and Top Nav, Selector Playground etc.
+      Side Nav, Selector Playground etc.
       It is driven by GraphQL and urql.
     -->
     <SpecRunnerContainerOpenMode
@@ -59,7 +59,7 @@ const specs = window.__RUN_MODE_SPECS__
 
 <route>
   {
-    name: 'SpecsRunner',
+    name: 'SpecRunner',
     meta: {
       header: false,
       navBarExpandedAllowed: false

packages/app/src/runner/SpecRunnerContainerOpenMode.vue

@@ -1,26 +1,25 @@
 <template>
-  <div v-if="specStore.activeSpec">
-    <SpecRunnerOpenMode
-      v-if="initialized"
-      :gql="props.gql"
-    />
-  </div>
+  <SpecRunnerOpenMode
+    v-if="initialized && specStore.activeSpec"
+    :gql="props.gql"
+  />
 </template>
 
 <script lang="ts" setup>
-import { computed, watchEffect } from 'vue'
+import { computed } from 'vue'
 import type { SpecRunnerFragment } from '../generated/graphql'
 import { useSpecStore } from '../store'
 import SpecRunnerOpenMode from './SpecRunnerOpenMode.vue'
 import { useUnifiedRunner } from './unifiedRunner'
-import { useRouter } from 'vue-router'
+import { useRouter, useRoute } from 'vue-router'
 
 const props = defineProps<{
   gql: SpecRunnerFragment
 }>()
 
 const specStore = useSpecStore()
 const router = useRouter()
+const route = useRoute()
 
 const { initialized, watchSpec } = useUnifiedRunner()
 
@@ -30,13 +29,21 @@ const specs = computed(() => {
 
 watchSpec(specs)
 
-watchEffect(() => {
-  const specPath = router.currentRoute.value.query.file
+specStore.$subscribe((mutation, state) => {
+  const file = route.query.file as string
 
-  if (specPath && !specStore.activeSpec) {
-    router.push({ name: 'Specs', params: {
-      unrunnable: router.currentRoute.value.query.file as string,
-    } })
+  const shouldRedirect = route.name === 'SpecRunner' && file && state.activeSpec === null
+
+  if (shouldRedirect) {
+    router.push({
+      name: 'Specs',
+      params: {
+        unrunnable: file,
+      },
+    })
   }
+}, {
+  immediate: true,
 })
+
 </script>

packages/app/src/runner/unifiedRunner.ts

@@ -27,7 +27,7 @@ export function useUnifiedRunner () {
       const route = useRoute()
       const selectorPlaygroundStore = useSelectorPlaygroundStore()
 
-      watch(() => specs.value, () => {
+      watch(() => specs.value, (newVal) => {
         const fileParam = route.query.file
 
         if (!fileParam) {
@@ -36,7 +36,7 @@ export function useUnifiedRunner () {
           return
         }
 
-        const activeSpecInSpecsList = specs.value.find((x) => x.relative === fileParam)
+        const activeSpecInSpecsList = newVal.find((x) => x.relative === fileParam)
 
         if (!activeSpecInSpecsList) {
           // the specs list no longer contains the spec being shown

packages/app/src/runner/useEventManager.ts

@@ -12,7 +12,7 @@ export function useEventManager () {
 
   function runSpec () {
     if (!specStore.activeSpec) {
-      throw Error(`Cannot run spec when specStore.active spec is null!`)
+      throw Error(`Cannot run spec when specStore.active spec is null or undefined!`)
     }
 
     autStore.setScriptError(null)
@@ -54,7 +54,7 @@ export function useEventManager () {
   }
 
   const startSpecWatcher = () => {
-    return watch(() => specStore.activeSpec, (spec) => {
+    return watch(() => specStore.activeSpec, () => {
       runSpec()
     }, { immediate: true, flush: 'post' })
   }

packages/app/src/specs/generators/component/ComponentGeneratorStepOne.vue

@@ -42,7 +42,7 @@
         >
           <router-link
             class="outline-none"
-            :to="{ name: 'SpecsRunner', query: { file: result.file.relative }, params: { shouldShowTroubleRenderingAlert: true } }
+            :to="{ name: 'SpecRunner', query: { file: result.file.relative }, params: { shouldShowTroubleRenderingAlert: true } }
             "
           >
             <Button

packages/app/src/store/specs-store.ts

@@ -2,15 +2,15 @@ import type { SpecFile } from '@packages/types/src'
 import { defineStore } from 'pinia'
 
 export interface SpecState {
-  activeSpec: SpecFile | null
+  activeSpec: SpecFile | null | undefined
 }
 
 export const useSpecStore = defineStore({
   id: 'spec',
 
   state (): SpecState {
     return {
-      activeSpec: null,
+      activeSpec: undefined,
     }
   },