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

.betterer.results

@@ -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"]
     ],

packages/grafana-ui/src/components/Logs/LogRows.test.tsx

@@ -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(screen.queryAllByRole('row')).toHaveLength(3);
-    expect(wrapper.contains('log message 1')).toBeTruthy();
+    expect(screen.queryAllByRole('row').at(0)).toHaveTextContent('log message 1');
-    expect(wrapper.contains('log message 2')).toBeTruthy();
+    expect(screen.queryAllByRole('row').at(1)).toHaveTextContent('log message 2');
-    expect(wrapper.contains('log message 3')).toBeTruthy();
+    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);
+    // There is an extra row with the rows that are rendering
-    expect(wrapper.contains('log message 1')).toBeTruthy();
+    expect(screen.queryAllByRole('row')).toHaveLength(2);
-    jest.runAllTimers();
+    expect(screen.queryAllByRole('row').at(0)).toHaveTextContent('log message 1');
-    wrapper.update();
 
-    expect(wrapper.find(LogRow).length).toBe(3);
+    jest.runAllTimers();
-    expect(wrapper.contains('log message 1')).toBeTruthy();
+    rerender(
-    expect(wrapper.contains('log message 2')).toBeTruthy();
+      <LogRows
-    expect(wrapper.contains('log message 3')).toBeTruthy();
+        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(screen.queryAllByRole('row')).toHaveLength(2);
-    expect(wrapper.find(LogRow).length).toBe(2);
+    expect(screen.queryAllByRole('row').at(0)).toHaveTextContent('log message 4');
-    expect(wrapper.contains('log message 4')).toBeTruthy();
+    expect(screen.queryAllByRole('row').at(1)).toHaveTextContent('log message 5');
-    expect(wrapper.contains('log message 5')).toBeTruthy();
   });
 
   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(screen.queryAllByRole('row').at(0)).toHaveTextContent('log message 1');
-    expect(wrapper.find(LogRow).at(1).text()).toBe('log message 2');
+    expect(screen.queryAllByRole('row').at(1)).toHaveTextContent('log message 2');
-    expect(wrapper.find(LogRow).at(2).text()).toBe('log message 3');
+    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(screen.queryAllByRole('row').at(0)).toHaveTextContent('log message 3');
-    expect(wrapper.find(LogRow).at(1).text()).toBe('log message 2');
+    expect(screen.queryAllByRole('row').at(1)).toHaveTextContent('log message 2');
-    expect(wrapper.find(LogRow).at(2).text()).toBe('log message 1');
+    expect(screen.queryAllByRole('row').at(2)).toHaveTextContent('log message 1');
   });
 });