@@ -104,116 +104,82 @@ describe('Cypress in Cypress', { viewportWidth: 1500, defaultCommandTimeout: 100
104104 } )
105105 } )
106106
107- it ( `scales the AUT correctly in ${ testingType } , ( ) => {
108- const assertNoScaleShown = ( ) => {
109- // check that no message about scale % is shown,
110- // meaning the AUT is at 100% scale
111- cy . contains ( '%)' ) . should ( 'not.exist' )
112- }
113-
114- cy . scaffoldProject ( 'cypress-in-cypress' )
115- cy . findBrowsers ( )
116- openProject ( testingType )
117- cy . withCtx ( ( ctx ) => {
118- ctx . coreData . localSettings . preferences . reporterWidth = 800
119- ctx . coreData . localSettings . preferences . specListWidth = 250
120- ctx . coreData . localSettings . preferences . isSpecsListOpen = false
121- } )
122-
123- cy . startAppServer ( testingType )
124- cy . visitApp ( )
125- cy . specsPageIsVisible ( )
107+ describe ( 'dragging panels' , ( ) => {
108+ beforeEach ( ( ) => {
109+ cy . scaffoldProject ( 'cypress-in-cypress' )
110+ cy . findBrowsers ( )
111+ openProject ( testingType )
112+ cy . withCtx ( ( ctx ) => {
113+ ctx . coreData . localSettings . preferences . reporterWidth = 800
114+ ctx . coreData . localSettings . preferences . specListWidth = 250
115+ ctx . coreData . localSettings . preferences . isSpecsListOpen = false
116+ } )
126117
127- cy . get ( '[data-cy="spec-item"]' ) . first ( ) . click ( )
128- // Let runner stabilize
129- cy . get ( '#unified-reporter' ) . should ( 'be.visible' )
118+ cy . startAppServer ( testingType )
119+ cy . visitApp ( )
120+ cy . specsPageIsVisible ( )
130121
131- // validate that the width we set in `withCtx` above is the starting point
132- cy . get ( `[data-cy="reporter-panel"]` ) . invoke ( 'outerWidth' ) . should ( 'eq' , 800 )
133- // cy.percySnapshot('initial state') // TODO: restore when Percy CSS is fixed. See https://github.com/cypress-io/cypress/issues/23435
134-
135- cy . contains ( '[aria-controls=reporter-inline-specs-list]' , 'Specs' )
136- . click ( { force : true } )
137-
138- // this tooltip text confirms specs list is open
139- cy . contains ( 'Collapse Specs List' )
140-
141- // we will move the right-hand handle of the Reporter
142- // to these positions from the left of the screen
143- const dragPositions = [ 1000 , 1090 , 900 , 600 ]
144-
145- // based on viewport sizes for CT and e2e tests in the `cypress-in-cypress`
146- // projects, we expect certain scale % values to be shown
147- const testingTypeExpectedScales = {
148- component : [ '93%' , '75%' ] ,
149- e2e : [ '46%' , '37%' , '56%' , '85%' ] ,
150- componentShortViewport : '61%' ,
151- e2eShortViewport : '46%' ,
152- componentNarrowViewport : '40%' ,
153- e2eNarrowViewport : '20%' ,
154- }
155-
156- // resize the reporter using each of the dragPositions and take Percy snapshots
157- dragPositions . forEach ( ( position , index ) => {
158- dragHandleToClientX ( 'panel2' , position ) . then ( ( ) => {
159- const expectedScale = testingTypeExpectedScales [ testingType ] [ index ]
160-
161- // CT hits 100% scale "earlier" than E2E, so sometimes there is no expected scale
162- if ( expectedScale ) {
163- cy . contains ( expectedScale ) . should ( 'be.visible' )
164- } else {
165- assertNoScaleShown ( )
166- }
122+ cy . get ( '[data-cy="spec-item"]' ) . first ( ) . click ( )
123+ // Let runner stabilize
124+ cy . get ( '#unified-reporter' ) . should ( 'be.visible' )
167125
168- /*
169- TODO: restore when Percy CSS is fixed. See https://github.com/cypress-io/cypress/issues/23435
170- cy.percySnapshot(`panel 2 at ${ position } px`)
171- */
172- } )
126+ // validate that the width we set in `withCtx` above is the starting point
127+ cy . get ( `[data-cy="reporter-panel"]` ) . invoke ( 'outerWidth' ) . should ( 'eq' , 800 )
173128 } )
174129
175- // now check vertical scaling with viewport resize, and take some snapshots too
130+ it ( `scales the AUT correctly at various widths in ${ testingType } , ( ) => {
131+ // validate that the width we set in `withCtx` above is the starting point
132+ cy . get ( `[data-cy="reporter-panel"]` ) . invoke ( 'outerWidth' ) . should ( 'eq' , 800 )
176133
177- // this viewport should be tall enough to not scale even the e2e test
178- cy . viewport ( 1500 , 1300 )
179- cy . contains ( '[aria-controls=reporter-inline-specs-list]' , 'Specs' )
180- . click ( { force : true } )
134+ cy . contains ( '[aria-controls=reporter-inline-specs-list]' , 'Specs' )
135+ . click ( { force : true } )
181136
182- // make sure the reporter is narrow enough (should be, but don't want to depend on leftover state from above)
183- dragHandleToClientX ( 'panel2' , 400 ) . then ( ( ) => {
184- // but we have to also collapse the Specs List to remove any reason to scale horizontally
137+ // this tooltip text confirms specs list is open
138+ cy . contains ( 'Collapse Specs List' )
185139
186- // this tooltip text confirms specs list is closed
187- cy . contains ( 'Expand Specs List' )
140+ // we will move the right-hand handle of the Reporter
141+ // to these positions from the left of the screen
142+ const dragPositions = [ 1000 , 1090 , 900 , 600 ]
188143
189- assertNoScaleShown ( )
190- // cy.percySnapshot('tall viewport') // TODO: restore when Percy CSS is fixed. See https://github.com/cypress-io/cypress/issues/23435
144+ // based on viewport sizes for CT and e2e tests in the `cypress-in-cypress`
145+ // projects, we expect certain scale % values to be shown
146+ const testingTypeExpectedScales = {
147+ component : [ '93%' , '75%' ] ,
148+ e2e : [ '46%' , '37%' , '56%' , '85%' ] ,
149+ }
191150
192- cy . viewport ( 1500 , 400 )
193- cy . contains ( testingTypeExpectedScales [ `${ testingType } ] ) . should ( 'be.visible' )
194- // cy.percySnapshot('short viewport') // TODO: restore when Percy CSS is fixed. See https://github.com/cypress-io/cypress/issues/23435
151+ // resize the reporter using each of the dragPositions and take Percy snapshots
152+ dragPositions . forEach ( ( position , index ) => {
153+ dragHandleToClientX ( 'panel2' , position ) . then ( ( ) => {
154+ const expectedScale = testingTypeExpectedScales [ testingType ] [ index ]
155+
156+ // CT hits 100% scale "earlier" than E2E, so sometimes there is no expected scale
157+ if ( expectedScale ) {
158+ cy . contains ( expectedScale ) . should ( 'be.visible' )
159+ } else {
160+ cy . contains ( '%)' ) . should ( 'not.exist' )
161+ }
162+ } )
163+ } )
195164 } )
196165
197- cy . get ( '[data-cy="select-browser"]' ) . as ( 'selectBrowser' )
198-
199- cy . viewport ( 500 , 600 )
200- cy . get ( '@selectBrowser' ) . scrollIntoView ( )
201- cy . get ( '@selectBrowser' ) . should ( 'be.visible' ) // with no specs list open, we should see this by scrolling
166+ it ( `displays the UI correctly at 400 reporter width in ${ testingType } , ( ) => {
167+ // this viewport should be tall enough to not scale even the e2e test
168+ cy . viewport ( 1500 , 1300 )
202169
203- dragHandleToClientX ( 'panel2' , 200 ) . then ( ( ) => {
204- cy . contains ( 'Chrome 1' ) . should ( 'not.be.visible' )
205- } )
170+ // make sure the reporter is narrow enough (should be, but don't want to depend on leftover state from above)
171+ dragHandleToClientX ( 'panel2' , 400 ) . then ( ( ) => {
172+ cy . contains ( '%)' ) . should ( 'not.exist' )
206173
207- cy . contains ( '[aria-controls=reporter-inline-specs-list]' , 'Specs' )
208- . click ( { force : true } )
174+ cy . viewport ( 1500 , 400 )
209175
210- cy . get ( '@selectBrowser' ) . should ( 'not.be.visible' )
211- cy . get ( '@selectBrowser' ) . scrollIntoView ( )
212- cy . get ( '@selectBrowser' ) . should ( 'not.be.visible' ) // with specs list open, scrolling is not enough to see this
176+ const expectedScale = testingType === 'component' ? '61%' : '46%'
213177
214- dragHandleToClientX ( 'panel1' , 130 )
178+ cy . contains ( expectedScale ) . should ( 'be.visible' )
179+ } )
215180
216- cy . contains ( testingTypeExpectedScales [ `${ testingType } ] )
181+ cy . get ( '[data-cy="select-browser"]' ) . should ( 'be.visible' )
182+ } )
217183 } )
218184
219185 it ( `resets selector playground validity when selecting element with playground selector in ${ testingType } , ( ) => {
0 commit comments