Convert packages/grafana-ui/src/components/Logs/LogRows.test.tsx to RTL (#48982)

* convert LogLabels tests toRTL

* convert LogMessageAnsi tests to RTL

* convert LogMessageAnsi to RTL fix

* remove comment from LogMessageAnsi tests

* convert LogRows tests to RTL

* Delete LogRow import
This commit is contained in:
Chrysa Dikonimaki 2022-05-17 09:56:14 +02:00 committed by GitHub
parent 43e34f3086
commit b33c1bf4fd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 44 additions and 34 deletions

View File

@ -29,9 +29,6 @@ exports[`no enzyme tests`] = {
"packages/grafana-ui/src/components/Logs/LogRowContextProvider.test.tsx:2719724375": [ "packages/grafana-ui/src/components/Logs/LogRowContextProvider.test.tsx:2719724375": [
[0, 17, 13, "RegExp match", "2409514259"] [0, 17, 13, "RegExp match", "2409514259"]
], ],
"packages/grafana-ui/src/components/Logs/LogRows.test.tsx:3121815234": [
[0, 17, 13, "RegExp match", "2409514259"]
],
"packages/grafana-ui/src/components/QueryField/QueryField.test.tsx:375894800": [ "packages/grafana-ui/src/components/QueryField/QueryField.test.tsx:375894800": [
[0, 19, 13, "RegExp match", "2409514259"] [0, 19, 13, "RegExp match", "2409514259"]
], ],

View File

@ -1,16 +1,15 @@
import { mount } from 'enzyme'; import { render, screen } from '@testing-library/react';
import { range } from 'lodash'; import { range } from 'lodash';
import React from 'react'; import React from 'react';
import { LogLevel, LogRowModel, LogsDedupStrategy, MutableDataFrame, LogsSortOrder } from '@grafana/data'; import { LogLevel, LogRowModel, LogsDedupStrategy, MutableDataFrame, LogsSortOrder } from '@grafana/data';
import { LogRow } from './LogRow';
import { LogRows, PREVIEW_LIMIT } from './LogRows'; import { LogRows, PREVIEW_LIMIT } from './LogRows';
describe('LogRows', () => { describe('LogRows', () => {
it('renders rows', () => { it('renders rows', () => {
const rows: LogRowModel[] = [makeLog({ uid: '1' }), makeLog({ uid: '2' }), makeLog({ uid: '3' })]; const rows: LogRowModel[] = [makeLog({ uid: '1' }), makeLog({ uid: '2' }), makeLog({ uid: '3' })];
const wrapper = mount( render(
<LogRows <LogRows
logRows={rows} logRows={rows}
dedupStrategy={LogsDedupStrategy.none} dedupStrategy={LogsDedupStrategy.none}
@ -23,16 +22,16 @@ describe('LogRows', () => {
/> />
); );
expect(wrapper.find(LogRow).length).toBe(3); expect(screen.queryAllByRole('row')).toHaveLength(3);
expect(wrapper.contains('log message 1')).toBeTruthy(); expect(screen.queryAllByRole('row').at(0)).toHaveTextContent('log message 1');
expect(wrapper.contains('log message 2')).toBeTruthy(); expect(screen.queryAllByRole('row').at(1)).toHaveTextContent('log message 2');
expect(wrapper.contains('log message 3')).toBeTruthy(); expect(screen.queryAllByRole('row').at(2)).toHaveTextContent('log message 3');
}); });
it('renders rows only limited number of rows first', () => { it('renders rows only limited number of rows first', () => {
const rows: LogRowModel[] = [makeLog({ uid: '1' }), makeLog({ uid: '2' }), makeLog({ uid: '3' })]; const rows: LogRowModel[] = [makeLog({ uid: '1' }), makeLog({ uid: '2' }), makeLog({ uid: '3' })];
jest.useFakeTimers('modern'); jest.useFakeTimers('modern');
const wrapper = mount( const { rerender } = render(
<LogRows <LogRows
logRows={rows} logRows={rows}
dedupStrategy={LogsDedupStrategy.none} dedupStrategy={LogsDedupStrategy.none}
@ -46,15 +45,29 @@ describe('LogRows', () => {
/> />
); );
expect(wrapper.find(LogRow).length).toBe(1); // There is an extra row with the rows that are rendering
expect(wrapper.contains('log message 1')).toBeTruthy(); expect(screen.queryAllByRole('row')).toHaveLength(2);
jest.runAllTimers(); expect(screen.queryAllByRole('row').at(0)).toHaveTextContent('log message 1');
wrapper.update();
expect(wrapper.find(LogRow).length).toBe(3); jest.runAllTimers();
expect(wrapper.contains('log message 1')).toBeTruthy(); rerender(
expect(wrapper.contains('log message 2')).toBeTruthy(); <LogRows
expect(wrapper.contains('log message 3')).toBeTruthy(); logRows={rows}
dedupStrategy={LogsDedupStrategy.none}
showLabels={false}
showTime={false}
wrapLogMessage={true}
prettifyLogMessage={true}
timeZone={'utc'}
previewLimit={1}
enableLogDetails={true}
/>
);
expect(screen.queryAllByRole('row')).toHaveLength(3);
expect(screen.queryAllByRole('row').at(0)).toHaveTextContent('log message 1');
expect(screen.queryAllByRole('row').at(1)).toHaveTextContent('log message 2');
expect(screen.queryAllByRole('row').at(2)).toHaveTextContent('log message 3');
jest.useRealTimers(); jest.useRealTimers();
}); });
@ -62,7 +75,7 @@ describe('LogRows', () => {
it('renders deduped rows if supplied', () => { it('renders deduped rows if supplied', () => {
const rows: LogRowModel[] = [makeLog({ uid: '1' }), makeLog({ uid: '2' }), makeLog({ uid: '3' })]; const rows: LogRowModel[] = [makeLog({ uid: '1' }), makeLog({ uid: '2' }), makeLog({ uid: '3' })];
const dedupedRows: LogRowModel[] = [makeLog({ uid: '4' }), makeLog({ uid: '5' })]; const dedupedRows: LogRowModel[] = [makeLog({ uid: '4' }), makeLog({ uid: '5' })];
const wrapper = mount( render(
<LogRows <LogRows
logRows={rows} logRows={rows}
deduplicatedRows={dedupedRows} deduplicatedRows={dedupedRows}
@ -75,16 +88,15 @@ describe('LogRows', () => {
enableLogDetails={true} enableLogDetails={true}
/> />
); );
expect(screen.queryAllByRole('row')).toHaveLength(2);
expect(wrapper.find(LogRow).length).toBe(2); expect(screen.queryAllByRole('row').at(0)).toHaveTextContent('log message 4');
expect(wrapper.contains('log message 4')).toBeTruthy(); expect(screen.queryAllByRole('row').at(1)).toHaveTextContent('log message 5');
expect(wrapper.contains('log message 5')).toBeTruthy();
}); });
it('renders with default preview limit', () => { it('renders with default preview limit', () => {
// PREVIEW_LIMIT * 2 is there because otherwise we just render all rows // PREVIEW_LIMIT * 2 is there because otherwise we just render all rows
const rows: LogRowModel[] = range(PREVIEW_LIMIT * 2 + 1).map((num) => makeLog({ uid: num.toString() })); const rows: LogRowModel[] = range(PREVIEW_LIMIT * 2 + 1).map((num) => makeLog({ uid: num.toString() }));
const wrapper = mount( render(
<LogRows <LogRows
logRows={rows} logRows={rows}
dedupStrategy={LogsDedupStrategy.none} dedupStrategy={LogsDedupStrategy.none}
@ -97,7 +109,8 @@ describe('LogRows', () => {
/> />
); );
expect(wrapper.find(LogRow).length).toBe(100); // There is an extra row with the rows that are rendering
expect(screen.queryAllByRole('row')).toHaveLength(101);
}); });
it('renders asc ordered rows if order and function supplied', () => { it('renders asc ordered rows if order and function supplied', () => {
@ -106,7 +119,7 @@ describe('LogRows', () => {
makeLog({ uid: '3', timeEpochMs: 3 }), makeLog({ uid: '3', timeEpochMs: 3 }),
makeLog({ uid: '2', timeEpochMs: 2 }), makeLog({ uid: '2', timeEpochMs: 2 }),
]; ];
const wrapper = mount( render(
<LogRows <LogRows
logRows={rows} logRows={rows}
dedupStrategy={LogsDedupStrategy.none} dedupStrategy={LogsDedupStrategy.none}
@ -120,9 +133,9 @@ describe('LogRows', () => {
/> />
); );
expect(wrapper.find(LogRow).at(0).text()).toBe('log message 1'); expect(screen.queryAllByRole('row').at(0)).toHaveTextContent('log message 1');
expect(wrapper.find(LogRow).at(1).text()).toBe('log message 2'); expect(screen.queryAllByRole('row').at(1)).toHaveTextContent('log message 2');
expect(wrapper.find(LogRow).at(2).text()).toBe('log message 3'); expect(screen.queryAllByRole('row').at(2)).toHaveTextContent('log message 3');
}); });
it('renders desc ordered rows if order and function supplied', () => { it('renders desc ordered rows if order and function supplied', () => {
const rows: LogRowModel[] = [ const rows: LogRowModel[] = [
@ -130,7 +143,7 @@ describe('LogRows', () => {
makeLog({ uid: '3', timeEpochMs: 3 }), makeLog({ uid: '3', timeEpochMs: 3 }),
makeLog({ uid: '2', timeEpochMs: 2 }), makeLog({ uid: '2', timeEpochMs: 2 }),
]; ];
const wrapper = mount( render(
<LogRows <LogRows
logRows={rows} logRows={rows}
dedupStrategy={LogsDedupStrategy.none} dedupStrategy={LogsDedupStrategy.none}
@ -144,9 +157,9 @@ describe('LogRows', () => {
/> />
); );
expect(wrapper.find(LogRow).at(0).text()).toBe('log message 3'); expect(screen.queryAllByRole('row').at(0)).toHaveTextContent('log message 3');
expect(wrapper.find(LogRow).at(1).text()).toBe('log message 2'); expect(screen.queryAllByRole('row').at(1)).toHaveTextContent('log message 2');
expect(wrapper.find(LogRow).at(2).text()).toBe('log message 1'); expect(screen.queryAllByRole('row').at(2)).toHaveTextContent('log message 1');
}); });
}); });