slider/tests/marks.test.js at 7a3fe19cc97ddf985c83aef696f395fb5260140e · react-component/slider · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
/* eslint-disable max-len, no-undef */
import React from 'react';
import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
import { render, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom';
import Slider from '../src';

describe('marks', () => {
  beforeAll(() => {
    spyElementPrototypes(HTMLElement, {
      getBoundingClientRect: () => ({
        width: 100,
        height: 100,
      }),
    });
  });

  it('should render marks correctly when `marks` is not an empty object', () => {
    const marks = { 0: 0, 30: '30', 99: '', 100: '100' };

    const { container } = render(<Slider value={30} marks={marks} />);
    expect(container.getElementsByClassName('rc-slider-marks-dot')).toHaveLength(3);
    expect(container.getElementsByClassName('rc-slider-mark-text')).toHaveLength(3);
    expect(container.getElementsByClassName('rc-slider-mark-text')[0].innerHTML).toBe('0');
    expect(container.getElementsByClassName('rc-slider-mark-text')[1].innerHTML).toBe('30');
    expect(container.getElementsByClassName('rc-slider-mark-text')[2].innerHTML).toBe('100');

    const { container: container2 } = render(<Slider range value={[0, 30]} marks={marks} />);
    expect(container2.getElementsByClassName('rc-slider-marks-dot')).toHaveLength(3);
    expect(container2.getElementsByClassName('rc-slider-mark-text')).toHaveLength(3);
    expect(container2.getElementsByClassName('rc-slider-mark-text')[0].innerHTML).toBe('0');
    expect(container2.getElementsByClassName('rc-slider-mark-text')[1].innerHTML).toBe('30');
    expect(container2.getElementsByClassName('rc-slider-mark-text')[2].innerHTML).toBe('100');

    expect(container.querySelector('.rc-slider-with-marks')).toBeTruthy();
  });

  it('should select correct value while click on marks', () => {
    const marks = { 0: '0', 30: '30', 100: '100' };

    const { container } = render(<Slider marks={marks} />);
    fireEvent.click(container.getElementsByClassName('rc-slider-mark-text')[1]);
    expect(container.getElementsByClassName('rc-slider-handle')[0]).toHaveAttribute(
      'aria-valuenow',
      '30',
    );
  });

  // TODO: not implement yet
  // zombieJ: since this test leave years but not implement. Could we remove this?
  // xit('should select correct value while click on marks in Ranger', () => {
  //   const rangeWrapper = render(<Range marks={marks} />);
  //   const rangeMark = rangeWrapper.find('.rc-slider-mark-text').at(1);
  //   rangeMark.simulate('mousedown', {
  //     type: 'mousedown',
  //     target: rangeMark,
  //     pageX: 25,
  //     button: 0,
  //     stopPropagation() {},
  //     preventDefault() {},
  //   });
  //   expect(rangeWrapper.state('bounds')).toBe([0, 30]);
  // });
});