prometheus

1
import * as React from 'react';
2
import { shallow } from 'enzyme';
3
import GraphControls from './GraphControls';
4
import { Button, ButtonGroup, Form, InputGroup, InputGroupAddon, Input } from 'reactstrap';
5
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
6
import { faPlus, faMinus, faChartArea, faChartLine } from '@fortawesome/free-solid-svg-icons';
7
import TimeInput from './TimeInput';
8
import { GraphDisplayMode } from './Panel';
9

10
const defaultGraphControlProps = {
11
  range: 60 * 60 * 24 * 1000,
12
  endTime: 1572100217898,
13
  useLocalTime: false,
14
  resolution: 10,
15
  displayMode: GraphDisplayMode.Lines,
16
  isHeatmapData: false,
17
  showExemplars: false,
18

19
  onChangeRange: (): void => {
20
    // Do nothing.
21
  },
22
  onChangeEndTime: (): void => {
23
    // Do nothing.
24
  },
25
  onChangeResolution: (): void => {
26
    // Do nothing.
27
  },
28
  onChangeStacking: (): void => {
29
    // Do nothing.
30
  },
31
  onChangeShowExemplars: (): void => {
32
    // Do nothing.
33
  },
34
  onChangeDisplayMode: (): void => {
35
    // Do nothing.
36
  },
37
};
38

39
describe('GraphControls', () => {
40
  it('renders a form', () => {
41
    const controls = shallow(<GraphControls {...defaultGraphControlProps} />);
42
    const form = controls.find(Form);
43
    expect(form).toHaveLength(1);
44
    expect(form.prop('className')).toEqual('graph-controls');
45
    expect(form.prop('inline')).toBe(true);
46
  });
47

48
  it('renders an Input Group for range', () => {
49
    const controls = shallow(<GraphControls {...defaultGraphControlProps} />);
50
    const form = controls.find(InputGroup);
51
    expect(form).toHaveLength(1);
52
    expect(form.prop('className')).toEqual('range-input');
53
    expect(form.prop('size')).toBe('sm');
54
  });
55

56
  it('renders a decrease/increase range buttons', () => {
57
    [
58
      {
59
        position: 'prepend',
60
        title: 'Decrease range',
61
        icon: faMinus,
62
      },
63
      {
64
        position: 'append',
65
        title: 'Increase range',
66
        icon: faPlus,
67
      },
68
    ].forEach((testCase) => {
69
      const controls = shallow(<GraphControls {...defaultGraphControlProps} />);
70
      const addon = controls.find(InputGroupAddon).filterWhere((addon) => addon.prop('addonType') === testCase.position);
71
      const button = addon.find(Button);
72
      const icon = button.find(FontAwesomeIcon);
73
      expect(button.prop('title')).toEqual(testCase.title);
74
      expect(icon).toHaveLength(1);
75
      expect(icon.prop('icon')).toEqual(testCase.icon);
76
      expect(icon.prop('fixedWidth')).toBe(true);
77
    });
78
  });
79

80
  it('renders an Input for range', () => {
81
    const controls = shallow(<GraphControls {...defaultGraphControlProps} />);
82
    const form = controls.find(InputGroup);
83
    const input = form.find(Input);
84
    expect(input).toHaveLength(1);
85
    expect(input.prop('defaultValue')).toEqual('1d');
86
    expect(input.prop('innerRef')).toEqual({ current: null });
87
  });
88

89
  it('renders a TimeInput with props', () => {
90
    const controls = shallow(<GraphControls {...defaultGraphControlProps} />);
91
    const timeInput = controls.find(TimeInput);
92
    expect(timeInput).toHaveLength(1);
93
    expect(timeInput.prop('time')).toEqual(1572100217898);
94
    expect(timeInput.prop('range')).toEqual(86400000);
95
    expect(timeInput.prop('placeholder')).toEqual('End time');
96
  });
97

98
  it('renders a TimeInput with a callback', () => {
99
    const results: (number | null)[] = [];
100
    const onChange = (endTime: number | null): void => {
101
      results.push(endTime);
102
    };
103
    const controls = shallow(<GraphControls {...defaultGraphControlProps} onChangeEndTime={onChange} />);
104
    const timeInput = controls.find(TimeInput);
105
    const onChangeTime = timeInput.prop('onChangeTime');
106
    if (onChangeTime) {
107
      onChangeTime(5);
108
      expect(results).toHaveLength(1);
109
      expect(results[0]).toEqual(5);
110
      results.pop();
111
    } else {
112
      fail('Expected onChangeTime to be defined but it was not');
113
    }
114
  });
115

116
  it('renders a resolution Input with props', () => {
117
    const controls = shallow(<GraphControls {...defaultGraphControlProps} />);
118
    const input = controls.find(Input).filterWhere((input) => input.prop('className') === 'resolution-input');
119
    expect(input.prop('placeholder')).toEqual('Res. (s)');
120
    expect(input.prop('defaultValue')).toEqual('10');
121
    expect(input.prop('innerRef')).toEqual({ current: null });
122
    expect(input.prop('bsSize')).toEqual('sm');
123
  });
124

125
  it('renders button groups', () => {
126
    [
127
      { className: 'stacked-input', size: 'sm' },
128
      { className: 'show-exemplars', size: 'sm' },
129
    ].forEach((testCase, i) => {
130
      const controls = shallow(<GraphControls {...defaultGraphControlProps} />);
131
      const groups = controls.find(ButtonGroup);
132
      expect(groups.get(i).props['className']).toEqual(testCase.className);
133
      expect(groups.get(i).props['size']).toEqual(testCase.size);
134
    });
135
  });
136

137
  it('renders buttons inside the button group', () => {
138
    [
139
      {
140
        title: 'Show unstacked line graph',
141
        icon: faChartLine,
142
        active: true,
143
      },
144
      {
145
        title: 'Show stacked graph',
146
        icon: faChartArea,
147
        active: false,
148
      },
149
    ].forEach((testCase) => {
150
      const controls = shallow(<GraphControls {...defaultGraphControlProps} />);
151
      const group = controls.find(ButtonGroup);
152
      const btn = group.find(Button).filterWhere((btn) => btn.prop('title') === testCase.title);
153
      expect(btn.prop('active')).toEqual(testCase.active);
154
      const icon = btn.find(FontAwesomeIcon);
155
      expect(icon.prop('icon')).toEqual(testCase.icon);
156
    });
157
  });
158

159
  it('renders buttons with callbacks', () => {
160
    [
161
      {
162
        title: 'Show unstacked line graph',
163
        active: true,
164
      },
165
      {
166
        title: 'Show stacked graph',
167
        active: false,
168
      },
169
    ].forEach((testCase) => {
170
      const results: boolean[] = [];
171
      const onChange = (mode: GraphDisplayMode): void => {
172
        results.push(mode === GraphDisplayMode.Stacked);
173
      };
174
      const controls = shallow(<GraphControls {...defaultGraphControlProps} onChangeDisplayMode={onChange} />);
175
      const group = controls.find(ButtonGroup);
176
      const btn = group.find(Button).filterWhere((btn) => btn.prop('title') === testCase.title);
177
      const onClick = btn.prop('onClick');
178
      if (onClick) {
179
        btn.simulate('click');
180
        expect(results).toHaveLength(1);
181
        expect(results[0]).toBe(!testCase.active);
182
        results.pop();
183
      } else {
184
        fail('Expected onClick to be defined but it was not');
185
      }
186
    });
187
  });
188
});
189