fix: open active spec in ide from desktop gui (#14521)

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

@@ -808,7 +808,21 @@ describe('Specs List', function () {
     })
 
     it('displays when spec is hovered over', function () {
-      cy.get('@button').invoke('show').should('be.visible')
+      cy.get('@spec').realHover()
+      cy.get('@button').should('be.visible')
+
+      // invoke show for snapshot since hover doesn't do it
+      cy.get('@button').invoke('show')
+      cy.percySnapshot()
+    })
+
+    it('displays when spec is active and hovered over', function () {
+      cy.get('@spec').click().should('have.class', 'active')
+
+      cy.get('@spec').realHover()
+      cy.get('@button').should('be.visible')
+
+      cy.get('@button').invoke('show')
       cy.percySnapshot()
     })
 
@@ -823,7 +837,7 @@ describe('Specs List', function () {
           { id: 'other', name: 'Other', isOther: true, openerId: '' },
         ]
 
-        cy.get('@button').invoke('show')
+        cy.get('@spec').realHover()
       })
 
       context('when user has not already set opener and opens file', function () {

packages/desktop-gui/cypress/support/index.js

@@ -5,6 +5,7 @@ require('@packages/ui-components/cypress/support/customPercyCommand')({
 })
 
 require('cypress-react-unit-test/dist/hooks')
+require('cypress-real-events/support')
 
 const BluebirdPromise = require('bluebird')
 

packages/desktop-gui/package.json

@@ -27,6 +27,7 @@
     "cross-env": "6.0.3",
     "cypress-multi-reporters": "1.4.0",
     "cypress-react-unit-test": "4.11.2",
+    "cypress-real-events": "1.1.0",
     "dayjs": "^1.9.3",
     "fira": "cypress-io/fira#fb63362742eea8cdce0d90825ab9264d77719e3d",
     "gravatar": "1.8.0",

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

@@ -190,6 +190,8 @@ class SpecsList extends Component {
     e.preventDefault()
     e.stopPropagation()
 
+    if (specsStore.isChosen(spec)) return
+
     const { project } = this.props
 
     specsStore.setSelectedSpec(spec)
@@ -313,7 +315,7 @@ class SpecsList extends Component {
       <li key={spec.path} className={className}>
         <a href='#' onClick={this._selectSpec.bind(this, spec)} className="file-name-wrapper">
           <div className="file-name">
-            <i className={`fa-fw ${this._specIcon(specsStore.isChosen(spec))}`} />
+            <i className={`fa-fw ${this._specIcon(isActive)}`} />
             {spec.displayName}
           </div>
         </a>

packages/desktop-gui/src/specs/specs.scss

@@ -184,11 +184,15 @@ $max-nesting-level: 14;
     display: flex;
 
     &.active {
-      pointer-events: none;
       background-color: #F5FBF7;
 
+      &:hover, &:focus {
+        background-color: #F5FBF7;
+      }
+
       > .file-name-wrapper {
         color: #4c4e63 !important;
+        cursor: default;
         text-decoration: none;
       }
     }

yarn.lock

@@ -12270,6 +12270,11 @@ cypress-react-unit-test@4.11.2:
     mime-types "2.1.26"
     unfetch "4.1.0"
 
+cypress-real-events@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/cypress-real-events/-/cypress-real-events-1.1.0.tgz#893ec5b1816c9674f95fa8d5e1c808e9a895347e"
+  integrity sha512-2lNkuSQXNaAAcRbyTMVz7j8RR6MGaqlE1hcQ3Xc90ZYbfYfipNILRfkg9JyUm8Z6Fp2EA9DmaaqJQyKfGlyxDQ==
+
 cypress@*:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/cypress/-/cypress-6.1.0.tgz#af2596cb110aa98eaf75fef3d8ab379ca0ff2413"