clickhouse-datasource/src/components/queryBuilder/ColumnsEditor.test.tsx at 4b8b7a77149af67edef77d79b9c13678dd88e149 · grafana/clickhouse-datasource · 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
import React from 'react';
import { fireEvent, render } from '@testing-library/react';
import { ColumnsEditor } from './ColumnsEditor';
import { TableColumn, SelectedColumn } from 'types/queryBuilder';
import { selectors } from 'selectors';

describe('ColumnsEditor', () => {
  const allColumns: readonly TableColumn[] = [
    { name: 'name', type: 'string', picklistValues: [] },
    { name: 'dummy', type: 'string', picklistValues: [] },
  ];
  const selectedColumns: SelectedColumn[] = [{ name: 'name' }];

  it('should render default value when no options passed', () => {
    const result = render(<ColumnsEditor allColumns={[]} selectedColumns={[]} onSelectedColumnsChange={() => {}} />);
    expect(result.container.firstChild).not.toBeNull();
    expect(result.getByTestId(selectors.components.QueryBuilder.ColumnsEditor.multiSelectWrapper)).toBeInTheDocument();
  });

  it('should render the correct values when passed', () => {
    const result = render(
      <ColumnsEditor allColumns={allColumns} selectedColumns={selectedColumns} onSelectedColumnsChange={() => {}} />
    );
    expect(result.container.firstChild).not.toBeNull();
    expect(result.getByTestId(selectors.components.QueryBuilder.ColumnsEditor.multiSelectWrapper)).toBeInTheDocument();

    const multiSelect = result.getByRole('combobox');
    expect(multiSelect).toBeInTheDocument();
    fireEvent.keyDown(multiSelect, { key: 'ArrowDown' });
    expect(result.getByText('name')).toBeInTheDocument();
    expect(result.getByText('dummy')).toBeInTheDocument();
  });

  it('should call onSelectedColumnsChange when a column is selected', () => {
    const onSelectedColumnsChange = jest.fn();
    const result = render(
      <ColumnsEditor
        allColumns={allColumns}
        selectedColumns={selectedColumns}
        onSelectedColumnsChange={onSelectedColumnsChange}
      />
    );
    expect(result.container.firstChild).not.toBeNull();
    expect(result.getByTestId(selectors.components.QueryBuilder.ColumnsEditor.multiSelectWrapper)).toBeInTheDocument();

    const multiSelect = result.getByRole('combobox');
    expect(multiSelect).toBeInTheDocument();
    fireEvent.keyDown(multiSelect, { key: 'ArrowDown' });
    fireEvent.keyDown(multiSelect, { key: 'ArrowDown' });
    fireEvent.keyDown(multiSelect, { key: 'Enter' });

    expect(onSelectedColumnsChange).toHaveBeenCalledTimes(1);
    expect(onSelectedColumnsChange).toHaveBeenCalledWith([expect.any(Object), expect.any(Object)]);
  });

  it('should call onSelectedColumnsChange when a column is deselected', () => {
    const onSelectedColumnsChange = jest.fn();
    const result = render(
      <ColumnsEditor
        allColumns={allColumns}
        selectedColumns={selectedColumns}
        onSelectedColumnsChange={onSelectedColumnsChange}
      />
    );
    expect(result.container.firstChild).not.toBeNull();
    expect(result.getByTestId(selectors.components.QueryBuilder.ColumnsEditor.multiSelectWrapper)).toBeInTheDocument();

    const removeButton = result.getByTestId('times'); // find by "x" symbol
    fireEvent.click(removeButton);
    expect(onSelectedColumnsChange).toHaveBeenCalledTimes(1);
    expect(onSelectedColumnsChange).toHaveBeenCalledWith([]);
  });

  it('should close when clicked outside', () => {
    const onSelectedColumnsChange = jest.fn();
    const result = render(
      <ColumnsEditor
        allColumns={allColumns}
        selectedColumns={selectedColumns}
        onSelectedColumnsChange={onSelectedColumnsChange}
      />
    );
    expect(onSelectedColumnsChange).toHaveBeenCalledTimes(0);

    const multiSelect = result.getByRole('combobox');
    expect(multiSelect).toBeInTheDocument();

    expect(result.queryAllByText('dummy').length).toBe(0); // is popup closed
    fireEvent.keyDown(multiSelect, { key: 'ArrowDown' });
    expect(result.getByText('dummy')).toBeInTheDocument(); // is popup open
    fireEvent.keyDown(multiSelect, { key: 'Esc' });
    expect(result.queryAllByText('dummy').length).toBe(0); // is popup closed
    expect(onSelectedColumnsChange).toHaveBeenCalledTimes(0);
  });
});