From b36202a5b488b437101fcc326feda39369530fcd Mon Sep 17 00:00:00 2001
From: Luis Parra <16653744+lsprr@users.noreply.github.com>
Date: Tue, 19 Mar 2024 15:13:20 -0400
Subject: [PATCH] test: switch alert tests to react testing library (#1381)

---
 .../__tests__/src/components/Alert/index.js   | 38 -----------
 .../react/src/components/Alert/index.test.tsx | 66 +++++++++++++++++++
 2 files changed, 66 insertions(+), 38 deletions(-)
 delete mode 100644 packages/react/__tests__/src/components/Alert/index.js
 create mode 100644 packages/react/src/components/Alert/index.test.tsx

diff --git a/packages/react/__tests__/src/components/Alert/index.js b/packages/react/__tests__/src/components/Alert/index.js
deleted file mode 100644
index 12e462878..000000000
--- a/packages/react/__tests__/src/components/Alert/index.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import Alert from 'src/components/Alert';
-import axe from '../../../axe';
-
-const defaults = { show: false, heading: { text: 'hi' } };
-
-test('returns null if passed a falsey "show" prop', () => {
-  const alert = mount(<Alert {...defaults}>hello</Alert>);
-  expect(alert.html()).toBe('');
-});
-
-test('shows modal if passed a truthy "show" prop', () => {
-  const alert = mount(
-    <Alert {...defaults} show>
-      hello
-    </Alert>
-  );
-  expect(alert.find('.Alert').exists()).toBe(true);
-});
-
-test('should return no axe violations', async () => {
-  const alert = mount(
-    <Alert show heading="title">
-      Hello!
-    </Alert>
-  );
-  expect(await axe(alert.html())).toHaveNoViolations();
-});
-
-test('should return no axe violations warning variant', async () => {
-  const alert = mount(
-    <Alert show variant="warning" heading="title">
-      Hello!
-    </Alert>
-  );
-  expect(await axe(alert.html())).toHaveNoViolations();
-});
diff --git a/packages/react/src/components/Alert/index.test.tsx b/packages/react/src/components/Alert/index.test.tsx
new file mode 100644
index 000000000..63938a469
--- /dev/null
+++ b/packages/react/src/components/Alert/index.test.tsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import Alert from './';
+import axe from '../../axe';
+
+const defaults = { show: false, heading: <span>Default Alert</span> };
+
+test('should return null when passed a falsey "show" prop', () => {
+  render(<Alert {...defaults}>Test Alert</Alert>);
+
+  expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+});
+
+test('should pass classNames through', () => {
+  render(
+    <Alert {...defaults} show className="baz">
+      Test Alert
+    </Alert>
+  );
+
+  expect(screen.queryByRole('dialog')).toHaveClass('Alert', 'baz');
+});
+
+test('should pass ref prop through', () => {
+  const ref = React.createRef<HTMLDivElement>();
+
+  render(
+    <Alert {...defaults} show dialogRef={ref}>
+      Test Alert
+    </Alert>
+  );
+
+  expect(ref.current).toBeInTheDocument();
+});
+
+test('should show modal when passed a truthy "show" prop', () => {
+  render(
+    <Alert {...defaults} show>
+      Test Alert
+    </Alert>
+  );
+
+  expect(screen.queryByRole('dialog')).toBeInTheDocument();
+});
+
+test('should return no axe violations', async () => {
+  const { container } = render(
+    <Alert {...defaults} show>
+      Hello!
+    </Alert>
+  );
+
+  const results = await axe(container);
+  expect(results).toHaveNoViolations();
+});
+
+test('should return no axe violations warning variant', async () => {
+  const { container } = render(
+    <Alert {...defaults} show variant="warning">
+      Hello!
+    </Alert>
+  );
+
+  const results = await axe(container);
+  expect(results).toHaveNoViolations();
+});