github.com/pyroscope-io/pyroscope@v0.37.3-0.20230725203016-5f6947968bd0/webapp/javascript/components/QueryInput/QueryInput.spec.tsx (about)

     1  import React from 'react';
     2  import { brandQuery } from '@webapp/models/query';
     3  import { render, screen, fireEvent } from '@testing-library/react';
     4  
     5  import QueryInput from './QueryInput';
     6  
     7  describe('QueryInput', () => {
     8    it('changes content correctly', () => {
     9      const onSubmit = jest.fn();
    10      render(
    11        <QueryInput initialQuery={brandQuery('myquery')} onSubmit={onSubmit} />
    12      );
    13  
    14      const form = screen.getByRole('form', { name: /query-input/i });
    15      fireEvent.submit(form);
    16      expect(onSubmit).toHaveBeenCalledWith('myquery');
    17  
    18      const input = screen.getByRole('textbox');
    19      fireEvent.change(input, { target: { value: 'myquery2' } });
    20      fireEvent.submit(form);
    21      expect(onSubmit).toHaveBeenCalledWith('myquery2');
    22    });
    23  
    24    describe('submission', () => {
    25      const onSubmit = jest.fn();
    26  
    27      beforeEach(() => {
    28        render(
    29          <QueryInput initialQuery={brandQuery('myquery')} onSubmit={onSubmit} />
    30        );
    31      });
    32  
    33      it('is submitted by pressing Enter', () => {
    34        const input = screen.getByRole('textbox');
    35        fireEvent.keyDown(input, { key: 'Enter' });
    36        expect(onSubmit).toHaveBeenCalledWith('myquery');
    37      });
    38  
    39      it('is submitted by clicking on the Execute button', () => {
    40        const button = screen.getByRole('button');
    41        button.click();
    42        expect(onSubmit).toHaveBeenCalledWith('myquery');
    43      });
    44    });
    45  });