github.com/thanos-io/thanos@v0.32.5/pkg/ui/react-app/src/pages/graph/ExpressionInput.test.tsx (about)

     1  import * as React from 'react';
     2  import { mount, ReactWrapper } from 'enzyme';
     3  import ExpressionInput from './ExpressionInput';
     4  import { Button, InputGroup, InputGroupAddon } from 'reactstrap';
     5  import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
     6  import { faSearch, faSpinner } from '@fortawesome/free-solid-svg-icons';
     7  
     8  describe('ExpressionInput', () => {
     9    const expressionInputProps = {
    10      value: 'node_cpu',
    11      queryHistory: [],
    12      metricNames: [],
    13      executeQuery: (): void => {
    14        // Do nothing.
    15      },
    16      onExpressionChange: (): void => {
    17        // Do nothing.
    18      },
    19      loading: false,
    20      enableAutocomplete: true,
    21      enableHighlighting: true,
    22      enableLinter: true,
    23    };
    24  
    25    let expressionInput: ReactWrapper;
    26    beforeEach(() => {
    27      expressionInput = mount(<ExpressionInput {...expressionInputProps} />);
    28    });
    29  
    30    it('renders an InputGroup', () => {
    31      const inputGroup = expressionInput.find(InputGroup);
    32      expect(inputGroup.prop('className')).toEqual('expression-input');
    33    });
    34  
    35    it('renders a search icon when it is not loading', () => {
    36      const addon = expressionInput.find(InputGroupAddon).filterWhere((addon) => addon.prop('addonType') === 'prepend');
    37      const icon = addon.find(FontAwesomeIcon);
    38      expect(icon.prop('icon')).toEqual(faSearch);
    39    });
    40  
    41    it('renders a loading icon when it is loading', () => {
    42      const expressionInput = mount(<ExpressionInput {...expressionInputProps} loading={true} />);
    43      const addon = expressionInput.find(InputGroupAddon).filterWhere((addon) => addon.prop('addonType') === 'prepend');
    44      const icon = addon.find(FontAwesomeIcon);
    45      expect(icon.prop('icon')).toEqual(faSpinner);
    46      expect(icon.prop('spin')).toBe(true);
    47    });
    48  
    49    it('renders a CodeMirror expression input', () => {
    50      const input = expressionInput.find('div.cm-expression-input');
    51      expect(input.text()).toContain('node_cpu');
    52    });
    53  
    54    it('renders an execute button', () => {
    55      const addon = expressionInput.find(InputGroupAddon).filterWhere((addon) => addon.prop('addonType') === 'append');
    56      const button = addon.find(Button).find('.execute-btn').first();
    57      expect(button.prop('color')).toEqual('primary');
    58      expect(button.text()).toEqual('Execute');
    59    });
    60  
    61    it('executes the query when clicking the execute button', () => {
    62      const spyExecuteQuery = jest.fn();
    63      const props = { ...expressionInputProps, executeQuery: spyExecuteQuery };
    64      const wrapper = mount(<ExpressionInput {...props} />);
    65      const btn = wrapper.find(Button).filterWhere((btn) => btn.hasClass('execute-btn'));
    66      btn.simulate('click');
    67      expect(spyExecuteQuery).toHaveBeenCalledTimes(1);
    68    });
    69  });