From 265d337a58e9f2c684e00b0fd8a083af03284941 Mon Sep 17 00:00:00 2001
From: "alex.saiannyi" <alexander.saiannyi@bigcommerce.com>
Date: Fri, 12 Nov 2021 22:15:57 +0200
Subject: [PATCH] test(component): refactor  Alert component tests

---
 .../big-design/src/components/Alert/spec.tsx  | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/big-design/src/components/Alert/spec.tsx b/packages/big-design/src/components/Alert/spec.tsx
index 69039bd7b..68aaddf8c 100644
--- a/packages/big-design/src/components/Alert/spec.tsx
+++ b/packages/big-design/src/components/Alert/spec.tsx
@@ -1,4 +1,5 @@
 import { theme } from '@bigcommerce/big-design-theme';
+import { screen } from '@testing-library/react';
 import React from 'react';
 import 'jest-styled-components';
 
@@ -35,26 +36,24 @@ test('render info Alert', () => {
 });
 
 test('renders with link', () => {
-  const { queryByRole, container } = render(
-    <Alert messages={[{ text: 'Success', link: { text: 'Link', href: '#' } }]} />,
-  );
+  const { container } = render(<Alert messages={[{ text: 'Success', link: { text: 'Link', href: '#' } }]} />);
 
   expect(container.firstChild).toMatchSnapshot();
 
-  const link = queryByRole('link') as HTMLAnchorElement;
+  const link = screen.getByRole('link') as HTMLAnchorElement;
 
   expect(link).toBeInTheDocument();
   expect(link.href).toBe('http://localhost/#');
 });
 
 test('renders with external link', () => {
-  const { queryByRole, container } = render(
+  const { container } = render(
     <Alert messages={[{ text: 'Success', link: { text: 'Link', href: '#', external: true, target: '_blank' } }]} />,
   );
 
   expect(container.firstChild).toMatchSnapshot();
 
-  const link = queryByRole('link') as HTMLAnchorElement;
+  const link = screen.getByRole('link') as HTMLAnchorElement;
 
   expect(link).toBeInTheDocument();
   expect(link.href).toBe('http://localhost/#');
@@ -63,24 +62,24 @@ test('renders with external link', () => {
 });
 
 test('renders header', () => {
-  const { queryByText, container } = render(<Alert header="Header" messages={[{ text: 'Success' }]} />);
+  const { container } = render(<Alert header="Header" messages={[{ text: 'Success' }]} />);
 
   expect(container.firstChild).toMatchSnapshot();
-  expect(queryByText('Header')).not.toBeUndefined();
+  expect(screen.getByRole('heading', { name: /header/i })).not.toBeUndefined();
 });
 
 test('renders close button', () => {
-  const { queryByRole, container } = render(<Alert onClose={() => null} messages={[{ text: 'Success' }]} />);
+  const { container } = render(<Alert onClose={() => null} messages={[{ text: 'Success' }]} />);
 
   expect(container.firstChild).toMatchSnapshot();
-  expect(queryByRole('button')).not.toBeUndefined();
+  expect(screen.getByRole('button')).not.toBeUndefined();
 });
 
 test('trigger onClose', () => {
   const fn = jest.fn();
-  const { queryByRole } = render(<Alert onClose={fn} messages={[{ text: 'Success' }]} />);
+  render(<Alert onClose={fn} messages={[{ text: 'Success' }]} />);
 
-  const button = queryByRole('button') as HTMLButtonElement;
+  const button = screen.getByRole('button') as HTMLButtonElement;
 
   fireEvent.click(button);
 
@@ -91,7 +90,8 @@ test('does not forward styles', () => {
   const { container } = render(
     <Alert messages={[{ text: 'Success' }]} className="test" style={{ background: 'red' }} />,
   );
+  const elem = screen.queryByText('Success');
 
-  expect(container.getElementsByClassName('test').length).toBe(0);
+  expect(elem).not.toHaveClass('test');
   expect(container.firstChild).not.toHaveStyle('background: red');
 });