Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Component testing] Viewport size config ignored if 1000x660 #15899

Closed
Akryum opened this issue Apr 9, 2021 · 4 comments · Fixed by #15902
Closed

[Component testing] Viewport size config ignored if 1000x660 #15899

Akryum opened this issue Apr 9, 2021 · 4 comments · Fixed by #15902
Assignees

Comments

@Akryum
Copy link
Contributor

Akryum commented Apr 9, 2021

Current behavior

Default viewport size is always 500x500.

Note that cy.viewport() in tests works as expected.

image

image

image

image

Desired behavior

Default viewport size follows the cypress.json file.

Test code to reproduce

cypress.json:

{
  "viewportHeight": 660,
  "viewportWidth": 1000
}
cypress open-ct
cypress run-ct

Versions

Cypress: 7.0.1

@Akryum
Copy link
Contributor Author

Akryum commented Apr 9, 2021

This is caused because the code checks if values are 1000x660 to apply the component testing special default 500x500. Workaround:

{
  "viewportHeight": 661,
  "viewportWidth": 1001
}

addComponentTestingUniqueDefaults (cfg: Record<string, unknown>) {
const defaultViewport = options.reduce<Record<string, number>>((acc, curr) => {
if (curr.name === 'viewportHeight') {
return { ...acc, viewportHeight: curr.defaultValue as number }
}
if (curr.name === 'viewportWidth') {
return { ...acc, viewportWidth: curr.defaultValue as number }
}
return acc
}, {})
return {
...cfg,
viewportHeight: cfg.viewportHeight !== defaultViewport.viewportHeight ? cfg.viewportHeight : 500,
viewportWidth: cfg.viewportWidth !== defaultViewport.viewportWidth ? cfg.viewportWidth : 500,
}
}

@Akryum Akryum changed the title [Component testing] Viewport size config ignored [Component testing] Viewport size config ignored if 1000x660 Apr 9, 2021
@Akryum
Copy link
Contributor Author

Akryum commented Apr 9, 2021

I guess it could be fixed by adding a rawJson property to the project config here:

const resolved = {}

Then we can have a much simpler (and working) code to check if the config was explicitly set by the user:

return { 
  ...cfg, 
  viewportHeight: cfg.rawJson.viewportHeight ?? 500, 
  viewportWidth: cfg.rawJson.viewportWidth ?? 500, 
}

@cypress-bot
Copy link
Contributor

cypress-bot bot commented Apr 9, 2021

The code for this is done in cypress-io/cypress#15902, but has yet to be released.
We'll update this issue and reference the changelog when it's released.

@jennifer-shehane
Copy link
Member

This was released. Please update to the latest version of Cypress.

@cypress-io cypress-io locked as resolved and limited conversation to collaborators Apr 28, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants