Skip to content

Commit 22bc78e

Browse files
mabela416ryanthemanuelcypress-bot[bot]jennifer-shehane
authored
internal: Redesign single test view when studio is open (#32008)
* update yarn.lock * index on mabel/issue-31677-reporter-redesign: 5e2503f Merge branch 'mabel/issue-31677-reporter-redesign' of https://github.com/cypress-io/cypress into mabel/issue-31677-reporter-redesign * index on mabel/issue-31677-reporter-redesign: 5e2503f Merge branch 'mabel/issue-31677-reporter-redesign' of https://github.com/cypress-io/cypress into mabel/issue-31677-reporter-redesign * index on mabel/issue-31677-reporter-redesign: 5e2503f Merge branch 'mabel/issue-31677-reporter-redesign' of https://github.com/cypress-io/cypress into mabel/issue-31677-reporter-redesign * handle open in ide and new test button shadows/padding/alignment * link issue to TODO * only add pointer-events:none to tests and not suites * fix failing tests * Update cache-version.txt * fix failing test * fix clear sessions width * yarnlock update * remove unused style * remove unused style * add caching when calculating children states in the suite-model * Revert "add caching when calculating children states in the suite-model" This reverts commit 3b59a94. * Remove * css style for reporter box-sizing - I don't see this impacting css styles at all * have css only target languages we support showing in Cypress App * Remove normalize.scss * Remove more global css resets to improve rendering performance * remove running state * memoize components in runnable-and-suite * fix failing test * bump cache * skip failing tests related to active states * add clearSuiteId function * misc: begin work on reporter redesign * remove info icon on failing tests * Add new queued icon to tests * bump react-icon * add some styles for the header * add some styles and icons to describe blocks * display chevron down on describe hover * add css for red-400 * only display collapsible describes if there are tests in the suite * add new test on describe hover * add describe focus styles * add describe focus styles scss * fix add commands to test wand placement * update stats icon with describe and test hover and focus * update test status icons * handles some of the test body styles and states * add ellipsis to runnable title and flex shrink to icons * fix command row stylings * fix session alignment * fix collapsible indicator styles * handle attempt styling * fix failing tests * add back command status borders * fix suites.cy.ts tests and make some styling fixes * fix styles for New test button on focused/hovered suites * fix header test * attempt spacing fixes * fix shortcuts test * add open in ide on header hover * make some styling fixes to errors * make error styling changes * update control icons and styles * fix dotted line for suites * add test dots * fix logic for displaying test dots * use stop circle icon * refactor runnable and suite header icon * only use test children to determine current suite state to display the suite icons * fix suites test * fix suite and test icon alignments * clean up some comments and unused variables * fix failing tests * fix failing studio tests * fix failing tests * fix meta test * fix suite_model test * add more tests for suite-model * fix more tests * fix failing test * fix padding for hook headers * handle font weight, describe aligment and status border widths * fix rounded corners on hover of commands * round status border when test is opened * handle chevron right/down when hovering when collapsible is open/closed * add changelog entry * yarn lock * run on binary * bust circle cache * center align open in ide on command hover * add padding to the bottom of the last suite/test * fix attempt padding and connecting dots * update progress bar color to gray-900 * no jumping when opening test * top align describe/test text when the text wraps to the next line * clean up new test button styles and add the linear gradient * fix dotted line and describe/test padding * round out error border and remove double red border on errors * fix gap for stack trace * only apply margin top to test and suite icons * change opacity of add commands to test wand icon * fix wand opacity test * can we just remove this overflow: scroll? * clean up TODOs * fix error group line alignment * align open IDE tooltip in hooks * fix padding between suites * remove purple border around describe in studio * Add tailwind css so that styles work in e2e tests * fix studio buttons padding * fix stack trace padding * disable clicking for skipped and queued up tests * fix 1px jumping when opening test * handle open in ide and new test button shadows/padding/alignment * circle cache * update yarn.lock * index on mabel/issue-31677-reporter-redesign: 5e2503f Merge branch 'mabel/issue-31677-reporter-redesign' of https://github.com/cypress-io/cypress into mabel/issue-31677-reporter-redesign * index on mabel/issue-31677-reporter-redesign: 5e2503f Merge branch 'mabel/issue-31677-reporter-redesign' of https://github.com/cypress-io/cypress into mabel/issue-31677-reporter-redesign * index on mabel/issue-31677-reporter-redesign: 5e2503f Merge branch 'mabel/issue-31677-reporter-redesign' of https://github.com/cypress-io/cypress into mabel/issue-31677-reporter-redesign * link issue to TODO * only add pointer-events:none to tests and not suites * fix failing tests * Update cache-version.txt * fix failing test * fix clear sessions width * remove unused style * yarnlock update * add caching when calculating children states in the suite-model * Revert "add caching when calculating children states in the suite-model" This reverts commit 3b59a94. * Remove * css style for reporter box-sizing - I don't see this impacting css styles at all * have css only target languages we support showing in Cypress App * Remove normalize.scss * Remove more global css resets to improve rendering performance * remove running state * memoize components in runnable-and-suite * fix failing test * bump cache * skip failing tests related to active states * clean up existing studio UI * refactor duration and openFileInIDEButtn * update workflows file * add single test component * save parentTitle to use in single test mode * add single test component * clean up studio commands * remove adding studio commands as a hook * clean up hook-model from studio commands * use new singleTest component when studio is active and on single test mode * update reporter start to set single studio test active * actually set single test mode * clean up more old studio code * fix styles for header title * fix hooks test * whoops re-add deleted line * fix events.cy.ts test * fix runnables_store test * fix test_model test * fix test_errors test * fix tests test * fix studio-cloud test * update waitForSpecToFinish * fix some studio tests maybe? * fix some tests * add back studio commands hook to tests * add back some of the events i removed that also need to be cleaned up in the cloud * fix some tests * add test for back button and open in ide button in single test mode * add component test for StudioSingleTest component * wait for specs to finish to reduce flake when asserting on aut iframe * add tests back * remove studio instructions modal * remove this branch from mac workflow * try to fix the studio tests * check if aut-iframe is empty * add more checks to make sure aut is ready * add loading tests state to StudioSingleTest * fix single studio test * add more conditions for the studio tests * make a few more changes to the existing tests * fix button styles * add scrollbar to single test * hide studio commands hooks * handle scroll to view in single test mode * show empty test state when test is errored * update name to checkForStats * add useScrollIntoView hook * update waitForSpecToFinish * remove unused props * allow stop button to work when studio is active * clean up StudioTest.scss * remove runnable active and queued checks * fix order of operations in waitForSpecToFinish * call studio:cancel event for back button in studio test mode * remove studio commands check * memoize scrollIntoView callback and add it as a dependency in useEffect * fix ts error * check if single test studio is active when waiting for spec * fix launchStudio new test logic * allow shorcuts to work in studio mode * align test studio icon at the top * refactor spec file name into its own component * update tests with new spec file name classname * add checkForStats and add tests for removing url parameters * remove spacing * fix icon import * fix tests.cy * fix open file in ide test * add style I accidentally removed --------- Co-authored-by: Ryan Manuel <ryanm@cypress.io> Co-authored-by: cypress-bot[bot] <+cypress-bot[bot]@users.noreply.github.com> Co-authored-by: Jennifer Shehane <jennifer@cypress.io> Co-authored-by: Jennifer Shehane <shehane.jennifer@gmail.com>
1 parent a73f304 commit 22bc78e

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+1208
-1264
lines changed

.circleci/workflows.yml

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ mainBuildFilters: &mainBuildFilters
3838
- /^release\/\d+\.\d+\.\d+$/
3939
# use the following branch as well to ensure that v8 snapshot cache updates are fully tested
4040
- 'update-v8-snapshot-cache-on-develop'
41-
- 'feat/support_vite_7'
41+
- 'mabel/issue-10425-studio-redesign'
4242

4343
# usually we don't build Mac app - it takes a long time
4444
# but sometimes we want to really confirm we are doing the right thing
@@ -62,11 +62,7 @@ linuxArm64WorkflowFilters: &linux-arm64-workflow-filters
6262
- equal: [ develop, << pipeline.git.branch >> ]
6363
# use the following branch as well to ensure that v8 snapshot cache updates are fully tested
6464
- equal: [ 'update-v8-snapshot-cache-on-develop', << pipeline.git.branch >> ]
65-
- equal:
66-
[
67-
'feat/support_vite_7',
68-
<< pipeline.git.branch >>
69-
]
65+
- equal: [ 'feat/support_vite_7', << pipeline.git.branch >> ]
7066
- matches:
7167
pattern: /^release\/\d+\.\d+\.\d+$/
7268
value: << pipeline.git.branch >>
@@ -89,11 +85,7 @@ windowsWorkflowFilters: &windows-workflow-filters
8985
- equal: [ develop, << pipeline.git.branch >> ]
9086
# use the following branch as well to ensure that v8 snapshot cache updates are fully tested
9187
- equal: [ 'update-v8-snapshot-cache-on-develop', << pipeline.git.branch >> ]
92-
- equal:
93-
[
94-
'feat/support_vite_7',
95-
<< pipeline.git.branch >>
96-
]
88+
- equal: [ 'feat/support_vite_7', << pipeline.git.branch >> ]
9789
- matches:
9890
pattern: /^release\/\d+\.\d+\.\d+$/
9991
value: << pipeline.git.branch >>
@@ -167,7 +159,7 @@ commands:
167159
name: Set environment variable to determine whether or not to persist artifacts
168160
command: |
169161
echo "Setting SHOULD_PERSIST_ARTIFACTS variable"
170-
echo 'if ! [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "release/"* && "$CIRCLE_BRANCH" != "feat/support_vite_7" ]]; then
162+
echo 'if ! [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "release/"* && "$CIRCLE_BRANCH" != "mabel/issue-10425-studio-redesign" ]]; then
171163
export SHOULD_PERSIST_ARTIFACTS=true
172164
fi' >> "$BASH_ENV"
173165
# You must run `setup_should_persist_artifacts` command and be using bash before running this command

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -172,7 +172,7 @@ describe('src/cypress/runner', () => {
172172
})
173173

174174
cy.get('.open-in-ide-button').should('have.css', 'opacity', '0')
175-
cy.get('.runnable-header-file-name').realHover()
175+
cy.get('.spec-file-name').realHover()
176176
cy.get('.open-in-ide-button').first().should('have.css', 'opacity', '1').click()
177177

178178
cy.withCtx((ctx, o) => {

packages/app/cypress/e2e/studio/helper.ts

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,12 @@ export function loadProjectAndRunSpec ({ projectName = 'experimental-studio' as
1717
export function launchStudio ({ specName = 'spec.cy.js', createNewTest = false, cliArgs = [''] } = {}) {
1818
loadProjectAndRunSpec({ specName, cliArgs })
1919

20-
// Should not show "Studio Commands" until we've started a new Studio session.
21-
cy.get('[data-cy="hook-name-studio commands"]').should('not.exist')
20+
const testTitle = createNewTest ? 'New Test' : 'visits a basic html page'
2221

2322
if (createNewTest) {
2423
cy.contains('studio functionality').as('item')
2524
} else {
26-
cy.contains('visits a basic html page').as('item')
25+
cy.contains(testTitle).as('item')
2726
}
2827

2928
cy.get('@item')
@@ -42,7 +41,7 @@ export function launchStudio ({ specName = 'spec.cy.js', createNewTest = false,
4241
// Studio re-executes spec before waiting for commands - wait for the spec to finish executing.
4342
cy.waitForSpecToFinish()
4443

45-
cy.findByTestId('hook-name-studio commands').should('exist')
44+
cy.get('[data-cy="studio-single-test-title"]').contains(testTitle)
4645
}
4746
}
4847

@@ -59,8 +58,6 @@ export function assertClosingPanelWithoutChanges () {
5958
cy.contains('cypress/e2e/index.html')
6059
})
6160

62-
cy.findByTestId('hook-name-studio commands').should('not.exist')
63-
6461
cy.withCtx(async (ctx) => {
6562
const spec = await ctx.actions.file.readFileInProject('cypress/e2e/spec.cy.js')
6663

packages/app/cypress/e2e/studio/studio-cloud.cy.ts

Lines changed: 6 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ describe('Studio Cloud', () => {
1111
})
1212
})
1313

14-
it('immediately loads the studio panel', () => {
14+
it('immediately loads the studio panel from existing test', () => {
1515
const deferred = pDefer()
1616

1717
loadProjectAndRunSpec()
@@ -29,8 +29,6 @@ describe('Studio Cloud', () => {
2929
.findByTestId('launch-studio')
3030
.click()
3131

32-
// regular studio is not loaded until after the test finishes
33-
cy.findByTestId('hook-name-studio commands').should('not.exist')
3432
// cloud studio is loaded immediately
3533
cy.findByTestId('studio-panel').then(() => {
3634
// check for the loading panel from the app first
@@ -42,14 +40,15 @@ describe('Studio Cloud', () => {
4240
cy.wait('@indexHtml')
4341

4442
// Studio re-executes spec before waiting for commands - wait for the spec to finish executing.
45-
cy.waitForSpecToFinish()
43+
cy.waitForSpecToFinish(undefined, undefined, false)
4644

4745
// Verify the studio panel is still open
4846
cy.findByTestId('studio-panel')
49-
cy.findByTestId('hook-name-studio commands')
47+
48+
cy.percySnapshot()
5049
})
5150

52-
it('hides selector playground and studio controls when studio beta is available', () => {
51+
it('hides selector playground and studio controls when experimentalStudio is enabled', () => {
5352
launchStudio()
5453

5554
cy.findByTestId('studio-panel').should('be.visible')
@@ -136,8 +135,6 @@ describe('Studio Cloud', () => {
136135
.findByTestId('launch-studio')
137136
.click()
138137

139-
// regular studio is not loaded until after the test finishes
140-
cy.findByTestId('hook-name-studio commands').should('not.exist')
141138
// cloud studio is loaded immediately
142139
cy.findByTestId('studio-panel').then(() => {
143140
// check for the loading panel from the app first
@@ -153,7 +150,6 @@ describe('Studio Cloud', () => {
153150

154151
// Verify the studio panel is still open
155152
cy.findByTestId('studio-panel')
156-
cy.findByTestId('hook-name-studio commands')
157153

158154
// make sure studio is not loading
159155
cy.findByTestId('loading-studio-panel').should('not.exist')
@@ -217,8 +213,6 @@ describe('Studio Cloud', () => {
217213
.findByTestId('launch-studio')
218214
.click()
219215

220-
// regular studio is not loaded until after the test finishes
221-
cy.get('[data-cy="hook-name-studio commands"]').should('not.exist')
222216
// cloud studio is loaded immediately
223217
cy.findByTestId('studio-panel').then(() => {
224218
// check for the loading panel from the app first
@@ -230,11 +224,10 @@ describe('Studio Cloud', () => {
230224
cy.wait('@indexHtml')
231225

232226
// Studio re-executes spec before waiting for commands - wait for the spec to finish executing.
233-
cy.waitForSpecToFinish()
227+
cy.waitForSpecToFinish(undefined, undefined, false)
234228

235229
// Verify the studio panel is still open
236230
cy.findByTestId('studio-panel')
237-
cy.get('[data-cy="hook-name-studio commands"]')
238231

239232
// make sure studio is not loading
240233
cy.get('[data-cy="loading-studio-panel"]').should('not.exist')

0 commit comments

Comments
 (0)