IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-01-28 17:24:59 -06:00
Code Issues Packages Projects Releases Wiki Activity

Chore: transfer LiveLogs.test to testing-library (#48678)

Browse Source 
* Chore: transfer LiveLogs.test to testing-library

* Chore: improve readability and third test

* Chore: improve test and component after code review
This commit is contained in:
L-M-K-B 2022-05-05 08:40:21 +02:00 committed by GitHub
parent 9529c35efa
commit 83a5ca95c7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 78 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.betterer.results
View File

@ -215,9 +215,6 @@ exports[`no enzyme tests`] = {
"public/app/features/dimensions/editors/ThresholdsEditor/ThresholdsEditor.test.tsx:4164297658": [
[0, 17, 13, "RegExp match", "2409514259"]
],
"public/app/features/explore/LiveLogs.test.tsx:156663779": [
[0, 17, 13, "RegExp match", "2409514259"]
],
"public/app/features/explore/RichHistory/RichHistoryStarredTab.test.tsx:3933225580": [
[0, 17, 13, "RegExp match", "2409514259"]
],

155
public/app/features/explore/LiveLogs.test.tsx
View File

@ -1,88 +1,21 @@
import { mount } from 'enzyme';
import { render, screen } from '@testing-library/react';
import React from 'react';
import { LogLevel, LogRowModel, MutableDataFrame } from '@grafana/data';
import { LiveLogsWithTheme } from './LiveLogs';
describe('LiveLogs', () => {
it('renders logs', () => {
const rows: LogRowModel[] = [makeLog({ uid: '1' }), makeLog({ uid: '2' }), makeLog({ uid: '3' })];
const wrapper = mount(
<LiveLogsWithTheme
logRows={rows}
timeZone={'utc'}
stopLive={() => {}}
onPause={() => {}}
onResume={() => {}}
isPaused={true}
/>
);
expect(wrapper.contains('log message 1')).toBeTruthy();
expect(wrapper.contains('log message 2')).toBeTruthy();
expect(wrapper.contains('log message 3')).toBeTruthy();
});
it('renders new logs only when not paused', () => {
const rows: LogRowModel[] = [makeLog({ uid: '1' }), makeLog({ uid: '2' }), makeLog({ uid: '3' })];
const wrapper = mount(
<LiveLogsWithTheme
logRows={rows}
timeZone={'utc'}
stopLive={() => {}}
onPause={() => {}}
onResume={() => {}}
isPaused={true}
/>
);
wrapper.setProps({
...wrapper.props(),
logRows: [makeLog({ uid: '4' }), makeLog({ uid: '5' }), makeLog({ uid: '6' })],
});
expect(wrapper.contains('log message 1')).toBeTruthy();
expect(wrapper.contains('log message 2')).toBeTruthy();
expect(wrapper.contains('log message 3')).toBeTruthy();
(wrapper.find('LiveLogs').instance() as any).scrollContainerRef.current.scrollTo = () => {};
wrapper.setProps({
...wrapper.props(),
isPaused: false,
});
expect(wrapper.contains('log message 4')).toBeTruthy();
expect(wrapper.contains('log message 5')).toBeTruthy();
expect(wrapper.contains('log message 6')).toBeTruthy();
});
it('renders ansi logs', () => {
const rows: LogRowModel[] = [
makeLog({ uid: '1' }),
makeLog({ hasAnsi: true, raw: 'log message \u001B[31m2\u001B[0m', uid: '2' }),
makeLog({ hasAnsi: true, raw: 'log message \u001B[31m3\u001B[0m', uid: '3' }),
];
const wrapper = mount(
<LiveLogsWithTheme
logRows={rows}
timeZone={'utc'}
stopLive={() => {}}
onPause={() => {}}
onResume={() => {}}
isPaused={true}
/>
);
expect(wrapper.contains('log message 1')).toBeTruthy();
expect(wrapper.contains('log message 2')).not.toBeTruthy();
expect(wrapper.contains('log message 3')).not.toBeTruthy();
expect(wrapper.find('LogMessageAnsi')).toHaveLength(2);
expect(wrapper.find('LogMessageAnsi').first().prop('value')).toBe('log message \u001B[31m2\u001B[0m');
expect(wrapper.find('LogMessageAnsi').last().prop('value')).toBe('log message \u001B[31m3\u001B[0m');
});
});
const setup = (rows: LogRowModel[]) =>
render(
<LiveLogsWithTheme
logRows={rows}
timeZone={'utc'}
stopLive={() => {}}
onPause={() => {}}
onResume={() => {}}
isPaused={true}
/>
);
const makeLog = (overrides: Partial<LogRowModel>): LogRowModel => {
const uid = overrides.uid || '1';
@ -106,3 +39,67 @@ const makeLog = (overrides: Partial<LogRowModel>): LogRowModel => {
...overrides,
};
};
describe('LiveLogs', () => {
it('renders logs', () => {
setup([makeLog({ uid: '1' }), makeLog({ uid: '2' }), makeLog({ uid: '3' })]);
expect(screen.getByRole('cell', { name: 'log message 1' })).toBeInTheDocument();
expect(screen.getByRole('cell', { name: 'log message 2' })).toBeInTheDocument();
expect(screen.getByRole('cell', { name: 'log message 3' })).toBeInTheDocument();
});
it('renders new logs only when not paused', () => {
const { rerender } = setup([makeLog({ uid: '1' }), makeLog({ uid: '2' }), makeLog({ uid: '3' })]);
rerender(
<LiveLogsWithTheme
logRows={[makeLog({ uid: '4' }), makeLog({ uid: '5' }), makeLog({ uid: '6' })]}
timeZone={'utc'}
stopLive={() => {}}
onPause={() => {}}
onResume={() => {}}
isPaused={true}
/>
);
expect(screen.getByRole('cell', { name: 'log message 1' })).toBeInTheDocument();
expect(screen.getByRole('cell', { name: 'log message 2' })).toBeInTheDocument();
expect(screen.getByRole('cell', { name: 'log message 3' })).toBeInTheDocument();
expect(screen.queryByRole('cell', { name: 'log message 4' })).not.toBeInTheDocument();
expect(screen.queryByRole('cell', { name: 'log message 5' })).not.toBeInTheDocument();
expect(screen.queryByRole('cell', { name: 'log message 6' })).not.toBeInTheDocument();
rerender(
<LiveLogsWithTheme
logRows={[makeLog({ uid: '4' }), makeLog({ uid: '5' }), makeLog({ uid: '6' })]}
timeZone={'utc'}
stopLive={() => {}}
onPause={() => {}}
onResume={() => {}}
isPaused={false}
/>
);
expect(screen.getByRole('cell', { name: 'log message 4' })).toBeInTheDocument();
expect(screen.getByRole('cell', { name: 'log message 5' })).toBeInTheDocument();
expect(screen.getByRole('cell', { name: 'log message 6' })).toBeInTheDocument();
});
it('renders ansi logs', () => {
setup([
makeLog({ uid: '1' }),
makeLog({ hasAnsi: true, raw: 'log message \u001B[31m2\u001B[0m', uid: '2' }),
makeLog({ hasAnsi: true, raw: 'log message \u001B[33m3\u001B[0m', uid: '3' }),
]);
expect(screen.getByRole('cell', { name: 'log message 1' })).toBeInTheDocument();
expect(screen.getByRole('cell', { name: 'log message 2' })).toBeInTheDocument();
expect(screen.getByRole('cell', { name: 'log message 3' })).toBeInTheDocument();
const logList = screen.getAllByTestId('ansiLogLine');
expect(logList).toHaveLength(2);
expect(logList[0]).toHaveAttribute('style', 'color: rgb(204, 0, 0);');
expect(logList[1]).toHaveAttribute('style', 'color: rgb(204, 102, 0);');
});
});

3
public/app/features/explore/LiveLogs.tsx
View File

@ -135,7 +135,8 @@ class LiveLogs extends PureComponent<Props, State> {
this.liveEndDiv = element;
// This is triggered on every update so on every new row. It keeps the view scrolled at the bottom by
// default.
if (this.liveEndDiv && !isPaused) {
// As scrollTo is not implemented in JSDOM it needs to be part of the condition
if (this.liveEndDiv && this.scrollContainerRef.current?.scrollTo && !isPaused) {
this.scrollContainerRef.current?.scrollTo(0, this.scrollContainerRef.current.scrollHeight);
}
}}