ui: display duplicate aliases in command log

cypress-io · May 6, 2021 · 0f8df43 · 0f8df43
1 parent a15c455
commit 0f8df43
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 11 deletions.
diff --git 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
@@ -228,13 +228,27 @@ 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)
       cy.contains('GET --- /dup').closest('.command').find('.duplicates')
       .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
@@ -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>