2022-08-04 17:09:54 +08:00
|
|
|
import React from 'react';
|
2024-04-08 14:04:08 +08:00
|
|
|
|
2022-08-04 17:09:54 +08:00
|
|
|
import Slider from '..';
|
2024-04-08 14:04:08 +08:00
|
|
|
import { resetWarned } from '../../_util/warning';
|
2022-08-04 17:09:54 +08:00
|
|
|
import focusTest from '../../../tests/shared/focusTest';
|
|
|
|
import mountTest from '../../../tests/shared/mountTest';
|
|
|
|
import rtlTest from '../../../tests/shared/rtlTest';
|
2023-11-03 17:59:31 +08:00
|
|
|
import { act, fireEvent, render, waitFakeTimer } from '../../../tests/utils';
|
2022-08-04 17:09:54 +08:00
|
|
|
import ConfigProvider from '../../config-provider';
|
2023-07-18 12:18:51 +08:00
|
|
|
import type { TooltipProps, TooltipRef } from '../../tooltip';
|
2023-01-29 12:30:46 +08:00
|
|
|
import SliderTooltip from '../SliderTooltip';
|
2022-08-17 15:47:22 +08:00
|
|
|
|
|
|
|
function tooltipProps(): TooltipProps {
|
|
|
|
return (global as any).tooltipProps;
|
|
|
|
}
|
|
|
|
|
2023-06-07 21:59:21 +08:00
|
|
|
jest.mock('../../tooltip', () => {
|
2023-07-18 12:18:51 +08:00
|
|
|
const ReactReal: typeof React = jest.requireActual('react');
|
2023-06-07 21:59:21 +08:00
|
|
|
const Tooltip = jest.requireActual('../../tooltip');
|
2022-08-17 15:47:22 +08:00
|
|
|
const TooltipComponent = Tooltip.default;
|
2023-07-18 12:18:51 +08:00
|
|
|
return ReactReal.forwardRef<TooltipRef, TooltipProps>((props, ref) => {
|
2023-06-07 21:59:21 +08:00
|
|
|
(global as any).tooltipProps = props;
|
|
|
|
return <TooltipComponent {...props} ref={ref} />;
|
|
|
|
});
|
2022-08-17 15:47:22 +08:00
|
|
|
});
|
2022-08-04 17:09:54 +08:00
|
|
|
|
|
|
|
describe('Slider', () => {
|
|
|
|
mountTest(Slider);
|
|
|
|
rtlTest(Slider);
|
2023-01-29 12:30:46 +08:00
|
|
|
focusTest(Slider);
|
2022-08-04 17:09:54 +08:00
|
|
|
|
2022-08-17 15:47:22 +08:00
|
|
|
beforeEach(() => {
|
2023-06-07 21:59:21 +08:00
|
|
|
jest.useFakeTimers();
|
2022-08-17 15:47:22 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
afterEach(() => {
|
2023-06-07 21:59:21 +08:00
|
|
|
jest.clearAllTimers();
|
|
|
|
jest.useRealTimers();
|
2022-08-17 15:47:22 +08:00
|
|
|
});
|
|
|
|
|
2023-11-03 17:59:31 +08:00
|
|
|
it('should show tooltip when hovering slider handler', async () => {
|
2022-08-04 17:09:54 +08:00
|
|
|
const { container } = render(<Slider defaultValue={30} />);
|
|
|
|
|
|
|
|
fireEvent.mouseEnter(container.querySelector('.ant-slider-handle')!);
|
2023-11-03 17:59:31 +08:00
|
|
|
await waitFakeTimer();
|
2022-08-04 17:09:54 +08:00
|
|
|
expect(document.querySelector('.ant-tooltip')).toMatchSnapshot();
|
|
|
|
|
|
|
|
fireEvent.mouseLeave(container.querySelector('.ant-slider-handle')!);
|
2023-11-03 17:59:31 +08:00
|
|
|
await waitFakeTimer();
|
2022-08-04 17:09:54 +08:00
|
|
|
expect(document.querySelector('.ant-tooltip')).toMatchSnapshot();
|
|
|
|
});
|
|
|
|
|
2022-08-18 20:26:19 +08:00
|
|
|
it('should show correct placement tooltip when set tooltipPlacement', () => {
|
|
|
|
const { container } = render(
|
|
|
|
<Slider vertical defaultValue={30} tooltip={{ placement: 'left' }} />,
|
|
|
|
);
|
2022-08-04 17:09:54 +08:00
|
|
|
|
2022-08-18 20:26:19 +08:00
|
|
|
fireEvent.mouseEnter(container.querySelector('.ant-slider-handle')!);
|
|
|
|
expect(tooltipProps().placement).toEqual('left');
|
2022-08-04 17:09:54 +08:00
|
|
|
});
|
|
|
|
|
2023-07-25 16:39:54 +08:00
|
|
|
it('support autoAdjustOverflow', () => {
|
|
|
|
const { container } = render(
|
|
|
|
<Slider vertical defaultValue={30} tooltip={{ autoAdjustOverflow: false }} />,
|
|
|
|
);
|
|
|
|
|
|
|
|
fireEvent.mouseEnter(container.querySelector('.ant-slider-handle')!);
|
|
|
|
expect(tooltipProps().autoAdjustOverflow).toBe(false);
|
|
|
|
});
|
|
|
|
|
2022-08-18 20:26:19 +08:00
|
|
|
it('when tooltip.open is true, tooltip should show always, or should never show', () => {
|
|
|
|
const { container: container1 } = render(<Slider defaultValue={30} tooltip={{ open: true }} />);
|
|
|
|
expect(
|
|
|
|
container1.querySelector('.ant-tooltip-content')!.className.includes('ant-tooltip-hidden'),
|
|
|
|
).toBeFalsy();
|
|
|
|
|
|
|
|
fireEvent.mouseEnter(container1.querySelector('.ant-slider-handle')!);
|
|
|
|
expect(
|
|
|
|
container1.querySelector('.ant-tooltip-content')!.className.includes('ant-tooltip-hidden'),
|
|
|
|
).toBeFalsy();
|
|
|
|
|
|
|
|
fireEvent.click(container1.querySelector('.ant-slider-handle')!);
|
|
|
|
expect(
|
|
|
|
container1.querySelector('.ant-tooltip-content')!.className.includes('ant-tooltip-hidden'),
|
|
|
|
).toBeFalsy();
|
|
|
|
|
|
|
|
const { container: container2 } = render(
|
|
|
|
<Slider defaultValue={30} tooltip={{ open: false }} />,
|
|
|
|
);
|
|
|
|
expect(container2.querySelector('.ant-tooltip-content')!).toBeNull();
|
2022-08-04 17:09:54 +08:00
|
|
|
});
|
|
|
|
|
2023-02-23 21:56:43 +08:00
|
|
|
it('when step is null, thumb can only be slid to the specific mark', () => {
|
2022-08-04 17:09:54 +08:00
|
|
|
const intentionallyWrongValue = 40;
|
|
|
|
const marks = {
|
|
|
|
0: '0',
|
|
|
|
48: '48',
|
|
|
|
100: '100',
|
|
|
|
};
|
|
|
|
|
|
|
|
const { container } = render(
|
2022-08-17 15:47:22 +08:00
|
|
|
<Slider
|
|
|
|
marks={marks}
|
|
|
|
defaultValue={intentionallyWrongValue}
|
|
|
|
step={null}
|
|
|
|
tooltip={{ open: true }}
|
|
|
|
/>,
|
2022-08-04 17:09:54 +08:00
|
|
|
);
|
|
|
|
expect(container.querySelector('.ant-slider-handle')!.getAttribute('aria-valuenow')).toBe('48');
|
|
|
|
});
|
|
|
|
|
2023-02-23 21:56:43 +08:00
|
|
|
it('when step is not null, thumb can be slid to the multiples of step', () => {
|
2022-08-04 17:09:54 +08:00
|
|
|
const marks = {
|
|
|
|
0: '0',
|
|
|
|
48: '48',
|
|
|
|
100: '100',
|
|
|
|
};
|
|
|
|
|
|
|
|
const { container } = render(
|
2022-08-17 15:47:22 +08:00
|
|
|
<Slider marks={marks} defaultValue={49} step={1} tooltip={{ open: true }} />,
|
2022-08-04 17:09:54 +08:00
|
|
|
);
|
|
|
|
expect(container.querySelector('.ant-slider-handle')!.getAttribute('aria-valuenow')).toBe('49');
|
|
|
|
});
|
|
|
|
|
2023-02-23 21:56:43 +08:00
|
|
|
it('when step is undefined, thumb can be slid to the multiples of step', () => {
|
2022-08-04 17:09:54 +08:00
|
|
|
const marks = {
|
|
|
|
0: '0',
|
|
|
|
48: '48',
|
|
|
|
100: '100',
|
|
|
|
};
|
|
|
|
|
|
|
|
const { container } = render(
|
2022-08-17 15:47:22 +08:00
|
|
|
<Slider marks={marks} defaultValue={49} step={undefined} tooltip={{ open: true }} />,
|
2022-08-04 17:09:54 +08:00
|
|
|
);
|
|
|
|
expect(container.querySelector('.ant-slider-handle')!.getAttribute('aria-valuenow')).toBe('49');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should render in RTL direction', () => {
|
|
|
|
const { container } = render(
|
|
|
|
<ConfigProvider direction="rtl">
|
2022-08-17 15:47:22 +08:00
|
|
|
<Slider defaultValue={30} tooltip={{ open: true }} />
|
2022-08-04 17:09:54 +08:00
|
|
|
</ConfigProvider>,
|
|
|
|
);
|
|
|
|
expect(container).toMatchSnapshot();
|
|
|
|
});
|
|
|
|
|
2023-03-30 14:45:15 +08:00
|
|
|
it('should keepAlign by calling forceAlign', async () => {
|
2023-02-05 10:51:51 +08:00
|
|
|
const ref = React.createRef<any>();
|
|
|
|
render(<SliderTooltip title="30" open ref={ref} />);
|
2023-06-07 21:59:21 +08:00
|
|
|
ref.current.forceAlign = jest.fn();
|
2022-08-17 15:47:22 +08:00
|
|
|
act(() => {
|
2023-06-07 21:59:21 +08:00
|
|
|
jest.runAllTimers();
|
2022-08-17 15:47:22 +08:00
|
|
|
});
|
2023-03-30 14:45:15 +08:00
|
|
|
expect(ref.current.forceAlign).toHaveBeenCalled();
|
2022-08-04 17:09:54 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
it('tipFormatter should not crash with undefined value', () => {
|
2022-11-19 13:47:33 +08:00
|
|
|
[undefined, null].forEach((value) => {
|
2022-08-17 15:47:22 +08:00
|
|
|
render(<Slider value={value as any} tooltip={{ open: true }} />);
|
2022-08-04 17:09:54 +08:00
|
|
|
});
|
|
|
|
});
|
|
|
|
it('step should not crash with undefined value', () => {
|
2022-11-19 13:47:33 +08:00
|
|
|
[undefined, null].forEach((value) => {
|
2022-08-17 15:47:22 +08:00
|
|
|
render(<Slider step={value} tooltip={{ open: true }} />);
|
2022-08-04 17:09:54 +08:00
|
|
|
});
|
|
|
|
});
|
2022-08-17 15:47:22 +08:00
|
|
|
it('deprecated warning', () => {
|
2022-08-18 20:26:19 +08:00
|
|
|
resetWarned();
|
|
|
|
|
|
|
|
const TSSlider = Slider as any;
|
|
|
|
|
2023-06-07 21:59:21 +08:00
|
|
|
const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
|
2022-08-17 15:47:22 +08:00
|
|
|
|
2022-09-06 21:46:49 +08:00
|
|
|
const { container, rerender } = render(<TSSlider tooltipPrefixCls="xxx" />);
|
2022-08-17 15:47:22 +08:00
|
|
|
expect(errSpy).toHaveBeenCalledWith(
|
2023-09-13 22:07:33 +08:00
|
|
|
'Warning: [antd: Slider] `tooltipPrefixCls` is deprecated. Please use `tooltip.prefixCls` instead.',
|
2022-08-17 15:47:22 +08:00
|
|
|
);
|
2022-09-06 21:46:49 +08:00
|
|
|
|
2022-08-18 20:26:19 +08:00
|
|
|
rerender(<TSSlider getTooltipPopupContainer={() => document.body} />);
|
2022-08-17 15:47:22 +08:00
|
|
|
expect(errSpy).toHaveBeenCalledWith(
|
2023-09-13 22:07:33 +08:00
|
|
|
'Warning: [antd: Slider] `getTooltipPopupContainer` is deprecated. Please use `tooltip.getPopupContainer` instead.',
|
2022-08-17 15:47:22 +08:00
|
|
|
);
|
2022-09-06 21:46:49 +08:00
|
|
|
|
2022-08-18 20:26:19 +08:00
|
|
|
rerender(<TSSlider tipFormatter={(v: any) => v} />);
|
2022-08-17 15:47:22 +08:00
|
|
|
expect(errSpy).toHaveBeenCalledWith(
|
2023-09-13 22:07:33 +08:00
|
|
|
'Warning: [antd: Slider] `tipFormatter` is deprecated. Please use `tooltip.formatter` instead.',
|
2022-08-17 15:47:22 +08:00
|
|
|
);
|
2022-09-06 21:46:49 +08:00
|
|
|
|
2022-08-18 20:26:19 +08:00
|
|
|
rerender(<TSSlider tooltipVisible />);
|
2022-08-17 15:47:22 +08:00
|
|
|
expect(errSpy).toHaveBeenCalledWith(
|
2023-09-13 22:07:33 +08:00
|
|
|
'Warning: [antd: Slider] `tooltipVisible` is deprecated. Please use `tooltip.open` instead.',
|
2022-08-17 15:47:22 +08:00
|
|
|
);
|
2022-09-06 21:46:49 +08:00
|
|
|
|
2022-08-18 20:26:19 +08:00
|
|
|
rerender(<TSSlider tooltipPlacement="left" />);
|
2022-08-17 15:47:22 +08:00
|
|
|
expect(errSpy).toHaveBeenCalledWith(
|
2023-09-13 22:07:33 +08:00
|
|
|
'Warning: [antd: Slider] `tooltipPlacement` is deprecated. Please use `tooltip.placement` instead.',
|
2022-08-17 15:47:22 +08:00
|
|
|
);
|
|
|
|
|
2022-09-06 21:46:49 +08:00
|
|
|
// All should work
|
|
|
|
const holder = document.createElement('div');
|
|
|
|
holder.id = 'holder';
|
|
|
|
document.body.appendChild(holder);
|
|
|
|
|
2023-06-07 21:59:21 +08:00
|
|
|
const getTooltipPopupContainer = jest.fn(() => container);
|
2022-09-06 21:46:49 +08:00
|
|
|
|
|
|
|
rerender(
|
|
|
|
<TSSlider
|
|
|
|
tooltipPrefixCls="bamboo"
|
|
|
|
getTooltipPopupContainer={getTooltipPopupContainer}
|
|
|
|
tipFormatter={() => 'little'}
|
|
|
|
tooltipPlacement="bottom"
|
|
|
|
tooltipVisible
|
|
|
|
/>,
|
|
|
|
);
|
|
|
|
|
|
|
|
act(() => {
|
2023-06-07 21:59:21 +08:00
|
|
|
jest.runAllTimers();
|
2022-09-06 21:46:49 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
expect(getTooltipPopupContainer).toHaveBeenCalled();
|
|
|
|
expect(container.querySelector('.bamboo')).toBeTruthy();
|
|
|
|
expect(container.querySelector('.bamboo-inner')!.textContent).toEqual('little');
|
|
|
|
|
|
|
|
holder.parentNode?.removeChild(holder);
|
|
|
|
|
2022-08-17 15:47:22 +08:00
|
|
|
errSpy.mockRestore();
|
|
|
|
});
|
2022-08-04 17:09:54 +08:00
|
|
|
});
|