From c19d8df7b7a8a0cc594472661a2f6da294a56ab4 Mon Sep 17 00:00:00 2001
From: Luis Parra <16653744+lsprr@users.noreply.github.com>
Date: Tue, 30 Apr 2024 16:55:52 -0400
Subject: [PATCH] test: switch top bar tests to react testing library (#1411)

Co-authored-by: Jason <jason@scurker.com>
---
 .../__tests__/src/components/TopBar/TopBar.js | 78 -------------------
 .../src/components/TopBar/topBar.test.tsx     | 78 +++++++++++++++++++
 2 files changed, 78 insertions(+), 78 deletions(-)
 delete mode 100644 packages/react/__tests__/src/components/TopBar/TopBar.js
 create mode 100644 packages/react/src/components/TopBar/topBar.test.tsx

diff --git a/packages/react/__tests__/src/components/TopBar/TopBar.js b/packages/react/__tests__/src/components/TopBar/TopBar.js
deleted file mode 100644
index 9f13fa9dc..000000000
--- a/packages/react/__tests__/src/components/TopBar/TopBar.js
+++ /dev/null
@@ -1,78 +0,0 @@
-import React from 'react';
-import { mount, shallow } from 'enzyme';
-import TopBar from 'src/components/TopBar';
-import MenuBar from 'src/components/MenuBar';
-import { TopBarItem } from 'src/';
-import axe from '../../../axe';
-import { ThemeProvider } from '../../../../lib';
-import sinon from 'sinon';
-
-let observe, disconnect, trigger;
-
-global.MutationObserver = class MutationObserver {
-  constructor(handler) {
-    this.observe = sinon.spy();
-    this.disconnect = sinon.spy();
-    // add a trigger method so we can simulate a mutation
-    this.trigger = handler;
-
-    observe = this.observe;
-    disconnect = this.disconnect;
-    trigger = this.trigger;
-  }
-};
-
-test('renders', () => {
-  expect.assertions(1);
-  expect(
-    shallow(
-      <TopBar>
-        <div />
-      </TopBar>
-    )
-  ).toBeTruthy();
-});
-
-test('supports falsy children', () => {
-  expect.assertions(2);
-  const wrapper = shallow(
-    <TopBar>
-      <div />
-      {false && <div />}
-    </TopBar>
-  );
-  expect(wrapper).toBeTruthy();
-  expect(wrapper.children().length).toBe(1);
-});
-
-test('should return no axe violations with dark theme', async () => {
-  const topbar = mount(
-    <ThemeProvider initialTheme="dark">
-      <TopBar>
-        <div>LOGO</div>
-        <MenuBar>
-          <TopBarItem>1</TopBarItem>
-          <TopBarItem>2</TopBarItem>
-          <TopBarItem>3</TopBarItem>
-        </MenuBar>
-      </TopBar>
-    </ThemeProvider>
-  );
-  expect(await axe(topbar.html())).toHaveNoViolations();
-});
-
-test('should return no axe violations in light mode', async () => {
-  const topbar = mount(
-    <ThemeProvider initialTheme="light">
-      <TopBar>
-        <div>LOGO</div>
-        <MenuBar>
-          <TopBarItem>1</TopBarItem>
-          <TopBarItem>2</TopBarItem>
-          <TopBarItem>3</TopBarItem>
-        </MenuBar>
-      </TopBar>
-    </ThemeProvider>
-  );
-  expect(await axe(topbar.html())).toHaveNoViolations();
-});
diff --git a/packages/react/src/components/TopBar/topBar.test.tsx b/packages/react/src/components/TopBar/topBar.test.tsx
new file mode 100644
index 000000000..a47868dfe
--- /dev/null
+++ b/packages/react/src/components/TopBar/topBar.test.tsx
@@ -0,0 +1,78 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '../../../lib';
+import TopBar, { TopBarItem } from './';
+import MenuBar from '../MenuBar/';
+import axe from '../../axe';
+
+global.MutationObserver = class {
+  observe: jest.Mock;
+  disconnect: jest.Mock;
+  takeRecords: jest.Mock;
+  trigger: unknown;
+
+  constructor(handler: any) {
+    this.observe = jest.fn();
+    this.disconnect = jest.fn();
+    this.takeRecords = jest.fn();
+    this.trigger = handler;
+  }
+};
+
+test('should render without errors', () => {
+  render(
+    <TopBar data-testid="topbar">
+      <h1>Hello</h1>
+    </TopBar>
+  );
+
+  expect(screen.getByTestId('topbar')).toBeInTheDocument();
+  expect(screen.getByRole('heading', { name: 'Hello' })).toBeInTheDocument();
+});
+
+test('should not render falsy children', () => {
+  render(
+    <TopBar>
+      <div data-testid="child" />
+      {false && <div data-testid="child2" />}
+    </TopBar>
+  );
+  expect(screen.getByTestId('child')).toBeInTheDocument();
+  expect(screen.queryByTestId('child2')).toBeNull();
+});
+
+test('returns no axe violations in dark mode', async () => {
+  const { container } = render(
+    <ThemeProvider initialTheme="dark">
+      <TopBar>
+        <div>LOGO</div>
+        <MenuBar>
+          <TopBarItem>1</TopBarItem>
+          <TopBarItem>2</TopBarItem>
+          <TopBarItem>3</TopBarItem>
+        </MenuBar>
+      </TopBar>
+    </ThemeProvider>
+  );
+
+  const results = await axe(container);
+  expect(results).toHaveNoViolations();
+});
+
+test('returns no axe violations in light mode', async () => {
+  const { container } = render(
+    <ThemeProvider initialTheme="light">
+      <TopBar>
+        <div>LOGO</div>
+        <MenuBar>
+          <TopBarItem>1</TopBarItem>
+          <TopBarItem>2</TopBarItem>
+          <TopBarItem>3</TopBarItem>
+        </MenuBar>
+      </TopBar>
+    </ThemeProvider>
+  );
+
+  const results = await axe(container);
+  expect(results).toHaveNoViolations();
+});