Chore: Replace enzyme with RTL (#45434)

.betterer.results

@@ -11,9 +11,6 @@ exports[`no enzyme tests`] = {
     "packages/grafana-ui/src/components/BigValue/BigValue.test.tsx:261212211": [
       [1, 19, 13, "RegExp match", "2409514259"]
     ],
-    "packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.test.tsx:2771878691": [
-      [1, 18, 13, "RegExp match", "2409514259"]
-    ],
     "packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.test.tsx:1355456933": [
       [1, 31, 13, "RegExp match", "2409514259"]
     ],

packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.test.tsx

@@ -1,33 +1,39 @@
 import React from 'react';
-import { render } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import { CallToActionCard } from './CallToActionCard';
+import { expect } from '../../../../../public/test/lib/common';
 
 describe('CallToActionCard', () => {
   describe('rendering', () => {
-    it('when no message and footer provided', () => {
-      const tree = render(<CallToActionCard callToActionElement={<a href="http://dummy.link">Click me</a>} />);
-      expect(tree).toMatchSnapshot();
+    it('should render callToActionElement', () => {
+      render(<CallToActionCard callToActionElement={<a href="http://dummy.link">Click me</a>} />);
+      expect(screen.getByRole('link', { name: 'Click me' })).toBeInTheDocument();
     });
 
-    it('when message and no footer provided', () => {
-      const tree = render(
-        <CallToActionCard
-          message="Click button bellow"
-          callToActionElement={<a href="http://dummy.link">Click me</a>}
-        />
+    it('should render message when provided', () => {
+      render(
+        <CallToActionCard message="Click button below" callToActionElement={<a href="http://dummy.link">Click me</a>} />
+      );
+      expect(screen.getByText('Click button below')).toBeInTheDocument();
+    });
+
+    it('should render footer when provided', () => {
+      render(
+        <CallToActionCard footer="footer content" callToActionElement={<a href="http://dummy.link">Click me</a>} />
       );
-      expect(tree).toMatchSnapshot();
+      expect(screen.getByText('footer content')).toBeInTheDocument();
     });
 
-    it('when message and footer provided', () => {
-      const tree = render(
+    it('should render both message and footer when provided', () => {
+      render(
         <CallToActionCard
-          message="Click button bellow"
+          message="Click button below"
           footer="footer content"
           callToActionElement={<a href="http://dummy.link">Click me</a>}
         />
       );
-      expect(tree).toMatchSnapshot();
+      expect(screen.getByText('Click button below')).toBeInTheDocument();
+      expect(screen.getByText('footer content')).toBeInTheDocument();
     });
   });
 });

packages/grafana-ui/src/components/CallToActionCard/__snapshots__/CallToActionCard.test.tsx.snap

@@ -1,52 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CallToActionCard rendering when message and footer provided 1`] = `
-<div
-  class="css-xtd6ws-call-to-action-card"
->
-  <div
-    class="css-m2iibx"
-  >
-    Click button bellow
-  </div>
-  <a
-    href="http://dummy.link"
-  >
-    Click me
-  </a>
-  <div
-    class="css-11lqfaj"
-  >
-    footer content
-  </div>
-</div>
-`;
-
-exports[`CallToActionCard rendering when message and no footer provided 1`] = `
-<div
-  class="css-xtd6ws-call-to-action-card"
->
-  <div
-    class="css-m2iibx"
-  >
-    Click button bellow
-  </div>
-  <a
-    href="http://dummy.link"
-  >
-    Click me
-  </a>
-</div>
-`;
-
-exports[`CallToActionCard rendering when no message and footer provided 1`] = `
-<div
-  class="css-xtd6ws-call-to-action-card"
->
-  <a
-    href="http://dummy.link"
-  >
-    Click me
-  </a>
-</div>
-`;