feat(Unification): Update Command Group UI

circle.yml

@@ -29,7 +29,7 @@ mainBuildFilters: &mainBuildFilters
       only:
         - develop
         - 10.0-release
-        - chore/cutover-to-bundled-react-mount
+        - new-cmd-log-styles
 
 # uncomment & add to the branch conditions below to disable the main linux
 # flow if we don't want to test it for a certain branch
@@ -47,7 +47,7 @@ macWorkflowFilters: &mac-workflow-filters
     or:
     - equal: [ develop, << pipeline.git.branch >> ]
     - equal: [ '10.0-release', << pipeline.git.branch >> ]
-    - equal: [ chore/cutover-to-bundled-react-mount, << pipeline.git.branch >> ]
+    - equal: [ new-cmd-log-styles, << pipeline.git.branch >> ]
     - matches:
           pattern: "-release$"
           value: << pipeline.git.branch >>
@@ -108,6 +108,16 @@ executors:
       PLATFORM: windows
 
 commands:
+  verify_should_persist_artifacts:
+    steps:
+      - run:
+          name: Check current branch to persist artifacts
+          command: |
+            if [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "new-cmd-log-styles" && "$CIRCLE_BRANCH" != "10.0-release" ]]; then
+              echo "Not uploading artifacts or posting install comment for this branch."
+              circleci-agent step halt
+            fi
+
   restore_workspace_binaries:
     steps:
       - attach_workspace:
@@ -1716,13 +1726,7 @@ jobs:
       - build-binary
       - build-cypress-npm-package:
           executor: << parameters.executor >>
-      - run:
-          name: Check current branch to persist artifacts
-          command: |
-            if [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "chore/cutover-to-bundled-react-mount" && "$CIRCLE_BRANCH" != "unify-1036-windows-test-projects" && "$CIRCLE_BRANCH" != "10.0-release" ]]; then
-              echo "Not uploading artifacts or posting install comment for this branch."
-              circleci-agent step halt
-            fi
+      - verify_should_persist_artifacts
       - upload-build-artifacts
       - post-install-comment
 

packages/app/cypress/e2e/runner/runner.ui.cy.ts

@@ -270,7 +270,7 @@ describe('src/cypress/runner', () => {
         failCount: 1,
       })
 
