fix: prevent crash when selected spec is undefined (#9160)

packages/desktop-gui/cypress/integration/specs_list_spec.js

@@ -729,6 +729,31 @@ describe('Specs List', function () {
         cy.contains('.all-tests', 'Run 8 component specs')
       })
     })
+
+    context('returning to specs tab', function () {
+      beforeEach(function () {
+        this.ipc.getSpecs.yields(null, this.specs)
+        this.openProject.resolve(this.config)
+      })
+
+      // https://github.com/cypress-io/cypress/issues/9151
+      it('does not crash when running', function () {
+        cy.contains('.file-name', 'app_spec.coffee').click()
+        .then(function () {
+          this.ipc.onSpecChanged.yield(null, 'integration/app_spec.coffee')
+        })
+
+        cy.contains('.all-tests', 'Running 1 spec')
+
+        cy.contains('.project-nav a', 'Settings').click()
+        cy.get('.settings').should('be.visible')
+        cy.contains('.project-nav a', 'Tests').click()
+
+        // the specs list renders again
+        cy.contains('.file-name', 'app_spec.coffee')
+        cy.contains('.all-tests', 'Running 1 spec')
+      })
+    })
   })
 
   describe('spec list updates', function () {

packages/desktop-gui/src/specs/specs-list.jsx

@@ -28,6 +28,8 @@ const formRunButtonLabel = (areTestsAlreadyRunning, specType, specsN) => {
   return label
 }
 
+// Note: this component can be mounted and unmounted
+// if you need to persist the data through mounts, "save" it in the specsStore
 @observer
 class SpecsList extends Component {
   constructor (props) {
@@ -167,7 +169,7 @@ class SpecsList extends Component {
 
     const { project } = this.props
 
-    this.selectedSpec = spec
+    specsStore.setSelectedSpec(spec)
 
     if (spec.relative === '__all') {
       if (specsStore.filter) {
@@ -211,14 +213,16 @@ class SpecsList extends Component {
 
       if (this._areTestsRunning()) {
         // selected spec must be set
-        // only show the button matching current running spec type
-        if (spec.specType !== this.selectedSpec.specType) {
-          return <></>
-        }
+        if (specsStore.selectedSpec) {
+          // only show the button matching current running spec type
+          if (spec.specType !== specsStore.selectedSpec.specType) {
+            return <></>
+          }
 
-        if (this.selectedSpec.relative !== '__all') {
-          // we are only running 1 spec
-          buttonText = `${word} 1 spec`
+          if (specsStore.selectedSpec.relative !== '__all') {
+            // we are only running 1 spec
+            buttonText = `${word} 1 spec`
+          }
         }
       }
 

packages/desktop-gui/src/specs/specs-store.js

@@ -60,6 +60,7 @@ export class SpecsStore {
   @observable error
   @observable isLoading = false
   @observable filter
+  @observable selectedSpec
 
   @computed get specs () {
     return this._tree(this._files)
@@ -135,6 +136,10 @@ export class SpecsStore {
     this.filter = null
   }
 
+  @action setSelectedSpec (spec) {
+    this.selectedSpec = spec
+  }
+
   isChosen (spec) {
     return pathsEqual(this.chosenSpecPath, formRelativePath(spec))
   }