misc: Increase max failures in IATR badge to 99 (#25737)

Author: mike-plummer

cli/CHANGELOG.md

@@ -17,6 +17,7 @@ _Released 02/14/2023 (PENDING)_
 - Improved the layout of the Debug Page on smaller viewports when there is a pending run. Addresses [#25664](https://github.com/cypress-io/cypress/issues/25664).
 - Improved the layout of the Debug Page when displaying informational messages. Addresses [#25669](https://github.com/cypress-io/cypress/issues/25669).
 - Icons in Debug page will no longer shrink at small viewports. Addresses [#25665](https://github.com/cypress-io/cypress/issues/25665).
+- Increased maximum number of failing tests to reflect in sidebar badge to 99. Addresses [#25662](https://github.com/cypress-io/cypress/issues/25662).
 - Improved the layout of the Debug Page empty states on smaller viewports. Addressed in [#25703](https://github.com/cypress-io/cypress/pull/25703).
 - Increased the spacing between elements and their associated tooltip and added borders around artifact links on the Debug Page. Addresses [#25666](https://github.com/cypress-io/cypress/issues/25666).
 

packages/app/src/navigation/SidebarNavigation.cy.tsx

@@ -170,10 +170,14 @@ describe('SidebarNavigation', () => {
     it('renders failure badge', () => {
       mountComponent({ cloudProject: { status: 'FAILED', numFailedTests: 1 } })
       cy.findByLabelText('Relevant run had 1 test failure').should('be.visible').contains('1')
-      cy.percySnapshot('Debug Badge:failed')
+      cy.percySnapshot('Debug Badge:failed:single-digit')
 
       mountComponent({ cloudProject: { status: 'FAILED', numFailedTests: 10 } })
-      cy.findByLabelText('Relevant run had 10 test failures').should('be.visible').contains('9+')
+      cy.findByLabelText('Relevant run had 10 test failures').should('be.visible').contains('10')
+      cy.percySnapshot('Debug Badge:failed:double-digit')
+
+      mountComponent({ cloudProject: { status: 'FAILED', numFailedTests: 100 } })
+      cy.findByLabelText('Relevant run had 100 test failures').should('be.visible').contains('99+')
       cy.percySnapshot('Debug Badge:failed:truncated')
     })
 

packages/app/src/navigation/SidebarNavigation.vue

@@ -202,9 +202,9 @@ watchEffect(() => {
     let countToDisplay = '0'
 
     if (totalFailed) {
-      countToDisplay = totalFailed < 9
+      countToDisplay = totalFailed < 99
         ? String(totalFailed)
-        : '9+'
+        : '99+'
     }
 
     if (status === 'FAILED') {

packages/app/src/navigation/SidebarNavigationRow.vue

@@ -82,7 +82,23 @@ const props = withDefaults(defineProps <{
 })
 
 const badgeVariant = computed(() => {
-  return props.isNavBarExpanded ? 'ml-16px h-20px text-sm leading-3' : 'absolute outline-gray-1000 outline-2px outline bottom-0 left-36px text-xs h-16px leading-2'
+  const classes: string[] = []
+
+  if (props.isNavBarExpanded) {
+    classes.push('ml-16px', 'h-20px', 'text-sm', 'leading-3')
+  } else {
+    classes.push('absolute', 'outline-gray-1000', 'outline-2px', 'outline', 'bottom-0', 'text-xs', 'h-16px', 'leading-2')
+
+    // Keep failure count from overflowing sidebar (#25662)
+    if ((props.badge.status === 'failed' || props.badge.status === 'error') && props.badge.value.length >= 3) {
+      classes.push('right-4px')
+    } else {
+      // Anything else should left-align and overflow sidebar if needed
+      classes.push('left-36px')
+    }
+  }
+
+  return classes
 })
 
 const badgeColorStyles = {