-      cy.get('.command-number:contains(25)').should('be.visible')
+      cy.get('.command-number-column:contains(25)').should('be.visible')
     })
 
     it('file with empty suites only displays no tests found', () => {

packages/driver/cypress/e2e/commands/actions/click.cy.js

@@ -1,9 +1,6 @@
 const { _, $, Promise } = Cypress
 const {
   assertLogLength,
-  getCommandLogWithText,
-  findReactInstance,
-  withMutableReporterState,
   clickCommandLog,
   attachListeners,
   shouldBeCalledWithCount,
@@ -4762,23 +4759,10 @@ describe('mouse state', () => {
 
       cy.get('input:first').click()
 
-      cy.wrap(null)
-      .should(() => {
-        spyTableName.resetHistory()
-        spyTableData.resetHistory()
-
-        return withMutableReporterState(() => {
-          const commandLogEl = getCommandLogWithText('click')
-
-          const reactCommandInstance = findReactInstance(commandLogEl.get(0))
-
-          reactCommandInstance.props.appState.isRunning = false
-
-          commandLogEl.find('.command-wrapper').click()
-
-          expect(spyTableName).calledWith('Mouse Events')
-          expect(spyTableData).calledOnce
-        })
+      clickCommandLog('click')
+      .then(() => {
+        expect(spyTableName).calledWith('Mouse Events')
+        expect(spyTableData).calledOnce
       })
     })
 
@@ -4788,26 +4772,13 @@ describe('mouse state', () => {
 
       cy.get('input:first').dblclick()
 
-      cy.wrap(null, { timeout: 1000 })
-      .should(() => {
-        spyTableName.resetHistory()
-        spyTableData.resetHistory()
-
-        return withMutableReporterState(() => {
-          const commandLogEl = getCommandLogWithText('click')
-
-          const reactCommandInstance = findReactInstance(commandLogEl.get(0))
-
-          reactCommandInstance.props.appState.isRunning = false
-
-          commandLogEl.find('.command-wrapper').click()
-
-          expect(spyTableName).calledWith('Mouse Events')
-          expect(spyTableData).calledOnce
-          expect(spyTableData.lastCall.args[0]).property('8').includes({ 'Event Type': 'click' })
-          expect(spyTableData.lastCall.args[0]).property('13').includes({ 'Event Type': 'click' })
-          expect(spyTableData.lastCall.args[0]).property('14').includes({ 'Event Type': 'dblclick' })
-        })
+      clickCommandLog('click')
+      .then(() => {
+        expect(spyTableName).calledWith('Mouse Events')
+        expect(spyTableData).calledOnce
+        expect(spyTableData.lastCall.args[0]).property('8').includes({ 'Event Type': 'click' })
+        expect(spyTableData.lastCall.args[0]).property('13').includes({ 'Event Type': 'click' })
+        expect(spyTableData.lastCall.args[0]).property('14').includes({ 'Event Type': 'dblclick' })
       })
     })
 
@@ -4817,24 +4788,11 @@ describe('mouse state', () => {
 
       cy.get('input:first').rightclick()
 
-      cy.wrap(null)
-      .should(() => {
-        spyTableName.resetHistory()
-        spyTableData.resetHistory()
-
-        return withMutableReporterState(() => {
-          const commandLogEl = getCommandLogWithText('click')
-
-          const reactCommandInstance = findReactInstance(commandLogEl.get(0))
-
-          reactCommandInstance.props.appState.isRunning = false
-
-          commandLogEl.find('.command-wrapper').click()
-
-          expect(spyTableName).calledWith('Mouse Events')
-          expect(spyTableData).calledOnce
-          expect(spyTableData.lastCall.args[0]).property('8').includes({ 'Event Type': 'contextmenu' })
-        })
+      clickCommandLog('click')
+      .then(() => {
+        expect(spyTableName).calledWith('Mouse Events')
+        expect(spyTableData).calledOnce
+        expect(spyTableData.lastCall.args[0]).property('8').includes({ 'Event Type': 'contextmenu' })
       })
     })
   })

packages/driver/cypress/e2e/commands/actions/type.cy.js

@@ -1,9 +1,7 @@
 const { _, $ } = Cypress
 const { Promise } = Cypress
 const {
-  getCommandLogWithText,
-  findReactInstance,
-  withMutableReporterState,
+  clickCommandLog,
   attachKeyListeners,
   keyEvents,
   trimInnerText,
@@ -3027,23 +3025,14 @@ describe('src/cy/commands/actions/type - #type', () => {
     it('can print table of keys on click', () => {
       cy.get('input:first').type('foo')
 
-      .then(() => {
-        return withMutableReporterState(() => {
-          const spyTableName = cy.spy(top.console, 'group')
-          const spyTableData = cy.spy(top.console, 'table')
-
-          const commandLogEl = getCommandLogWithText('foo', 'message-text')
-
-          const reactCommandInstance = findReactInstance(commandLogEl[0])
-
-          reactCommandInstance.props.appState.isRunning = false
+      const spyTableName = cy.spy(top.console, 'group')
+      const spyTableData = cy.spy(top.console, 'table')
 
-          $(commandLogEl).find('.command-wrapper').click()
-
-          expect(spyTableName.firstCall).calledWith('Mouse Events')
-          expect(spyTableName.secondCall).calledWith('Keyboard Events')
-          expect(spyTableData).calledTwice
-        })
+      clickCommandLog('foo', 'message-text')
+      .then(() => {
+        expect(spyTableName.firstCall).calledWith('Mouse Events')
+        expect(spyTableName.secondCall).calledWith('Keyboard Events')
+        expect(spyTableData).calledTwice
       })
     })
   })

packages/driver/cypress/e2e/e2e/dom_hitbox.cy.js

@@ -114,13 +114,14 @@ const ensureCorrectHighlightPositions = (sel) => {
     const doc = els.content[0].ownerDocument
 
     const contentHighlightCenter = [dims.content.x + dims.content.width / 2, dims.content.y + dims.content.height / 2]
+    const highlightedEl = doc.elementFromPoint(...contentHighlightCenter)
 
-    expect(doc.elementFromPoint(...contentHighlightCenter)).eq(els.content[0])
+    expect(highlightedEl).eq(els.content[0])
 
     expectToBeInside(dims.content, dims.padding, 'content to be inside padding')
     expectToBeInside(dims.padding, dims.border, 'padding to be inside border')
     if (sel) {
-      // assert convering bounding-box of element
+      // assert converting bounding-box of element
       expectToBeEqual(dims.border, cy.$$(sel)[0].getBoundingClientRect(), 'border-box to match selector bounding-box')
     }
   })

packages/driver/cypress/support/utils.js

@@ -32,10 +32,9 @@ export const clickCommandLog = (sel, type) => {
       }
 
       reactCommandInstance.props.appState.isRunning = false
+      const inner = $(commandLogEl).find('.command-wrapper-text')
 
-      $(commandLogEl).find('.command-wrapper')
-      .click()
-      .get(0).scrollIntoView()
+      inner.get(0).click()
 
       // make sure command was pinned, otherwise throw a better error message
       expect(cy.$$('.runnable-active .command-pin', top.document).length, 'command should be pinned').ok

packages/driver/src/cypress/log.ts

@@ -13,7 +13,7 @@ import $errUtils from './error_utils'
 const groupsOrTableRe = /^(groups|table)$/
 const parentOrChildRe = /parent|child|system/
 const SNAPSHOT_PROPS = 'id snapshots $el url coords highlightAttr scrollBy viewportWidth viewportHeight'.split(' ')
-const DISPLAY_PROPS = 'id alias aliasType callCount displayName end err event functionName hookId instrument isStubbed group message method name numElements showError numResponses referencesAlias renderProps state testId timeout type url visible wallClockStartedAt testCurrentRetry'.split(' ')
+const DISPLAY_PROPS = 'id alias aliasType callCount displayName end err event functionName groupLevel hookId instrument isStubbed group message method name numElements showError numResponses referencesAlias renderProps state testId timeout type url visible wallClockStartedAt testCurrentRetry'.split(' ')
 const BLACKLIST_PROPS = 'snapshots'.split(' ')
 
 let counter = 0
@@ -206,6 +206,7 @@ const defaults = function (state: Cypress.State, config, obj) {
 
   if (logGroupIds.length) {
     obj.group = _.last(logGroupIds)
+    obj.groupLevel = logGroupIds.length
   }
 
   if (obj.groupEnd) {