Focus state in Cypress visual regression tests

Open

#1,463 opened on Feb 1, 2024 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language: TypeScript
Stars: 53
Forks: 63
Avg merge: 2d 4h
Merged PRs (30d): 15

Description

## Summary of the bug
Some component visual regression tests where focus state is included needs padding added to ensure the entirety of the component and state is visible.

## 📸 Screenshots or code
Along with the following tests, IcAccordion focus state visual tests need adding.
IcButton.cy.tsx-dropdown-popover.png
IcSelect.cy.tsx-clear-button-cleared.png
IcSelect.cy.tsx-custom-elements-open.png
IcSelect.cy.tsx-custom-elements-open.png
IcSelect.cy.tsx-default-open.png
IcSelect.cy.tsx-default-value-open.png
IcSelect.cy.tsx-descriptions-open.png
IcSelect.cy.tsx-disabled-options-open.png
IcSelect.cy.tsx-full-width-open.png
IcSelect.cy.tsx-groups-open.png
IcSelect.cy.tsx-recommended-open.png
IcSelect.cy.tsx-small-deprecated-open.png
IcSelect.cy.tsx-small-open.png
IcSelectSearchable.cy.tsx-searchable-custom-elements-open.png
IcSelectSearchable.cy.tsx-searchable-default-open.png
IcSelectSearchable.cy.tsx-searchable-default-value-open.png
IcSelectSearchable.cy.tsx-searchable-descriptions-in-filter-open.png
IcSelectSearchable.cy.tsx-searchable-descriptions-open.png
IcSelectSearchable.cy.tsx-searchable-disabled-options-open.png
IcSelectSearchable.cy.tsx-searchable-full-width-open.png
IcSelectSearchable.cy.tsx-searchable-groups-in-filter-open.png
IcSelectSearchable.cy.tsx-searchable-groups-open.png
IcSelectSearchable.cy.tsx-searchable-recommended-open.png
IcSelectSearchable.cy.tsx-searchable-search-match-position-open.png
IcSelectSearchable.cy.tsx-searchable-small-open.png
IcSelectSearchable.cy.tsx-searchable-small-open-deprecated.png

## 🧐 Expected behaviour
Visual test should encapsulate the full component, focused and not.

## 📝 Acceptance Criteria
If relevant, describe in full detail the different interactions and edge cases that the component or patterns needs to fulfil.

*Given*
*When*
*Then*

## Additional info
Tell us anything else useful to help us fix or understand the problem.

Contributor guide

Open the contributing guide

First steps

Read the whole issue, then the project's contributing guide.
Comment on the issue to say you are picking it up — it saves two people doing the same work.
Fork the repository and make your change on a branch.
Open a pull request that references the issue number.

Research direction

Start with the named Cypress tests, including IcButton.cy.tsx, IcSelect.cy.tsx, IcSelectSearchable.cy.tsx, and the IcAccordion focus-state visual tests. Run the affected visual regression tests and compare the listed screenshots; done means focused and unfocused component states are fully visible with the required padding.

Written by the indexing model from the issue text.

Assessment

Tech stack: cypress, typescript
Domain: frontend, testing
Issue type: Bug
Difficulty: 3/5
Estimated time: 1-2 days
Activity status: Stale
Clarity: Mostly clear
Newbie friendliness: 35/100