feat: add warned command state to use for recreated sessions

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

@@ -217,6 +217,7 @@ describe('cy.session', { retries: 0 }, () => {
         it('groups session logs correctly', () => {
           expect(logs[0].get()).to.deep.contain({
             name: 'session',
+            state: 'passed',
             id: sessionGroupId,
             sessionInfo: {
               id: 'session-1',
@@ -298,6 +299,7 @@ describe('cy.session', { retries: 0 }, () => {
         it('groups session logs correctly', () => {
           expect(logs[0].get()).to.deep.contain({
             name: 'session',
+            state: 'passed',
             id: sessionGroupId,
             sessionInfo: {
               id: sessionId,
@@ -352,6 +354,7 @@ describe('cy.session', { retries: 0 }, () => {
             expect(err.message).to.contain('This error occurred while validating the created session')
             expect(logs[0].get()).to.deep.contain({
               name: 'session',
+              state: 'failed',
               id: sessionGroupId,
               sessionInfo: {
                 id: `session-${Cypress.state('test').id}`,
@@ -432,6 +435,7 @@ describe('cy.session', { retries: 0 }, () => {
         it('groups session logs correctly', () => {
           expect(logs[0].get()).to.contain({
             name: 'session',
+            state: 'passed',
             id: sessionGroupId,
           })
 
@@ -487,6 +491,7 @@ describe('cy.session', { retries: 0 }, () => {
         it('groups session logs correctly', () => {
           expect(logs[0].get()).to.contain({
             name: 'session',
+            state: 'passed',
             id: sessionGroupId,
           })
 
@@ -561,6 +566,7 @@ describe('cy.session', { retries: 0 }, () => {
         it('groups session logs correctly', () => {
           expect(logs[0].get()).to.contain({
             name: 'session',
+            state: 'warned',
             id: sessionGroupId,
           })
 
@@ -651,6 +657,7 @@ describe('cy.session', { retries: 0 }, () => {
 
             expect(logs[0].get()).to.contain({
               name: 'session',
+              state: 'failed',
               id: sessionGroupId,
             })
 
@@ -876,6 +883,7 @@ describe('cy.session', { retries: 0 }, () => {
         it('groups session logs correctly', () => {
           expect(logs[0].get()).to.deep.contain({
             name: 'session',
+            state: 'passed',
             id: sessionGroupId,
             sessionInfo: {
               id: 'session-1',
@@ -954,6 +962,7 @@ describe('cy.session', { retries: 0 }, () => {
         it('groups session logs correctly', () => {
           expect(logs[0].get()).to.deep.contain({
             name: 'session',
+            state: 'passed',
             id: sessionGroupId,
             sessionInfo: {
               id: sessionId,
@@ -1006,6 +1015,7 @@ describe('cy.session', { retries: 0 }, () => {
             expect(err.message).to.contain('Your `cy.session` **validate** promise rejected with false')
             expect(logs[0].get()).to.deep.contain({
               name: 'session',
+              state: 'failed',
               id: sessionGroupId,
               sessionInfo: {
                 id: `session-${Cypress.state('test').id}`,
@@ -1083,6 +1093,7 @@ describe('cy.session', { retries: 0 }, () => {
         it('groups session logs correctly', () => {
           expect(logs[0].get()).to.contain({
             name: 'session',
+            state: 'passed',
             id: sessionGroupId,
           })
 
@@ -1140,6 +1151,7 @@ describe('cy.session', { retries: 0 }, () => {
         it('groups session logs correctly', () => {
           expect(logs[0].get()).to.contain({
             name: 'session',
+            state: 'passed',
             id: sessionGroupId,
           })
 
@@ -1216,6 +1228,7 @@ describe('cy.session', { retries: 0 }, () => {
         it('groups session logs correctly', () => {
           expect(logs[0].get()).to.contain({
             name: 'session',
+            state: 'warned',
             id: sessionGroupId,
           })
 
@@ -1307,6 +1320,7 @@ describe('cy.session', { retries: 0 }, () => {
 
             expect(logs[0].get()).to.contain({
               name: 'session',
+              state: 'failed',
               id: sessionGroupId,
             })
 

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

@@ -152,6 +152,7 @@ export default function (Commands, Cypress, cy) {
 
       function setSessionLogStatus (status: string) {
         _log.set({
+          state: statusMap.commandState(status),
           sessionInfo: {
             id: session.id,
             isGlobalSession: session.cacheAcrossSpecs,
@@ -446,13 +447,13 @@ export default function (Commands, Cypress, cy) {
         .then(() => validateSession(existingSession, step))
         .then(async (isValidSession: boolean) => {
           if (!isValidSession) {
-            throw new Error('not a valid session :(')
+            return 'failed'
           }
 
           sessionsManager.registeredSessions.set(existingSession.id, true)
           await sessions.saveSessionData(existingSession)
 
-          setSessionLogStatus(statusMap.complete(step))
+          return statusMap.complete(step)
         })
       }
 
@@ -476,7 +477,7 @@ export default function (Commands, Cypress, cy) {
             return createSessionWorkflow(existingSession, 'recreate')
           }
 
-          setSessionLogStatus('restored')
+          return 'restored'
         })
       }
 
@@ -512,8 +513,10 @@ export default function (Commands, Cypress, cy) {
           }
 
           return restoreSessionWorkflow(session)
-        }).then(() => {
-          _log.set({ state: 'passed' })
+        }).then((status: 'passed' | 'warned' | 'failed') => {
+          setSessionLogStatus(status)
+
+          return null
         })
       })
     },

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

@@ -204,6 +204,20 @@ function navigateAboutBlank (session: boolean = true) {
 }
 
 const statusMap = {
+  commandState: (status: string) => {
+    switch (status) {
+      case 'failed':
+        return 'failed'
+      case 'recreating':
+      case 'recreated':
+        return 'warned'
+      case 'created':
+      case 'restored':
+        return 'passed'
+      default:
+        return 'pending'
+    }
+  },
   inProgress: (step) => {
     switch (step) {
       case 'create':

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

@@ -848,7 +848,7 @@ describe('commands', { viewportHeight: 1000 }, () => {
       })
 
       it('shows a tooltip', () => {
-        cy.get('.command-name-within').click()
+        cy.get('.command-name-within').click('top')
         cy.get('.cy-tooltip').should('have.text', 'Printed output to your console')
       })
 

packages/reporter/src/commands/command.cy.tsx

@@ -1,31 +1,91 @@
 import React from 'react'
 import Command from './command'
 import CommandModel from './command-model'
+import type { SessionStatus } from '../sessions/utils'
+import type { TestState } from '@packages/types'
 
 describe('commands', () => {
+  describe('test states', () => {
+    it('warned command', () => {
+      cy.mount(
+        <div>
+          <Command
+            key={status}
+            model={
+              new CommandModel({
+                name: 'session',
+                message: 'user1',
+                state: 'warned',
+                sessionInfo: {
+                  id: 'user1',
+                  isGlobalSession: false,
+                  status: 'recreated',
+                },
+                number: 1,
+                type: 'parent',
+                hookId: '1',
+                testId: '1',
+                id: 1,
+                numElements: 1,
+              })
+            }
+          />
+        </div>,
+      )
+
+      cy.percySnapshot()
+    })
+  })
+
   describe('sessionPill', () => {
-    const statusList = [
-      'creating',
-      'created',
-      'restoring',
-      'restored',
-      'recreating',
-      'recreated',
-      'failed',
+    const statusList: Array<{
+      state: TestState
+      status: SessionStatus
+    }> = [
+      {
+        state: 'pending',
+        status: 'creating',
+      },
+      {
+        state: 'passed',
+        status: 'created',
+      },
+      {
+        state: 'pending',
+        status: 'restoring',
+      },
+      {
+        state: 'passed',
+        status: 'restored',
+      },
+      {
+        state: 'warned',
+        status: 'recreating',
+      },
+      {
+        state: 'warned',
+        status: 'recreated',
+      },
+      {
+        state: 'failed',
+        status: 'failed',
+      },
     ]
 
     it('session status in command', () => {
       cy.mount(
         <div>
-          {statusList.map((status, index) => (
+          {statusList.map(({ state, status }, index) => (
             <Command
               key={status}
               model={
                 new CommandModel({
                   name: 'session',
                   message: 'user1',
-                  state: 'passed',
-                  renderProps: {
+                  state,
+                  sessionInfo: {
+                    id: 'user1',
+                    isGlobalSession: false,
                     status,
                   },
                   number: index,

packages/reporter/src/commands/command.tsx

@@ -14,6 +14,7 @@ import Tag from '../lib/tag'
 import { TimeoutID } from '../lib/types'
 import runnablesStore, { RunnablesStore } from '../runnables/runnables-store'
 import { Alias, AliasObject } from '../instruments/instrument-model'
+import { determineTagType } from '../sessions/utils'
 
 import CommandModel, { RenderProps } from './command-model'
 import TestError from '../errors/test-error'
@@ -298,7 +299,7 @@ const CommandControls = observer(({ model, commandName, events }) => {
       {isSessionCommand && (
         <Tag
           content={model.sessionInfo?.status}
-          type={`${model.sessionInfo?.status === 'failed' ? 'failed' : 'successful'}-status`}
+          type={determineTagType(model.state)}
         />
       )}
       {!model.visible && (

packages/reporter/src/commands/commands.scss

@@ -252,6 +252,30 @@
     }
   }
 
+  .command-state-warned {
+    color: $warn-text;
+
+    &:not(.command-type-system) {
+      border-left: $warn-border;
+    }
+
+    .command-number-column,
+    .command-method,
+    .command-message {
+      color: $warn-text;
+    }
+
+    .command-group {
+      border-color: $warn-text;
+      @include nested-command-dashes($warn-text);
+
+      .command-group-block {
+        border-color: $warn-text;
+        @include nested-command-dashes($warn-text);
+      }
+    }
+  }
+
   .command-state-failed {
     color: $err-header-text;
 
@@ -286,6 +310,7 @@
   }
 
   // Custom Styles for Specific Commands
+  // note: assert does not support warned state
   .command-name-assert {
     .command-method {
       span {

packages/reporter/src/lib/tag.cy.tsx

@@ -11,6 +11,7 @@ describe('Tag', () => {
 
   const statuses = [
     'successful-status',
+    'warned-status',
     'failed-status',
   ]
 

packages/reporter/src/lib/tag.scss

@@ -37,9 +37,14 @@
     color: $jade-300;
   }
 
+  &.warned-status {
+    background-color: $gray-1000;
+    border: $gray-900 1px solid;
+    color: $warn-text;
+  }
+
   &.failed-status {
     background-color: $red-500;
-    font-weight: 500;
   }
 
   &.reporter-tag-has-count {

packages/reporter/src/lib/variables.scss

@@ -104,7 +104,6 @@ $fail: $red-400;
 $pending: $indigo-400;
 $pinned: $purple-400;
 $retried: $orange-400;
-$yellow-medium: $orange-800;
 
 $link-text: $indigo-600;
 
@@ -118,10 +117,8 @@ $err-text: $red-400;
 
 $reporter-section-background: #171926; // not a brand color
 
-$warn-background: $red-1000;
-$warn-header-background: $orange-1000;
-$warn-header-text: $orange-700;
-$warn-text: $orange-600;
+$warn-border: 2px solid $orange-300;
+$warn-text: $orange-300;
 
 $header-height: 64px;
 $reporter-contents-min-width: 170px;