chore: Refactor Command Log UI (#20202)

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

@@ -87,7 +87,8 @@ describe('src/cypress/runner', () => {
         failCount: 0,
       })
 
-      cy.contains('li.command-name-assert.command-has-snapshot', 'assert')
+      cy.contains('li.command-name-assert', 'assert')
+      .find('.command-wrapper')
       .should('not.have.class', 'command-is-pinned')
       .click()
       .should('have.class', 'command-is-pinned')
@@ -169,21 +170,21 @@ describe('src/cypress/runner', () => {
       })
 
       cy.contains('.test', 'never gets here').should('have.class', 'runnable-failed')
-      cy.contains('.command', 'beforeEach').should('have.class', 'command-state-failed')
+      cy.contains('.command', 'beforeEach').find('.command-state-failed')
       cy.contains('.runnable-err', 'beforeEach').scrollIntoView().should('be.visible')
 
       cy.contains('.test', 'is pending').should('have.class', 'runnable-pending')
 
       cy.contains('.test', 'fails this').should('have.class', 'runnable-failed')
-      cy.contains('.command', 'afterEach').should('have.class', 'command-state-failed')
+      cy.contains('.command', 'afterEach').find('.command-state-failed')
       cy.contains('.runnable-err', 'afterEach').scrollIntoView().should('be.visible')
 
       cy.contains('.test', 'does not run this').should('have.class', 'runnable-processing')
 
       cy.contains('.test', 'runs this').should('have.class', 'runnable-passed')
 
       cy.contains('.test', 'fails on this').should('have.class', 'runnable-failed')
-      cy.contains('.command', 'after').should('have.class', 'command-state-failed')
+      cy.contains('.command', 'after').find('.command-state-failed')
       cy.contains('.runnable-err', 'after').scrollIntoView().should('be.visible')
     })
 

packages/app/cypress/e2e/runner/support/verify-failures.ts

@@ -137,7 +137,7 @@ const verifyFailure = (options) => {
       cy.log('uncaught error has an associated log for the original error')
       cy.get('.command-name-uncaught-exception')
       .should('have.length', 1)
-      .should('have.class', 'command-state-failed')
+      .find('.command-state-failed')
       .find('.command-message-text')
       .should('include.text', uncaughtMessage || originalMessage)
     } else {

packages/app/src/runner/aut-iframe.ts

@@ -1,5 +1,4 @@
 import { useSelectorPlaygroundStore } from '../store/selector-playground-store'
-import type JQuery from 'jquery'
 import { blankContents } from './blank-contents'
 import { visitFailure } from './visit-failure'
 import { logger } from './logger'

packages/driver/cypress/e2e/commands/agents.cy.js

@@ -470,7 +470,6 @@ describe('src/cy/commands/agents', () => {
 
       it('logs agent on creation', function () {
         expect(this.agentLogs[0].get('name')).to.eq('stub-1')
-        expect(this.agentLogs[0].get('type')).to.eq('stub-1')
         expect(this.agentLogs[0].get('instrument')).to.eq('agent')
       })
 
@@ -687,7 +686,6 @@ describe('src/cy/commands/agents', () => {
       // same as cy.stub() except for name and type
       it('logs agent on creation', function () {
         expect(this.logs[0].get('name')).to.eq('spy-1')
-        expect(this.logs[0].get('type')).to.eq('spy-1')
         expect(this.logs[0].get('instrument')).to.eq('agent')
       })
 

packages/driver/src/cy/commands/agents.ts

@@ -167,7 +167,6 @@ export default function (Commands, Cypress, cy, state) {
     const log = Cypress.log({
       instrument: 'agent',
       name,
-      type: name,
       functionName: method,
       count,
       callCount: 0,

packages/driver/src/cy/commands/sessions.ts

@@ -35,8 +35,8 @@ const getSessionDetailsForTable = (sessState) => {
 const isSecureContext = (url) => url.startsWith('https:')
 
 const getCurrentOriginStorage = () => {
-  // localStorage.length propery is not always accurate, we must stringify to check for entries
-  // for ex) try setting localStorge.key = 'val' and reading localStorage.length, may be 0.
+  // localStorage.length property is not always accurate, we must stringify to check for entries
+  // for ex) try setting localStorage.key = 'val' and reading localStorage.length, may be 0.
   const _localStorageStr = JSON.stringify(window.localStorage)
   const _localStorage = _localStorageStr.length > 2 && JSON.parse(_localStorageStr)
   const _sessionStorageStr = JSON.stringify(window.sessionStorage)
@@ -764,7 +764,6 @@ export default function (Commands, Cypress, cy) {
         errorLog.error(err)
         errorLog.set({
           state: 'warn',
-
         })
 
         _log.set({

packages/reporter/cypress.config.ts

@@ -1,27 +1,25 @@
 import { defineConfig } from 'cypress'
 
 export default defineConfig({
-  'projectId': 'ypt4pf',
-  'viewportWidth': 400,
-  'viewportHeight': 450,
-  'reporter': '../../node_modules/cypress-multi-reporters/index.js',
-  'reporterOptions': {
-    'configFile': '../../mocha-reporter-config.json',
+  projectId: 'ypt4pf',
+  reporter: '../../node_modules/cypress-multi-reporters/index.js',
+  reporterOptions: {
+    configFile: '../../mocha-reporter-config.json',
   },
-  'retries': {
-    'runMode': 2,
-    'openMode': 0,
+  retries: {
+    runMode: 2,
+    openMode: 0,
   },
-  'e2e': {
-    'baseUrl': 'http://localhost:5006',
-    setupNodeEvents (on, config) {
+  e2e: {
+    baseUrl: 'http://localhost:5006',
+    setupNodeEvents (_on, config) {
       const express = require('express')
 
       express().use(express.static('dist')).listen(5006)
 
       return config
     },
-    'viewportHeight': 660,
-    'viewportWidth': 1000,
+    viewportHeight: 660,
+    viewportWidth: 400,
   },
 })

packages/reporter/cypress/e2e/agents.cy.ts

@@ -89,8 +89,8 @@ describe('agents', () => {
       cy.contains('Spies / Stubs (3)').click()
 
       cy.get('.agent-item').eq(0).find('td').first().should('have.text', 'spy')
-      cy.get('.agent-item').eq(1).find('td').first().should('have.text', 'stub')
-      cy.get('.agent-item').eq(2).find('td').first().should('have.text', 'stub')
+      cy.get('.agent-item').eq(1).find('td').first().should('have.text', 'stub-1')
+      cy.get('.agent-item').eq(2).find('td').first().should('have.text', 'stub-2')
     })
 
     it('displays the function name', () => {