From da6ee2164d20e67f9bb210fcc738b1b30c1121e7 Mon Sep 17 00:00:00 2001
From: Zach Panzarino <zachary@panzarino.com>
Date: Tue, 19 Jan 2021 12:42:10 -0500
Subject: [PATCH] fix: open active spec in ide from desktop gui (#14521)

---
 .../cypress/integration/specs_list_spec.js     | 18 ++++++++++++++++--
 packages/desktop-gui/cypress/support/index.js  |  1 +
 packages/desktop-gui/package.json              |  1 +
 packages/desktop-gui/src/specs/specs-list.jsx  |  4 +++-
 packages/desktop-gui/src/specs/specs.scss      |  6 +++++-
 yarn.lock                                      |  5 +++++
 6 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/packages/desktop-gui/cypress/integration/specs_list_spec.js b/packages/desktop-gui/cypress/integration/specs_list_spec.js
index 236d55716389..7ec1fa68e06c 100644
--- a/packages/desktop-gui/cypress/integration/specs_list_spec.js
+++ b/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 () {
diff --git a/packages/desktop-gui/cypress/support/index.js b/packages/desktop-gui/cypress/support/index.js
index e6a48d4a81c3..a426a50db21f 100644
--- a/packages/desktop-gui/cypress/support/index.js
+++ b/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')
 
diff --git a/packages/desktop-gui/package.json b/packages/desktop-gui/package.json
index ff9735e808a3..7d0ac392ec4e 100644
--- a/packages/desktop-gui/package.json
+++ b/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",
diff --git a/packages/desktop-gui/src/specs/specs-list.jsx b/packages/desktop-gui/src/specs/specs-list.jsx
index c9caed0b8641..85a172fc854a 100644
--- a/packages/desktop-gui/src/specs/specs-list.jsx
+++ b/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>
diff --git a/packages/desktop-gui/src/specs/specs.scss b/packages/desktop-gui/src/specs/specs.scss
index 476e7bf10111..eb752b3bb789 100644
--- a/packages/desktop-gui/src/specs/specs.scss
+++ b/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;
       }
     }
diff --git a/yarn.lock b/yarn.lock
index 401966a90840..433b7d08c5b0 100644
--- a/yarn.lock
+++ b/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"