You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I ran into issues when I created a test when user clicks on steps to update slider value. However, testing using keyboard Arrow Rigth works as expected.
Also when testing with the preview the click on the steps works as expected.
exportdefaultfunctionApp(){const[currentIndex,setCurrentIndex]=useState(0);const_handleIndexChange=(index)=>{console.log("does this get called? ",index);setCurrentIndex(index);};return(<divclassName="App"><SlideronChange={_handleIndexChange}currentIndex={currentIndex}/><divclassName="container"><StepcurrentIndex={currentIndex}/></div></div>);}
Tests
import*asReactfrom"react";import"@testing-library/jest-dom";importuserEventfrom"@testing-library/user-event";import{render,screen}from"@testing-library/react";importAppfrom"./App";beforeEach(()=>{// `React Slider` package uses ResizeObserver api// mock is neededObject.defineProperty(global,"ResizeObserver",{writable: true,value: jest.fn().mockImplementation(()=>({observe: jest.fn(()=>"Mocking works"),unobserve: jest.fn(),disconnect: jest.fn()}))});});describe("update slider values",()=>{// this pass without issues 👍 it("should allow user to change value by keyboard input",()=>{render(<App/>);constslider=screen.getByLabelText("Step Slider");screen.debug(slider);expect(slider).toHaveAttribute("aria-valuenow","0");userEvent.type(slider,"{ArrowRight}");expect(slider).toHaveAttribute("aria-valuenow","1");});// this does not pass 👎 // on change handler receives old valueit("should allow user to change value by click on marks",()=>{render(<App/>);constslider=screen.getByLabelText("Step Slider");screen.debug(slider);expect(slider).toHaveAttribute("aria-valuenow","0");conststep1=screen.getByLabelText("Set 1");screen.debug(step1);userEvent.click(step1);expect(slider).toHaveAttribute("aria-valuenow","1");});});
Notes:
The span for each mark contains an aria-label useful with testing so we can query this mark with getByLabelText. Even though aria-label does not make much sense on span tags. We are able to query and click marks but onChange get called with old value or not called at all. So slider value does not get updated.
Tested this code with react-slider v2.0.1 with a local app however, sandbox throws some errors. So I set and older version. But same error on related to test suite happens when testing with either 1.3.1 or 2.0.1.
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.
Description
I ran into issues when I created a test when user clicks on steps to update slider value. However, testing using keyboard
Arrow Rigth
works as expected.Also when testing with the preview the click on the steps works as expected.
Package versions:
Relevant code
Component
App
Tests
Notes:
The span for each mark contains an aria-label useful with testing so we can query this mark with
getByLabelText
. Even though aria-label does not make much sense on span tags. We are able to query and click marks butonChange
get called with old value or not called at all. So slider value does not get updated.Tested this code with react-slider v2.0.1 with a local app however, sandbox throws some errors. So I set and older version. But same error on related to test suite happens when testing with either 1.3.1 or 2.0.1.
Maybe this old solved issues could be related: onChange returns old value if used with value prop #197 onAfterChange called with old values #201 but didn't seems to provide a solution since this one is a weird behavior on test.
CodeSandbox
Please replicate on the below sandbox link
https://codesandbox.io/s/react-slider-prompt-level-iun34i?file=/src/App.test.js
Thank you so much for the library, it is an awesome one.
The text was updated successfully, but these errors were encountered: