mirror of
https://github.com/prometheus/prometheus.git
synced 2025-03-05 20:59:13 -08:00
ff2d297b0a
This updates React, TypeScript, and some other node packages (but not everything). A couple of notes: - `enzyme-adapter-react-16` does not have a React 17 equivalent yet, so I switched to the fork `@wojtekmaj/enzyme-adapter-react-17` - A bunch of tests are still failing because I think in the enzyme testing environment, a browser API (`ResizeObserver`) is missing, and maybe for other reasons. This needs to be explored + fixed. - The TypeScript update introduced more stringent rules, which required fixing up a bunch of pieces of code a bit. - The `use-media` package doesn't work with React 17 yet, so I just built our own minimal `useMedia` hook instead (just a couple of lines). - I commented out part of the code in `withStartingIndicator.tsx` because it fails the now-stricter lint checks. It needs to be fixed (and not commented out). Signed-off-by: Julius Volz <julius.volz@gmail.com>
61 lines
2 KiB
TypeScript
61 lines
2 KiB
TypeScript
import * as React from 'react';
|
|
import { shallow } from 'enzyme';
|
|
import sinon from 'sinon';
|
|
import TimeInput from './TimeInput';
|
|
import { Button, InputGroup, InputGroupAddon, Input } from 'reactstrap';
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
import { faChevronLeft, faChevronRight, faTimes } from '@fortawesome/free-solid-svg-icons';
|
|
|
|
describe('TimeInput', () => {
|
|
const timeInputProps = {
|
|
time: 1572102237932,
|
|
range: 60 * 60 * 7,
|
|
placeholder: 'time input',
|
|
onChangeTime: (): void => {
|
|
// Do nothing.
|
|
},
|
|
};
|
|
const timeInput = shallow(<TimeInput {...timeInputProps} />);
|
|
it('renders the string "scalar"', () => {
|
|
const inputGroup = timeInput.find(InputGroup);
|
|
expect(inputGroup.prop('className')).toEqual('time-input');
|
|
expect(inputGroup.prop('size')).toEqual('sm');
|
|
});
|
|
|
|
it('renders buttons to adjust time', () => {
|
|
[
|
|
{
|
|
position: 'prepend',
|
|
title: 'Decrease time',
|
|
icon: faChevronLeft,
|
|
},
|
|
{
|
|
position: 'append',
|
|
title: 'Clear time',
|
|
icon: faTimes,
|
|
},
|
|
{
|
|
position: 'append',
|
|
title: 'Increase time',
|
|
icon: faChevronRight,
|
|
},
|
|
].forEach((button) => {
|
|
const onChangeTime = sinon.spy();
|
|
const timeInput = shallow(<TimeInput {...timeInputProps} onChangeTime={onChangeTime} />);
|
|
const addon = timeInput.find(InputGroupAddon).filterWhere((addon) => addon.prop('addonType') === button.position);
|
|
const btn = addon.find(Button).filterWhere((btn) => btn.prop('title') === button.title);
|
|
const icon = btn.find(FontAwesomeIcon);
|
|
expect(icon.prop('icon')).toEqual(button.icon);
|
|
expect(icon.prop('fixedWidth')).toBe(true);
|
|
btn.simulate('click');
|
|
expect(onChangeTime.calledOnce).toBe(true);
|
|
});
|
|
});
|
|
|
|
it('renders an Input', () => {
|
|
const input = timeInput.find(Input);
|
|
expect(input.prop('placeholder')).toEqual(timeInputProps.placeholder);
|
|
expect(input.prop('innerRef')).toEqual({ current: null });
|
|
});
|
|
});
|