feat: (cy.prompt) introduce the concept of log collapse state being open/closed by default (#32262)

* feat: (cy.prompt) introduce the concept of logs' collapse state being open/closed by default

* update tests

* rename

* PR comments

Author: ryanthemanuel

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

@@ -151,6 +151,7 @@ export default function (Commands, Cypress, cy) {
           displayName: statusMap.stepName(step),
           message: '',
           type: 'system',
+          defaultCollapsedState: 'closed',
         }, (setupLogGroup) => {
           return cy.then({ timeout: INTERNAL_COMMAND_TIMEOUT }, async () => {
             // Catch when a cypress command fails in the setup function to correctly update log status
@@ -213,6 +214,7 @@ export default function (Commands, Cypress, cy) {
           displayName: 'Restore saved session',
           message: '',
           type: 'system',
+          defaultCollapsedState: 'closed',
           consoleProps: () => {
             return {
               Step: 'Restore saved session',
@@ -238,6 +240,7 @@ export default function (Commands, Cypress, cy) {
           displayName: 'Validate session',
           message: '',
           type: 'system',
+          defaultCollapsedState: 'closed',
           consoleProps: () => {
             return {
               Step: 'Validate Session',
@@ -495,6 +498,7 @@ export default function (Commands, Cypress, cy) {
       let _log
       const groupDetails = {
         message: `${session.id.length > 50 ? `${session.id.substring(0, 47)}...` : session.id}`,
+        defaultCollapsedState: 'closed' as const,
       }
 
       return logGroup(Cypress, groupDetails, (log) => {

packages/driver/src/cy/logGroup.ts

@@ -10,6 +10,7 @@ export default (Cypress, userOptions: Cypress.LogGroup.Config, fn: Cypress.LogGr
     instrument: 'command',
     groupStart: true,
     hidden: userOptions.log === false,
+    defaultCollapsedState: userOptions.defaultCollapsedState || 'open',
   }
 
   const log = Cypress.log(options)

packages/driver/src/cypress/log.ts

@@ -14,7 +14,7 @@ import type { StateFunc } from './state'
 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 groupLevel hookId instrument isStubbed group hidden message method name numElements numResponses referencesAlias renderProps sessionInfo state testId timeout type url visible wallClockStartedAt testCurrentRetry'.split(' ')
+const DISPLAY_PROPS = 'id alias aliasType callCount defaultCollapsedState displayName end err event functionName groupLevel hookId instrument isStubbed group hidden message method name numElements numResponses referencesAlias renderProps sessionInfo state testId timeout type url visible wallClockStartedAt testCurrentRetry'.split(' ')
 const PROTOCOL_PROPS = DISPLAY_PROPS.concat(['snapshots', 'createdAtTimestamp', 'updatedAtTimestamp', 'scrollBy', 'coords', 'highlightAttr'])
 const BLACKLIST_PROPS = 'snapshots'.split(' ')
 
@@ -196,6 +196,7 @@ const defaults = function (state: StateFunc, config, obj) {
     id: `log-${window.location.origin}-${counter}`,
     chainerId,
     state: 'pending',
+    defaultCollapsedState: 'open',
     hidden: false,
     instrument: 'command',
     url: state('url'),

packages/driver/types/cy/logGroup.d.ts

@@ -26,6 +26,8 @@ declare namespace Cypress {
       //   parent - log generated by Command
       //   child  - log generated by Chained Command
       type?: Cypress.InternalLogConfig['type']
+      // the default collapsed state of the group (i.e. if the group is open or closed by default)
+      defaultCollapsedState?: DefaultLogCollapsedState
     }
   }
 }

packages/driver/types/cypress/log.d.ts

@@ -56,6 +56,8 @@ declare namespace Cypress {
     message?: string
   }
 
+  type DefaultLogCollapsedState = 'closed' | 'open'
+
   interface InternalLogConfig {
     alias?: string
     aliasType?: 'agent' | 'route' | 'primitive' | 'dom' | undefined
@@ -75,6 +77,8 @@ declare namespace Cypress {
       y: number
     }
     count?: number
+    // the default collapsed state of the log (i.e. if the log is open or closed by default)
+    defaultCollapsedState?: DefaultLogCollapsedState
     // the name override for display purposes only
     displayName?: string
     // the JQuery element for the command. This will highlight the command

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

@@ -713,6 +713,7 @@ describe('commands', { viewportHeight: 1000 }, () => {
         it('closed when nested logs that pass', () => {
           const nestedGroupId = addCommand(runner, {
             name: 'session',
+            defaultCollapsedState: 'closed',
             state: 'passed',
             type: 'child',
           })
@@ -727,6 +728,7 @@ describe('commands', { viewportHeight: 1000 }, () => {
 
           const nestedSessionGroupId = addCommand(runner, {
             name: 'session',
+            defaultCollapsedState: 'closed',
             displayName: 'validate',
             type: 'child',
             groupLevel: 2,
@@ -769,6 +771,7 @@ describe('commands', { viewportHeight: 1000 }, () => {
         it('closed when nested logs has failures but last log is successful', () => {
           const nestedGroupId = addCommand(runner, {
             name: 'session',
+            defaultCollapsedState: 'closed',
             state: 'passed',
             type: 'child',
           })
@@ -783,6 +786,7 @@ describe('commands', { viewportHeight: 1000 }, () => {
 
           const nestedSessionGroupId = addCommand(runner, {
             name: 'session',
+            defaultCollapsedState: 'closed',
             displayName: 'validate',
             type: 'child',
             state: 'failed',
@@ -829,6 +833,7 @@ describe('commands', { viewportHeight: 1000 }, () => {
         it('open when last log has failed', () => {
           const nestedGroupId = addCommand(runner, {
             name: 'session',
+            defaultCollapsedState: 'closed',
             state: 'passed',
             type: 'child',
           })
@@ -843,6 +848,7 @@ describe('commands', { viewportHeight: 1000 }, () => {
 
           const nestedSessionGroupId = addCommand(runner, {
             name: 'session',
+            defaultCollapsedState: 'closed',
             displayName: 'validate',
             state: 'failed',
             type: 'system',
@@ -997,6 +1003,7 @@ describe('commands', { viewportHeight: 1000 }, () => {
       cy.fixture('command_error').then((_commandErr) => {
         const groupId = addCommand(runner, {
           name: 'session',
+          defaultCollapsedState: 'closed',
           message: 'mock restore',
           state: 'passed',
           type: 'system',
@@ -1031,6 +1038,7 @@ describe('commands', { viewportHeight: 1000 }, () => {
       cy.fixture('command_error').then((_commandErr) => {
         const groupId = addCommand(runner, {
           name: 'session',
+          defaultCollapsedState: 'closed',
           message: 'mock restore',
           state: 'passed',
           type: 'system',

packages/reporter/cypress/support/utils.ts

@@ -46,6 +46,7 @@ export const addCommand = (runner: EventEmitter, log: Partial<CommandModel>) =>
     type: 'parent',
     url: 'http://example.com',
     hasConsoleProps: true,
+    defaultCollapsedState: 'open',
   }
 
   const commandLog = Object.assign(defaultLog, log)

packages/reporter/src/commands/command-model.ts

@@ -91,13 +91,13 @@ export default class Command extends Instrument {
     return this._isOpen || (this._isOpen === null
       && (
         this.err?.isRecovered ||
-        (this.name === 'session' && this.state === 'failed') ||
+        (this.defaultCollapsedState === 'closed' && this.state === 'failed') ||
         // command has nested commands
-        (this.name !== 'session' && this.hasChildren && !this.event && this.type !== 'system') ||
+        (this.defaultCollapsedState !== 'closed' && this.hasChildren && !this.event && this.type !== 'system') ||
         // command has nested commands with children
-        (this.name !== 'session' && _.some(this.children, (v) => v.hasChildren)) ||
+        (this.defaultCollapsedState !== 'closed' && _.some(this.children, (v) => v.hasChildren)) ||
         // last nested command is open
-        (this.name !== 'session' && _.last(this.children)?.isOpen) ||
+        (this.defaultCollapsedState !== 'closed' && _.last(this.children)?.isOpen) ||
         // show slow command when test is running
         (_.some(this.children, (v) => v.isLongRunning) && _.last(this.children)?.state === 'pending') ||
         // at last nested command failed

packages/reporter/src/instruments/instrument-model.ts

@@ -9,6 +9,8 @@ export interface AliasObject {
 
 export type Alias = string | Array<string> | null | AliasObject | Array<AliasObject>
 
+export type DefaultCollapsedState = 'closed' | 'open'
+
 export interface InstrumentProps {
   id: number
   alias?: Alias
@@ -23,6 +25,7 @@ export interface InstrumentProps {
   referencesAlias?: Alias
   instrument?: Instrument
   testId: string
+  defaultCollapsedState?: DefaultCollapsedState
 }
 
 export default class Log {
@@ -36,6 +39,7 @@ export default class Log {
   state: string
   referencesAlias?: Alias
   testId: string
+  defaultCollapsedState: DefaultCollapsedState
 
   constructor (props: InstrumentProps) {
     makeObservable(this, {
@@ -48,6 +52,7 @@ export default class Log {
       type: observable,
       state: observable,
       referencesAlias: observable.ref,
+      defaultCollapsedState: observable,
     })
 
     this.id = props.id
@@ -60,6 +65,7 @@ export default class Log {
     this.state = props.state
     this.referencesAlias = props.referencesAlias
     this.testId = props.testId
+    this.defaultCollapsedState = props.defaultCollapsedState || 'open'
   }
 
   update (props: InstrumentProps) {
@@ -71,5 +77,6 @@ export default class Log {
     this.type = props.type
     this.state = props.state
     this.referencesAlias = props.referencesAlias
+    this.defaultCollapsedState = props.defaultCollapsedState || 'open'
   }
 }