1import React from 'react';
2import { screen, render, within } from '@testing-library/react';
3import { TableContainer } from './TableContainer';
4import { DataFrame, toDataFrame, FieldType, InternalTimeZones } from '@grafana/data';
5import { ExploreId } from 'app/types/explore';
6
7function getTable(): HTMLElement {
8  return screen.getAllByRole('table')[0];
9}
10
11function getRowsData(rows: HTMLElement[]): Object[] {
12  let content = [];
13  for (let i = 1; i < rows.length; i++) {
14    content.push({
15      time: within(rows[i]).getByText(/2021*/).textContent,
16      text: within(rows[i]).getByText(/test_string_*/).textContent,
17    });
18  }
19  return content;
20}
21
22const dataFrame = toDataFrame({
23  name: 'A',
24  fields: [
25    {
26      name: 'time',
27      type: FieldType.time,
28      values: [1609459200000, 1609470000000, 1609462800000, 1609466400000],
29      config: {
30        custom: {
31          filterable: false,
32        },
33      },
34    },
35    {
36      name: 'text',
37      type: FieldType.string,
38      values: ['test_string_1', 'test_string_2', 'test_string_3', 'test_string_4'],
39      config: {
40        custom: {
41          filterable: false,
42        },
43      },
44    },
45  ],
46});
47
48const defaultProps = {
49  exploreId: ExploreId.left as ExploreId,
50  loading: false,
51  width: 800,
52  onCellFilterAdded: jest.fn(),
53  tableResult: dataFrame,
54  splitOpen: (() => {}) as any,
55  range: {} as any,
56  timeZone: InternalTimeZones.utc,
57};
58
59describe('TableContainer', () => {
60  it('should render component', () => {
61    render(<TableContainer {...defaultProps} />);
62    expect(getTable()).toBeInTheDocument();
63    const rows = within(getTable()).getAllByRole('row');
64    expect(rows).toHaveLength(5);
65    expect(getRowsData(rows)).toEqual([
66      { time: '2021-01-01 00:00:00', text: 'test_string_1' },
67      { time: '2021-01-01 03:00:00', text: 'test_string_2' },
68      { time: '2021-01-01 01:00:00', text: 'test_string_3' },
69      { time: '2021-01-01 02:00:00', text: 'test_string_4' },
70    ]);
71  });
72
73  it('should render 0 series returned on no items', () => {
74    const emptyFrames = {
75      name: 'TableResultName',
76      fields: [],
77      length: 0,
78    } as DataFrame;
79    render(<TableContainer {...defaultProps} tableResult={emptyFrames} />);
80    expect(screen.getByText('0 series returned')).toBeInTheDocument();
81  });
82
83  it('should update time when timezone changes', () => {
84    const { rerender } = render(<TableContainer {...defaultProps} />);
85    const rowsBeforeChange = within(getTable()).getAllByRole('row');
86    expect(getRowsData(rowsBeforeChange)).toEqual([
87      { time: '2021-01-01 00:00:00', text: 'test_string_1' },
88      { time: '2021-01-01 03:00:00', text: 'test_string_2' },
89      { time: '2021-01-01 01:00:00', text: 'test_string_3' },
90      { time: '2021-01-01 02:00:00', text: 'test_string_4' },
91    ]);
92
93    rerender(<TableContainer {...defaultProps} timeZone="cest" />);
94    const rowsAfterChange = within(getTable()).getAllByRole('row');
95    expect(getRowsData(rowsAfterChange)).toEqual([
96      { time: '2020-12-31 19:00:00', text: 'test_string_1' },
97      { time: '2020-12-31 22:00:00', text: 'test_string_2' },
98      { time: '2020-12-31 20:00:00', text: 'test_string_3' },
99      { time: '2020-12-31 21:00:00', text: 'test_string_4' },
100    ]);
101  });
102});
103