From ab91af202cf4b83e15d2a8b5c356abff2bcce513 Mon Sep 17 00:00:00 2001
From: Chrysa Dikonimaki <xrdikonimaki@hotmail.com>
Date: Thu, 12 May 2022 22:11:35 +0200
Subject: [PATCH] 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
---
 .betterer.results                             |  3 --
 .../components/Logs/LogMessageAnsi.test.tsx   | 47 +++++++++----------
 2 files changed, 21 insertions(+), 29 deletions(-)

diff --git a/.betterer.results b/.betterer.results
index dabdf567604..e7c5b4af315 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -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"]
     ],
diff --git a/packages/grafana-ui/src/components/Logs/LogMessageAnsi.test.tsx b/packages/grafana-ui/src/components/Logs/LogMessageAnsi.test.tsx
index 8bafbb9725a..cfc197459b6 100644
--- a/packages/grafana-ui/src/components/Logs/LogMessageAnsi.test.tsx
+++ b/packages/grafana-ui/src/components/Logs/LogMessageAnsi.test.tsx
@@ -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 });
   });
 });