From 3b0cd8b6f140eb5786cad1abeab051e7e1203bea Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Tue, 17 May 2022 11:34:15 +0100
Subject: [PATCH] Convert `NamedColorsPalette` tests to RTL (#49064)

---
 .betterer.results                                  |  3 ---
 .../ColorPicker/NamedColorsPalette.test.tsx        | 14 +++-----------
 2 files changed, 3 insertions(+), 14 deletions(-)

diff --git a/.betterer.results b/.betterer.results
index bbae56b0f53..f22623f5951 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -8,9 +8,6 @@ exports[`no enzyme tests`] = {
     "packages/grafana-ui/src/components/BarGauge/BarGauge.test.tsx:4199795290": [
       [0, 19, 13, "RegExp match", "2409514259"]
     ],
-    "packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.test.tsx:3311646309": [
-      [0, 31, 13, "RegExp match", "2409514259"]
-    ],
     "packages/grafana-ui/src/components/FormField/FormField.test.tsx:3429087660": [
       [0, 19, 13, "RegExp match", "2409514259"]
     ],
diff --git a/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.test.tsx b/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.test.tsx
index 21409e560bb..51809087d90 100644
--- a/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.test.tsx
+++ b/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.test.tsx
@@ -1,9 +1,8 @@
-import { mount, ReactWrapper } from 'enzyme';
+import { screen, render } from '@testing-library/react';
 import React from 'react';
 
 import { createTheme } from '@grafana/data';
 
-import { ColorSwatch } from './ColorSwatch';
 import { NamedColorsPalette } from './NamedColorsPalette';
 
 describe('NamedColorsPalette', () => {
@@ -12,16 +11,9 @@ describe('NamedColorsPalette', () => {
   const selectedShade = greenHue.shades[2];
 
   describe('theme support for named colors', () => {
-    let wrapper: ReactWrapper, selectedSwatch;
-
-    afterEach(() => {
-      wrapper.unmount();
-    });
-
     it('should render provided color variant specific for theme', () => {
-      wrapper = mount(<NamedColorsPalette color={selectedShade.name} onChange={() => {}} />);
-      selectedSwatch = wrapper.find(ColorSwatch).findWhere((node) => node.key() === selectedShade.name);
-      expect(selectedSwatch.prop('color')).toBe(selectedShade.color);
+      render(<NamedColorsPalette color={selectedShade.name} onChange={jest.fn()} />);
+      expect(screen.getByRole('button', { name: `${selectedShade.name} color` })).toBeInTheDocument();
     });
   });
 });