From 72f6c50c45786282ae4c9cf133502057a2dc7c15 Mon Sep 17 00:00:00 2001 From: Jean Gautier Date: Mon, 6 Jan 2020 15:55:40 +0100 Subject: [PATCH 1/6] feat(create-slider-with-tooltip): add get container method * follow the issue #598 * add the possibility to add a get container method to fix the relative parent of the slider's tooltip --- src/createSliderWithTooltip.jsx | 27 ++++++++++++++++----------- 1 file changed, 16 insertions(+), 11 deletions(-) diff --git a/src/createSliderWithTooltip.jsx b/src/createSliderWithTooltip.jsx index f44ba44eb..b4af9dada 100644 --- a/src/createSliderWithTooltip.jsx +++ b/src/createSliderWithTooltip.jsx @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import Tooltip from 'rc-tooltip'; -import Handle from './Handle'; +import { Handle } from 'rc-slider'; export default function createSliderWithTooltip(Component) { return class ComponentWrapper extends React.Component { @@ -9,17 +9,24 @@ export default function createSliderWithTooltip(Component) { tipFormatter: PropTypes.func, handleStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.arrayOf(PropTypes.object)]), tipProps: PropTypes.object, + getTooltipContainer: PropTypes.func, }; + static defaultProps = { - tipFormatter(value) { return value; }, + tipFormatter(value) { + return value; + }, handleStyle: [{}], tipProps: {}, + getTooltipContainer: () => document.body }; + state = { visibles: {}, }; + handleTooltipVisibleChange = (index, visible) => { - this.setState((prevState) => { + this.setState(prevState => { return { visibles: { ...prevState.visibles, @@ -27,13 +34,10 @@ export default function createSliderWithTooltip(Component) { }, }; }); - } + }; + handleWithTooltip = ({ value, dragging, index, disabled, ...restProps }) => { - const { - tipFormatter, - tipProps, - handleStyle, - } = this.props; + const { tipFormatter, tipProps, handleStyle, getTooltipContainer } = this.props; const { prefixCls = 'rc-slider-tooltip', @@ -53,13 +57,13 @@ export default function createSliderWithTooltip(Component) { return ( - ); - } + }; + render() { return ; } From f1f14e57df55e2971314654a6a981471f93bc3d8 Mon Sep 17 00:00:00 2001 From: Jean Gautier Date: Tue, 7 Jan 2020 09:42:55 +0100 Subject: [PATCH 2/6] fix(create-slider-with-tooltip): default behaviour of getTooltipContainer --- src/createSliderWithTooltip.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/createSliderWithTooltip.jsx b/src/createSliderWithTooltip.jsx index b4af9dada..b5b52b48b 100644 --- a/src/createSliderWithTooltip.jsx +++ b/src/createSliderWithTooltip.jsx @@ -18,7 +18,7 @@ export default function createSliderWithTooltip(Component) { }, handleStyle: [{}], tipProps: {}, - getTooltipContainer: () => document.body + getTooltipContainer: (node) => node.parentNode }; state = { From 0a7286bbdfa5926f1b99dfb9ffa038a873fa9c51 Mon Sep 17 00:00:00 2001 From: Jean Gautier Date: Wed, 8 Jan 2020 17:44:49 +0100 Subject: [PATCH 3/6] fix(create-slider-with-tooltip): import handle --- src/createSliderWithTooltip.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/createSliderWithTooltip.jsx b/src/createSliderWithTooltip.jsx index b5b52b48b..682a92dea 100644 --- a/src/createSliderWithTooltip.jsx +++ b/src/createSliderWithTooltip.jsx @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import Tooltip from 'rc-tooltip'; -import { Handle } from 'rc-slider'; +import Handle from './Handle'; export default function createSliderWithTooltip(Component) { return class ComponentWrapper extends React.Component { From 58747e8e613889fbb5b546d1373b5965d34e08b1 Mon Sep 17 00:00:00 2001 From: Jean Gautier Date: Fri, 24 Jan 2020 14:37:02 +0100 Subject: [PATCH 4/6] fix(create-slider-with-tooltip): add one test --- tests/common/createSlider.test.js | 260 ++++++++++++++++++------------ 1 file changed, 154 insertions(+), 106 deletions(-) diff --git a/tests/common/createSlider.test.js b/tests/common/createSlider.test.js index a012ce0a0..6b03ce993 100644 --- a/tests/common/createSlider.test.js +++ b/tests/common/createSlider.test.js @@ -1,11 +1,11 @@ /* eslint-disable max-len, no-undef */ -import React from 'react'; -import { mount } from 'enzyme'; -import Slider, { Range } from '../../src'; +import React from "react"; +import { mount } from "enzyme"; +import Slider, { Range, createSliderWithTooltip } from "../../src"; const setWidth = (object, width) => { // https://github.com/tmpvar/jsdom/commit/0cdb2efcc69b6672dc2928644fc0172df5521176 - Object.defineProperty(object, 'getBoundingClientRect', { + Object.defineProperty(object, "getBoundingClientRect", { value: () => ({ width, // Let all other values retain the JSDom default of `0`. @@ -13,99 +13,101 @@ const setWidth = (object, width) => { height: 0, left: 0, right: 0, - top: 0, + top: 0 }), enumerable: true, - configurable: true, + configurable: true }); }; -describe('createSlider', () => { - it('should render vertical Slider/Range, when `vertical` is true', () => { +describe("createSlider", () => { + it("should render vertical Slider/Range, when `vertical` is true", () => { const sliderWrapper = mount(); - expect(sliderWrapper.find('.rc-slider-vertical').length).toBe(1); + expect(sliderWrapper.find(".rc-slider-vertical").length).toBe(1); const rangeWrapper = mount(); - expect(rangeWrapper.find('.rc-slider-vertical').length).toBe(1); + expect(rangeWrapper.find(".rc-slider-vertical").length).toBe(1); }); - it('should render dots correctly when `dots=true`', () => { + it("should render dots correctly when `dots=true`", () => { const sliderWrapper = mount(); - expect(sliderWrapper.find('.rc-slider-dot').length).toBe(11); - expect(sliderWrapper.find('.rc-slider-dot-active').length).toBe(6); + expect(sliderWrapper.find(".rc-slider-dot").length).toBe(11); + expect(sliderWrapper.find(".rc-slider-dot-active").length).toBe(6); const rangeWrapper = mount(); - expect(rangeWrapper.find('.rc-slider-dot').length).toBe(11); - expect(rangeWrapper.find('.rc-slider-dot-active').length).toBe(4); + expect(rangeWrapper.find(".rc-slider-dot").length).toBe(11); + expect(rangeWrapper.find(".rc-slider-dot-active").length).toBe(4); }); - it('should not set value greater than `max` or smaller `min`', () => { + it("should not set value greater than `max` or smaller `min`", () => { const sliderWithMinWrapper = mount(); - expect(sliderWithMinWrapper.state('value')).toBe(10); + expect(sliderWithMinWrapper.state("value")).toBe(10); const sliderWithMaxWrapper = mount(); - expect(sliderWithMaxWrapper.state('value')).toBe(90); + expect(sliderWithMaxWrapper.state("value")).toBe(90); const rangeWrapper = mount(); - expect(rangeWrapper.state('bounds')[0]).toBe(10); - expect(rangeWrapper.state('bounds')[1]).toBe(90); + expect(rangeWrapper.state("bounds")[0]).toBe(10); + expect(rangeWrapper.state("bounds")[1]).toBe(90); }); - it('should not set values when sending invalid numbers', () => { + it("should not set values when sending invalid numbers", () => { const sliderWithMinWrapper = mount(); - expect(sliderWithMinWrapper.state('value')).toBe(0); + expect(sliderWithMinWrapper.state("value")).toBe(0); const sliderWithMaxWrapper = mount(); - expect(sliderWithMaxWrapper.state('value')).toBe(0); + expect(sliderWithMaxWrapper.state("value")).toBe(0); - const rangeWrapper = mount(); - expect(rangeWrapper.state('bounds')[0]).toBe(0); - expect(rangeWrapper.state('bounds')[1]).toBe(0); + const rangeWrapper = mount( + + ); + expect(rangeWrapper.state("bounds")[0]).toBe(0); + expect(rangeWrapper.state("bounds")[1]).toBe(0); }); - it('should update value when it is out of range', () => { + it("should update value when it is out of range", () => { const sliderOnChange = jest.fn(); const sliderWrapper = mount(); sliderWrapper.setProps({ min: 10 }); - expect(sliderWrapper.state('value')).toBe(10); + expect(sliderWrapper.state("value")).toBe(10); expect(sliderOnChange).toHaveBeenLastCalledWith(10); const rangeOnChange = jest.fn(); const rangeWrapper = mount(); rangeWrapper.setProps({ min: 10 }); - expect(rangeWrapper.state('bounds')).toEqual([10, 10]); + expect(rangeWrapper.state("bounds")).toEqual([10, 10]); expect(rangeOnChange).toHaveBeenLastCalledWith([10, 10]); }); - it('should not call onChange when value is the same', () => { + it("should not call onChange when value is the same", () => { const handler = jest.fn(); - const sliderWrapper = mount(); - const sliderHandleWrapper = sliderWrapper.find('.rc-slider-handle').at(1); - sliderHandleWrapper.simulate('mousedown'); - sliderHandleWrapper.simulate('mousemove'); - sliderHandleWrapper.simulate('mouseup'); + const sliderWrapper = mount(); + const sliderHandleWrapper = sliderWrapper.find(".rc-slider-handle").at(1); + sliderHandleWrapper.simulate("mousedown"); + sliderHandleWrapper.simulate("mousemove"); + sliderHandleWrapper.simulate("mouseup"); - const rangeWrapper = mount(); - const rangeHandleWrapper = rangeWrapper.find('.rc-slider-handle-1').at(1); - rangeHandleWrapper.simulate('mousedown'); - rangeHandleWrapper.simulate('mousemove'); - rangeHandleWrapper.simulate('mouseup'); + const rangeWrapper = mount(); + const rangeHandleWrapper = rangeWrapper.find(".rc-slider-handle-1").at(1); + rangeHandleWrapper.simulate("mousedown"); + rangeHandleWrapper.simulate("mousemove"); + rangeHandleWrapper.simulate("mouseup"); expect(handler).not.toHaveBeenCalled(); }); - it('Should remove event listeners if unmounted during drag', () => { + it("Should remove event listeners if unmounted during drag", () => { const wrapper = mount(); setWidth(wrapper.instance().sliderRef, 100); - const sliderTrack = wrapper.find('.rc-slider-track').get(0); - wrapper.simulate('touchstart', { - type: 'touchstart', + const sliderTrack = wrapper.find(".rc-slider-track").get(0); + wrapper.simulate("touchstart", { + type: "touchstart", target: sliderTrack, touches: [{ pageX: 5 }], stopPropagation() {}, - preventDefault() {}, + preventDefault() {} }); expect(wrapper.instance().onTouchUpListener).toBeTruthy(); wrapper.instance().onTouchUpListener.remove = jest.fn(); @@ -114,154 +116,184 @@ describe('createSlider', () => { }); // TODO: should update the following test cases for it should test API instead implementation - it('should set `dragOffset` to correct value when the left handle is clicked off-center', () => { + it("should set `dragOffset` to correct value when the left handle is clicked off-center", () => { const wrapper = mount(); setWidth(wrapper.instance().sliderRef, 100); - const leftHandle = wrapper.find('.rc-slider-handle').at(1).instance(); - wrapper.simulate('mousedown', { - type: 'mousedown', + const leftHandle = wrapper + .find(".rc-slider-handle") + .at(1) + .instance(); + wrapper.simulate("mousedown", { + type: "mousedown", target: leftHandle, - pageX: 5, button: 0, + pageX: 5, + button: 0, stopPropagation() {}, - preventDefault() {}, + preventDefault() {} }); expect(wrapper.instance().dragOffset).toBe(5); }); - it('should respect `dragOffset` while dragging the handle via MouseEvents', () => { + it("should respect `dragOffset` while dragging the handle via MouseEvents", () => { const wrapper = mount(); setWidth(wrapper.instance().sliderRef, 100); - const leftHandle = wrapper.find('.rc-slider-handle').at(1).instance(); - wrapper.simulate('mousedown', { - type: 'mousedown', + const leftHandle = wrapper + .find(".rc-slider-handle") + .at(1) + .instance(); + wrapper.simulate("mousedown", { + type: "mousedown", target: leftHandle, - pageX: 5, button: 0, + pageX: 5, + button: 0, stopPropagation() {}, - preventDefault() {}, + preventDefault() {} }); expect(wrapper.instance().dragOffset).toBe(5); - wrapper.instance().onMouseMove({ // to propagation - type: 'mousemove', + wrapper.instance().onMouseMove({ + // to propagation + type: "mousemove", target: leftHandle, - pageX: 14, button: 0, + pageX: 14, + button: 0, stopPropagation() {}, - preventDefault() {}, + preventDefault() {} }); expect(wrapper.instance().getValue()).toBe(9); }); - it('should not go to right direction when mouse go to the left', () => { + it("should not go to right direction when mouse go to the left", () => { const wrapper = mount(); setWidth(wrapper.instance().sliderRef, 100); - const leftHandle = wrapper.find('.rc-slider-handle').at(1).instance(); - wrapper.simulate('mousedown', { - type: 'mousedown', + const leftHandle = wrapper + .find(".rc-slider-handle") + .at(1) + .instance(); + wrapper.simulate("mousedown", { + type: "mousedown", target: leftHandle, - pageX: 5, button: 0, + pageX: 5, + button: 0, stopPropagation() {}, - preventDefault() {}, + preventDefault() {} }); expect(wrapper.instance().getValue()).toBe(0); // zero on start - wrapper.instance().onMouseMove({ // to propagation - type: 'mousemove', + wrapper.instance().onMouseMove({ + // to propagation + type: "mousemove", target: leftHandle, - pageX: 0, button: 0, + pageX: 0, + button: 0, stopPropagation() {}, - preventDefault() {}, + preventDefault() {} }); expect(wrapper.instance().getValue()).toBe(0); // still zero }); - it('should set `dragOffset` to 0 when the MouseEvent target isn\'t a handle', () => { + it("should set `dragOffset` to 0 when the MouseEvent target isn't a handle", () => { const wrapper = mount(); setWidth(wrapper.instance().sliderRef, 100); - const sliderTrack = wrapper.find('.rc-slider-track').get(0); - wrapper.simulate('mousedown', { - type: 'mousedown', + const sliderTrack = wrapper.find(".rc-slider-track").get(0); + wrapper.simulate("mousedown", { + type: "mousedown", target: sliderTrack, - pageX: 5, button: 0, + pageX: 5, + button: 0, stopPropagation() {}, - preventDefault() {}, + preventDefault() {} }); expect(wrapper.instance().dragOffset).toBe(0); }); - it('should set `dragOffset` to correct value when the left handle is touched off-center', () => { + it("should set `dragOffset` to correct value when the left handle is touched off-center", () => { const wrapper = mount(); setWidth(wrapper.instance().sliderRef, 100); - const leftHandle = wrapper.find('.rc-slider-handle').at(1).instance(); - wrapper.simulate('touchstart', { - type: 'touchstart', + const leftHandle = wrapper + .find(".rc-slider-handle") + .at(1) + .instance(); + wrapper.simulate("touchstart", { + type: "touchstart", target: leftHandle, touches: [{ pageX: 5 }], stopPropagation() {}, - preventDefault() {}, + preventDefault() {} }); expect(wrapper.instance().dragOffset).toBe(5); }); - it('should respect `dragOffset` while dragging the handle via TouchEvents', () => { + it("should respect `dragOffset` while dragging the handle via TouchEvents", () => { const wrapper = mount(); setWidth(wrapper.instance().sliderRef, 100); - const leftHandle = wrapper.find('.rc-slider-handle').at(1).instance(); - wrapper.simulate('touchstart', { - type: 'touchstart', + const leftHandle = wrapper + .find(".rc-slider-handle") + .at(1) + .instance(); + wrapper.simulate("touchstart", { + type: "touchstart", target: leftHandle, touches: [{ pageX: 5 }], stopPropagation() {}, - preventDefault() {}, + preventDefault() {} }); expect(wrapper.instance().dragOffset).toBe(5); - wrapper.instance().onTouchMove({ // to propagation - type: 'touchmove', + wrapper.instance().onTouchMove({ + // to propagation + type: "touchmove", target: leftHandle, touches: [{ pageX: 14 }], stopPropagation() {}, - preventDefault() {}, + preventDefault() {} }); expect(wrapper.instance().getValue()).toBe(9); }); - it('should set `dragOffset` to 0 when the TouchEvent target isn\'t a handle', () => { + it("should set `dragOffset` to 0 when the TouchEvent target isn't a handle", () => { const wrapper = mount(); setWidth(wrapper.instance().sliderRef, 100); - const sliderTrack = wrapper.find('.rc-slider-track').get(0); - wrapper.simulate('touchstart', { - type: 'touchstart', + const sliderTrack = wrapper.find(".rc-slider-track").get(0); + wrapper.simulate("touchstart", { + type: "touchstart", target: sliderTrack, touches: [{ pageX: 5 }], stopPropagation() {}, - preventDefault() {}, + preventDefault() {} }); expect(wrapper.instance().dragOffset).toBe(0); }); - it('should call onAfterChange when clicked on mark label', () => { - const labelId = 'to-be-clicked'; + it("should call onAfterChange when clicked on mark label", () => { + const labelId = "to-be-clicked"; const marks = { - 0: 'some other label', + 0: "some other label", 100: some label }; const sliderOnAfterChange = jest.fn(); - const sliderWrapper = mount(); + const sliderWrapper = mount( + + ); const sliderHandleWrapper = sliderWrapper.find(`#${labelId}`).at(0); - sliderHandleWrapper.simulate('mousedown'); - sliderHandleWrapper.simulate('mouseup'); + sliderHandleWrapper.simulate("mousedown"); + sliderHandleWrapper.simulate("mouseup"); expect(sliderOnAfterChange).toHaveBeenCalled(); const rangeOnAfterChange = jest.fn(); - const rangeWrapper = mount(); + const rangeWrapper = mount( + + ); const rangeHandleWrapper = rangeWrapper.find(`#${labelId}`).at(0); - rangeHandleWrapper.simulate('mousedown'); - rangeHandleWrapper.simulate('mouseup'); + rangeHandleWrapper.simulate("mousedown"); + rangeHandleWrapper.simulate("mouseup"); expect(rangeOnAfterChange).toHaveBeenCalled(); }); - it('only call onAfterChange once', () => { + it("only call onAfterChange once", () => { const sliderOnAfterChange = jest.fn(); - const sliderWrapper = mount(); + const sliderWrapper = mount( + + ); sliderWrapper.instance().onStart(); sliderWrapper.instance().onEnd(); @@ -269,4 +301,20 @@ describe('createSlider', () => { expect(sliderOnAfterChange).toHaveBeenCalled(); expect(sliderOnAfterChange).toHaveBeenCalledTimes(1); }); + + it("the tooltip should be attach to the container with the id tooltip", () => { + const SliderWithTooltip = createSliderWithTooltip(Slider); + const tooltipPrefixer = { + prefixCls: "slider-tooltip" + }; + const tooltipParent = document.createElement('div'); + tooltipParent.setAttribute("id", "tooltip"); + const wrapper = mount( + document.getElementById("tooltip")} + /> + ); + expect(wrapper.instance().props.getTooltipContainer).toBeTruthy(); + }); }); From 78a52467c4b99b7d261dde06f2fcbd0b9ea79d41 Mon Sep 17 00:00:00 2001 From: Jean Gautier Date: Tue, 28 Jan 2020 16:28:51 +0100 Subject: [PATCH 5/6] fix(create-slider-with-tooltip): dumb commit --- src/createSliderWithTooltip.jsx | 24 ++-- tests/common/createSlider.test.js | 207 ++++++++++++++---------------- 2 files changed, 109 insertions(+), 122 deletions(-) diff --git a/src/createSliderWithTooltip.jsx b/src/createSliderWithTooltip.jsx index 682a92dea..ed90bf207 100644 --- a/src/createSliderWithTooltip.jsx +++ b/src/createSliderWithTooltip.jsx @@ -11,22 +11,17 @@ export default function createSliderWithTooltip(Component) { tipProps: PropTypes.object, getTooltipContainer: PropTypes.func, }; - static defaultProps = { - tipFormatter(value) { - return value; - }, + tipFormatter(value) { return value; }, handleStyle: [{}], tipProps: {}, - getTooltipContainer: (node) => node.parentNode + getTooltipContainer: node => node.parentNode, }; - state = { visibles: {}, }; - handleTooltipVisibleChange = (index, visible) => { - this.setState(prevState => { + this.setState((prevState) => { return { visibles: { ...prevState.visibles, @@ -34,10 +29,13 @@ export default function createSliderWithTooltip(Component) { }, }; }); - }; - + } handleWithTooltip = ({ value, dragging, index, disabled, ...restProps }) => { - const { tipFormatter, tipProps, handleStyle, getTooltipContainer } = this.props; + const { tipFormatter, + tipProps, + handleStyle, + getTooltipContainer, + } = this.props; const { prefixCls = 'rc-slider-tooltip', @@ -64,6 +62,7 @@ export default function createSliderWithTooltip(Component) { visible={(!disabled && (this.state.visibles[index] || dragging)) || visible} key={index} > + ); - }; - + } render() { return ; } diff --git a/tests/common/createSlider.test.js b/tests/common/createSlider.test.js index 6b03ce993..c9641bf9d 100644 --- a/tests/common/createSlider.test.js +++ b/tests/common/createSlider.test.js @@ -1,11 +1,11 @@ /* eslint-disable max-len, no-undef */ -import React from "react"; -import { mount } from "enzyme"; -import Slider, { Range, createSliderWithTooltip } from "../../src"; +import React from 'react'; +import { mount } from 'enzyme'; +import Slider, { Range, createSliderWithTooltip } from '../../src'; const setWidth = (object, width) => { // https://github.com/tmpvar/jsdom/commit/0cdb2efcc69b6672dc2928644fc0172df5521176 - Object.defineProperty(object, "getBoundingClientRect", { + Object.defineProperty(object, 'getBoundingClientRect', { value: () => ({ width, // Let all other values retain the JSDom default of `0`. @@ -13,101 +13,99 @@ const setWidth = (object, width) => { height: 0, left: 0, right: 0, - top: 0 + top: 0, }), enumerable: true, - configurable: true + configurable: true, }); }; -describe("createSlider", () => { - it("should render vertical Slider/Range, when `vertical` is true", () => { +describe('createSlider', () => { + it('should render vertical Slider/Range, when `vertical` is true', () => { const sliderWrapper = mount(); - expect(sliderWrapper.find(".rc-slider-vertical").length).toBe(1); + expect(sliderWrapper.find('.rc-slider-vertical').length).toBe(1); const rangeWrapper = mount(); - expect(rangeWrapper.find(".rc-slider-vertical").length).toBe(1); + expect(rangeWrapper.find('.rc-slider-vertical').length).toBe(1); }); - it("should render dots correctly when `dots=true`", () => { + it('should render dots correctly when `dots=true`', () => { const sliderWrapper = mount(); - expect(sliderWrapper.find(".rc-slider-dot").length).toBe(11); - expect(sliderWrapper.find(".rc-slider-dot-active").length).toBe(6); + expect(sliderWrapper.find('.rc-slider-dot').length).toBe(11); + expect(sliderWrapper.find('.rc-slider-dot-active').length).toBe(6); const rangeWrapper = mount(); - expect(rangeWrapper.find(".rc-slider-dot").length).toBe(11); - expect(rangeWrapper.find(".rc-slider-dot-active").length).toBe(4); + expect(rangeWrapper.find('.rc-slider-dot').length).toBe(11); + expect(rangeWrapper.find('.rc-slider-dot-active').length).toBe(4); }); - it("should not set value greater than `max` or smaller `min`", () => { + it('should not set value greater than `max` or smaller `min`', () => { const sliderWithMinWrapper = mount(); - expect(sliderWithMinWrapper.state("value")).toBe(10); + expect(sliderWithMinWrapper.state('value')).toBe(10); const sliderWithMaxWrapper = mount(); - expect(sliderWithMaxWrapper.state("value")).toBe(90); + expect(sliderWithMaxWrapper.state('value')).toBe(90); const rangeWrapper = mount(); - expect(rangeWrapper.state("bounds")[0]).toBe(10); - expect(rangeWrapper.state("bounds")[1]).toBe(90); + expect(rangeWrapper.state('bounds')[0]).toBe(10); + expect(rangeWrapper.state('bounds')[1]).toBe(90); }); - it("should not set values when sending invalid numbers", () => { + it('should not set values when sending invalid numbers', () => { const sliderWithMinWrapper = mount(); - expect(sliderWithMinWrapper.state("value")).toBe(0); + expect(sliderWithMinWrapper.state('value')).toBe(0); const sliderWithMaxWrapper = mount(); - expect(sliderWithMaxWrapper.state("value")).toBe(0); + expect(sliderWithMaxWrapper.state('value')).toBe(0); - const rangeWrapper = mount( - - ); - expect(rangeWrapper.state("bounds")[0]).toBe(0); - expect(rangeWrapper.state("bounds")[1]).toBe(0); + const rangeWrapper = mount(); + expect(rangeWrapper.state('bounds')[0]).toBe(0); + expect(rangeWrapper.state('bounds')[1]).toBe(0); }); - it("should update value when it is out of range", () => { + it('should update value when it is out of range', () => { const sliderOnChange = jest.fn(); const sliderWrapper = mount(); sliderWrapper.setProps({ min: 10 }); - expect(sliderWrapper.state("value")).toBe(10); + expect(sliderWrapper.state('value')).toBe(10); expect(sliderOnChange).toHaveBeenLastCalledWith(10); const rangeOnChange = jest.fn(); const rangeWrapper = mount(); rangeWrapper.setProps({ min: 10 }); - expect(rangeWrapper.state("bounds")).toEqual([10, 10]); + expect(rangeWrapper.state('bounds')).toEqual([10, 10]); expect(rangeOnChange).toHaveBeenLastCalledWith([10, 10]); }); - it("should not call onChange when value is the same", () => { + it('should not call onChange when value is the same', () => { const handler = jest.fn(); const sliderWrapper = mount(); - const sliderHandleWrapper = sliderWrapper.find(".rc-slider-handle").at(1); - sliderHandleWrapper.simulate("mousedown"); - sliderHandleWrapper.simulate("mousemove"); - sliderHandleWrapper.simulate("mouseup"); + const sliderHandleWrapper = sliderWrapper.find('.rc-slider-handle').at(1); + sliderHandleWrapper.simulate('mousedown'); + sliderHandleWrapper.simulate('mousemove'); + sliderHandleWrapper.simulate('mouseup'); const rangeWrapper = mount(); - const rangeHandleWrapper = rangeWrapper.find(".rc-slider-handle-1").at(1); - rangeHandleWrapper.simulate("mousedown"); - rangeHandleWrapper.simulate("mousemove"); - rangeHandleWrapper.simulate("mouseup"); + const rangeHandleWrapper = rangeWrapper.find('.rc-slider-handle-1').at(1); + rangeHandleWrapper.simulate('mousedown'); + rangeHandleWrapper.simulate('mousemove'); + rangeHandleWrapper.simulate('mouseup'); expect(handler).not.toHaveBeenCalled(); }); - it("Should remove event listeners if unmounted during drag", () => { + it('Should remove event listeners if unmounted during drag', () => { const wrapper = mount(); setWidth(wrapper.instance().sliderRef, 100); - const sliderTrack = wrapper.find(".rc-slider-track").get(0); - wrapper.simulate("touchstart", { - type: "touchstart", + const sliderTrack = wrapper.find('.rc-slider-track').get(0); + wrapper.simulate('touchstart', { + type: 'touchstart', target: sliderTrack, touches: [{ pageX: 5 }], stopPropagation() {}, - preventDefault() {} + preventDefault() {}, }); expect(wrapper.instance().onTouchUpListener).toBeTruthy(); wrapper.instance().onTouchUpListener.remove = jest.fn(); @@ -116,76 +114,76 @@ describe("createSlider", () => { }); // TODO: should update the following test cases for it should test API instead implementation - it("should set `dragOffset` to correct value when the left handle is clicked off-center", () => { + it('should set `dragOffset` to correct value when the left handle is clicked off-center', () => { const wrapper = mount(); setWidth(wrapper.instance().sliderRef, 100); const leftHandle = wrapper - .find(".rc-slider-handle") + .find('.rc-slider-handle') .at(1) .instance(); - wrapper.simulate("mousedown", { - type: "mousedown", + wrapper.simulate('mousedown', { + type: 'mousedown', target: leftHandle, pageX: 5, button: 0, stopPropagation() {}, - preventDefault() {} + preventDefault() {}, }); expect(wrapper.instance().dragOffset).toBe(5); }); - it("should respect `dragOffset` while dragging the handle via MouseEvents", () => { + it('should respect `dragOffset` while dragging the handle via MouseEvents', () => { const wrapper = mount(); setWidth(wrapper.instance().sliderRef, 100); const leftHandle = wrapper - .find(".rc-slider-handle") + .find('.rc-slider-handle') .at(1) .instance(); - wrapper.simulate("mousedown", { - type: "mousedown", + wrapper.simulate('mousedown', { + type: 'mousedown', target: leftHandle, pageX: 5, button: 0, stopPropagation() {}, - preventDefault() {} + preventDefault() {}, }); expect(wrapper.instance().dragOffset).toBe(5); wrapper.instance().onMouseMove({ // to propagation - type: "mousemove", + type: 'mousemove', target: leftHandle, pageX: 14, button: 0, stopPropagation() {}, - preventDefault() {} + preventDefault() {}, }); expect(wrapper.instance().getValue()).toBe(9); }); - it("should not go to right direction when mouse go to the left", () => { + it('should not go to right direction when mouse go to the left', () => { const wrapper = mount(); setWidth(wrapper.instance().sliderRef, 100); const leftHandle = wrapper - .find(".rc-slider-handle") + .find('.rc-slider-handle') .at(1) .instance(); - wrapper.simulate("mousedown", { - type: "mousedown", + wrapper.simulate('mousedown', { + type: 'mousedown', target: leftHandle, pageX: 5, button: 0, stopPropagation() {}, - preventDefault() {} + preventDefault() {}, }); expect(wrapper.instance().getValue()).toBe(0); // zero on start wrapper.instance().onMouseMove({ // to propagation - type: "mousemove", + type: 'mousemove', target: leftHandle, pageX: 0, button: 0, stopPropagation() {}, - preventDefault() {} + preventDefault() {}, }); expect(wrapper.instance().getValue()).toBe(0); // still zero }); @@ -193,57 +191,57 @@ describe("createSlider", () => { it("should set `dragOffset` to 0 when the MouseEvent target isn't a handle", () => { const wrapper = mount(); setWidth(wrapper.instance().sliderRef, 100); - const sliderTrack = wrapper.find(".rc-slider-track").get(0); - wrapper.simulate("mousedown", { - type: "mousedown", + const sliderTrack = wrapper.find('.rc-slider-track').get(0); + wrapper.simulate('mousedown', { + type: 'mousedown', target: sliderTrack, pageX: 5, button: 0, stopPropagation() {}, - preventDefault() {} + preventDefault() {}, }); expect(wrapper.instance().dragOffset).toBe(0); }); - it("should set `dragOffset` to correct value when the left handle is touched off-center", () => { + it('should set `dragOffset` to correct value when the left handle is touched off-center', () => { const wrapper = mount(); setWidth(wrapper.instance().sliderRef, 100); const leftHandle = wrapper - .find(".rc-slider-handle") + .find('.rc-slider-handle') .at(1) .instance(); - wrapper.simulate("touchstart", { - type: "touchstart", + wrapper.simulate('touchstart', { + type: 'touchstart', target: leftHandle, touches: [{ pageX: 5 }], stopPropagation() {}, - preventDefault() {} + preventDefault() {}, }); expect(wrapper.instance().dragOffset).toBe(5); }); - it("should respect `dragOffset` while dragging the handle via TouchEvents", () => { + it('should respect `dragOffset` while dragging the handle via TouchEvents', () => { const wrapper = mount(); setWidth(wrapper.instance().sliderRef, 100); const leftHandle = wrapper - .find(".rc-slider-handle") + .find('.rc-slider-handle') .at(1) .instance(); - wrapper.simulate("touchstart", { - type: "touchstart", + wrapper.simulate('touchstart', { + type: 'touchstart', target: leftHandle, touches: [{ pageX: 5 }], stopPropagation() {}, - preventDefault() {} + preventDefault() {}, }); expect(wrapper.instance().dragOffset).toBe(5); wrapper.instance().onTouchMove({ // to propagation - type: "touchmove", + type: 'touchmove', target: leftHandle, touches: [{ pageX: 14 }], stopPropagation() {}, - preventDefault() {} + preventDefault() {}, }); expect(wrapper.instance().getValue()).toBe(9); }); @@ -251,49 +249,43 @@ describe("createSlider", () => { it("should set `dragOffset` to 0 when the TouchEvent target isn't a handle", () => { const wrapper = mount(); setWidth(wrapper.instance().sliderRef, 100); - const sliderTrack = wrapper.find(".rc-slider-track").get(0); - wrapper.simulate("touchstart", { - type: "touchstart", + const sliderTrack = wrapper.find('.rc-slider-track').get(0); + wrapper.simulate('touchstart', { + type: 'touchstart', target: sliderTrack, touches: [{ pageX: 5 }], stopPropagation() {}, - preventDefault() {} + preventDefault() {}, }); expect(wrapper.instance().dragOffset).toBe(0); }); - it("should call onAfterChange when clicked on mark label", () => { - const labelId = "to-be-clicked"; + it('should call onAfterChange when clicked on mark label', () => { + const labelId = 'to-be-clicked'; const marks = { - 0: "some other label", - 100: some label + 0: 'some other label', + 100: some label, }; const sliderOnAfterChange = jest.fn(); - const sliderWrapper = mount( - - ); + const sliderWrapper = mount(); const sliderHandleWrapper = sliderWrapper.find(`#${labelId}`).at(0); - sliderHandleWrapper.simulate("mousedown"); - sliderHandleWrapper.simulate("mouseup"); + sliderHandleWrapper.simulate('mousedown'); + sliderHandleWrapper.simulate('mouseup'); expect(sliderOnAfterChange).toHaveBeenCalled(); const rangeOnAfterChange = jest.fn(); - const rangeWrapper = mount( - - ); + const rangeWrapper = mount(); const rangeHandleWrapper = rangeWrapper.find(`#${labelId}`).at(0); - rangeHandleWrapper.simulate("mousedown"); - rangeHandleWrapper.simulate("mouseup"); + rangeHandleWrapper.simulate('mousedown'); + rangeHandleWrapper.simulate('mouseup'); expect(rangeOnAfterChange).toHaveBeenCalled(); }); - it("only call onAfterChange once", () => { + it('only call onAfterChange once', () => { const sliderOnAfterChange = jest.fn(); - const sliderWrapper = mount( - - ); + const sliderWrapper = mount(); sliderWrapper.instance().onStart(); sliderWrapper.instance().onEnd(); @@ -302,18 +294,15 @@ describe("createSlider", () => { expect(sliderOnAfterChange).toHaveBeenCalledTimes(1); }); - it("the tooltip should be attach to the container with the id tooltip", () => { + it('the tooltip should be attach to the container with the id tooltip', () => { const SliderWithTooltip = createSliderWithTooltip(Slider); const tooltipPrefixer = { - prefixCls: "slider-tooltip" + prefixCls: 'slider-tooltip', }; const tooltipParent = document.createElement('div'); - tooltipParent.setAttribute("id", "tooltip"); + tooltipParent.setAttribute('id', 'tooltip'); const wrapper = mount( - document.getElementById("tooltip")} - /> + document.getElementById('tooltip')} /> ); expect(wrapper.instance().props.getTooltipContainer).toBeTruthy(); }); From 70a34c3f19b33ae8ff006e37638eb47f290fd167 Mon Sep 17 00:00:00 2001 From: Jean Gautier Date: Tue, 28 Jan 2020 16:36:07 +0100 Subject: [PATCH 6/6] fix(create-slider-with-tooltip): dumb commit --- src/createSliderWithTooltip.jsx | 3 +- tests/common/createSlider.test.js | 62 ++++++++++--------------------- 2 files changed, 21 insertions(+), 44 deletions(-) diff --git a/src/createSliderWithTooltip.jsx b/src/createSliderWithTooltip.jsx index ed90bf207..35ca45c82 100644 --- a/src/createSliderWithTooltip.jsx +++ b/src/createSliderWithTooltip.jsx @@ -31,7 +31,8 @@ export default function createSliderWithTooltip(Component) { }); } handleWithTooltip = ({ value, dragging, index, disabled, ...restProps }) => { - const { tipFormatter, + const { + tipFormatter, tipProps, handleStyle, getTooltipContainer, diff --git a/tests/common/createSlider.test.js b/tests/common/createSlider.test.js index c9641bf9d..cc7e8764f 100644 --- a/tests/common/createSlider.test.js +++ b/tests/common/createSlider.test.js @@ -80,13 +80,13 @@ describe('createSlider', () => { it('should not call onChange when value is the same', () => { const handler = jest.fn(); - const sliderWrapper = mount(); + const sliderWrapper = mount(); const sliderHandleWrapper = sliderWrapper.find('.rc-slider-handle').at(1); sliderHandleWrapper.simulate('mousedown'); sliderHandleWrapper.simulate('mousemove'); sliderHandleWrapper.simulate('mouseup'); - const rangeWrapper = mount(); + const rangeWrapper = mount(); const rangeHandleWrapper = rangeWrapper.find('.rc-slider-handle-1').at(1); rangeHandleWrapper.simulate('mousedown'); rangeHandleWrapper.simulate('mousemove'); @@ -117,15 +117,11 @@ describe('createSlider', () => { it('should set `dragOffset` to correct value when the left handle is clicked off-center', () => { const wrapper = mount(); setWidth(wrapper.instance().sliderRef, 100); - const leftHandle = wrapper - .find('.rc-slider-handle') - .at(1) - .instance(); + const leftHandle = wrapper.find('.rc-slider-handle').at(1).instance(); wrapper.simulate('mousedown', { type: 'mousedown', target: leftHandle, - pageX: 5, - button: 0, + pageX: 5, button: 0, stopPropagation() {}, preventDefault() {}, }); @@ -135,25 +131,19 @@ describe('createSlider', () => { it('should respect `dragOffset` while dragging the handle via MouseEvents', () => { const wrapper = mount(); setWidth(wrapper.instance().sliderRef, 100); - const leftHandle = wrapper - .find('.rc-slider-handle') - .at(1) - .instance(); + const leftHandle = wrapper.find('.rc-slider-handle').at(1).instance(); wrapper.simulate('mousedown', { type: 'mousedown', target: leftHandle, - pageX: 5, - button: 0, + pageX: 5, button: 0, stopPropagation() {}, preventDefault() {}, }); expect(wrapper.instance().dragOffset).toBe(5); - wrapper.instance().onMouseMove({ - // to propagation + wrapper.instance().onMouseMove({ // to propagation type: 'mousemove', target: leftHandle, - pageX: 14, - button: 0, + pageX: 14, button: 0, stopPropagation() {}, preventDefault() {}, }); @@ -163,40 +153,33 @@ describe('createSlider', () => { it('should not go to right direction when mouse go to the left', () => { const wrapper = mount(); setWidth(wrapper.instance().sliderRef, 100); - const leftHandle = wrapper - .find('.rc-slider-handle') - .at(1) - .instance(); + const leftHandle = wrapper.find('.rc-slider-handle').at(1).instance(); wrapper.simulate('mousedown', { type: 'mousedown', target: leftHandle, - pageX: 5, - button: 0, + pageX: 5, button: 0, stopPropagation() {}, preventDefault() {}, }); expect(wrapper.instance().getValue()).toBe(0); // zero on start - wrapper.instance().onMouseMove({ - // to propagation + wrapper.instance().onMouseMove({ // to propagation type: 'mousemove', target: leftHandle, - pageX: 0, - button: 0, + pageX: 0, button: 0, stopPropagation() {}, preventDefault() {}, }); expect(wrapper.instance().getValue()).toBe(0); // still zero }); - it("should set `dragOffset` to 0 when the MouseEvent target isn't a handle", () => { + it('should set `dragOffset` to 0 when the MouseEvent target isn\'t a handle', () => { const wrapper = mount(); setWidth(wrapper.instance().sliderRef, 100); const sliderTrack = wrapper.find('.rc-slider-track').get(0); wrapper.simulate('mousedown', { type: 'mousedown', target: sliderTrack, - pageX: 5, - button: 0, + pageX: 5, button: 0, stopPropagation() {}, preventDefault() {}, }); @@ -206,10 +189,7 @@ describe('createSlider', () => { it('should set `dragOffset` to correct value when the left handle is touched off-center', () => { const wrapper = mount(); setWidth(wrapper.instance().sliderRef, 100); - const leftHandle = wrapper - .find('.rc-slider-handle') - .at(1) - .instance(); + const leftHandle = wrapper.find('.rc-slider-handle').at(1).instance(); wrapper.simulate('touchstart', { type: 'touchstart', target: leftHandle, @@ -223,10 +203,7 @@ describe('createSlider', () => { it('should respect `dragOffset` while dragging the handle via TouchEvents', () => { const wrapper = mount(); setWidth(wrapper.instance().sliderRef, 100); - const leftHandle = wrapper - .find('.rc-slider-handle') - .at(1) - .instance(); + const leftHandle = wrapper.find('.rc-slider-handle').at(1).instance(); wrapper.simulate('touchstart', { type: 'touchstart', target: leftHandle, @@ -235,8 +212,7 @@ describe('createSlider', () => { preventDefault() {}, }); expect(wrapper.instance().dragOffset).toBe(5); - wrapper.instance().onTouchMove({ - // to propagation + wrapper.instance().onTouchMove({ // to propagation type: 'touchmove', target: leftHandle, touches: [{ pageX: 14 }], @@ -246,7 +222,7 @@ describe('createSlider', () => { expect(wrapper.instance().getValue()).toBe(9); }); - it("should set `dragOffset` to 0 when the TouchEvent target isn't a handle", () => { + it('should set `dragOffset` to 0 when the TouchEvent target isn\'t a handle', () => { const wrapper = mount(); setWidth(wrapper.instance().sliderRef, 100); const sliderTrack = wrapper.find('.rc-slider-track').get(0); @@ -264,7 +240,7 @@ describe('createSlider', () => { const labelId = 'to-be-clicked'; const marks = { 0: 'some other label', - 100: some label, + 100: some label }; const sliderOnAfterChange = jest.fn();