fix: report header stats overlapping issue with 4 digit test count (#…

…23469)
cypress-io · Oct 28, 2022 · b3360d6 · b3360d6 · cypress-bot · Oct 28, 2022
1 parent 9ceb95d
commit b3360d6
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 2 deletions.
diff --git a/packages/reporter/src/header/header.scss b/packages/reporter/src/header/header.scss
@@ -93,7 +93,7 @@ $color-transition: color 150ms ease-out;
     height: 24px;
     justify-content: space-between;
     padding: 0 4px;
-    width: 124px;
+    min-width: 124px;
 
     li {
       display: flex;
@@ -110,7 +110,7 @@ $color-transition: color 150ms ease-out;
         color: $white;
         line-height: 12px;
         vertical-align: text-top;
-        width: 16px;
+        min-width: 16px;
         display: inline-block;
         text-align: center;
 

diff --git a/packages/reporter/src/header/stats.cy.tsx b/packages/reporter/src/header/stats.cy.tsx
@@ -0,0 +1,20 @@
+import { AppState } from '../lib/app-state'
+import { StatsStore } from './stats-store'
+import Header from './header'
+import React from 'react'
+
+describe('stats score header', () => {
+  it('Shows stats with more than 4 digit test count nicely', () => {
+    const appState = new AppState()
+    const statsStore = new StatsStore()
+
+    statsStore.start({ startTime: new Date().toISOString(), numPassed: 999999, numFailed: 999999, numPending: 999999 })
+    statsStore.end()
+
+    cy.mount(
+      <Header statsStore={statsStore} appState={appState} />,
+    )
+
+    cy.percySnapshot()
+  })
+})