test(component): refactor Alert component tests

packages/big-design/src/components/Alert/spec.tsx

@@ -1,97 +1,111 @@
 import { theme } from '@bigcommerce/big-design-theme';
+import { screen } from '@testing-library/react';
 import React from 'react';
 import 'jest-styled-components';
 
 import { fireEvent, render } from '@test/utils';
 
 import { Alert } from './Alert';
 
-test('render default (success) Alert', () => {
-  const { container } = render(<Alert messages={[{ text: 'Success' }]} />);
+test('render default (success) Alert', async () => {
+  render(<Alert messages={[{ text: 'Success' }]} />);
 
-  expect(container.firstChild).toMatchSnapshot();
-  expect(container.firstChild).toHaveStyle(`border-left: ${theme.spacing.xxSmall} solid ${theme.colors.success}`);
+  const alert = await screen.findByRole('alert');
+
+  expect(alert).toMatchSnapshot();
+  expect(alert).toHaveStyle(`border-left: ${theme.spacing.xxSmall} solid ${theme.colors.success}`);
 });
 
-test('render error Alert', () => {
-  const { container } = render(<Alert messages={[{ text: 'Error' }]} type="error" />);
+test('render error Alert', async () => {
+  render(<Alert messages={[{ text: 'Error' }]} type="error" />);
+
+  const alert = await screen.findByRole('alert');
 
-  expect(container.firstChild).toMatchSnapshot();
-  expect(container.firstChild).toHaveStyle(`border-left: ${theme.spacing.xxSmall} solid ${theme.colors.danger}`);
+  expect(alert).toMatchSnapshot();
+  expect(alert).toHaveStyle(`border-left: ${theme.spacing.xxSmall} solid ${theme.colors.danger}`);
 });
 
-test('render warning Alert', () => {
-  const { container } = render(<Alert messages={[{ text: 'Warning' }]} type="warning" />);
+test('render warning Alert', async () => {
+  render(<Alert messages={[{ text: 'Warning' }]} type="warning" />);
+
+  const alert = await screen.findByRole('alert');
 
-  expect(container.firstChild).toMatchSnapshot();
-  expect(container.firstChild).toHaveStyle(`border-left: ${theme.spacing.xxSmall} solid ${theme.colors.warning50}`);
+  expect(alert).toMatchSnapshot();
+  expect(alert).toHaveStyle(`border-left: ${theme.spacing.xxSmall} solid ${theme.colors.warning50}`);
 });
 
-test('render info Alert', () => {
-  const { container } = render(<Alert messages={[{ text: 'Info' }]} type="info" />);
+test('render info Alert', async () => {
+  render(<Alert messages={[{ text: 'Info' }]} type="info" />);
 
-  expect(container.firstChild).toMatchSnapshot();
-  expect(container.firstChild).toHaveStyle(`border-left: ${theme.spacing.xxSmall} solid ${theme.colors.primary60}`);
-});
+  const alert = await screen.findByRole('alert');
 
-test('renders with link', () => {
-  const { queryByRole, container } = render(
-    <Alert messages={[{ text: 'Success', link: { text: 'Link', href: '#' } }]} />,
-  );
+  expect(alert).toMatchSnapshot();
+  expect(alert).toHaveStyle(`border-left: ${theme.spacing.xxSmall} solid ${theme.colors.primary60}`);
+});
 
-  expect(container.firstChild).toMatchSnapshot();
+test('renders with link', async () => {
+  render(<Alert messages={[{ text: 'Success', link: { text: 'Link', href: '#' } }]} />);
 
-  const link = queryByRole('link') as HTMLAnchorElement;
+  const alert = await screen.findByRole('alert');
+  const link = await screen.findByRole<HTMLAnchorElement>('link');
 
+  expect(alert).toMatchSnapshot();
   expect(link).toBeInTheDocument();
   expect(link.href).toBe('http://localhost/#');
 });
 
-test('renders with external link', () => {
-  const { queryByRole, container } = render(
+test('renders with external link', async () => {
+  render(
     <Alert messages={[{ text: 'Success', link: { text: 'Link', href: '#', external: true, target: '_blank' } }]} />,
   );
 
-  expect(container.firstChild).toMatchSnapshot();
-
-  const link = queryByRole('link') as HTMLAnchorElement;
+  const alert = await screen.findByRole('alert');
+  const link = screen.getByRole('link') as HTMLAnchorElement;
 
+  expect(alert).toMatchSnapshot();
   expect(link).toBeInTheDocument();
   expect(link.href).toBe('http://localhost/#');
   expect(link.target).toBe('_blank');
   expect(link.querySelector('svg')).not.toBeUndefined();
 });
 
-test('renders header', () => {
-  const { queryByText, container } = render(<Alert header="Header" messages={[{ text: 'Success' }]} />);
+test('renders header', async () => {
+  render(<Alert header="Header" messages={[{ text: 'Success' }]} />);
 
-  expect(container.firstChild).toMatchSnapshot();
-  expect(queryByText('Header')).not.toBeUndefined();
+  const alert = await screen.findByRole('alert');
+  const heading = screen.getByRole('heading', { name: /header/i });
+
+  expect(alert).toMatchSnapshot();
+  expect(heading).not.toBeUndefined();
 });
 
-test('renders close button', () => {
-  const { queryByRole, container } = render(<Alert onClose={() => null} messages={[{ text: 'Success' }]} />);
+test('renders close button', async () => {
+  render(<Alert onClose={() => null} messages={[{ text: 'Success' }]} />);
+
+  const alert = await screen.findByRole('alert');
+  const button = screen.getByRole('button');
 
-  expect(container.firstChild).toMatchSnapshot();
-  expect(queryByRole('button')).not.toBeUndefined();
+  expect(alert).toMatchSnapshot();
+  expect(button).not.toBeUndefined();
 });
 
-test('trigger onClose', () => {
+test('trigger onClose', async () => {
   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);
 
   expect(fn).toHaveBeenCalled();
 });
 
-test('does not forward styles', () => {
+test('does not forward styles', async () => {
   const { container } = render(
     <Alert messages={[{ text: 'Success' }]} className="test" style={{ background: 'red' }} />,
   );
+  const alert = await screen.findByRole('alert');
 
-  expect(container.getElementsByClassName('test').length).toBe(0);
-  expect(container.firstChild).not.toHaveStyle('background: red');
+  expect(container.getElementsByClassName('test')).toHaveLength(0);
+  expect(alert).not.toHaveStyle('background: red');
 });