diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md index c8a7f037bb8b..474727f24138 100644 --- a/cli/CHANGELOG.md +++ b/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). diff --git a/packages/app/src/navigation/SidebarNavigation.cy.tsx b/packages/app/src/navigation/SidebarNavigation.cy.tsx index 2af4905e297d..10aeb2997698 100644 --- a/packages/app/src/navigation/SidebarNavigation.cy.tsx +++ b/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') }) diff --git a/packages/app/src/navigation/SidebarNavigation.vue b/packages/app/src/navigation/SidebarNavigation.vue index e0941277fc60..0cbd79e58a6b 100644 --- a/packages/app/src/navigation/SidebarNavigation.vue +++ b/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') { diff --git a/packages/app/src/navigation/SidebarNavigationRow.vue b/packages/app/src/navigation/SidebarNavigationRow.vue index 7a3eb1a9b0d3..c9624ce3e325 100644 --- a/packages/app/src/navigation/SidebarNavigationRow.vue +++ b/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 = {