fix: viewport from CLI on CT (#20849)

* fix: viewport from CLI on CT

* Add tests

Author: estrada9166

packages/app/cypress/e2e/cypress-in-cypress-component.cy.ts

@@ -145,4 +145,15 @@ describe('Cypress In Cypress CT', { viewportWidth: 1500, defaultCommandTimeout:
       )
     })
   })
+
+  it('set the correct viewport values from CLI', () => {
+    cy.openProject('cypress-in-cypress', ['--config', 'viewportWidth=333,viewportHeight=333'])
+    cy.startAppServer('component')
+
+    cy.visitApp()
+    cy.contains('TestComponent.spec').click()
+
+    cy.get('#unified-runner').should('have.css', 'width', '333px')
+    cy.get('#unified-runner').should('have.css', 'height', '333px')
+  })
 })

packages/app/cypress/e2e/cypress-in-cypress-e2e.cy.ts

@@ -154,4 +154,17 @@ describe('Cypress In Cypress E2E', { viewportWidth: 1500, defaultCommandTimeout:
     cy.get('[data-model-state="failed"]').should('contain', 'renders the blank page')
     cy.percySnapshot()
   })
+
+  it('set the correct viewport values from CLI', () => {
+    cy.openProject('cypress-in-cypress', ['--config', 'viewportWidth=333,viewportHeight=333'])
+    cy.startAppServer()
+
+    cy.visitApp()
+    cy.contains('dom-content.spec').click()
+
+    cy.get('.toggle-specs-wrapper').click()
+
+    cy.get('#unified-runner').should('have.css', 'width', '333px')
+    cy.get('#unified-runner').should('have.css', 'height', '333px')
+  })
 })

packages/config/src/options.ts

@@ -384,12 +384,12 @@ const resolvedOptions: Array<ResolvedConfigOption> = [
     canUpdateDuringTestTime: false,
   }, {
     name: 'viewportHeight',
-    defaultValue: 660,
+    defaultValue: (options: Record<string, any> = {}) => options.testingType === 'component' ? 500 : 660,
     validation: validate.isNumber,
     canUpdateDuringTestTime: true,
   }, {
     name: 'viewportWidth',
-    defaultValue: 1000,
+    defaultValue: (options: Record<string, any> = {}) => options.testingType === 'component' ? 500 : 1000,
     validation: validate.isNumber,
     canUpdateDuringTestTime: true,
   }, {

packages/server/lib/project-base.ts

@@ -134,18 +134,9 @@ export class ProjectBase<TServer extends Server> extends EE {
   injectCtSpecificConfig (cfg) {
     cfg.resolved.testingType = { value: 'component' }
 
-    // This value is normally set up in the `packages/server/lib/plugins/index.js#110`
-    // But if we don't return it in the plugins function, it never gets set
-    // Since there is no chance that it will have any other value here, we set it to "component"
-    // This allows users to not return config in the `cypress/plugins/index.js` file
-    // https://github.com/cypress-io/cypress/issues/16860
-    const rawJson = cfg.rawJson as Cfg
-
     return {
       ...cfg,
       componentTesting: true,
-      viewportHeight: rawJson.viewportHeight ?? 500,
-      viewportWidth: rawJson.viewportWidth ?? 500,
     }
   }