See all the other examples and their source code!
yarn add react react-dom react-range
This library is tightly coupled to many DOM APIs. It would be very hard to write unit tests that would not involve a lot of mocking. Or we could re-architect the library to better abstract all DOM interfaces but that would mean more code and bigger footprint.
Instead of that, react-range is thoroughly tested by end to end tests powered by puppeteer. It tests all user interactions:
All tests are automatically ran in Travis CI with headless chromium. This way, the public API is well tested, including pixel-perfect positioning. Also, the tests are pretty fast, reliable and very descriptive.
Do you want to run them in the dev mode (slows down operations, opens the browser)?
yarn storybook #start the storybook server
yarn test:e2e:dev #run the e2e testsCI mode (storybook started on the background, quick, headless)
yarn test:e2e- Chrome (latest, mac, windows, iOS, Android)
- Firefox (latest, mac, windows)
- Safari (latest, mac, iOS)
- Edge (latest, windows)
- MSIE 11 (windows)
This is how you can spin up the dev environment:
git clone https://github.com/tajo/react-range
cd react-range
yarn
yarn storybook
Big big shoutout to Tom MacWright for donating the react-range npm handle! ❤️
Big thanks to BrowserStack for letting the maintainers use their service to debug browser issues.