mirror of https://github.com/grafana/grafana.git
				
				
				
			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:
		
							parent
							
								
									1c679e814b
								
							
						
					
					
						commit
						ab91af202c
					
				|  | @ -26,9 +26,6 @@ exports[`no enzyme tests`] = { | |||
|     "packages/grafana-ui/src/components/Graph/GraphTooltip/MultiModeGraphTooltip.test.tsx:1865444105": [ | ||||
|       [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": [ | ||||
|       [0, 17, 13, "RegExp match", "2409514259"] | ||||
|     ], | ||||
|  |  | |||
|  | @ -1,4 +1,4 @@ | |||
| import { shallow } from 'enzyme'; | ||||
| import { render, screen, within } from '@testing-library/react'; | ||||
| import React from 'react'; | ||||
| 
 | ||||
| import { createTheme } from '@grafana/data'; | ||||
|  | @ -7,44 +7,39 @@ import { UnThemedLogMessageAnsi as LogMessageAnsi } from './LogMessageAnsi'; | |||
| 
 | ||||
| describe('<LogMessageAnsi />', () => { | ||||
|   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(wrapper.text()).toBe('Lorem ipsum'); | ||||
|     expect(screen.queryByTestId('ansiLogLine')).not.toBeInTheDocument(); | ||||
|     expect(screen.queryByText('Lorem ipsum')).toBeInTheDocument(); | ||||
|   }); | ||||
|   it('renders string with ANSI codes', () => { | ||||
|     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(wrapper.find('span').first().prop('style')).toMatchObject( | ||||
|       expect.objectContaining({ | ||||
|         color: expect.any(String), | ||||
|       }) | ||||
|     ); | ||||
|     expect(wrapper.find('span').first().text()).toBe('ipsum'); | ||||
|     expect(screen.queryByTestId('ansiLogLine')).toBeInTheDocument(); | ||||
|     expect(screen.getAllByTestId('ansiLogLine')).toHaveLength(1); | ||||
|     expect(screen.getAllByTestId('ansiLogLine').at(0)).toHaveAttribute('style', expect.stringMatching('color')); | ||||
| 
 | ||||
|     const { getByText } = within(screen.getAllByTestId('ansiLogLine').at(0)!); | ||||
|     expect(getByText('ipsum')).toBeInTheDocument(); | ||||
|   }); | ||||
|   it('renders string with ANSI codes with correctly converted css classnames', () => { | ||||
|     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(wrapper.find('span').first().prop('style')).toMatchObject( | ||||
|       expect.objectContaining({ | ||||
|         fontWeight: expect.any(String), | ||||
|       }) | ||||
|     ); | ||||
|     expect(screen.queryByTestId('ansiLogLine')).toBeInTheDocument(); | ||||
|     expect(screen.getAllByTestId('ansiLogLine')).toHaveLength(1); | ||||
| 
 | ||||
|     expect(screen.getAllByTestId('ansiLogLine').at(0)).toHaveAttribute('style', expect.stringMatching('font-weight')); | ||||
|   }); | ||||
|   it('renders string with ANSI dim code with appropriate themed color', () => { | ||||
|     const value = 'Lorem \u001B[1;2mIpsum'; | ||||
|     const theme = createTheme(); | ||||
|     const wrapper = shallow(<LogMessageAnsi value={value} theme={theme} />); | ||||
|     render(<LogMessageAnsi value={value} theme={theme} />); | ||||
| 
 | ||||
|     expect(wrapper.find('span')).toHaveLength(1); | ||||
|     expect(wrapper.find('span').first().prop('style')).toMatchObject( | ||||
|       expect.objectContaining({ | ||||
|         color: theme.colors.text.secondary, | ||||
|       }) | ||||
|     ); | ||||
|     expect(screen.queryByTestId('ansiLogLine')).toBeInTheDocument(); | ||||
|     expect(screen.getAllByTestId('ansiLogLine')).toHaveLength(1); | ||||
| 
 | ||||
|     expect(screen.getAllByTestId('ansiLogLine').at(0)).toHaveStyle({ color: theme.colors.text.secondary }); | ||||
|   }); | ||||
| }); | ||||
|  |  | |||
		Loading…
	
		Reference in New Issue