From b9787db68ee34c1b853e3f47304b7561858f0f03 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Thu, 28 Apr 2022 10:30:19 +0100
Subject: [PATCH] Chore: Convert `AbstractList` tests to RTL (#48284)

---
 .betterer.results                             |  3 -
 .../src/components/List/AbstractList.test.tsx | 34 ++-----
 .../__snapshots__/AbstractList.test.tsx.snap  | 93 -------------------
 3 files changed, 8 insertions(+), 122 deletions(-)
 delete mode 100644 packages/grafana-ui/src/components/List/__snapshots__/AbstractList.test.tsx.snap

diff --git a/.betterer.results b/.betterer.results
index 6f20db80f84..eedee48b81e 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -29,9 +29,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/List/AbstractList.test.tsx:2972876749": [
-      [0, 19, 13, "RegExp match", "2409514259"]
-    ],
     "packages/grafana-ui/src/components/Logs/LogLabels.test.tsx:1029448019": [
       [0, 19, 13, "RegExp match", "2409514259"]
     ],
diff --git a/packages/grafana-ui/src/components/List/AbstractList.test.tsx b/packages/grafana-ui/src/components/List/AbstractList.test.tsx
index c1265cf59c9..614887012e8 100644
--- a/packages/grafana-ui/src/components/List/AbstractList.test.tsx
+++ b/packages/grafana-ui/src/components/List/AbstractList.test.tsx
@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import React from 'react';
 
 import { AbstractList } from './AbstractList';
@@ -11,7 +11,7 @@ describe('AbstractList', () => {
       { name: 'Item 3', id: 'item3' },
     ];
 
-    const list = shallow(
+    render(
       <AbstractList
         items={items}
         renderItem={(item) => (
@@ -23,29 +23,11 @@ describe('AbstractList', () => {
       />
     );
 
-    expect(list).toMatchSnapshot();
-  });
-
-  it('allows custom item key', () => {
-    const items = [
-      { name: 'Item 1', id: 'item1' },
-      { name: 'Item 2', id: 'item2' },
-      { name: 'Item 3', id: 'item3' },
-    ];
-
-    const list = shallow(
-      <AbstractList
-        items={items}
-        getItemKey={(item) => item.id}
-        renderItem={(item) => (
-          <div>
-            <h1>{item.name}</h1>
-            <small>{item.id}</small>
-          </div>
-        )}
-      />
-    );
-
-    expect(list).toMatchSnapshot();
+    expect(screen.getByRole('heading', { name: 'Item 1' })).toBeInTheDocument();
+    expect(screen.getByText('item1')).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: 'Item 2' })).toBeInTheDocument();
+    expect(screen.getByText('item2')).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: 'Item 3' })).toBeInTheDocument();
+    expect(screen.getByText('item3')).toBeInTheDocument();
   });
 });
diff --git a/packages/grafana-ui/src/components/List/__snapshots__/AbstractList.test.tsx.snap b/packages/grafana-ui/src/components/List/__snapshots__/AbstractList.test.tsx.snap
deleted file mode 100644
index 2cb4b48d77b..00000000000
--- a/packages/grafana-ui/src/components/List/__snapshots__/AbstractList.test.tsx.snap
+++ /dev/null
@@ -1,93 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`AbstractList allows custom item key 1`] = `
-<ul
-  className="css-1ld8h5b"
->
-  <li
-    className="css-8qpjjf"
-    key="item1"
-  >
-    <div>
-      <h1>
-        Item 1
-      </h1>
-      <small>
-        item1
-      </small>
-    </div>
-  </li>
-  <li
-    className="css-8qpjjf"
-    key="item2"
-  >
-    <div>
-      <h1>
-        Item 2
-      </h1>
-      <small>
-        item2
-      </small>
-    </div>
-  </li>
-  <li
-    className="css-8qpjjf"
-    key="item3"
-  >
-    <div>
-      <h1>
-        Item 3
-      </h1>
-      <small>
-        item3
-      </small>
-    </div>
-  </li>
-</ul>
-`;
-
-exports[`AbstractList renders items using renderItem prop function 1`] = `
-<ul
-  className="css-1ld8h5b"
->
-  <li
-    className="css-8qpjjf"
-    key="0"
-  >
-    <div>
-      <h1>
-        Item 1
-      </h1>
-      <small>
-        item1
-      </small>
-    </div>
-  </li>
-  <li
-    className="css-8qpjjf"
-    key="1"
-  >
-    <div>
-      <h1>
-        Item 2
-      </h1>
-      <small>
-        item2
-      </small>
-    </div>
-  </li>
-  <li
-    className="css-8qpjjf"
-    key="2"
-  >
-    <div>
-      <h1>
-        Item 3
-      </h1>
-      <small>
-        item3
-      </small>
-    </div>
-  </li>
-</ul>
-`;