From 9892f452a8578796516ac207f4b4ad3d8811e1fa Mon Sep 17 00:00:00 2001 From: Mike Plummer Date: Tue, 7 Feb 2023 09:47:54 -0600 Subject: [PATCH 1/3] misc: Increase max failures in IATR badge to 99 --- cli/CHANGELOG.md | 1 + .../src/navigation/SidebarNavigation.cy.tsx | 8 ++++++-- .../app/src/navigation/SidebarNavigation.vue | 4 ++-- .../src/navigation/SidebarNavigationRow.vue | 19 ++++++++++++++++++- 4 files changed, 27 insertions(+), 5 deletions(-) diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md index 2b20a859d206..2d0306272e1a 100644 --- a/cli/CHANGELOG.md +++ b/cli/CHANGELOG.md @@ -11,6 +11,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). - 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). **Dependency Updates:** 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..6c3186768f07 100644 --- a/packages/app/src/navigation/SidebarNavigationRow.vue +++ b/packages/app/src/navigation/SidebarNavigationRow.vue @@ -82,7 +82,24 @@ 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') + + // Right-align failure counts within sidebar (#25662) + if (props.badge.status === 'failed' || props.badge.status === 'error') { + // Add min-width so that single-digit badge overlaps sidebar icon at least a little + classes.push('right-4px', 'min-w-20px', 'text-center') + } else { + // Non-failures should left-align and overflow sidebar if needed + classes.push('left-36px') + } + } + + return classes }) const badgeColorStyles = { From 8fb6cb92dc11c073ae3a249e29f4ce9b79f20425 Mon Sep 17 00:00:00 2001 From: Mike Plummer Date: Wed, 8 Feb 2023 08:44:31 -0600 Subject: [PATCH 2/3] Only right-align for failure count >=3 chars --- packages/app/src/navigation/SidebarNavigationRow.vue | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/app/src/navigation/SidebarNavigationRow.vue b/packages/app/src/navigation/SidebarNavigationRow.vue index 6c3186768f07..c9624ce3e325 100644 --- a/packages/app/src/navigation/SidebarNavigationRow.vue +++ b/packages/app/src/navigation/SidebarNavigationRow.vue @@ -89,12 +89,11 @@ const badgeVariant = computed(() => { } else { classes.push('absolute', 'outline-gray-1000', 'outline-2px', 'outline', 'bottom-0', 'text-xs', 'h-16px', 'leading-2') - // Right-align failure counts within sidebar (#25662) - if (props.badge.status === 'failed' || props.badge.status === 'error') { - // Add min-width so that single-digit badge overlaps sidebar icon at least a little - classes.push('right-4px', 'min-w-20px', 'text-center') + // 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 { - // Non-failures should left-align and overflow sidebar if needed + // Anything else should left-align and overflow sidebar if needed classes.push('left-36px') } } From 0be5ac1fb9a0795150e10b59fb19f959bcc9a232 Mon Sep 17 00:00:00 2001 From: Mike Plummer Date: Thu, 9 Feb 2023 12:32:19 -0600 Subject: [PATCH 3/3] run ci