EventDrops/src/indicator.spec.js at master · hlsolutions/EventDrops · 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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
import indicator from './indicator';

const defaultConfig = {
    drop: {
        color: 'red',
        radius: 8,
        date: x => x,
    },
    label: {
        width: 200,
    },
    line: {
        height: 20,
    },
    indicator: {
        previousText: '◀',
        nextText: '▶',
    },
};

const now = Date.now();
const day = 3600 * 24;
const twoMonthsAgo = now - 60 * day;
const lastMonth = now - 30 * day;
const yesterday = now - 1 * day;
const tomorrow = now + 1 * day;

const defaultScale = d3
    .scaleTime()
    .domain([lastMonth, now])
    .range([0, 1000]);

describe('Indicator', () => {
    beforeEach(() => {
        document.body.appendChild(document.createElement('svg'));
    });

    it('should not add any indicators if data is within range', () => {
        const selection = d3.select('svg').data([
            {
                fullData: [yesterday],
            },
        ]);

        indicator(defaultConfig, defaultScale)(selection);

        expect(document.querySelectorAll('.indicator').length).toBe(0);
    });

    it('should add left arrow if there is data before range', () => {
        const selection = d3.select('svg').data([
            {
                fullData: [twoMonthsAgo],
            },
        ]);

        indicator(defaultConfig, defaultScale)(selection);

        const indicators = document.querySelectorAll('.indicator');

        expect(indicators.length).toBe(1);
        expect(indicators[0].textContent).toBe('◀');
    });

    it('should add right indicator if there is data after range', () => {
        const selection = d3.select('svg').data([
            {
                fullData: [tomorrow],
            },
        ]);

        indicator(defaultConfig, defaultScale)(selection);

        const indicators = document.querySelectorAll('.indicator');

        expect(indicators.length).toBe(1);
        expect(indicators[0].textContent).toBe('▶');
    });

    it('should add both left and right arrow if there is data before and after range', () => {
        const selection = d3.select('svg').data([
            {
                fullData: [twoMonthsAgo, tomorrow],
            },
        ]);

        indicator(defaultConfig, defaultScale)(selection);

        const indicators = document.querySelectorAll('.indicator');

        expect(indicators.length).toBe(2);
        expect(indicators[0].textContent).toBe('◀');
        expect(indicators[1].textContent).toBe('▶');
    });

    it("should use text configuration if it's set", () => {
        const selection = d3.select('svg').data([
            {
                fullData: [twoMonthsAgo, tomorrow],
            },
        ]);
        const config = {
            ...defaultConfig,
            indicator: {
                previousText: 'prev',
                nextText: 'next',
            },
        };

        indicator(config, defaultScale)(selection);

        const indicators = document.querySelectorAll('.indicator');

        expect(indicators.length).toBe(2);
        expect(indicators[0].textContent).toBe('prev');
        expect(indicators[1].textContent).toBe('next');
    });

    afterEach(() => {
        document.body.innerHTML = '';
        jest.restoreAllMocks();
    });
});