fix: studio icon displays properly on tests with long title (#15415)

packages/reporter/cypress/integration/suites_spec.ts

@@ -129,6 +129,26 @@ describe('suites', () => {
   })
 
   describe('studio button', () => {
+    it('displays studio icon with half transparency when hovering over test title', () => {
+      cy.contains('suite 1')
+      .closest('.runnable-wrapper')
+      .realHover()
+      .find('.runnable-controls-studio')
+      .should('be.visible')
+      .should('have.css', 'opacity', '0.5')
+    })
+
+    it('displays studio icon with no transparency and tooltip on hover', () => {
+      cy.contains('suite 1')
+      .closest('.collapsible-header')
+      .find('.runnable-controls-studio')
+      .realHover()
+      .should('be.visible')
+      .should('have.css', 'opacity', '1')
+
+      cy.get('.cy-tooltip').contains('Add New Test')
+    })
+
     it('emits studio:init:suite with the suite id when clicked', () => {
       cy.stub(runner, 'emit')
 

packages/reporter/cypress/integration/tests_spec.ts

@@ -123,16 +123,38 @@ describe('tests', () => {
   })
 
   describe('studio', () => {
-    it('emits studio:init:test with the suite id when studio button clicked', () => {
-      cy.stub(runner, 'emit')
+    describe('button', () => {
+      it('displays studio icon with half transparency when hovering over test title', () => {
+        cy.contains('test 1')
+        .closest('.runnable-wrapper')
+        .realHover()
+        .find('.runnable-controls-studio')
+        .should('be.visible')
+        .should('have.css', 'opacity', '0.5')
+      })
 
-      cy.contains('test 1').parents('.collapsible-header')
-      .find('.runnable-controls-studio').click()
+      it('displays studio icon with no transparency and tooltip on hover', () => {
+        cy.contains('test 1')
+        .closest('.collapsible-header')
+        .find('.runnable-controls-studio')
+        .realHover()
+        .should('be.visible')
+        .should('have.css', 'opacity', '1')
 
-      cy.wrap(runner.emit).should('be.calledWith', 'studio:init:test', 'r3')
+        cy.get('.cy-tooltip').contains('Add Commands to Test')
+      })
+
+      it('emits studio:init:test with the suite id when studio button clicked', () => {
+        cy.stub(runner, 'emit')
+
+        cy.contains('test 1').parents('.collapsible-header')
+        .find('.runnable-controls-studio').click()
+
+        cy.wrap(runner.emit).should('be.calledWith', 'studio:init:test', 'r3')
+      })
     })
 
-    describe('studio controls', () => {
+    describe('controls', () => {
       it('is not visible by default', () => {
         cy.contains('test 1').click()
         .parents('.collapsible').first()

packages/reporter/cypress/support/index.ts

@@ -1,3 +1,4 @@
+import 'cypress-real-events/support'
 // @ts-ignore
 import installCustomPercyCommand from '@packages/ui-components/cypress/support/customPercyCommand'
 

packages/reporter/package.json

@@ -21,6 +21,7 @@
     "classnames": "2.2.6",
     "css-element-queries": "1.2.3",
     "cypress-multi-reporters": "1.4.0",
+    "cypress-real-events": "1.1.0",
     "lodash": "4.17.19",
     "markdown-it": "11.0.0",
     "mobx": "5.15.4",

packages/reporter/src/runnables/runnables.scss

@@ -304,7 +304,6 @@
 
   .runnable-controls {
     float: right;
-    overflow: hidden;
 
     label {
       padding: 2px 4px;
@@ -350,11 +349,6 @@
           flex-grow: 1;
           padding-right: 10px;
         }
-
-        .runnable-controls {
-          justify-self: flex-end;
-          min-width: 20px;
-        }
       }
     }
   }

packages/reporter/tsconfig.json

@@ -3,7 +3,8 @@
   "compilerOptions": {
     "types": [
       "node",
-      "cypress"
+      "cypress",
+      "cypress-real-events"
     ] /* Type declaration files to be included in compilation. */
   },
   "include": [
@@ -15,4 +16,4 @@
   "files": [
     "./../ts/index.d.ts"
   ]
-}
+}