From 44959424ab770dd9763ba9e44cd537b44e7543c3 Mon Sep 17 00:00:00 2001
From: Luis Parra <16653744+lsprr@users.noreply.github.com>
Date: Wed, 28 Feb 2024 17:01:18 -0500
Subject: [PATCH] test: switch progress bar tests to react testing library
 (#1366)

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

diff --git a/packages/react/__tests__/src/components/ProgressBar/index.js b/packages/react/__tests__/src/components/ProgressBar/index.js
deleted file mode 100644
index 17a1b04b5..000000000
--- a/packages/react/__tests__/src/components/ProgressBar/index.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import ProgressBar from 'src/components/ProgressBar';
-import axe from '../../../axe';
-
-test('should set correct props for progress bar', () => {
-  const wrapper = mount(<ProgressBar aria-label="progress" progress={75} />);
-  const progressBar = wrapper.find('.ProgressBar');
-  expect(progressBar.prop('role')).toEqual('progressbar');
-  expect(progressBar.prop('aria-valuemin')).toEqual(0);
-  expect(progressBar.prop('aria-valuemax')).toEqual(100);
-  expect(progressBar.prop('aria-valuenow')).toEqual(75);
-  expect(progressBar.prop('aria-label')).toEqual('progress');
-});
-
-test('should set default progress bar progress', () => {
-  const wrapper = mount(<ProgressBar aria-label="progress" progress={75} />);
-  const progressBar = wrapper.find('.ProgressBar--fill');
-  expect(progressBar.prop('style').width).toEqual('75%');
-});
-
-test('should set custom progress bar progress', () => {
-  const wrapper = mount(
-    <ProgressBar
-      aria-label="progress"
-      progressMin={0}
-      progressMax={25}
-      progress={5}
-    />
-  );
-  const progressBar = wrapper.find('.ProgressBar--fill');
-  expect(progressBar.prop('style').width).toEqual('20%');
-});
-
-test('should return no axe violations', async () => {
-  const progressBar = mount(
-    <ProgressBar aria-label="progress" progress={75} />
-  );
-  expect(await axe(progressBar.html())).toHaveNoViolations();
-});
diff --git a/packages/react/src/components/ProgressBar/index.test.tsx b/packages/react/src/components/ProgressBar/index.test.tsx
new file mode 100644
index 000000000..6eda428ae
--- /dev/null
+++ b/packages/react/src/components/ProgressBar/index.test.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import ProgressBar from './';
+import axe from '../../axe';
+
+test('should set correct props for progress bar', () => {
+  render(<ProgressBar aria-label="progress" progress={75} />);
+  const progressBar = screen.getByRole('progressbar');
+  expect(progressBar).toBeInTheDocument();
+  expect(progressBar).toHaveAttribute('aria-valuemin', '0');
+  expect(progressBar).toHaveAttribute('aria-valuemax', '100');
+  expect(progressBar).toHaveAttribute('aria-valuenow', '75');
+  expect(progressBar).toHaveAttribute('aria-label', 'progress');
+});
+
+test('should set default progress bar progress', () => {
+  render(<ProgressBar aria-label="progress" progress={75} />);
+  const progressBar = screen.getByRole('progressbar');
+  const progressBarFill = progressBar.querySelector('.ProgressBar--fill');
+  expect(progressBarFill).toHaveStyle({ width: '75%' });
+});
+
+test('should set custom progress bar progress', () => {
+  render(
+    <ProgressBar
+      aria-label="progress"
+      progressMin={0}
+      progressMax={25}
+      progress={5}
+    />
+  );
+  const progressBar = screen.getByRole('progressbar');
+  const progressBarFill = progressBar.querySelector('.ProgressBar--fill');
+  expect(progressBarFill).toHaveStyle({ width: '20%' });
+});
+
+test('should return no axe violations', async () => {
+  render(<ProgressBar aria-label="progress" progress={75} />);
+  const results = await axe(screen.getByRole('progressbar'));
+  expect(results).toHaveNoViolations();
+});