test(unify): Reporter header e2e tests (#20005)

Co-authored-by: Emily Rohrbough  <emilyrohrbough@users.noreply.github.com>

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

@@ -0,0 +1,71 @@
+describe('Reporter Header', () => {
+  beforeEach(() => {
+    cy.scaffoldProject('cypress-in-cypress')
+    cy.openProject('cypress-in-cypress')
+    cy.startAppServer()
+    cy.visitApp()
+    cy.contains('dom-content.spec').click()
+  })
+
+  context('Specs Shortcut', () => {
+    it('selects the correct spec in the Specs List', () => {
+      cy.location().should((location) => {
+        expect(location.hash).to.contain('dom-content.spec')
+      })
+
+      cy.get('[data-selected-spec="true"]').should('contain', 'dom-content').should('have.length', '1')
+      cy.get('[data-selected-spec="false"]').should('have.length', '1')
+    })
+
+    it('filters the list of specs when searching for specs', () => {
+      cy.location().should((location) => {
+        expect(location.hash).to.contain('dom-content.spec')
+      })
+
+      cy.get('input').type('dom', { force: true })
+
+      cy.get('[data-testid="spec-file-item"]').should('have.length', 1)
+      .should('contain', 'dom-content.spec')
+
+      cy.get('input').clear()
+
+      cy.get('[data-testid="spec-file-item"]').should('have.length', '1')
+
+      cy.get('input').type('asdf', { force: true })
+
+      cy.get('[data-testid="spec-file-item"]').should('have.length', 0)
+    })
+  })
+
+  context('Testing Preferences', () => {
+    it('clicking the down arrow will open a panel showing Testing Preferences', () => {
+      cy.location().should((location) => {
+        expect(location.hash).to.contain('dom-content.spec')
+      })
+
+      cy.get('.testing-preferences-toggle').trigger('mouseover')
+      cy.get('.cy-tooltip').should('have.text', 'Open Testing Preferences')
+
+      cy.get('.testing-preferences').should('not.exist')
+      cy.get('.testing-preferences-toggle').should('not.have.class', 'open').click()
+      cy.get('.testing-preferences-toggle').should('have.class', 'open')
+      cy.get('.testing-preferences').should('be.visible')
+      cy.get('.testing-preferences-toggle').click()
+      cy.get('.testing-preferences-toggle').should('not.have.class', 'open')
+      cy.get('.testing-preferences').should('not.exist')
+    })
+
+    it('will show a toggle beside the auto-scrolling option', () => {
+      cy.location().should((location) => {
+        expect(location.hash).to.contain('dom-content.spec')
+      })
+
+      const switchSelector = '[data-cy=auto-scroll-switch]'
+
+      cy.get('.testing-preferences-toggle').click()
+      cy.get(switchSelector).invoke('attr', 'aria-checked').should('eq', 'true')
+      cy.get(switchSelector).click()
+      cy.get(switchSelector).invoke('attr', 'aria-checked').should('eq', 'false')
+    })
+  })
+})

packages/app/src/specs/InlineSpecListTree.cy.tsx

@@ -64,7 +64,7 @@ describe('InlineSpecListTree', () => {
       </div>
     ))
 
-    cy.get('[data-selected-spec="true"').should('contain', 'Spec-B')
+    cy.get('[data-selected-spec="true"').should('contain', 'Spec-B').should('have.css', 'border-color', 'rgb(154, 162, 252)')
     cy.get('[data-selected-spec="false"').should('have.length', '6')
     .should('contain', 'src')
     .should('contain', 'components')