feat: Updating reporter panel's default width to match new designs (#20231)

* feat: Updating default reporter width to 450px

* Updating component tests to account for new default panel 2 width

* Giving the cypress-in-cypress tests a little more room to breath

* Updating trigger test coordinate assertions to be have consistent results regardless of AUT scaling

* Updating scale assertion now that available width has changed

Author: tbiethman

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

@@ -1,7 +1,7 @@
 import defaultMessages from '@packages/frontend-shared/src/locales/en-US.json'
 import { snapshotAUTPanel } from './support/snapshot-aut-panel'
 
-describe('Cypress In Cypress', { viewportWidth: 1200 }, () => {
+describe('Cypress In Cypress', { viewportWidth: 1500 }, () => {
   beforeEach(() => {
     cy.scaffoldProject('cypress-in-cypress')
     cy.findBrowsers()

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

@@ -1,7 +1,7 @@
 import defaultMessages from '@packages/frontend-shared/src/locales/en-US.json'
 import { snapshotAUTPanel } from './support/snapshot-aut-panel'
 
-describe('Cypress In Cypress', { viewportWidth: 1200 }, () => {
+describe('Cypress In Cypress', { viewportWidth: 1500 }, () => {
   beforeEach(() => {
     cy.scaffoldProject('cypress-in-cypress')
     cy.findBrowsers()

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

@@ -18,7 +18,7 @@ describe('Cypress In Cypress - run mode', { viewportWidth: 1200 }, () => {
 
     // confirm expected content is rendered
     cy.contains('1000x660').should('be.visible')
-    cy.contains('84%').should('be.visible')
+    cy.contains('71%').should('be.visible')
     cy.contains('Chrome 1').should('be.visible')
     cy.contains('http://localhost:4455/cypress/e2e/dom-content.html').should('be.visible')
 

packages/app/src/runner/ResizablePanels.cy.tsx

@@ -68,11 +68,11 @@ describe('<ResizablePanels />', { viewportWidth: 1500, defaultCommandTimeout: 40
       assertWidth('panel1', minPanel1Width)
 
       // drag panel 1 to the maximum space available and attempt to go above it
-      dragHandleToClientX('panel1', 680)
-      dragHandleToClientX('panel1', 691)
-      assertWidth('panel1', 680)
+      dragHandleToClientX('panel1', 550)
+      dragHandleToClientX('panel1', 561)
+      assertWidth('panel1', 550)
       dragHandleToClientX('panel1', 700)
-      assertWidth('panel1', 680)
+      assertWidth('panel1', 550)
 
       // panel 2 was not reduced
       assertWidth('panel2', defaultPanel2Width)
@@ -163,9 +163,10 @@ describe('<ResizablePanels />', { viewportWidth: 1500, defaultCommandTimeout: 40
 
       cy.contains('panel2').should('not.be.visible')
       assertWidth('panel1', defaultPanel1Width)
-      dragHandleToClientX('panel1', 1000)
-      assertWidth('panel1', 1000)
-      assertWidth('panel3', 500)
+      dragHandleToClientX('panel1', 950)
+      dragHandleToClientX('panel1', 955)
+      assertWidth('panel1', 950)
+      assertWidth('panel3', 550)
     })
 
     it('Panel 3 resizes correctly when both panels are hidden', () => {

packages/app/src/runner/runner-constants.ts

@@ -1,4 +1,4 @@
 export const runnerConstants = {
   defaultSpecListWidth: 280,
-  defaultReporterWidth: 320,
+  defaultReporterWidth: 450,
 }

packages/driver/cypress/e2e/commands/actions/trigger.cy.js

@@ -782,11 +782,15 @@ describe('src/cy/commands/actions/trigger', () => {
 
     describe('position argument', () => {
       it('can trigger event on center by default', (done) => {
-        const $button = cy.$$('<button />').css({ width: 200, height: 100 }).prependTo(cy.$$('body'))
+        const height = 100
+        const $button = cy.$$('<button />').css({ width: 200, height }).prependTo(cy.$$('body'))
 
         const onMouseover = function (e) {
           expect(e.clientX).to.equal(108)
-          expect(e.clientY).to.equal(50)
+
+          // NOTE: in firefox, the element's top value can vary depending on how the AUT is scaled.
+          // So we factor the top value into our assertion in a manner similar to the coordinate calculations.
+          expect(e.clientY).to.equal((height / 2) + Math.floor(e.target.getBoundingClientRect().top))
 
           done()
         }
@@ -797,25 +801,30 @@ describe('src/cy/commands/actions/trigger', () => {
       })
 
       it('can trigger event on center', (done) => {
-        const $button = cy.$$('<button />').css({ width: 200, height: 100 }).prependTo(cy.$$('body'))
+        const height = 100
+        const $button = cy.$$('<button />').css({ width: 200, height }).prependTo(cy.$$('body'))
 
         const onMouseover = function (e) {
           expect(e.clientX).to.equal(108)
-          expect(e.clientY).to.equal(50)
+
+          // NOTE: in firefox, the element's top value varies depending on how the AUT is scaled. So we factor
+          // the top value into our assertion in a manner similar to the coordinate calculations.
+          expect(e.clientY).to.equal((height / 2) + Math.floor(e.target.getBoundingClientRect().top))
 
           done()
         }
 
         $button.on('mouseover', onMouseover)
-
         cy.get('button:first').trigger('mouseover', 'center')
       })
 
       it('can trigger event on topLeft', (done) => {
         const $button = cy.$$('<button />').css({ width: 200, height: 100 }).prependTo(cy.$$('body'))
         const onMouseover = function (e) {
           expect(e.clientX).to.equal(8)
-          // NOTE: firefox leaves 1px on top of element on scroll, so add top offset
+
+          // NOTE: in firefox, the element's top value varies depending on how the AUT is scaled. So we factor
+          // the top value into our assertion in a manner similar to the coordinate calculations.
           expect(e.clientY).to.equal(0 + Math.ceil(e.target.getBoundingClientRect().top))
 
           done()
@@ -831,6 +840,9 @@ describe('src/cy/commands/actions/trigger', () => {
 
         const onMouseover = function (e) {
           expect(e.clientX).to.equal(207)
+
+          // NOTE: in firefox, the element's top value varies depending on how the AUT is scaled. So we factor
+          // the top value into our assertion in a manner similar to the coordinate calculations.
           expect(e.clientY).to.equal(0 + Math.ceil(e.target.getBoundingClientRect().top))
 
           done()
@@ -842,11 +854,15 @@ describe('src/cy/commands/actions/trigger', () => {
       })
 
       it('can trigger event on bottomLeft', (done) => {
-        const $button = cy.$$('<button />').css({ width: 200, height: 100 }).prependTo(cy.$$('body'))
+        const height = 100
+        const $button = cy.$$('<button />').css({ width: 200, height }).prependTo(cy.$$('body'))
 
         const onMouseover = function (e) {
           expect(e.clientX).to.equal(8)
-          expect(e.clientY).to.equal(99)
+
+          // NOTE: in firefox, the element's top value varies depending on how the AUT is scaled. So we factor
+          // the top value into our assertion in a manner similar to the coordinate calculations.
+          expect(e.clientY).to.equal(height + (Math.floor(e.target.getBoundingClientRect().top) - 1))
 
           done()
         }
@@ -857,11 +873,15 @@ describe('src/cy/commands/actions/trigger', () => {
       })
 
       it('can trigger event on bottomRight', (done) => {
-        const $button = cy.$$('<button />').css({ width: 200, height: 100 }).prependTo(cy.$$('body'))
+        const height = 100
+        const $button = cy.$$('<button />').css({ width: 200, height }).prependTo(cy.$$('body'))
 
         const onMouseover = function (e) {
           expect(e.clientX).to.equal(207)
-          expect(e.clientY).to.equal(99)
+
+          // NOTE: in firefox, the element's top value varies depending on how the AUT is scaled. So we factor
+          // the top value into our assertion in a manner similar to the coordinate calculations.
+          expect(e.clientY).to.equal(height + (Math.floor(e.target.getBoundingClientRect().top) - 1))
 
           done()
         }
@@ -872,11 +892,15 @@ describe('src/cy/commands/actions/trigger', () => {
       })
 
       it('can pass options along with position', (done) => {
-        const $button = cy.$$('<button />').css({ width: 200, height: 100 }).prependTo(cy.$$('body'))
+        const height = 100
+        const $button = cy.$$('<button />').css({ width: 200, height }).prependTo(cy.$$('body'))
 
         const onMouseover = function (e) {
           expect(e.clientX).to.equal(207)
-          expect(e.clientY).to.equal(99)
+
+          // NOTE: in firefox, the element's top value varies depending on how the AUT is scaled. So we factor
+          // the top value into our assertion in a manner similar to the coordinate calculations.
+          expect(e.clientY).to.equal(height + (Math.floor(e.target.getBoundingClientRect().top) - 1))
 
           done()
         }