test(react-color-picker): Added cy and a11y tests for sliders #33609
Conversation
📊 Bundle size report✅ No changes found |
|
Pull request demo site: URL |
...-components/react-color-picker-preview/library/src/components/AlphaSlider/AlphaSlider.cy.tsx
Show resolved
Hide resolved
| }); | ||
|
|
||
| describe('mouse navigation', () => { | ||
| it('has correct a11y attributes', () => { |
There was a problem hiding this comment.
Could you please clarify what this test verifies? Does the value change before or after a mouse click?
There was a problem hiding this comment.
Value changes after mouse click. It should check that a11y attributes before click and after
There was a problem hiding this comment.
It looks a bit odd as you are verifying different attributes before/after mouse click
| const [color, setColor] = React.useState(props.color ?? { h: 0, s: 1, v: 1 }); | ||
| return ( | ||
| <> | ||
| <p tabIndex={0} id="before"> |
There was a problem hiding this comment.
Just wondering, why is #before part of the component and #after isn't?
There was a problem hiding this comment.
Because it's needed for the navigation. And #after is used only once checking focus behaviors
| }); | ||
|
|
||
| describe('mouse navigation', () => { | ||
| it('has correct a11y attributes', () => { |
There was a problem hiding this comment.
The same question as above, what does this test verifies?
There was a problem hiding this comment.
The correct a11y values before and after mouse click
| cy.realPress('Tab'); | ||
| cy.realPress('ArrowLeft'); | ||
| cy.realPress('ArrowLeft'); | ||
| cy.get('#alpha-slider').should('have.attr', 'aria-valuetext', '48%'); |
There was a problem hiding this comment.
not sure if it's a common pattern across the repo, but we could create a function for this, and reuse it:
function assertSliderValue(value: string) {
cy.get('#alpha-slider').should('have.attr', 'aria-valuetext', `${value}%`);
cy.get('#alpha-slider').should('have.attr', 'value', value);
}
// and then
expectSliderValue('48')
| cy.realPress('ArrowRight'); | ||
| cy.get('#alpha-slider').should('have.attr', 'value', '29'); | ||
| cy.realPress('ArrowUp'); | ||
| cy.get('#alpha-slider').should('have.attr', 'value', '30'); |
There was a problem hiding this comment.
shouldn't we use the assertSliderValue for all cases?
| }); | ||
|
|
||
| describe('mouse navigation', () => { | ||
| it('has correct a11y attributes', () => { |
There was a problem hiding this comment.
It looks a bit odd as you are verifying different attributes before/after mouse click
New Behavior
Added tests for AlphaSlider and ColorSlider