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

* convert LogLabels tests toRTL

* convert LogMessageAnsi tests to RTL

* convert LogMessageAnsi to RTL fix

* remove comment from LogMessageAnsi tests
This commit is contained in:
Chrysa Dikonimaki 2022-05-12 22:11:35 +02:00 committed by GitHub
parent 1c679e814b
commit ab91af202c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 29 deletions

View File

@ -26,9 +26,6 @@ exports[`no enzyme tests`] = {
"packages/grafana-ui/src/components/Graph/GraphTooltip/MultiModeGraphTooltip.test.tsx:1865444105": [ "packages/grafana-ui/src/components/Graph/GraphTooltip/MultiModeGraphTooltip.test.tsx:1865444105": [
[0, 17, 13, "RegExp match", "2409514259"] [0, 17, 13, "RegExp match", "2409514259"]
], ],
"packages/grafana-ui/src/components/Logs/LogMessageAnsi.test.tsx:1630730648": [
[0, 19, 13, "RegExp match", "2409514259"]
],
"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"]
], ],

View File

@ -1,4 +1,4 @@
import { shallow } from 'enzyme'; import { render, screen, within } from '@testing-library/react';
import React from 'react'; import React from 'react';
import { createTheme } from '@grafana/data'; import { createTheme } from '@grafana/data';
@ -7,44 +7,39 @@ import { UnThemedLogMessageAnsi as LogMessageAnsi } from './LogMessageAnsi';
describe('<LogMessageAnsi />', () => { describe('<LogMessageAnsi />', () => {
it('renders string without ANSI codes', () => { it('renders string without ANSI codes', () => {
const wrapper = shallow(<LogMessageAnsi value="Lorem ipsum" theme={createTheme()} />); render(<LogMessageAnsi value="Lorem ipsum" theme={createTheme()} />);
expect(wrapper.find('span').exists()).toBe(false); expect(screen.queryByTestId('ansiLogLine')).not.toBeInTheDocument();
expect(wrapper.text()).toBe('Lorem ipsum'); expect(screen.queryByText('Lorem ipsum')).toBeInTheDocument();
}); });
it('renders string with ANSI codes', () => { it('renders string with ANSI codes', () => {
const value = 'Lorem \u001B[31mipsum\u001B[0m et dolor'; const value = 'Lorem \u001B[31mipsum\u001B[0m et dolor';
const wrapper = shallow(<LogMessageAnsi value={value} theme={createTheme()} />); render(<LogMessageAnsi value={value} theme={createTheme()} />);
expect(wrapper.find('span')).toHaveLength(1); expect(screen.queryByTestId('ansiLogLine')).toBeInTheDocument();
expect(wrapper.find('span').first().prop('style')).toMatchObject( expect(screen.getAllByTestId('ansiLogLine')).toHaveLength(1);
expect.objectContaining({ expect(screen.getAllByTestId('ansiLogLine').at(0)).toHaveAttribute('style', expect.stringMatching('color'));
color: expect.any(String),
}) const { getByText } = within(screen.getAllByTestId('ansiLogLine').at(0)!);
); expect(getByText('ipsum')).toBeInTheDocument();
expect(wrapper.find('span').first().text()).toBe('ipsum');
}); });
it('renders string with ANSI codes with correctly converted css classnames', () => { it('renders string with ANSI codes with correctly converted css classnames', () => {
const value = 'Lorem \u001B[1;32mIpsum'; const value = 'Lorem \u001B[1;32mIpsum';
const wrapper = shallow(<LogMessageAnsi value={value} theme={createTheme()} />); render(<LogMessageAnsi value={value} theme={createTheme()} />);
expect(wrapper.find('span')).toHaveLength(1); expect(screen.queryByTestId('ansiLogLine')).toBeInTheDocument();
expect(wrapper.find('span').first().prop('style')).toMatchObject( expect(screen.getAllByTestId('ansiLogLine')).toHaveLength(1);
expect.objectContaining({
fontWeight: expect.any(String), expect(screen.getAllByTestId('ansiLogLine').at(0)).toHaveAttribute('style', expect.stringMatching('font-weight'));
})
);
}); });
it('renders string with ANSI dim code with appropriate themed color', () => { it('renders string with ANSI dim code with appropriate themed color', () => {
const value = 'Lorem \u001B[1;2mIpsum'; const value = 'Lorem \u001B[1;2mIpsum';
const theme = createTheme(); const theme = createTheme();
const wrapper = shallow(<LogMessageAnsi value={value} theme={theme} />); render(<LogMessageAnsi value={value} theme={theme} />);
expect(wrapper.find('span')).toHaveLength(1); expect(screen.queryByTestId('ansiLogLine')).toBeInTheDocument();
expect(wrapper.find('span').first().prop('style')).toMatchObject( expect(screen.getAllByTestId('ansiLogLine')).toHaveLength(1);
expect.objectContaining({
color: theme.colors.text.secondary, expect(screen.getAllByTestId('ansiLogLine').at(0)).toHaveStyle({ color: theme.colors.text.secondary });
})
);
}); });
}); });