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": [
[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": [
[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 React from 'react';
import { LogLevel, LogRowModel, LogsDedupStrategy, MutableDataFrame, LogsSortOrder } from '@grafana/data';
import { LogRow } from './LogRow';
import { LogRows, PREVIEW_LIMIT } from './LogRows';
describe('LogRows', () => {
it('renders rows', () => {
const rows: LogRowModel[] = [makeLog({ uid: '1' }), makeLog({ uid: '2' }), makeLog({ uid: '3' })];
const wrapper = mount(
render(
<LogRows
logRows={rows}
dedupStrategy={LogsDedupStrategy.none}
@ -23,16 +22,16 @@ describe('LogRows', () => {
/>
);
expect(wrapper.find(LogRow).length).toBe(3);
expect(wrapper.contains('log message 1')).toBeTruthy();
expect(wrapper.contains('log message 2')).toBeTruthy();
expect(wrapper.contains('log message 3')).toBeTruthy();
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');
});
it('renders rows only limited number of rows first', () => {
const rows: LogRowModel[] = [makeLog({ uid: '1' }), makeLog({ uid: '2' }), makeLog({ uid: '3' })];
jest.useFakeTimers('modern');
const wrapper = mount(
const { rerender } = render(
<LogRows
logRows={rows}
dedupStrategy={LogsDedupStrategy.none}
@ -46,15 +45,29 @@ describe('LogRows', () => {
/>
);
expect(wrapper.find(LogRow).length).toBe(1);
expect(wrapper.contains('log message 1')).toBeTruthy();
jest.runAllTimers();
wrapper.update();
// There is an extra row with the rows that are rendering
expect(screen.queryAllByRole('row')).toHaveLength(2);
expect(screen.queryAllByRole('row').at(0)).toHaveTextContent('log message 1');
expect(wrapper.find(LogRow).length).toBe(3);
expect(wrapper.contains('log message 1')).toBeTruthy();
expect(wrapper.contains('log message 2')).toBeTruthy();
expect(wrapper.contains('log message 3')).toBeTruthy();
jest.runAllTimers();
rerender(
<LogRows
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();
});
@ -62,7 +75,7 @@ describe('LogRows', () => {
it('renders deduped rows if supplied', () => {
const rows: LogRowModel[] = [makeLog({ uid: '1' }), makeLog({ uid: '2' }), makeLog({ uid: '3' })];
const dedupedRows: LogRowModel[] = [makeLog({ uid: '4' }), makeLog({ uid: '5' })];
const wrapper = mount(
render(
<LogRows
logRows={rows}
deduplicatedRows={dedupedRows}
@ -75,16 +88,15 @@ describe('LogRows', () => {
enableLogDetails={true}
/>
);
expect(wrapper.find(LogRow).length).toBe(2);
expect(wrapper.contains('log message 4')).toBeTruthy();
expect(wrapper.contains('log message 5')).toBeTruthy();
expect(screen.queryAllByRole('row')).toHaveLength(2);
expect(screen.queryAllByRole('row').at(0)).toHaveTextContent('log message 4');
expect(screen.queryAllByRole('row').at(1)).toHaveTextContent('log message 5');
});
it('renders with default preview limit', () => {
// 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 wrapper = mount(
render(
<LogRows
logRows={rows}
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', () => {
@ -106,7 +119,7 @@ describe('LogRows', () => {
makeLog({ uid: '3', timeEpochMs: 3 }),
makeLog({ uid: '2', timeEpochMs: 2 }),
];
const wrapper = mount(
render(
<LogRows
logRows={rows}
dedupStrategy={LogsDedupStrategy.none}
@ -120,9 +133,9 @@ describe('LogRows', () => {
/>
);
expect(wrapper.find(LogRow).at(0).text()).toBe('log message 1');
expect(wrapper.find(LogRow).at(1).text()).toBe('log message 2');
expect(wrapper.find(LogRow).at(2).text()).toBe('log message 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');
});
it('renders desc ordered rows if order and function supplied', () => {
const rows: LogRowModel[] = [
@ -130,7 +143,7 @@ describe('LogRows', () => {
makeLog({ uid: '3', timeEpochMs: 3 }),
makeLog({ uid: '2', timeEpochMs: 2 }),
];
const wrapper = mount(
render(
<LogRows
logRows={rows}
dedupStrategy={LogsDedupStrategy.none}
@ -144,9 +157,9 @@ describe('LogRows', () => {
/>
);
expect(wrapper.find(LogRow).at(0).text()).toBe('log message 3');
expect(wrapper.find(LogRow).at(1).text()).toBe('log message 2');
expect(wrapper.find(LogRow).at(2).text()).toBe('log message 1');
expect(screen.queryAllByRole('row').at(0)).toHaveTextContent('log message 3');
expect(screen.queryAllByRole('row').at(1)).toHaveTextContent('log message 2');
expect(screen.queryAllByRole('row').at(2)).toHaveTextContent('log message 1');
});
});