feat: Reporter redesign

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

@@ -213,7 +213,6 @@ describe('Cypress In Cypress E2E', { viewportWidth: 1500, defaultCommandTimeout:
     cy.visitApp()
     cy.specsPageIsVisible()
     cy.contains('withFailure.spec').click()
-    cy.contains('[aria-controls=reporter-inline-specs-list]', 'Specs')
 
     cy.get('[data-cy="runnable-header"]').should('be.visible')
     cy.get('body').type('f')

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

@@ -131,8 +131,7 @@ describe('Cypress in Cypress', { viewportWidth: 1500, defaultCommandTimeout: 100
       // validate that the width we set in `withCtx` above is the starting point
         cy.get(`[data-cy="reporter-panel"]`).invoke('outerWidth').should('eq', 800)
 
-        cy.contains('[aria-controls=reporter-inline-specs-list]', 'Specs')
-        .click({ force: true })
+        cy.findByTestId('toggle-specs-button').click({ force: true })
 
         // this tooltip text confirms specs list is open
         cy.contains('Collapse Specs List')

packages/app/cypress/e2e/runner/reporter.hooks.cy.ts

@@ -53,11 +53,11 @@ describe('hooks', {
       o.sinon.stub(ctx.actions.file, 'openFile')
     })
 
-    cy.contains('Open in IDE').invoke('show').click({ force: true })
+    cy.get('.open-in-ide-button').invoke('show').click()
 
     cy.withCtx((ctx, o) => {
-      expect(ctx.actions.file.openFile).to.have.been.calledWith(o.sinon.match(new RegExp(`hooks/basic\.cy\.js$`)), o.ideLine, o.ideColumn)
-    }, { ideLine: 2, ideColumn: Cypress.browser.family === 'firefox' ? 5 : 2 })
+      expect(ctx.actions.file.openFile).to.have.been.calledWith(o.sinon.match(new RegExp(`hooks/basic\.cy\.js$`)), 1, 1)
+    })
   })
 
   it('does not display commands from skipped tests', () => {
@@ -84,12 +84,22 @@ describe('hooks', {
       passCount: 1,
     })
 
-    cy.contains('test wrapper').parents('.collapsible').first().should(($suite) => {
+    cy.contains('test wrapper > nested suite 1').parents('.collapsible').first().should(($suite) => {
       expect($suite).not.to.contain('test 1')
       expect($suite).to.contain('nested suite 1')
       expect($suite).to.contain('test 2')
       expect($suite).not.to.contain('nested suite 2')
       expect($suite).not.to.contain('test 3')
+      expect($suite).not.to.contain('nested suite 3')
+      expect($suite).not.to.contain('test 4')
+    })
+
+    cy.contains('test wrapper > nested suite 3').parents('.collapsible').first().should(($suite) => {
+      expect($suite).not.to.contain('test 1')
+      expect($suite).not.to.contain('nested suite 1')
+      expect($suite).not.to.contain('test 2')
+      expect($suite).not.to.contain('nested suite 2')
+      expect($suite).not.to.contain('test 3')
       expect($suite).to.contain('nested suite 3')
       expect($suite).to.contain('test 4')
     })

packages/app/cypress/e2e/runner/runner.ui.cy.ts

@@ -171,8 +171,9 @@ describe('src/cypress/runner', () => {
         o.sinon.stub(ctx.actions.file, 'openFile')
       })
 
-      cy.contains('a', 'simple-cy-assert.runner')
-      .click()
+      cy.get('.open-in-ide-button').should('not.be.visible')
+      cy.get('.runnable-header-file-name').realHover()
+      cy.get('.open-in-ide-button').should('be.visible').click()
 
       cy.withCtx((ctx, o) => {
         expect(ctx.actions.file.openFile).to.have.been.calledWith(o.sinon.match(new RegExp(`simple-cy-assert\.runner\.cy\.js$`)), 1, 1)

packages/app/cypress/e2e/runner/sessions.ui.cy.ts

@@ -386,7 +386,7 @@ describe('runner/cypress sessions.ui.spec', {
           .within(() => {
             cy.contains('.command-wrapper', 'Create new session')
             .should('have.class', 'command-state-failed')
-            .find('.failed-indicator')
+            .find('[data-cy="failed-icon-indicator"]')
             .should('exist')
           })
         })
@@ -465,7 +465,7 @@ describe('runner/cypress sessions.ui.spec', {
 
                 cy.contains('.command-wrapper', 'Validate session').as('validateSessionGroup')
                 .should('have.class', 'command-state-failed')
-                .find('.failed-indicator')
+                .find('[data-cy="failed-icon-indicator"]')
                 .should('exist')
               })
             })
@@ -528,7 +528,7 @@ describe('runner/cypress sessions.ui.spec', {
 
             cy.contains('.command-wrapper', 'Validate session').as('validateSessionGroup')
             .should('have.class', 'command-state-failed')
-            .find('.failed-indicator')
+            .find('[data-cy="failed-icon-indicator"]')
             .should('exist')
 
             const restoredMessagePostfix = 'This error occurred while validating the restored session. Because validation failed, we will try to recreate the session.'
@@ -545,7 +545,7 @@ describe('runner/cypress sessions.ui.spec', {
 
             cy.contains('.command-wrapper', 'Recreate session')
             .should('have.class', successfullyRecreatedSession ? 'command-state-passed' : 'command-state-failed')
-            .find('.failed-indicator')
+            .find('[data-cy="failed-icon-indicator"]')
             .should(successfullyRecreatedSession ? 'not.exist' : 'exist', 'is-open')
           })
         })

packages/app/cypress/e2e/runner/support/spec-loader.ts

@@ -5,9 +5,10 @@ export const shouldHaveTestResults = ({ passCount, failCount, pendingCount }) =>
   failCount = failCount || '--'
 
   cy.get('button.restart', { timeout: 30000 }).should('be.visible') // ensure tests are finished running
-  cy.findByLabelText('Stats', { timeout: 10000 }).within(() => {
-    cy.get('.passed .num', { timeout: 30000 }).should('have.text', `${passCount}`)
-    cy.get('.failed .num', { timeout: 30000 }).should('have.text', `${failCount}`)
+
+  cy.get('.stats', { timeout: 10000 }).within(() => {
+    cy.get('.passed .num', { timeout: 40000 }).should('have.text', `${passCount}`)
+    cy.get('.failed .num', { timeout: 40000 }).should('have.text', `${failCount}`)
 
     if (pendingCount) {
       cy.get('.pending .num', { timeout: 20000 }).should('have.text', `${pendingCount}`)

packages/app/cypress/e2e/runner/support/verify-failures.ts

@@ -71,7 +71,7 @@ const verifyFailure = (options) => {
   cy.contains('.runnable-title', specTitle).closest('.runnable').as('Root')
 
   cy.get('@Root').within(() => {
-    cy.contains('View stack trace').click()
+    cy.contains('Stack trace').click()
 
     const messageLines = [].concat(message)
 

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

@@ -56,7 +56,7 @@ describe('Sidebar Navigation', { viewportWidth: 1280 }, () => {
 
       cy.contains('fixture.js').click()
 
-      cy.get('.toggle-specs-text').click()
+      cy.get('.toggle-specs-button').click()
 
       cy.findByTestId('reporter-panel').invoke('outerWidth').then(($initialWidth) => {
         expect($initialWidth).eq(100)
@@ -291,7 +291,7 @@ describe('Sidebar Navigation', { viewportWidth: 1280 }, () => {
     it.skip('resize nav and persist the state after refresh', () => {
       cy.contains('fixture.js').click()
 
-      cy.get('.toggle-specs-text').click()
+      cy.get('.toggle-specs-button').click()
 
       cy.withCtx((ctx, o) => {
         o.sinon.stub(ctx.actions.localSettings, 'setPreferences').resolves()

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

@@ -119,7 +119,6 @@ describe('App: Spec List (E2E)', () => {
       cy.findAllByTestId('spec-item-link').should('have.attr', 'href')
       cy.findAllByTestId('spec-item-link').contains('dom-content.spec.js').click()
 
-      cy.contains('[aria-controls=reporter-inline-specs-list]', 'Specs')
       cy.findByText('Your tests are loading...').should('not.be.visible')
       cy.get('[data-cy="runnable-header"]').should('be.visible')
       cy.get('body').type('f')
@@ -133,10 +132,8 @@ describe('App: Spec List (E2E)', () => {
       cy.findAllByTestId('spec-item-link').contains('accounts_list.spec.js').click()
 
       // ensure the tests are loaded
-      cy.contains('[aria-controls=reporter-inline-specs-list]', 'Specs')
       cy.findByText('Your tests are loading...').should('not.be.visible')
 
-      cy.contains('[aria-controls=reporter-inline-specs-list]', 'Specs')
       cy.get('[data-cy="runnable-header"]').should('be.visible')
       // open the inline spec list
       cy.get('body').type('f')
@@ -369,7 +366,7 @@ describe('App: Spec List (E2E)', () => {
         // A bit of a hack, but our cy-in-cy test needs to wait for the reporter to fully render before expanding the "Search specs" menu.
         // Otherwise, the click happens before the event is registered, which causes the "Search Specs" menu to not expand.
         cy.get('[data-cy="runnable-header"]').should('be.visible')
-        cy.contains('button', 'Specs').click({ force: true })
+        cy.findByTestId('toggle-specs-button').click({ force: true })
 
         // wait until specs list is visible
         cy.findByTestId('specs-list-container').should('be.visible')

packages/app/cypress/e2e/studio/helper.ts

@@ -30,9 +30,13 @@ export function launchStudio ({ specName = 'spec.cy.js', createNewTest = false,
   .closest('.runnable-wrapper').as('runnable-wrapper')
   .realHover()
 
-  cy.get('@runnable-wrapper')
-  .findByTestId('launch-studio')
-  .click()
+  if (createNewTest) {
+    cy.get('@runnable-wrapper').realHover().findByTestId('create-new-test-button').click()
+  } else {
+    cy.get('@runnable-wrapper')
+    .findByTestId('launch-studio')
+    .click()
+  }
 
   // Studio re-executes spec before waiting for commands - wait for the spec to finish executing.
   cy.waitForSpecToFinish()

packages/driver/cypress/support/utils.ts

@@ -9,7 +9,7 @@ export const getCommandLogWithText = (command, type?) => {
   cy.$$('.runnable-active .collapsible:not(.is-open) .collapsible-header', top?.document).click()
 
   return cy
-  .$$(`.runnable-active .command-${type}:contains(${command})`, top?.document)
+  .$$(`.test.runnable-active .command-${type}:contains(${command})`, top?.document)
   .closest('.command')
 }
 

packages/reporter/README.md

@@ -16,20 +16,6 @@ The reporter shows the running results of the tests. It includes the following:
   - commands and assertions with detailed information
   - any failures/errors
 
-## Building
-
-### For development
-
-```bash
-yarn workspace @packages/reporter build
-```
-
-### For production
-
-```bash
-yarn workspace @packages/reporter build-prod
-```
-
 ## Developing
 
 To see the reporter render, see [Developing the driver](../driver/README.md#Developing).

packages/reporter/cypress/e2e/commands.cy.ts

@@ -898,7 +898,10 @@ describe('commands', { viewportHeight: 1000 }, () => {
       })
 
       it('shows a tooltip', () => {
-        cy.get('.command-name-within').click('top')
+        cy.get('.command-name-within').within(() => {
+          cy.contains('within').click()
+        })
+
         cy.get('.cy-tooltip').should('have.text', 'Printed output to your console')
       })
 
@@ -911,21 +914,32 @@ describe('commands', { viewportHeight: 1000 }, () => {
 
       it('prints to console', () => {
         cy.spy(runner, 'emit')
-        cy.get('.command-name-within').click('top')
+        cy.get('.command-name-within').within(() => {
+          cy.contains('within').click()
+        })
 
         cy.wrap(runner.emit).should('be.calledWith', 'runner:console:log', 'r3', fakeIdForTest)
       })
 
       it('shows the snapshot', () => {
         cy.spy(runner, 'emit')
-        cy.get('.command-name-within').click('top')
+        cy.get('.command-name-within').within(() => {
+          cy.contains('within').click()
+        })
+
         cy.wrap(runner.emit).should('be.calledWith', 'runner:show:snapshot', 'r3', fakeIdForTest)
       })
 
       it('unpins after clicking again, does not re-print to the console', () => {
         cy.spy(runner, 'emit')
-        cy.get('.command-name-within').click('top')
-        cy.get('.command-name-within').click('top')
+        cy.get('.command-name-within').within(() => {
+          cy.contains('within').click()
+        })
+
+        cy.get('.command-name-within').within(() => {
+          cy.contains('within').click()
+        })
+
         // @ts-ignore
         cy.wrap(runner.emit.withArgs('runner:console:log')).should('be.calledOnce')
       })

packages/reporter/cypress/e2e/header.cy.ts

@@ -57,7 +57,7 @@ describe('header', () => {
     })
 
     it('shows \'Tests\' when >= 398px wide', () => {
-      cy.get('.toggle-specs-wrapper span').should('be.visible')
+      cy.get('[data-cy=toggle-specs-button]').should('be.visible')
     })
   })
 

packages/reporter/cypress/e2e/meta_&%.cy.ts

@@ -3,7 +3,7 @@
 describe('special characters', () => {
   it('displays file name with decoded special characters', () => {
     cy.wrap(Cypress.$(window.top.document.body))
-    .find('.reporter .runnable-header a')
-    .should('have.text', 'meta_&%.cy.ts')
+    .find('.reporter .runnable-header')
+    .contains('meta_&%.cy.ts')
   })
 })

packages/reporter/cypress/e2e/runnables.cy.ts

@@ -137,8 +137,8 @@ describe('runnables', () => {
 
   it('does not display time if no time taken', () => {
     start()
-    cy.get('.runnable-header span:first').should('have.text', 'foo.js')
-    cy.get('.runnable-header span:last').should('not.have.text', '--')
+    cy.get('.runnable-header .runnable-header-file-name').contains('foo.js')
+    cy.get('.runnable-header .duration').should('not.exist')
   })
 
   describe('when there are no tests', () => {
@@ -204,11 +204,12 @@ describe('runnables', () => {
     })
 
     it('contains name of spec and emits when clicked', () => {
-      const selector = '.runnable-header a'
+      const selector = '.runnable-header-file-name'
 
       cy.stub(runner, 'emit').callThrough()
 
-      cy.get(selector).as('spec-title').contains('foo.js')
+      cy.get(selector).as('spec-title').contains('foo.js').realHover()
+      cy.get('.open-in-ide-button').click()
       cy.get(selector).click().then(() => {
         expect(runner.emit).to.be.calledWith('open:file:unified')
       })

packages/reporter/cypress/e2e/shortcuts.cy.ts

@@ -82,17 +82,17 @@ describe('shortcuts', function () {
 
       cy.get('body').then(() => {
         expect(runner.emit).not.to.have.been.calledWith('save:state')
-        cy.contains('button', 'Specs').should('have.attr', 'aria-expanded', 'false')
+        cy.get('[data-cy=toggle-specs-button]').should('have.attr', 'aria-expanded', 'false')
       })
 
       cy.get('body').type('f').then(() => {
         expect(runner.emit).to.have.been.calledWith('save:state')
-        cy.contains('button', 'Specs').should('have.attr', 'aria-expanded', 'true')
+        cy.get('[data-cy=toggle-specs-button]').should('have.attr', 'aria-expanded', 'true')
       })
 
       cy.get('body').type('f').then(() => {
         expect(runner.emit).to.have.been.calledWith('save:state')
-        cy.contains('button', 'Specs').should('have.attr', 'aria-expanded', 'false')
+        cy.get('[data-cy=toggle-specs-button]').should('have.attr', 'aria-expanded', 'false')
       })
     })
 
@@ -140,9 +140,9 @@ describe('shortcuts', function () {
     })
 
     it('has shortcut in tooltips', () => {
-      cy.get('.toggle-specs-wrapper > button').trigger('mouseover')
+      cy.get('[data-cy=toggle-specs-button]').trigger('mouseover')
       cy.get('.cy-tooltip').should('have.text', 'Expand Specs List F')
-      cy.get('.toggle-specs-wrapper > button').trigger('mouseout')
+      cy.get('[data-cy=toggle-specs-button]').trigger('mouseout')
 
       cy.get('button.restart').trigger('mouseover')
       cy.get('.cy-tooltip').should('have.text', 'Run All Tests R')

packages/reporter/cypress/e2e/spec_title.cy.ts

@@ -55,19 +55,24 @@ describe('spec title', () => {
     })
 
     it('displays name without path', () => {
-      cy.get('.runnable-header').find('a').should('have.text', 'foo.js')
+      cy.get('.runnable-header-file-name').contains('foo.js')
 
       cy.percySnapshot()
     })
 
-    it('displays tooltip on hover', () => {
-      cy.get('.runnable-header a').first().trigger('mouseover')
-      cy.get('.cy-tooltip').first().should('have.text', 'Open in IDE')
+    it('displays Open in IDE button on spec name hover', () => {
+      cy.get('.open-in-ide-button').should('have.css', 'opacity', '0')
+
+      cy.get('.runnable-header-file-name').realHover()
+      cy.get('.open-in-ide-button').should('have.css', 'opacity', '1')
+      cy.get('.open-in-ide-button').contains('Open in IDE')
+
+      cy.percySnapshot()
     })
 
     itHandlesFileOpening({
       getRunner: () => runner,
-      selector: '.runnable-header a',
+      selector: '.open-in-ide-button',
       file: {
         file: '/absolute/path/to/foo.js',
         line: 0,