Skip to content

Commit

Permalink
chore(Slider) update integration tests (#10520)
Browse files Browse the repository at this point in the history 
* chore(Slider) update integration tests

* fix whitespace difference

* remove redundant tests, add keyboard interaction tests
  • Loading branch information
@Dominik-Petrik
Dominik-Petrik authored Sep 10, 2024
1 parent 8a4554f commit 5b9adcf
Show file tree
Hide file tree
Showing 2 changed files with 182 additions and 176 deletions.
150 changes: 121 additions & 29 deletions packages/react-integration/cypress/integration/slider.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,43 +3,135 @@ describe('Slider Demo Test', () => {
cy.visit('http://localhost:3000/slider-demo-nav-link');
});

it.skip('renders the discrete slider', () => {
it('changes discrete slider value when dragged', () => {
cy.get('#discrete-slider').should('exist');
cy.get('#discrete-slider').should(
'have.attr',
'style',
'--pf-v5-c-slider--value:62.5%; --pf-v5-c-slider__value--c-form-control--width-chars:1;'
);
});

it('changes discrete slider value when clicked on', () => {
cy.get('#discrete-slider')
.invoke('attr', 'style')
.should(
'match',
/--pf-v5-c-slider--value:\s*62\.5%\s*;?\s*--pf-v5-c-slider__value--c-form-control--width-chars:\s*1\s*;/
);
cy.get('#discrete-slider > .pf-v5-c-slider__main > .pf-v5-c-slider__thumb')
.trigger('mousedown', { which: 1 })
.trigger('mousemove', { clientX: 300, clientY: 300 })
.trigger('mousemove', 150, 10, { force: true })
.trigger('mouseup', { force: true });
cy.get('#discrete-slider')
.invoke('attr', 'style')
.should(
'match',
/--pf-v5-c-slider--value:\s*75%\s*;?\s*--pf-v5-c-slider__value--c-form-control--width-chars:\s*1\s*;/
);
});

it.skip('renders the slider with input', () => {
cy.get('#discrete-slider-input-label').should('exist');
cy.get(
'#discrete-slider-input-label > .pf-v5-c-slider__value > .pf-v5-c-input-group > .pf-v5-c-form-control'
).should('exist');
cy.get(
'#discrete-slider-input-label > .pf-v5-c-slider__value > .pf-v5-c-input-group > .pf-v5-c-input-group__text'
).should('exist');
cy.get('#discrete-slider-input-label').should(
'have.attr',
'style',
'--pf-v5-c-slider--value:50%; --pf-v5-c-slider__value--c-form-control--width-chars:2;'
);
it('changes discrete slider value using keyboard', () => {
cy.get('#discrete-slider > .pf-v5-c-slider__main > .pf-v5-c-slider__thumb').focus();
cy.get('#discrete-slider > .pf-v5-c-slider__main > .pf-v5-c-slider__thumb').trigger('keydown', { keyCode: 39 });
cy.wait(50);
cy.get('#discrete-slider > .pf-v5-c-slider__main > .pf-v5-c-slider__thumb').trigger('keyup', { keyCode: 39 });
cy.get('#discrete-slider')
.invoke('attr', 'style')
.should(
'match',
/--pf-v5-c-slider--value:\s*87\.5%\s*;?\s*--pf-v5-c-slider__value--c-form-control--width-chars:\s*1\s*;/
);
});

it.skip('renders the continuous slider', () => {
it('changes continuous slider value when dragged', () => {
cy.get('#continuous-slider').should('exist');
cy.get('#continuous-slider').should(
'have.attr',
'style',
'--pf-v5-c-slider--value:50%; --pf-v5-c-slider__value--c-form-control--width-chars:2;'
);
cy.get('#continuous-slider')
.invoke('attr', 'style')
.should(
'match',
/--pf-v5-c-slider--value:\s*50%\s*;?\s*--pf-v5-c-slider__value--c-form-control--width-chars:\s*2\s*;/
);
cy.get('#continuous-slider > .pf-v5-c-slider__main > .pf-v5-c-slider__thumb')
.trigger('mousedown', { which: 1 })
.trigger('mousemove', 430, 10, { force: true })
.trigger('mouseup', { force: true });

cy.get('#continuous-slider')
.invoke('attr', 'style')
.should(
'match',
/--pf-v5-c-slider--value:\s*100%\s*;?\s*--pf-v5-c-slider__value--c-form-control--width-chars:\s*3\s*;/
);
});

it('changes continuous slider value using keyboard', () => {
cy.get('#continuous-slider > .pf-v5-c-slider__main > .pf-v5-c-slider__thumb').focus();
cy.get('#continuous-slider > .pf-v5-c-slider__main > .pf-v5-c-slider__thumb').trigger('keydown', { keyCode: 37 });
cy.wait(100);
cy.get('#continuous-slider > .pf-v5-c-slider__main > .pf-v5-c-slider__thumb').trigger('keyup', { keyCode: 37 });

cy.get('#continuous-slider')
.invoke('attr', 'style')
.should(
'not.match',
/--pf-v5-c-slider--value:\s*100%\s*;?\s*--pf-v5-c-slider__value--c-form-control--width-chars:\s*3\s*;/
);
});

it('disabled slider value does not change when dragged', () => {
cy.get('#disabled-slider').should('exist');
cy.get('#disabled-slider')
.invoke('attr', 'style')
.should(
'match',
/--pf-v5-c-slider--value:\s*20%\s*;?\s*--pf-v5-c-slider__value--c-form-control--width-chars:\s*1\s*;/
);

cy.get('#disabled-slider').should('have.class', 'pf-m-disabled');
cy.get('#disabled-slider > .pf-v5-c-slider__main > .pf-v5-c-slider__thumb')
.trigger('mousedown', { which: 1 })
.trigger('mousemove', 430, 10, { force: true })
.trigger('mouseup', { force: true });
cy.get('#disabled-slider')
.invoke('attr', 'style')
.should(
'match',
/--pf-v5-c-slider--value:\s*20%\s*;?\s*--pf-v5-c-slider__value--c-form-control--width-chars:\s*1\s*;/
);
});

it('changes custom steps slider value when dragged', () => {
cy.get('#custom-steps-slider').should('exist');

cy.get('#custom-steps-slider')
.invoke('attr', 'style')
.should(
'match',
/--pf-v5-c-slider--value:\s*20%\s*;?\s*--pf-v5-c-slider__value--c-form-control--width-chars:\s*1\s*;/
);
cy.get('#custom-steps-slider > .pf-v5-c-slider__main > .pf-v5-c-slider__thumb')
.trigger('mousedown', { which: 1 })
.trigger('mousemove', -200, 10, { force: true })
.trigger('mouseup', { force: true });
cy.get('#custom-steps-slider')
.invoke('attr', 'style')
.should(
'match',
/--pf-v5-c-slider--value:\s*0%\s*;?\s*--pf-v5-c-slider__value--c-form-control--width-chars:\s*1\s*;/
);
});

it('changes custom steps slider value using keyboard', () => {
cy.get('#custom-steps-slider')
.invoke('attr', 'style')
.should(
'match',
/--pf-v5-c-slider--value:\s*0%\s*;?\s*--pf-v5-c-slider__value--c-form-control--width-chars:\s*1\s*;/
);

cy.get('#custom-steps-slider > .pf-v5-c-slider__main > .pf-v5-c-slider__thumb').focus();
cy.get('#custom-steps-slider > .pf-v5-c-slider__main > .pf-v5-c-slider__thumb').trigger('keydown', { keyCode: 39 });
cy.wait(100);
cy.get('#custom-steps-slider > .pf-v5-c-slider__main > .pf-v5-c-slider__thumb').trigger('keyup', { keyCode: 39 });

cy.get('#custom-steps-slider')
.invoke('attr', 'style')
.should(
'match',
/--pf-v5-c-slider--value:\s*20%\s*;?\s*--pf-v5-c-slider__value--c-form-control--width-chars:\s*1\s*;/
);
});
});
Loading

0 comments on commit 5b9adcf

Please sign in to comment.