From 0f8df43fcd4d9e42d2c7698b84ca150aad4f806c Mon Sep 17 00:00:00 2001
From: Zach Bloomquist <git@chary.us>
Date: Thu, 6 May 2021 16:42:48 -0400
Subject: [PATCH 1/2] ui: display duplicate aliases in command log

---
 .../cypress/fixtures/runnables_commands.json  |  6 +++--
 .../cypress/integration/commands_spec.ts      | 14 ++++++++++
 packages/reporter/src/commands/command.tsx    | 27 ++++++++++++-------
 3 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/packages/reporter/cypress/fixtures/runnables_commands.json b/packages/reporter/cypress/fixtures/runnables_commands.json
index 63fd46446ade..285622f5bf99 100644
--- a/packages/reporter/cypress/fixtures/runnables_commands.json
+++ b/packages/reporter/cypress/fixtures/runnables_commands.json
@@ -113,7 +113,8 @@
           "event": true,
           "testId": "r3",
           "timeout": 4000,
-          "type": "parent"
+          "type": "parent",
+          "alias": "dup0"
         },
         {
           "hookId": "r3",
@@ -126,7 +127,8 @@
           "event": true,
           "testId": "r3",
           "timeout": 4000,
-          "type": "parent"
+          "type": "parent",
+          "alias": "dup1"
         },
         {
           "hookId": "r3",
diff --git a/packages/reporter/cypress/integration/commands_spec.ts b/packages/reporter/cypress/integration/commands_spec.ts
index 462d47ca83ac..4790cf41c96b 100644
--- a/packages/reporter/cypress/integration/commands_spec.ts
+++ b/packages/reporter/cypress/integration/commands_spec.ts
@@ -228,6 +228,11 @@ describe('commands', () => {
       .should('have.text', '4')
     })
 
+    it('displays names of duplicates', () => {
+      cy.contains('GET --- /dup').closest('.command').find('.command-alias')
+      .should('have.text', 'dup0, dup1')
+    })
+
     it('expands all events after clicking arrow', () => {
       cy.contains('GET --- /dup').closest('.command').find('.command-expander').click()
       cy.get('.command-name-xhr').should('have.length', 6)
@@ -235,6 +240,15 @@ describe('commands', () => {
       .should('be.visible')
       .find('.command').should('have.length', 3)
     })
+
+    it('splits up duplicate names when expanded', () => {
+      cy.contains('GET --- /dup').closest('.command').as('cmd')
+
+      cy.get('@cmd').find('.command-expander').click()
+      cy.get('@cmd').find('.command-alias').as('alias')
+      cy.get('@alias').its(0).should('have.text', 'dup0')
+      cy.get('@alias').its(1).should('have.text', 'dup1')
+    })
   })
 
   context('clicking', () => {
diff --git a/packages/reporter/src/commands/command.tsx b/packages/reporter/src/commands/command.tsx
index 8e9ca3711e13..6a6bb28d872e 100644
--- a/packages/reporter/src/commands/command.tsx
+++ b/packages/reporter/src/commands/command.tsx
@@ -78,22 +78,31 @@ const AliasesReferences = observer(({ model, aliasesWithDuplicates }: AliasesRef
 ))
 
 interface AliasesProps {
+  isOpen: boolean
   model: CommandModel
   aliasesWithDuplicates: Array<Alias> | null
 }
 
-const Aliases = observer(({ model, aliasesWithDuplicates }: AliasesProps) => {
+const Aliases = observer(({ model, aliasesWithDuplicates, isOpen }: AliasesProps) => {
   if (!model.alias) return null
 
   return (
     <span>
-      {_.map(([] as Array<Alias>).concat(model.alias), (alias) => (
-        <Tooltip key={alias} placement='top' title={`${model.displayMessage} aliased as: '${alias}'`} className='cy-tooltip'>
-          <span className={cs('command-alias', `${model.aliasType}`, { 'show-count': shouldShowCount(aliasesWithDuplicates, alias, model) })}>
-            {alias}
-          </span>
-        </Tooltip>
-      ))}
+      {_.map(([] as Array<Alias>).concat(model.alias), (alias) => {
+        const aliases = [alias]
+
+        if (!isOpen && model.hasDuplicates) {
+          aliases.push(..._.compact(model.duplicates.map((dupe) => dupe.alias)))
+        }
+
+        return (
+          <Tooltip key={alias} placement='top' title={`${model.displayMessage} aliased as: ${aliases.map((alias) => `'${alias}'`).join(', ')}`} className='cy-tooltip'>
+            <span className={cs('command-alias', `${model.aliasType}`, { 'show-count': shouldShowCount(aliasesWithDuplicates, alias, model) })}>
+              {aliases.join(', ')}
+            </span>
+          </Tooltip>
+        )
+      })}
     </span>
   )
 })
@@ -213,7 +222,7 @@ class Command extends Component<Props> {
                   <span className='num-elements'>{model.numElements}</span>
                 </Tooltip>
                 <span className='alias-container'>
-                  <Aliases model={model} aliasesWithDuplicates={aliasesWithDuplicates} />
+                  <Aliases model={model} aliasesWithDuplicates={aliasesWithDuplicates} isOpen={this.isOpen} />
                   <Tooltip placement='top' title={`This event occurred ${model.numDuplicates} times`} className='cy-tooltip'>
                     <span className={cs('num-duplicates', { 'has-alias': model.alias })}>{model.numDuplicates}</span>
                   </Tooltip>

From 3ee632e2fe8edd10accbe67b131af3558d2e3e60 Mon Sep 17 00:00:00 2001
From: Jennifer Shehane <jennifer@cypress.io>
Date: Fri, 7 May 2021 09:11:46 -0500
Subject: [PATCH 2/2] CSS updates for duplicate aliases

---
 packages/reporter/src/commands/command.tsx   |  2 +-
 packages/reporter/src/commands/commands.scss | 17 ++++++++++++-----
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/packages/reporter/src/commands/command.tsx b/packages/reporter/src/commands/command.tsx
index 6a6bb28d872e..09908cf338db 100644
--- a/packages/reporter/src/commands/command.tsx
+++ b/packages/reporter/src/commands/command.tsx
@@ -224,7 +224,7 @@ class Command extends Component<Props> {
                 <span className='alias-container'>
                   <Aliases model={model} aliasesWithDuplicates={aliasesWithDuplicates} isOpen={this.isOpen} />
                   <Tooltip placement='top' title={`This event occurred ${model.numDuplicates} times`} className='cy-tooltip'>
-                    <span className={cs('num-duplicates', { 'has-alias': model.alias })}>{model.numDuplicates}</span>
+                    <span className={cs('num-duplicates', { 'has-alias': model.alias, 'has-duplicates': model.numDuplicates > 1 })}>{model.numDuplicates}</span>
                   </Tooltip>
                 </span>
               </span>
diff --git a/packages/reporter/src/commands/commands.scss b/packages/reporter/src/commands/commands.scss
index c9dce8c732c8..e364854e6d2c 100644
--- a/packages/reporter/src/commands/commands.scss
+++ b/packages/reporter/src/commands/commands.scss
@@ -104,10 +104,6 @@
         padding: 0 5px;
         display: inline-block;
 
-        &.show-count {
-          padding-right: 2px;
-        }
-
         &.route {
           background-color: $yellow-medium;
         }
@@ -122,7 +118,13 @@
         }
 
         &.show-count {
+          padding-right: 2px;
           border-radius: 10px 0 0 10px;
+          max-width: 200px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          vertical-align: top;
         }
       }
 
@@ -148,10 +150,15 @@
 
       .num-duplicates.has-alias {
         border-radius: 10px;
-        line-height: 2;
+        line-height: 1;
         padding: 3px 5px 3px 5px;
       }
 
+      .num-duplicates.has-alias.has-duplicates {
+        border-radius: 0 10px 10px 0;
+        padding: 4px 5px 2px 3px;
+      }
+
       .command-alias-count {
         border-radius: 0 10px 10px 0;
         padding: 5px 6px 3px 4px;