From a89238237b4e69f726e2aa4334eb01566b77463b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20Pet=C5=99=C3=ADk?= Date: Tue, 4 Jun 2024 14:52:37 +0200 Subject: [PATCH 1/3] chore(Slider) update integration tests --- .../cypress/integration/slider.spec.ts | 80 +++++- .../demos/SliderDemo/SliderDemo.tsx | 237 ++++++++---------- 2 files changed, 176 insertions(+), 141 deletions(-) diff --git a/packages/react-integration/cypress/integration/slider.spec.ts b/packages/react-integration/cypress/integration/slider.spec.ts index 12fb47a5a41..9d42ca1dcdb 100644 --- a/packages/react-integration/cypress/integration/slider.spec.ts +++ b/packages/react-integration/cypress/integration/slider.spec.ts @@ -3,43 +3,103 @@ describe('Slider Demo Test', () => { cy.visit('http://localhost:3000/slider-demo-nav-link'); }); - it.skip('renders the discrete slider', () => { + it('renders the discrete slider', () => { 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;' + '--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', () => { + it('changes discrete slider value when dragged', () => { 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').should( + 'have.attr', + 'style', + '--pf-v5-c-slider--value: 75%; --pf-v5-c-slider__value--c-form-control--width-chars: 1;' + ); }); - it.skip('renders the slider with input', () => { + it('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' + '#discrete-slider-input-label > .pf-v5-c-slider__value > .pf-v5-c-input-group > .pf-v5-c-input-group__item > .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' + '#discrete-slider-input-label > .pf-v5-c-slider__value > .pf-v5-c-input-group > .pf-v5-c-input-group__item > .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;' + '--pf-v5-c-slider--value: 50%; --pf-v5-c-slider__value--c-form-control--width-chars: 2;' ); }); - it.skip('renders the continuous slider', () => { + it('renders the continuous slider', () => { 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;' + '--pf-v5-c-slider--value: 50%; --pf-v5-c-slider__value--c-form-control--width-chars: 2;' + ); + }); + + it('changes continuous slider value when dragged', () => { + 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').should( + 'have.attr', + 'style', + '--pf-v5-c-slider--value: 100%; --pf-v5-c-slider__value--c-form-control--width-chars: 3;' + ); + }); + + it('renders the disabled slider', () => { + cy.get('#disabled-slider').should('exist'); + cy.get('#disabled-slider').should( + 'have.attr', + 'style', + '--pf-v5-c-slider--value: 20%; --pf-v5-c-slider__value--c-form-control--width-chars: 1;' + ); + cy.get('#disabled-slider').should('have.class', 'pf-m-disabled'); + }); + + it('disabled slider value does not change when dragged', () => { + 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').should( + 'have.attr', + 'style', + '--pf-v5-c-slider--value: 20%; --pf-v5-c-slider__value--c-form-control--width-chars: 1;' + ); + }); + + it('renders slider with custom steps', () => { + cy.get('#custom-steps-slider').should('exist'); + cy.get('#custom-steps-slider').should( + 'have.attr', + 'style', + '--pf-v5-c-slider--value: 20%; --pf-v5-c-slider__value--c-form-control--width-chars: 1;' + ); + }); + + it('changes custom steps slider value when dragged', () => { + 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').should( + 'have.attr', + 'style', + '--pf-v5-c-slider--value: 0%; --pf-v5-c-slider__value--c-form-control--width-chars: 1;' ); }); }); diff --git a/packages/react-integration/demo-app-ts/src/components/demos/SliderDemo/SliderDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/SliderDemo/SliderDemo.tsx index d7ded077805..9e3e47b9945 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/SliderDemo/SliderDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/SliderDemo/SliderDemo.tsx @@ -1,31 +1,20 @@ import { Slider, SliderOnChangeEvent } from '@patternfly/react-core'; -import { Component } from 'react'; - -export interface SliderDemoState { - valueDiscrete: number; - inputValueDiscrete: number; - valuePercent: number; - inputValuePercent: number; - valueContinuous: number; - inputValueContinuous: number; -} - -export class SliderDemo extends Component { - static displayName = 'SliderDemo'; - componentDidMount() { +import { useState, useEffect } from 'react'; + +export const SliderDemo = () => { + const [valueDiscrete, setValueDiscrete] = useState(62.5); + const [valuePercent, setValuePercent] = useState(50); + const [inputValuePercent, setInputValuePercent] = useState(50); + const [valueContinuous, setValueContinuous] = useState(50); + const [inputValueContinuous, setInputValueContinuous] = useState(50); + const [customStepsValue, setCustomStepsValue] = useState(20); + const [disabledValue, setDisabledValue] = useState(20); + + useEffect(() => { window.scrollTo(0, 0); - } - - state = { - valueDiscrete: 62.5, - valueDiscreteNoLinearMinMax: 25, - valuePercent: 50, - inputValuePercent: 50, - valueContinuous: 50, - inputValueContinuous: 50 - }; + }, []); - stepsDiscrete = [ + const stepsDiscrete = [ { value: 0, label: '0' }, { value: 12.5, label: '1', isLabelHidden: true }, { value: 25, label: '2' }, @@ -37,16 +26,7 @@ export class SliderDemo extends Component { { value: 100, label: '8' } ]; - stepsDiscreteNoLinearWithMaxMin = [ - { value: 12, label: '12' }, - { value: 15, label: '15' }, - { value: 25, label: '25' }, - { value: 54, label: '54' }, - { value: 67, label: '67' }, - { value: 86, label: '86' } - ]; - - stepsPercent = [ + const stepsPercent = [ { value: 0, label: '0%' }, { value: 25, label: '25%', isLabelHidden: true }, { value: 50, label: '50%' }, @@ -54,134 +34,129 @@ export class SliderDemo extends Component { { value: 100, label: '100%' } ]; - onChangeDiscreteNoLInearMinMax = (_event: SliderOnChangeEvent, value: number) => { - this.setState({ valueDiscreteMinMax: value }); - }; + const customSteps = [ + { value: 0, label: '0' }, + { value: 20, label: '20' }, + { value: 40, label: '40' }, + { value: 60, label: '60' }, + { value: 80, label: '80' }, + { value: 100, label: '100' } + ]; - onChangeDiscrete = (_event: SliderOnChangeEvent, value: number, inputValue?: number) => { + const onChangeDiscrete = (_event: SliderOnChangeEvent, value: number, inputValue?: number) => { let newValue; - let newInputValue; if (!inputValue) { - const step = this.stepsDiscrete.find((step) => step.value === value); - newInputValue = step ? step.label : 0; - newInputValue = Number(newInputValue); newValue = value; } else { - const maxValue = Number(this.stepsDiscrete[this.stepsDiscrete.length - 1].label); + const maxValue = Number(stepsDiscrete[stepsDiscrete.length - 1].label); if (inputValue > maxValue) { - newValue = Number(this.stepsDiscrete[this.stepsDiscrete.length - 1].value); - newInputValue = maxValue; + newValue = Number(stepsDiscrete[stepsDiscrete.length - 1].value); } else { - const stepIndex = this.stepsDiscrete.findIndex((step) => Number(step.label) >= inputValue); - if (Number(this.stepsDiscrete[stepIndex].label) === inputValue) { - newValue = this.stepsDiscrete[stepIndex].value; + const stepIndex = stepsDiscrete.findIndex((step) => Number(step.label) >= inputValue); + if (Number(stepsDiscrete[stepIndex].label) === inputValue) { + newValue = stepsDiscrete[stepIndex].value; } else { - const midpoint = - (Number(this.stepsDiscrete[stepIndex].label) + Number(this.stepsDiscrete[stepIndex - 1].label)) / 2; + const midpoint = (Number(stepsDiscrete[stepIndex].label) + Number(stepsDiscrete[stepIndex - 1].label)) / 2; if (midpoint > inputValue) { - newValue = this.stepsDiscrete[stepIndex - 1].value; - newInputValue = Number(this.stepsDiscrete[stepIndex - 1].label); + newValue = stepsDiscrete[stepIndex - 1].value; } else { - newValue = this.stepsDiscrete[stepIndex].value; - newInputValue = Number(this.stepsDiscrete[stepIndex].label); + newValue = stepsDiscrete[stepIndex].value; } } } } - this.setState({ - inputValueDiscrete: newInputValue, - valueDiscrete: newValue - }); + setValueDiscrete(newValue); }; - onChangePercent = (_event: SliderOnChangeEvent, value: number, inputValue?: number) => { - let newValue; - let newInputValue; + const onChangePercent = (_event: SliderOnChangeEvent, value: number, inputValue?: number) => { + let newValue = value; + let newInputValue = inputValue; + + const getStepLabelValue = (label: string) => Number(label.slice(0, -1)); if (!inputValue) { - const step = this.stepsPercent.find((step) => step.value === value); - newInputValue = step ? step.label.slice(0, -1) : 0; - newInputValue = Number(newInputValue); - newValue = value; + const step = stepsPercent.find((step) => step.value === value); + newInputValue = step ? getStepLabelValue(step.label) : 0; } else { - const maxValue = Number(this.stepsPercent[this.stepsPercent.length - 1].label.slice(0, -1)); + const maxValue = getStepLabelValue(stepsPercent[stepsPercent.length - 1].label); + if (inputValue > maxValue) { - newValue = Number(this.stepsPercent[this.stepsPercent.length - 1].value); + newValue = stepsPercent[stepsPercent.length - 1].value; newInputValue = maxValue; } else { - const stepIndex = this.stepsPercent.findIndex((step) => Number(step.label.slice(0, -1)) >= inputValue); - if (Number(this.stepsPercent[stepIndex].label.slice(0, -1)) === inputValue) { - newValue = this.stepsPercent[stepIndex].value; + const stepIndex = stepsPercent.findIndex((step) => getStepLabelValue(step.label) >= inputValue); + const currentStepValue = getStepLabelValue(stepsPercent[stepIndex].label); + + if (currentStepValue === inputValue) { + newValue = stepsPercent[stepIndex].value; + newInputValue = currentStepValue; } else { - const midpoint = - (Number(this.stepsPercent[stepIndex].label.slice(0, -1)) + - Number(this.stepsPercent[stepIndex - 1].label.slice(0, -1))) / - 2; - if (midpoint > inputValue) { - newValue = this.stepsPercent[stepIndex - 1].value; - newInputValue = Number(this.stepsPercent[stepIndex - 1].label.slice(0, -1)); + const previousStepValue = getStepLabelValue(stepsPercent[stepIndex - 1].label); + const midpoint = (currentStepValue + previousStepValue) / 2; + + if (inputValue < midpoint) { + newValue = stepsPercent[stepIndex - 1].value; + newInputValue = previousStepValue; } else { - newValue = this.stepsPercent[stepIndex].value; - newInputValue = Number(this.stepsPercent[stepIndex].label.slice(0, -1)); + newValue = stepsPercent[stepIndex].value; + newInputValue = currentStepValue; } } } } - this.setState({ - inputValuePercent: newInputValue, - valuePercent: newValue - }); + + setValuePercent(newValue); + setInputValuePercent(newInputValue); }; - onChangeContinuous = (_event: SliderOnChangeEvent, value: number) => { + const onChangeContinuous = (_event: SliderOnChangeEvent, value: number) => { const newValue = Math.floor(value); - this.setState({ - inputValueContinuous: newValue, - valueContinuous: newValue - }); + setValueContinuous(newValue); + setInputValueContinuous(newValue); + }; + + const onChangeCustomSteps = (_event: SliderOnChangeEvent, value: number) => { + setCustomStepsValue(value); + }; + + const onChangeDisabled = (_event: SliderOnChangeEvent, value: number) => { + setDisabledValue(value); }; - render() { - return ( - <> - -
- -
- -
- - - ); - } -} + return ( + <> + +
+ +
+ +
+ +
+ + + ); +}; From 113cf1dd16a16bb3c823c1c93b77f62f7bcf9552 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20Pet=C5=99=C3=ADk?= Date: Wed, 5 Jun 2024 16:33:16 +0200 Subject: [PATCH 2/3] fix whitespace difference --- .../cypress/integration/slider.spec.ts | 101 ++++++++++-------- 1 file changed, 56 insertions(+), 45 deletions(-) diff --git a/packages/react-integration/cypress/integration/slider.spec.ts b/packages/react-integration/cypress/integration/slider.spec.ts index 9d42ca1dcdb..e1336daafcf 100644 --- a/packages/react-integration/cypress/integration/slider.spec.ts +++ b/packages/react-integration/cypress/integration/slider.spec.ts @@ -5,11 +5,12 @@ describe('Slider Demo Test', () => { it('renders the discrete slider', () => { 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;' - ); + cy.get('#discrete-slider') + .invoke('attr', 'style') + .should('be.oneOf', [ + '--pf-v5-c-slider--value: 62.5%; --pf-v5-c-slider__value--c-form-control--width-chars: 1;', + '--pf-v5-c-slider--value:62.5%; --pf-v5-c-slider__value--c-form-control--width-chars:1;' + ]); }); it('changes discrete slider value when dragged', () => { @@ -17,11 +18,12 @@ describe('Slider Demo Test', () => { .trigger('mousedown', { which: 1 }) .trigger('mousemove', 150, 10, { force: true }) .trigger('mouseup', { force: true }); - cy.get('#discrete-slider').should( - 'have.attr', - 'style', - '--pf-v5-c-slider--value: 75%; --pf-v5-c-slider__value--c-form-control--width-chars: 1;' - ); + cy.get('#discrete-slider') + .invoke('attr', 'style') + .should('be.oneOf', [ + '--pf-v5-c-slider--value: 75%; --pf-v5-c-slider__value--c-form-control--width-chars: 1;', + '--pf-v5-c-slider--value:75%; --pf-v5-c-slider__value--c-form-control--width-chars:1;' + ]); }); it('renders the slider with input', () => { @@ -32,20 +34,22 @@ describe('Slider Demo Test', () => { cy.get( '#discrete-slider-input-label > .pf-v5-c-slider__value > .pf-v5-c-input-group > .pf-v5-c-input-group__item > .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;' - ); + cy.get('#discrete-slider-input-label') + .invoke('attr', 'style') + .should('be.oneOf', [ + '--pf-v5-c-slider--value: 50%; --pf-v5-c-slider__value--c-form-control--width-chars: 2;', + '--pf-v5-c-slider--value:50%; --pf-v5-c-slider__value--c-form-control--width-chars:2;' + ]); }); it('renders the continuous slider', () => { 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('be.oneOf', [ + '--pf-v5-c-slider--value: 50%; --pf-v5-c-slider__value--c-form-control--width-chars: 2;', + '--pf-v5-c-slider--value:50%; --pf-v5-c-slider__value--c-form-control--width-chars:2;' + ]); }); it('changes continuous slider value when dragged', () => { @@ -53,20 +57,23 @@ describe('Slider Demo Test', () => { .trigger('mousedown', { which: 1 }) .trigger('mousemove', 430, 10, { force: true }) .trigger('mouseup', { force: true }); - cy.get('#continuous-slider').should( - 'have.attr', - 'style', - '--pf-v5-c-slider--value: 100%; --pf-v5-c-slider__value--c-form-control--width-chars: 3;' - ); + + cy.get('#continuous-slider') + .invoke('attr', 'style') + .should('be.oneOf', [ + '--pf-v5-c-slider--value: 100%; --pf-v5-c-slider__value--c-form-control--width-chars: 3;', + '--pf-v5-c-slider--value:100%; --pf-v5-c-slider__value--c-form-control--width-chars:3;' + ]); }); it('renders the disabled slider', () => { cy.get('#disabled-slider').should('exist'); - cy.get('#disabled-slider').should( - 'have.attr', - 'style', - '--pf-v5-c-slider--value: 20%; --pf-v5-c-slider__value--c-form-control--width-chars: 1;' - ); + cy.get('#disabled-slider') + .invoke('attr', 'style') + .should('be.oneOf', [ + '--pf-v5-c-slider--value: 20%; --pf-v5-c-slider__value--c-form-control--width-chars: 1;', + '--pf-v5-c-slider--value:20%; --pf-v5-c-slider__value--c-form-control--width-chars:1;' + ]); cy.get('#disabled-slider').should('have.class', 'pf-m-disabled'); }); @@ -75,20 +82,23 @@ describe('Slider Demo Test', () => { .trigger('mousedown', { which: 1 }) .trigger('mousemove', 430, 10, { force: true }) .trigger('mouseup', { force: true }); - cy.get('#disabled-slider').should( - 'have.attr', - 'style', - '--pf-v5-c-slider--value: 20%; --pf-v5-c-slider__value--c-form-control--width-chars: 1;' - ); + cy.get('#disabled-slider') + .invoke('attr', 'style') + .should('be.oneOf', [ + '--pf-v5-c-slider--value: 20%; --pf-v5-c-slider__value--c-form-control--width-chars: 1;', + '--pf-v5-c-slider--value:20%; --pf-v5-c-slider__value--c-form-control--width-chars:1;' + ]); }); it('renders slider with custom steps', () => { cy.get('#custom-steps-slider').should('exist'); - cy.get('#custom-steps-slider').should( - 'have.attr', - 'style', - '--pf-v5-c-slider--value: 20%; --pf-v5-c-slider__value--c-form-control--width-chars: 1;' - ); + + cy.get('#custom-steps-slider') + .invoke('attr', 'style') + .should('be.oneOf', [ + '--pf-v5-c-slider--value: 20%; --pf-v5-c-slider__value--c-form-control--width-chars: 1;', + '--pf-v5-c-slider--value:20%; --pf-v5-c-slider__value--c-form-control--width-chars:1;' + ]); }); it('changes custom steps slider value when dragged', () => { @@ -96,10 +106,11 @@ describe('Slider Demo Test', () => { .trigger('mousedown', { which: 1 }) .trigger('mousemove', -200, 10, { force: true }) .trigger('mouseup', { force: true }); - cy.get('#custom-steps-slider').should( - 'have.attr', - 'style', - '--pf-v5-c-slider--value: 0%; --pf-v5-c-slider__value--c-form-control--width-chars: 1;' - ); + cy.get('#custom-steps-slider') + .invoke('attr', 'style') + .should('be.oneOf', [ + '--pf-v5-c-slider--value: 0%; --pf-v5-c-slider__value--c-form-control--width-chars: 1;', + '--pf-v5-c-slider--value:0%; --pf-v5-c-slider__value--c-form-control--width-chars:1;' + ]); }); }); From e3216dd4f54770162a1b05f28ff1f30f48f45f39 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20Pet=C5=99=C3=ADk?= Date: Tue, 11 Jun 2024 13:44:05 +0200 Subject: [PATCH 3/3] remove redundant tests, add keyboard interaction tests --- .../cypress/integration/slider.spec.ts | 143 ++++++++++-------- .../demos/SliderDemo/SliderDemo.tsx | 61 -------- 2 files changed, 82 insertions(+), 122 deletions(-) diff --git a/packages/react-integration/cypress/integration/slider.spec.ts b/packages/react-integration/cypress/integration/slider.spec.ts index e1336daafcf..da6fd4e8bbe 100644 --- a/packages/react-integration/cypress/integration/slider.spec.ts +++ b/packages/react-integration/cypress/integration/slider.spec.ts @@ -3,56 +3,47 @@ describe('Slider Demo Test', () => { cy.visit('http://localhost:3000/slider-demo-nav-link'); }); - it('renders the discrete slider', () => { + it('changes discrete slider value when dragged', () => { cy.get('#discrete-slider').should('exist'); cy.get('#discrete-slider') .invoke('attr', 'style') - .should('be.oneOf', [ - '--pf-v5-c-slider--value: 62.5%; --pf-v5-c-slider__value--c-form-control--width-chars: 1;', - '--pf-v5-c-slider--value:62.5%; --pf-v5-c-slider__value--c-form-control--width-chars:1;' - ]); - }); - - it('changes discrete slider value when dragged', () => { + .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', 150, 10, { force: true }) .trigger('mouseup', { force: true }); cy.get('#discrete-slider') .invoke('attr', 'style') - .should('be.oneOf', [ - '--pf-v5-c-slider--value: 75%; --pf-v5-c-slider__value--c-form-control--width-chars: 1;', - '--pf-v5-c-slider--value:75%; --pf-v5-c-slider__value--c-form-control--width-chars:1;' - ]); + .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('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-input-group__item > .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__item > .pf-v5-c-input-group__text' - ).should('exist'); - cy.get('#discrete-slider-input-label') + 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('be.oneOf', [ - '--pf-v5-c-slider--value: 50%; --pf-v5-c-slider__value--c-form-control--width-chars: 2;', - '--pf-v5-c-slider--value:50%; --pf-v5-c-slider__value--c-form-control--width-chars:2;' - ]); + .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('renders the continuous slider', () => { + it('changes continuous slider value when dragged', () => { cy.get('#continuous-slider').should('exist'); cy.get('#continuous-slider') .invoke('attr', 'style') - .should('be.oneOf', [ - '--pf-v5-c-slider--value: 50%; --pf-v5-c-slider__value--c-form-control--width-chars: 2;', - '--pf-v5-c-slider--value:50%; --pf-v5-c-slider__value--c-form-control--width-chars:2;' - ]); - }); - - it('changes continuous slider value when dragged', () => { + .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 }) @@ -60,57 +51,87 @@ describe('Slider Demo Test', () => { cy.get('#continuous-slider') .invoke('attr', 'style') - .should('be.oneOf', [ - '--pf-v5-c-slider--value: 100%; --pf-v5-c-slider__value--c-form-control--width-chars: 3;', - '--pf-v5-c-slider--value:100%; --pf-v5-c-slider__value--c-form-control--width-chars:3;' - ]); + .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('renders the disabled slider', () => { - cy.get('#disabled-slider').should('exist'); - cy.get('#disabled-slider') + 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('be.oneOf', [ - '--pf-v5-c-slider--value: 20%; --pf-v5-c-slider__value--c-form-control--width-chars: 1;', - '--pf-v5-c-slider--value:20%; --pf-v5-c-slider__value--c-form-control--width-chars:1;' - ]); - cy.get('#disabled-slider').should('have.class', 'pf-m-disabled'); + .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('be.oneOf', [ - '--pf-v5-c-slider--value: 20%; --pf-v5-c-slider__value--c-form-control--width-chars: 1;', - '--pf-v5-c-slider--value:20%; --pf-v5-c-slider__value--c-form-control--width-chars:1;' - ]); + .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('renders slider with custom steps', () => { + it('changes custom steps slider value when dragged', () => { cy.get('#custom-steps-slider').should('exist'); cy.get('#custom-steps-slider') .invoke('attr', 'style') - .should('be.oneOf', [ - '--pf-v5-c-slider--value: 20%; --pf-v5-c-slider__value--c-form-control--width-chars: 1;', - '--pf-v5-c-slider--value:20%; --pf-v5-c-slider__value--c-form-control--width-chars:1;' - ]); - }); - - it('changes custom steps slider value when dragged', () => { + .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('be.oneOf', [ - '--pf-v5-c-slider--value: 0%; --pf-v5-c-slider__value--c-form-control--width-chars: 1;', - '--pf-v5-c-slider--value:0%; --pf-v5-c-slider__value--c-form-control--width-chars:1;' - ]); + .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*;/ + ); }); }); diff --git a/packages/react-integration/demo-app-ts/src/components/demos/SliderDemo/SliderDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/SliderDemo/SliderDemo.tsx index 9e3e47b9945..f7768917d89 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/SliderDemo/SliderDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/SliderDemo/SliderDemo.tsx @@ -3,8 +3,6 @@ import { useState, useEffect } from 'react'; export const SliderDemo = () => { const [valueDiscrete, setValueDiscrete] = useState(62.5); - const [valuePercent, setValuePercent] = useState(50); - const [inputValuePercent, setInputValuePercent] = useState(50); const [valueContinuous, setValueContinuous] = useState(50); const [inputValueContinuous, setInputValueContinuous] = useState(50); const [customStepsValue, setCustomStepsValue] = useState(20); @@ -26,14 +24,6 @@ export const SliderDemo = () => { { value: 100, label: '8' } ]; - const stepsPercent = [ - { value: 0, label: '0%' }, - { value: 25, label: '25%', isLabelHidden: true }, - { value: 50, label: '50%' }, - { value: 75, label: '75%', isLabelHidden: true }, - { value: 100, label: '100%' } - ]; - const customSteps = [ { value: 0, label: '0' }, { value: 20, label: '20' }, @@ -70,47 +60,6 @@ export const SliderDemo = () => { setValueDiscrete(newValue); }; - const onChangePercent = (_event: SliderOnChangeEvent, value: number, inputValue?: number) => { - let newValue = value; - let newInputValue = inputValue; - - const getStepLabelValue = (label: string) => Number(label.slice(0, -1)); - - if (!inputValue) { - const step = stepsPercent.find((step) => step.value === value); - newInputValue = step ? getStepLabelValue(step.label) : 0; - } else { - const maxValue = getStepLabelValue(stepsPercent[stepsPercent.length - 1].label); - - if (inputValue > maxValue) { - newValue = stepsPercent[stepsPercent.length - 1].value; - newInputValue = maxValue; - } else { - const stepIndex = stepsPercent.findIndex((step) => getStepLabelValue(step.label) >= inputValue); - const currentStepValue = getStepLabelValue(stepsPercent[stepIndex].label); - - if (currentStepValue === inputValue) { - newValue = stepsPercent[stepIndex].value; - newInputValue = currentStepValue; - } else { - const previousStepValue = getStepLabelValue(stepsPercent[stepIndex - 1].label); - const midpoint = (currentStepValue + previousStepValue) / 2; - - if (inputValue < midpoint) { - newValue = stepsPercent[stepIndex - 1].value; - newInputValue = previousStepValue; - } else { - newValue = stepsPercent[stepIndex].value; - newInputValue = currentStepValue; - } - } - } - } - - setValuePercent(newValue); - setInputValuePercent(newInputValue); - }; - const onChangeContinuous = (_event: SliderOnChangeEvent, value: number) => { const newValue = Math.floor(value); setValueContinuous(newValue); @@ -129,16 +78,6 @@ export const SliderDemo = () => { <>
- -