From 8a8cdae612230010fdfdf29d31104f09a8a45764 Mon Sep 17 00:00:00 2001
From: lsprr <16653744+lsprr@users.noreply.github.com>
Date: Wed, 24 Apr 2024 18:19:01 -0400
Subject: [PATCH] test: switch toast's utils tests to react testing library

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

diff --git a/packages/react/__tests__/src/components/Toast/utils.js b/packages/react/__tests__/src/components/Toast/utils.js
deleted file mode 100644
index 5af6d0b8f..000000000
--- a/packages/react/__tests__/src/components/Toast/utils.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import { tabIndexHandler } from 'src/components/Toast/utils';
-
-let div, toast, targets;
-const { document } = window;
-
-beforeEach(() => {
-  div = document.createElement('div');
-  div.innerHTML = `
-    <div class="toaster"></div>
-    <div class="zero" tabindex="0"></div>
-    <div class="minus-one" tabindex="-1"></div>
-  `;
-
-  document.body.appendChild(div);
-  toast = div.querySelector('.toaster');
-  targets = Array.from(div.querySelectorAll('.zero, .minus-one'));
-});
-
-afterEach(() => (document.body.innerHTML = ''));
-
-test('reset: properly reverts tabIndex', () => {
-  expect.assertions(2);
-
-  // set cached tabindex values
-  targets.forEach(target => {
-    target.setAttribute('data-cached-tabindex', target.tabIndex);
-    target.tabIndex = -1;
-  });
-
-  tabIndexHandler(true, toast);
-
-  expect(targets[0].tabIndex).toBe(0);
-  expect(targets[1].tabIndex).toBe(-1);
-});
-
-test('set: properly sets data-cached-tabindex/tabIndex', () => {
-  tabIndexHandler(false, toast);
-  expect(targets[0].tabIndex).toBe(-1);
-  expect(targets[0].getAttribute('data-cached-tabindex')).toBe('0');
-});
diff --git a/packages/react/src/components/Toast/utils.test.tsx b/packages/react/src/components/Toast/utils.test.tsx
new file mode 100644
index 000000000..48b66e745
--- /dev/null
+++ b/packages/react/src/components/Toast/utils.test.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { tabIndexHandler } from './utils';
+
+let toast: HTMLElement | null;
+let targets: HTMLElement[];
+
+beforeEach(() => {
+  {
+    /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
+  }
+  const { container } = render(
+    <div>
+      <div className="toaster"></div>
+      <div className="zero" tabIndex={0}></div>
+      <div className="minus-one" tabIndex={-1}></div>
+    </div>
+  );
+
+  toast = container.querySelector('.toaster');
+  targets = Array.from(container.querySelectorAll('.zero, .minus-one'));
+});
+
+afterEach(() => {
+  toast = null;
+  targets = [];
+});
+
+test('should properly reset tabIndex', () => {
+  targets.forEach((target) => {
+    target.setAttribute('data-cached-tabindex', target.tabIndex.toString());
+    target.tabIndex = -1;
+  });
+
+  if (toast) {
+    tabIndexHandler(true, toast);
+  }
+
+  expect(targets[0].tabIndex).toBe(0);
+  expect(targets[1].tabIndex).toBe(-1);
+});
+
+test('should properly set data-cached-tabindex / tabIndex', () => {
+  if (toast) {
+    tabIndexHandler(false, toast);
+  }
+  expect(targets[0].tabIndex).toBe(-1);
+  expect(targets[0].getAttribute('data-cached-tabindex')).toBe('0');
+});