From 1eb2151054eb2adc1c61135a602f31bde7e17fce Mon Sep 17 00:00:00 2001 From: Emily Rohrbough Date: Fri, 11 Feb 2022 11:55:59 -0600 Subject: [PATCH 01/86] seems like a good check-in point. --- packages/driver/src/cy/commands/agents.ts | 2 +- packages/reporter/cypress/e2e/commands.cy.ts | 94 +++- .../cypress/fixtures/runnables_commands.json | 117 ++++- packages/reporter/src/attempts/attempts.tsx | 4 +- packages/reporter/src/commands/command.tsx | 83 +-- packages/reporter/src/commands/commands.scss | 497 +++++++++++------- .../src/instruments/instrument-model.ts | 2 +- 7 files changed, 552 insertions(+), 247 deletions(-) diff --git a/packages/driver/src/cy/commands/agents.ts b/packages/driver/src/cy/commands/agents.ts index e1e6578b4200..289508c073bc 100644 --- a/packages/driver/src/cy/commands/agents.ts +++ b/packages/driver/src/cy/commands/agents.ts @@ -167,7 +167,7 @@ export default function (Commands, Cypress, cy, state) { const log = Cypress.log({ instrument: 'agent', name, - type: name, + type: name, // pretty sure this results in an invalid type. functionName: method, count, callCount: 0, diff --git a/packages/reporter/cypress/e2e/commands.cy.ts b/packages/reporter/cypress/e2e/commands.cy.ts index 6ff8b80dd295..7851056ab3b4 100644 --- a/packages/reporter/cypress/e2e/commands.cy.ts +++ b/packages/reporter/cypress/e2e/commands.cy.ts @@ -2,13 +2,40 @@ import { EventEmitter } from 'events' import { RootRunnable } from '../../src/runnables/runnables-store' import { addCommand } from '../support/utils' -describe('commands', () => { +describe('commands', { viewportWidth: 400, viewportHeight: 900 }, () => { let runner: EventEmitter let runnables: RootRunnable const inProgressStartedAt = (new Date(2000, 0, 1)).toISOString() - beforeEach(() => { + const setupCommands = () => { cy.fixture('runnables_commands').then((_runnables) => { + const test = _runnables.tests[0] + + const states = ['passed', 'failed'] + + states.forEach((state, index) => { + test.title = `${state} Commands` + test.state = state === 'pending' ? 'passed' : state + + const commands = [] + + test.commands.forEach((cmd) => { + let uniqueID + let group = undefined + + if (cmd.group) { + uniqueID = `group-${index * 100 * (Math.random() + 1)}` + group = uniqueID + } else { + uniqueID = (cmd.id * (index + 1) * 10) + } + + commands.push({ ...cmd, state, id: uniqueID, group }) + }) + + _runnables.tests[index] = { ... test, commands } + }) + runnables = _runnables }) @@ -40,7 +67,42 @@ describe('commands', () => { }) }) - cy.contains('http://localhost:3000') // ensure test content has loaded + // cy.contains('http://localhost:3000') // ensure test content has loaded + } + + describe('all command', () => { + beforeEach(() => { + setupCommands() + // cy.contains('passed Commands').click() + // cy.contains('pending Commands').click() + }) + + it.only('displays all the commands', () => { + cy.get('.command') + .should('have.length', 5) + }) + }) + + describe('failed command', () => { + beforeEach(() => { + setupCommands('failed') + cy.contains('failed Commands') // failed is open by default + }) + + it('displays all the commands', () => { + cy.get('.command').should('have.length', 7) + }) + }) + + describe('pending command', () => { + beforeEach(() => { + setupCommands('pending') + cy.contains('pending Commands').click() // failed is open by default + }) + + it('displays all the commands', () => { + cy.get('.command').should('have.length', 5) + }) }) it('displays all the commands', () => { @@ -74,16 +136,18 @@ describe('commands', () => { }) it('displays the number', () => { - cy.contains('http://localhost:3000').closest('.command-message').siblings('.command-number') + cy.contains('http://localhost:3000') + .closest('.command-message') + .siblings('.command-number-column') .should('have.text', '1') - cy.contains('#exists').closest('.command-message').siblings('.command-number') + cy.contains('#exists').closest('.command-message').siblings('.command-number-column') .should('have.text', '2') - cy.contains('#doesnt-exist').closest('.command-message').siblings('.command-number') + cy.contains('#doesnt-exist').closest('.command-message').siblings('.command-number-column') .should('have.text', '3') - cy.contains('.some-els').closest('.command-message').siblings('.command-number') + cy.contains('.some-els').closest('.command-message').siblings('.command-number-column') .should('have.text', '4') }) @@ -91,7 +155,7 @@ describe('commands', () => { cy.contains('GET ---').closest('.command') .should('have.class', 'command-is-event') - cy.contains('GET ---').closest('.command-message').siblings('.command-number') + cy.contains('GET ---').closest('.command-message').siblings('.command-number-column') .should('have.text', '') cy.contains('GET ---').closest('.command-message').siblings('.command-method') @@ -244,9 +308,21 @@ describe('commands', () => { context('clicking', () => { it('pins the command', () => { - cy.contains('#exists').click() + cy.get('.command:nth-child(2)') + .should('contain', '#exists') + // .should('have.css', 'background-color', 'rgba(0, 0, 0, 0)') + // .should('have.css', 'background-color', '#171926') + .trigger('mouseover') + // .should('have.css', 'background-color', '#2e3247') + .click() + + // cy.get('.command-pin').should('be.visible') .closest('.command') + // .should('have.css', 'background-color', '#151a50') .should('have.class', 'command-is-pinned') + .find('.command-pin') + .trigger('mouseover') + // .should('have.css', 'background-color', '#1c236d') }) it('shows a tooltip', () => { diff --git a/packages/reporter/cypress/fixtures/runnables_commands.json b/packages/reporter/cypress/fixtures/runnables_commands.json index 141df3b6bc60..b0f22d07bc8e 100644 --- a/packages/reporter/cypress/fixtures/runnables_commands.json +++ b/packages/reporter/cypress/fixtures/runnables_commands.json @@ -4,6 +4,119 @@ "root": true, "hooks": [], "tests": [ + { + "id": "r2", + "title": "Passed Commands", + "state": "passed", + "commands": [ + { + "hookId": "r2", + "id": 21, + "instrument": "command", + "message": "", + "name": "Clear Page", + "state": "passed", + "testId": "r2", + "timeout": 4000, + "numElements": 0, + "type": "system" + }, + { + "hookId": "r2", + "id": 22, + "instrument": "command", + "message": "#element", + "name": "get", + "state": "passed", + "testId": "r2", + "timeout": 4000, + "numElements": 1, + "type": "parent" + }, + { + "hookId": "r2", + "id": 23, + "instrument": "command", + "message": "element-text", + "name": "contains", + "state": "passed", + "testId": "r2", + "timeout": 4000, + "numElements": 0, + "type": "child" + }, + { + "hookId": "r2", + "id": "group1", + "instrument": "command", + "name": "within", + "state": "passed", + "group": "group1", + "testId": "r2", + "timeout": 4000, + "numElements": 0, + "type": "child" + }, + { + "hookId": "r2", + "id": "group1", + "instrument": "command", + "name": "get", + "message": "span within #element", + "state": "passed", + "group": "group1", + "testId": "r2", + "timeout": 4000, + "numElements": 1, + "type": "parent" + }, + { + "hookId": "r2", + "id": "group1", + "instrument": "command", + "name": "assert", + "message": "span is visible", + "state": "passed", + "group": "group1", + "testId": "r2", + "timeout": 4000, + "type": "parent" + }, + { + "hookId": "r2", + "id": 27, + "instrument": "route", + "event": true, + "name": "route", + "message": "http://localhost:3000", + "method": "*", + "state": "passed", + "testId": "r2", + "timeout": 4000, + "numElements": 0, + "type": "parent" + }, + { + "hookId": "r2", + "id": 27, + "instrument": "command", + "message": "#matches-twice", + "name": "get", + "state": "passed", + "testId": "r2", + "timeout": 4000, + "numElements": 2, + "type": "parent" + } + ], + "invocationDetails": { + "absoluteFile": "/absolute/path/to/foo_spec.js", + "column": 8, + "line": 34, + "originalFile": "path/to/foo_spec.js", + "relativeFile": "path/to/foo_spec.js" + } + }, { "id": "r3", "title": "test 1", @@ -11,7 +124,7 @@ "commands": [ { "hookId": "r3", - "id": 1, + "id": 31, "instrument": "command", "message": "http://localhost:3000", "name": "visit", @@ -22,7 +135,7 @@ }, { "hookId": "r3", - "id": 2, + "id": 32, "instrument": "command", "message": "#exists", "name": "get", diff --git a/packages/reporter/src/attempts/attempts.tsx b/packages/reporter/src/attempts/attempts.tsx index 44a77d0d141d..6e4bb3acfc5a 100644 --- a/packages/reporter/src/attempts/attempts.tsx +++ b/packages/reporter/src/attempts/attempts.tsx @@ -80,7 +80,7 @@ class Attempt extends Component { const { model } = this.props // HACK: causes component update when command log is added - model.commands.length + // model.commands.length return (
  • - {_.map(test.attempts, (attempt) => { + {test.attempts.map((attempt) => { return ( | null, aliasName: return _.includes(aliasesWithDuplicates, aliasName) } +const CommandColumn = observer(({ model, isPinned }) => { + const toggleGroup = () => { + model.toggleOpen() + } + + return ( + <> + {!model.hasChildren && ( +
    + + {model._isPending() && } + {!model._isPending() && {model.number || ''}} +
    + )} + {model.hasChildren && ( + + )} + + ) +}) + interface AliasReferenceProps { aliasObj: AliasObject model: CommandModel @@ -256,43 +280,32 @@ class Command extends Component { onMouseEnter={() => this._snapshot(true)} onMouseLeave={() => this._snapshot(false)} > -
    - - - - - - {model.number || ''} - - - - - - {model.event && model.type !== 'system' ? `(${displayName(model)})` : displayName(model)} - - - {model.referencesAlias ? : } - - - - - - - - - - {model.numElements} - - - - - - 1 })}>{model.numChildren} - + + + {model.event && model.type !== 'system' ? `(${displayName(model)})` : displayName(model)} + + + {model.referencesAlias ? : } + + + + + + - + + + {model.numElements} + + + + + + 1 })}>{model.numChildren} + -
    + + diff --git a/packages/reporter/src/commands/commands.scss b/packages/reporter/src/commands/commands.scss index e8f19d024501..29c1da66ce58 100644 --- a/packages/reporter/src/commands/commands.scss +++ b/packages/reporter/src/commands/commands.scss @@ -10,6 +10,22 @@ } .command { + background-color: $reporter-section-background; + color: $gray-400; + min-height: 20px; + + &:hover { + background-color: $gray-900; + + .command-number { + display: none; + } + + .command-pin { + display: block; + } + } + cursor: default; margin: 0; } @@ -19,37 +35,29 @@ line-height: 14px; } - .command-is-studio { - cursor: auto; - - &.command-type-parent .command-controls .studio-command-remove { - display: block; - margin-left: 5px; - - &:hover { - color: $gray-200; - } - } - - .command-wrapper:hover { - background-color: $gray-1000; + .command-wrapper { + .fa-circle { + display: none; } } - .hook-studio { - .command-wrapper:hover { - background-color: $gray-1000; - } + .command-message { + flex-grow: 2; + margin-left: 0; + overflow: hidden; + white-space: nowrap; - .command-type-parent > span > .command-wrapper { - &:hover { - border-top: 1px solid $gray-900; - } + > span { + align-items: center; + display: flex; } + } - .command-type-parent:first-child > span > .command-wrapper { - border-top: 0; - } + .command-message-text { + display: block; + flex-grow: 2; + overflow: hidden; + text-overflow: ellipsis; } .command-type-system.command-is-event > span > .command-wrapper { @@ -62,15 +70,12 @@ } } .command-is-event > span > .command-wrapper { + color: $gray-500; font-style: italic; - - .command-method, - .command-message { - color: $gray-500; - } } .command-type-parent:first-child > span > .command-wrapper { + // let move these styles to the outer container. no need to be nested. border-top: 0; } @@ -95,136 +100,220 @@ } .command-wrapper { - background-color: $reporter-section-background; - color: $gray-400; - min-height: 20px; + // background-color: $reporter-section-background; + // color: $gray-400; + display: flex; + flex-wrap: wrap; + // min-height: 20px; + padding: 2px 10px 0; - &:hover { - background-color: $gray-900; - } - - .command-wrapper-text { - display: flex; - flex-wrap: wrap; - padding: 2px 5px 0; + // &:hover { + // background-color: $gray-900; + // } - .command-interceptions { - font-style: normal; + .command-interceptions { + font-style: normal; - .status { - font-weight: 600; - } + .status { + font-weight: 600; } + } - .command-alias, - .command-interceptions { - border-radius: 10px; - color: $gray-400; - padding: 0 5px; - display: inline-block; - - &.route { - background-color: $yellow-medium; - } + .command-alias, + .command-interceptions { + border-radius: 10px; + color: $gray-400; + padding: 0 5px; + display: inline-block; - &.dom { - background-color: $indigo-800; - } + &.route { + background-color: $yellow-medium; + } - &.agent, - &.primitive { - background-color: $red-800; - } + &.dom { + background-color: $indigo-800; + } - &.show-count { - padding-right: 2px; - border-radius: 10px 0 0 10px; - max-width: 200px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - vertical-align: top; - height: 18px; - } + &.agent, + &.primitive { + background-color: $red-800; } - // ensures alias & number of children commands don't break if reporter - // width is narrow - .alias-container { + &.show-count { + padding-right: 2px; + border-radius: 10px 0 0 10px; + max-width: 200px; white-space: nowrap; - - > { - display: inline-block; - } + overflow: hidden; + text-overflow: ellipsis; + vertical-align: top; + height: 18px; } + } - .num-children, - .command-alias-count .command-interceptions-count { - border-radius: 5px; - color: $gray-400; - font-size: 90%; - font-style: normal; - line-height: 1; - margin-left: 0; - } + // ensures alias & number of children commands don't break if reporter + // width is narrow + .alias-container { + white-space: nowrap; - .num-children.has-alias { - border-radius: 10px; - line-height: 1; - padding: 3px 5px 3px 5px; + > { + display: inline-block; } + } - .command-interceptions-count { - border-radius: 0 10px 10px 0; - padding: 2px 5px; - } + .num-children, + .command-alias-count .command-interceptions-count { + border-radius: 5px; + color: $gray-400; + font-size: 90%; + font-style: normal; + line-height: 1; + margin-left: 0; + } - .command-alias-count { - border-radius: 0 10px 10px 0; - padding: 2px 5px; - } + .num-children.has-alias { + border-radius: 10px; + line-height: 1; + padding: 3px 5px 3px 5px; + } - .num-children, - .command-alias-count, - .command-interceptions-count { - background-color: $orange-700 !important; - } + .command-interceptions-count { + border-radius: 0 10px 10px 0; + padding: 2px 5px; + } + + .command-alias-count { + border-radius: 0 10px 10px 0; + padding: 2px 5px; + } + + .num-children, + .command-alias-count, + .command-interceptions-count { + background-color: $orange-700 !important; } .command-progress { height: 2px; } } + + // .command-wrapper { + // background-color: $reporter-section-background; + // color: $gray-400; + // min-height: 20px; + + // &:hover { + // background-color: $gray-900; + // } + + // .command-wrapper { + // display: flex; + // flex-wrap: wrap; + // padding: 2px 5px 0; + + // .command-interceptions { + // font-style: normal; + + // .status { + // font-weight: 600; + // } + // } + + // .command-alias, + // .command-interceptions { + // border-radius: 10px; + // color: $gray-400; + // padding: 0 5px; + // display: inline-block; + + // &.route { + // background-color: $yellow-medium; + // } + + // &.dom { + // background-color: $indigo-800; + // } + + // &.agent, + // &.primitive { + // background-color: $red-800; + // } + + // &.show-count { + // padding-right: 2px; + // border-radius: 10px 0 0 10px; + // max-width: 200px; + // white-space: nowrap; + // overflow: hidden; + // text-overflow: ellipsis; + // vertical-align: top; + // height: 18px; + // } + // } + + // // ensures alias & number of children commands don't break if reporter + // // width is narrow + // .alias-container { + // white-space: nowrap; + + // > { + // display: inline-block; + // } + // } + + // .num-children, + // .command-alias-count .command-interceptions-count { + // border-radius: 5px; + // color: $gray-400; + // font-size: 90%; + // font-style: normal; + // line-height: 1; + // margin-left: 0; + // } + + // .num-children.has-alias { + // border-radius: 10px; + // line-height: 1; + // padding: 3px 5px 3px 5px; + // } + + // .command-interceptions-count { + // border-radius: 0 10px 10px 0; + // padding: 2px 5px; + // } + + // .command-alias-count { + // border-radius: 0 10px 10px 0; + // padding: 2px 5px; + // } + + // .num-children, + // .command-alias-count, + // .command-interceptions-count { + // background-color: $orange-700 !important; + // } + // } + + // .command-progress { + // height: 2px; + // } + // } + .command-child-container { margin-left: 10px; } - .command-number { + .command-number-column { flex-shrink: 0; - color: $gray-700; min-height: 1px; // because some numbers are empty padding-right: 10px; - text-align: right; + text-align: center; width: 25px; - svg { - display: none; - } - } - - .command-state-pending > span > .command-wrapper .command-number { - svg { - line-height: 18px; - display: inline-block; - - .icon-light { - stroke: $gray-800; - } - } - - span { - display: none; - } + // svg { + // display: none; + // } } .command-method { @@ -233,29 +322,40 @@ font-size: 11px; min-width: 80px; font-weight: 600; - color: $gray-200; } - .command-state-pending > span > .command-wrapper { + .command-state-pending { border-left: 2px solid $indigo-800; background-color: $gray-900; cursor: default; + color: $indigo-200; - .command-wrapper-text { - padding-left: 3px; + // .command-wrapper { + // border-left: 2px solid $indigo-800; + // background-color: $gray-900; + // cursor: default; + + // padding-left: 3px; - .command-number { + .command-number-column { margin-left: 5px; width: 20px; } - .command-number, - .command-method, - .command-message, - .command-pin { - color: $indigo-200; + .command-number-column { + svg { + line-height: 18px; + display: inline-block; + + .icon-light { + stroke: $gray-800; + } + } + + .command-number { + display: none; + } } - } .command-progress > span { animation-fill-mode: forwards; @@ -277,50 +377,28 @@ } } - .command-state-failed > span > .command-wrapper { + .command-state-failed { + // .command-state-failed > span > .command-wrapper { border-left: 2px solid $fail; background-color: $err-header-background; + color: $err-header-text; &:hover { background: rgba($red-400, 0.3); } - .command-wrapper-text { + span > .command-wrapper { padding-left: 3px; - .command-number, - .command-method, - .command-message, - .command-pin { - color: $err-header-text; - } + // .command-number-column, + // .command-method, + // .command-message, + // .command-pin { + // color: $err-header-text; + // } } } - .command-message { - flex-grow: 2; - margin-left: 0; - overflow: hidden; - white-space: nowrap; - - > span { - align-items: center; - display: flex; - } - } - - .command-message-text { - display: block; - flex-grow: 2; - overflow: hidden; - text-overflow: ellipsis; - } - - .command-wrapper { - .fa-circle { - display: none; - } - } .command-state-warn > span > .command-wrapper { font-style: unset; @@ -331,7 +409,8 @@ background-color: $warn-header-background; } - .command-wrapper-text .command-method { + // .command-wrapper + .command-method { color: $warn-text; } } @@ -379,6 +458,8 @@ } } + + // Custom Styles for Specific Commands .command-name-assert { .command-method { span { @@ -567,7 +648,6 @@ } .command-pin { - color: $gray-500; display: none; flex-shrink: 0; font-size: 14px; @@ -617,27 +697,50 @@ } } - .command-has-snapshot > span > .command-wrapper { + .command-has-snapshot > span > .command-wrapper:hover { cursor: pointer; } + .command-has-console-props > span > .command-wrapper { cursor: pointer; } .command-has-children > span > .command-wrapper { - .command-number { - display: none; + .command-number-column { + display: none; // here } } - .command-is-pinned > span > .command-wrapper, - .command-has-snapshot > span > .command-wrapper:hover { - .command-number { - display: none; + .hook-studio { + .command-wrapper:hover { + background-color: $gray-1000; } - .command-pin { + .command-type-parent > span > .command-wrapper { + &:hover { + border-top: 1px solid $gray-900; + } + } + + .command-type-parent:first-child > span > .command-wrapper { + border-top: 0; + } + } + + .command-is-studio { + cursor: auto; + + &.command-type-parent .command-controls .studio-command-remove { display: block; + margin-left: 5px; + + &:hover { + color: $gray-200; + } + } + + .command-wrapper:hover { + background-color: $gray-1000; } } @@ -646,23 +749,18 @@ .command-pin { display: none; } - .command-number { - display: block; + .command-number-column { } } } .command-state-pending > span > .command-wrapper:hover { - .command-number { + .command-number-column { display: block; } - - .command-pin { - display: none; - } } - .command-is-pinned > span > .command-wrapper { + .command-is-pinned { background: $indigo-1000; border-left: 2px solid $pinned; @@ -675,17 +773,22 @@ background: $indigo-900; } - .command-wrapper-text { + .command-wrapper { padding-left: 3px; + } - .command-pin { - color: $pinned; - - .icon-light { - fill: $purple-700; - } + .command-pin { + color: $pinned; + display: block; + + .icon-light { + fill: $purple-700; } } + + .command-number { + display: none + } } .no-commands { @@ -711,7 +814,7 @@ // utilizing element size queries: https://github.com/marcj/css-element-queries // styles take effect when width is greater than or equal to the specified amount &[min-width~="300px"] { - .command-wrapper-text { + .command-wrapper { flex-wrap: nowrap; } } @@ -723,7 +826,7 @@ padding: 5px 10px; pointer-events: none; - .command-wrapper-text { + .command-wrapper { align-items: center; .command-message { diff --git a/packages/reporter/src/instruments/instrument-model.ts b/packages/reporter/src/instruments/instrument-model.ts index fde87fa03939..eee67989fd94 100644 --- a/packages/reporter/src/instruments/instrument-model.ts +++ b/packages/reporter/src/instruments/instrument-model.ts @@ -17,7 +17,7 @@ export interface InstrumentProps { message?: string type?: string testCurrentRetry?: number - state?: string | null + state?: 'active' | 'failed' | 'pending' | 'passed' | 'processing' | null referencesAlias?: Alias instrument?: 'agent' | 'command' | 'route' testId: string From e64dc875b550d6ca3354707b9cb01703b544ba4f Mon Sep 17 00:00:00 2001 From: Emily Rohrbough Date: Tue, 15 Feb 2022 09:39:26 -0600 Subject: [PATCH 02/86] latest changes. getting close. --- packages/driver/src/cy/commands/sessions.ts | 1 - .../cypress/fixtures/runnables_commands.json | 217 +----- packages/reporter/src/attempts/attempts.tsx | 3 - .../src/commands/CommandsContainer.tsx | 23 + .../src/commands/NoStudioCommands.tsx | 25 + .../reporter/src/commands/command-model.ts | 3 +- packages/reporter/src/commands/command.tsx | 193 +++-- packages/reporter/src/commands/commands.scss | 728 +++++------------- packages/reporter/src/hooks/hook-model.ts | 8 +- packages/reporter/src/hooks/hooks.tsx | 27 +- .../src/instruments/instrument-model.ts | 4 +- 11 files changed, 390 insertions(+), 842 deletions(-) create mode 100644 packages/reporter/src/commands/CommandsContainer.tsx create mode 100644 packages/reporter/src/commands/NoStudioCommands.tsx diff --git a/packages/driver/src/cy/commands/sessions.ts b/packages/driver/src/cy/commands/sessions.ts index 3c38cd9b8a47..aa9dccc5d5ba 100644 --- a/packages/driver/src/cy/commands/sessions.ts +++ b/packages/driver/src/cy/commands/sessions.ts @@ -764,7 +764,6 @@ export default function (Commands, Cypress, cy) { errorLog.error(err) errorLog.set({ state: 'warn', - }) _log.set({ diff --git a/packages/reporter/cypress/fixtures/runnables_commands.json b/packages/reporter/cypress/fixtures/runnables_commands.json index b0f22d07bc8e..b8ec48e402d9 100644 --- a/packages/reporter/cypress/fixtures/runnables_commands.json +++ b/packages/reporter/cypress/fixtures/runnables_commands.json @@ -10,23 +10,24 @@ "state": "passed", "commands": [ { - "hookId": "r2", - "id": 21, + "id": 1, + "hookId": "h2", + "testId": "r2", "instrument": "command", "message": "", "name": "Clear Page", "state": "passed", - "testId": "r2", "timeout": 4000, - "numElements": 0, "type": "system" }, { "hookId": "r2", - "id": 22, + "id": 2, "instrument": "command", "message": "#element", "name": "get", + "hasSnapshot": true, + "hasConsoleProps": true, "state": "passed", "testId": "r2", "timeout": 4000, @@ -34,76 +35,76 @@ "type": "parent" }, { - "hookId": "r2", - "id": 23, + "id": 3, + "hookId": "h2", + "testId": "r2", "instrument": "command", "message": "element-text", "name": "contains", + "hasSnapshot": true, + "hasConsoleProps": true, "state": "passed", - "testId": "r2", "timeout": 4000, "numElements": 0, "type": "child" }, { - "hookId": "r2", - "id": "group1", + "id": 4, + "hookId": "h2", + "testId": "r2", "instrument": "command", "name": "within", "state": "passed", - "group": "group1", - "testId": "r2", "timeout": 4000, - "numElements": 0, "type": "child" }, { - "hookId": "r2", - "id": "group1", + "id": 5, + "hookId": "h2", + "testId": "r2", "instrument": "command", "name": "get", "message": "span within #element", "state": "passed", - "group": "group1", - "testId": "r2", + "group": 4, "timeout": 4000, "numElements": 1, "type": "parent" }, { - "hookId": "r2", - "id": "group1", + "id": 6, + "hookId": "h2", + "testId": "r2", "instrument": "command", "name": "assert", "message": "span is visible", "state": "passed", - "group": "group1", - "testId": "r2", + "hasSnapshot": true, + "group": 4, "timeout": 4000, "type": "parent" }, { - "hookId": "r2", - "id": 27, + "id": 7, + "hookId": "h2", + "testId": "r2", "instrument": "route", "event": true, "name": "route", "message": "http://localhost:3000", "method": "*", "state": "passed", - "testId": "r2", "timeout": 4000, - "numElements": 0, "type": "parent" }, { - "hookId": "r2", - "id": 27, + "id": 8, + "hookId": "h2", + "testId": "t2", "instrument": "command", "message": "#matches-twice", "name": "get", "state": "passed", - "testId": "r2", "timeout": 4000, "numElements": 2, "type": "parent" @@ -116,166 +117,6 @@ "originalFile": "path/to/foo_spec.js", "relativeFile": "path/to/foo_spec.js" } - }, - { - "id": "r3", - "title": "test 1", - "state": "passed", - "commands": [ - { - "hookId": "r3", - "id": 31, - "instrument": "command", - "message": "http://localhost:3000", - "name": "visit", - "state": "passed", - "testId": "r3", - "timeout": 4000, - "type": "parent" - }, - { - "hookId": "r3", - "id": 32, - "instrument": "command", - "message": "#exists", - "name": "get", - "state": "passed", - "testId": "r3", - "timeout": 4000, - "numElements": 1, - "type": "parent", - "hasConsoleProps": true - }, - { - "hookId": "r3", - "id": 3, - "instrument": "command", - "message": "#doesnt-exist", - "name": "find", - "state": "failed", - "testId": "r3", - "timeout": 4000, - "visible": false, - "numElements": 0, - "type": "child" - }, - { - "hookId": "r3", - "id": 4, - "instrument": "command", - "name": "xhr", - "displayName": "xhr stub", - "state": "passed", - "event": true, - "testId": "r3", - "timeout": 4000, - "renderProps": { - "message": "GET --- /posts", - "indicator": "successful" - }, - "type": "parent" - }, - { - "hookId": "r3", - "id": 5, - "instrument": "command", - "message": ".some-els", - "name": "get", - "state": "passed", - "testId": "r3", - "timeout": 4000, - "numElements": 4, - "type": "parent" - }, - { - "hookId": "r3", - "id": 6, - "instrument": "command", - "name": "xhr", - "displayName": "xhr stub", - "state": "passed", - "event": true, - "testId": "r3", - "timeout": 4000, - "renderProps": { - "message": "Lorem ipsum **dolor** _sit_ amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat", - "indicator": "bad" - }, - "type": "parent" - }, - { - "hookId": "r3", - "id": 7, - "instrument": "command", - "message": ".invisible", - "name": "get", - "state": "passed", - "testId": "r3", - "timeout": 4000, - "visible": false, - "numElements": 4, - "type": "parent" - }, - { - "hookId": "r3", - "id": 81, - "instrument": "command", - "name": "xhr", - "message": "GET --- /dup", - "displayName": "xhr stub", - "state": "passed", - "event": true, - "testId": "r3", - "timeout": 4000, - "type": "parent" - }, - { - "hookId": "r3", - "id": 82, - "instrument": "command", - "name": "xhr", - "message": "GET --- /dup", - "displayName": "xhr stub", - "state": "passed", - "event": true, - "testId": "r3", - "timeout": 4000, - "type": "parent" - }, - { - "hookId": "r3", - "id": 83, - "instrument": "command", - "name": "xhr", - "message": "GET --- /dup", - "displayName": "xhr stub", - "state": "passed", - "event": true, - "testId": "r3", - "timeout": 4000, - "type": "parent" - }, - { - "hookId": "r3", - "id": 84, - "instrument": "command", - "name": "xhr", - "message": "GET --- /dup", - "displayName": "xhr stub", - "state": "passed", - "event": true, - "testId": "r3", - "timeout": 4000, - "type": "parent" - } - ], - "invocationDetails": { - "absoluteFile": "/absolute/path/to/foo_spec.js", - "column": 8, - "line": 34, - "originalFile": "path/to/foo_spec.js", - "relativeFile": "path/to/foo_spec.js" - } } ], "suites": [] diff --git a/packages/reporter/src/attempts/attempts.tsx b/packages/reporter/src/attempts/attempts.tsx index 6e4bb3acfc5a..28d1359ec83c 100644 --- a/packages/reporter/src/attempts/attempts.tsx +++ b/packages/reporter/src/attempts/attempts.tsx @@ -1,5 +1,4 @@ import cs from 'classnames' -import _ from 'lodash' import { observer } from 'mobx-react' import React, { Component } from 'react' @@ -47,7 +46,6 @@ const StudioError = () => ( function renderAttemptContent (model: AttemptModel) { // performance optimization - don't render contents if not open - return (
    @@ -56,7 +54,6 @@ function renderAttemptContent (model: AttemptModel) {
    {model.hasCommands ? : }
    -
    diff --git a/packages/reporter/src/commands/CommandsContainer.tsx b/packages/reporter/src/commands/CommandsContainer.tsx new file mode 100644 index 000000000000..6c98f1f26d55 --- /dev/null +++ b/packages/reporter/src/commands/CommandsContainer.tsx @@ -0,0 +1,23 @@ +import _ from 'lodash' +import { observer } from 'mobx-react' +import React from 'react' + +import { Alias } from '../instruments/instrument-model' +import CommandModel from './command-model' +import Command from './command' +import NoStudioCommands from './NoStudioCommands' + +export interface CommandContainerProps { + commands: Array + showStudioPrompt: boolean + aliasesWithDuplicates: Array | null +} + +const CommandContainer = observer(({ commands, showStudioPrompt, aliasesWithDuplicates }: CommandContainerProps) => ( +
      + {_.map(commands, (command) => )} + {showStudioPrompt && } +
    +)) + +export default CommandContainer diff --git a/packages/reporter/src/commands/NoStudioCommands.tsx b/packages/reporter/src/commands/NoStudioCommands.tsx new file mode 100644 index 000000000000..49765cf961a4 --- /dev/null +++ b/packages/reporter/src/commands/NoStudioCommands.tsx @@ -0,0 +1,25 @@ +import React from 'react' + +import ArrowRightIcon from '-!react-svg-loader!@packages/frontend-shared/src/assets/icons/arrow-right_x16.svg' + +// This will need re-factored when studio support is re-introduced. +const NoStudioCommands = () => ( +
  • + +
    +
    + + + Interact with your site to add test commands. Right click to add assertions. + + + + + +
    +
    +     +
    • +) + +export default NoStudioCommands diff --git a/packages/reporter/src/commands/command-model.ts b/packages/reporter/src/commands/command-model.ts index ec5ed9b21200..9f00c018a827 100644 --- a/packages/reporter/src/commands/command-model.ts +++ b/packages/reporter/src/commands/command-model.ts @@ -34,7 +34,6 @@ export interface CommandProps extends InstrumentProps { group?: number hasSnapshot?: boolean hasConsoleProps?: boolean - } export default class Command extends Instrument { @@ -66,7 +65,7 @@ export default class Command extends Instrument { @computed get numChildren () { // and one to include self so it's the total number of same events - return this.children.length + 1 + return this.type === 'event ' ? this.children.length + 1 : this.children.length } @computed get isOpen () { diff --git a/packages/reporter/src/commands/command.tsx b/packages/reporter/src/commands/command.tsx index 3bee3a16a152..55741abcc967 100644 --- a/packages/reporter/src/commands/command.tsx +++ b/packages/reporter/src/commands/command.tsx @@ -3,7 +3,7 @@ import cs from 'classnames' import Markdown from 'markdown-it' import { action, observable } from 'mobx' import { observer } from 'mobx-react' -import React, { Component, MouseEvent } from 'react' +import React, { Component } from 'react' // @ts-ignore import Tooltip from '@cypress/react-tooltip' @@ -18,7 +18,6 @@ import CommandModel from './command-model' import TestError from '../errors/test-error' import ChevronIcon from '-!react-svg-loader!@packages/frontend-shared/src/assets/icons/chevron-down-small_x8.svg' -import DeleteIcon from '-!react-svg-loader!@packages/frontend-shared/src/assets/icons/action-delete-circle_x16.svg' import HiddenIcon from '-!react-svg-loader!@packages/frontend-shared/src/assets/icons/general-eye-closed_x16.svg' import PinIcon from '-!react-svg-loader!@packages/frontend-shared/src/assets/icons/object-pin_x16.svg' import RunningIcon from '-!react-svg-loader!@packages/frontend-shared/src/assets/icons/status-running_x16.svg' @@ -28,9 +27,7 @@ const md = new Markdown() const displayName = (model: CommandModel) => model.displayName || model.name const nameClassName = (name: string) => name.replace(/(\s+)/g, '-') const formattedMessage = (message: string) => message ? md.renderInline(message) : '' -const visibleMessage = (model: CommandModel) => { - if (model.visible) return '' - +const invisibleMessage = (model: CommandModel) => { return model.numElements > 1 ? 'One or more matched elements are not visible.' : 'This element is not visible.' @@ -44,25 +41,22 @@ const shouldShowCount = (aliasesWithDuplicates: Array | null, aliasName: return _.includes(aliasesWithDuplicates, aliasName) } -const CommandColumn = observer(({ model, isPinned }) => { - const toggleGroup = () => { - model.toggleOpen() - } - +const CommandColumn = observer(({ model }) => { return ( <> {!model.hasChildren && ( -
    - +
    + {!!model.hasCommandProps || !!model.hasSnapshot && } {model._isPending() && } - {!model._isPending() && {model.number || ''}} + {!model._isPending() && {model.number || ''}}
    )} {model.hasChildren && ( - +
    + +
    )} ) @@ -79,8 +73,8 @@ const AliasReference = observer(({ aliasObj, model, aliasesWithDuplicates }: Ali return ( - @{aliasObj.name} - {aliasObj.cardinal} + @{aliasObj.name} + {aliasObj.cardinal} ) @@ -88,7 +82,7 @@ const AliasReference = observer(({ aliasObj, model, aliasesWithDuplicates }: Ali return ( - @{aliasObj.name} + @{aliasObj.name} ) }) @@ -101,7 +95,7 @@ interface AliasesReferencesProps { const AliasesReferences = observer(({ model, aliasesWithDuplicates }: AliasesReferencesProps) => ( {_.map(([] as Array).concat((model.referencesAlias as AliasObject)), (aliasObj) => ( - + ))} @@ -138,20 +132,19 @@ const Interceptions = observer(({ model }: InterceptionsProps) => { return ( - 1 && 'show-count')}>{model.renderProps.status ? {model.renderProps.status} : null}{displayAlias || no alias} - {count > 1 ? {count} : null} + 1 && 'show-count')}>{model.renderProps.status ? {model.renderProps.status} : null}{displayAlias || no alias} + {count > 1 ? {count} : null} ) }) interface AliasesProps { - isOpen: boolean model: CommandModel aliasesWithDuplicates: Array | null } -const Aliases = observer(({ model, aliasesWithDuplicates, isOpen }: AliasesProps) => { +const Aliases = observer(({ model, aliasesWithDuplicates }: AliasesProps) => { if (!model.alias || model.aliasType === 'route') return null return ( @@ -159,13 +152,13 @@ const Aliases = observer(({ model, aliasesWithDuplicates, isOpen }: AliasesProps {_.map(([] as Array).concat(model.alias), (alias) => { const aliases = [alias] - if (!isOpen && model.hasChildren) { + if (model.hasChildren && !model.isOpen) { aliases.push(..._.compact(model.children.map((dupe) => dupe.alias))) } return ( `'${alias}'`).join(', ')}`} className='cy-tooltip'> - + {aliases.join(', ')} @@ -181,13 +174,19 @@ interface MessageProps { const Message = observer(({ model }: MessageProps) => ( - + {!!model.renderProps.indicator && ( + + )} @@ -198,18 +197,21 @@ interface ProgressProps { } const Progress = observer(({ model }: ProgressProps) => { - if (!model.timeout || !model.wallClockStartedAt) { - return
    - } + // if (!model.timeout || !model.wallClockStartedAt) { + // console.log('RETURN EMPTY', model.timeout, model.wallClockStartedAt) + // return
    + // } const timeElapsed = Date.now() - new Date(model.wallClockStartedAt).getTime() const timeRemaining = model.timeout ? model.timeout - timeElapsed : 0 const percentageRemaining = timeRemaining / model.timeout || 0 + console.log(timeRemaining, percentageRemaining) + // we add a key to the span to ensure a rerender and restart of the animation on change return ( -
    - +
    +
    ) }) @@ -238,6 +240,8 @@ class Command extends Component { const { model, aliasesWithDuplicates } = this.props const message = model.displayMessage + console.log('model.visible)', model.visible) + if (model.group && this.props.groupId !== model.group) { return null } @@ -246,28 +250,20 @@ class Command extends Component { return } + const commandName = model.name ? nameClassName(model.name) : '' + const isSystemEvent = model.type === 'system' && model.event + const isSessionCommand = commandName === 'session' + return (
  • 100, - 'no-elements': !model.numElements, - 'command-has-snapshot': model.hasSnapshot, - 'command-has-console-props': model.hasConsoleProps, - 'multiple-elements': model.numElements > 1, - 'command-has-children': model.hasChildren, - 'command-is-child': model.isChild, - 'command-is-open': this._isOpen(), + // 'cmd-is-event': !!model.event, + 'cmd-scaled': message && message.length > 100, + // 'cmd-is-open': this._isOpen(), }, )} > @@ -276,58 +272,64 @@ class Command extends Component { onClick={this._onClick} shouldShowMessage={this._shouldShowClickMessage} > -
    this._snapshot(true)} onMouseLeave={() => this._snapshot(false)} > - - + + {model.event && model.type !== 'system' ? `(${displayName(model)})` : displayName(model)} - + {model.referencesAlias ? : } - - - - - - - - - {model.numElements} - + + {(model.visible != null && !model.visible) && + + + + + + } + {(model.state !== 'pending' && model.numElements != null && model.numElements !== 1) && + + {model.numElements} + + } - - - 1 })}>{model.numChildren} - + + {(!isSystemEvent && !isSessionCommand && model.hasChildren && !model.isOpen) && + + {model.numChildren} + + } - - -
    - {this._children()} + + {(model.hasChildren && model.isOpen) && this._children()}
    • ) } - _isOpen () { - const { model } = this.props - - return !!model.isOpen - } - _children () { const { appState, events, model, runnablesStore } = this.props - if (!this._isOpen()) return - return ( -