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