chore(Banner): update tests to new react testing library standards

Author: Samuel Atefah

packages/react-core/src/components/Banner/__tests__/Banner.test.tsx

@@ -1,27 +1,82 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
 import { Banner } from '../Banner';
-import React from 'react';
-import { render } from '@testing-library/react';
-
-['default', 'info', 'success', 'warning', 'danger'].forEach((variant: string) => {
-  test(`${variant} banner`, () => {
-    const { asFragment } = render(
-      <Banner
-        variant={variant as 'default' | 'info' | 'success' | 'warning' | 'danger'}
-        aria-label={variant}
-        screenReaderText={`${variant} banner`}
-      >
-        {variant} Banner
-      </Banner>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-});
-
-test(`sticky banner`, () => {
-  const { asFragment } = render(
-    <Banner aria-label="sticky" isSticky>
-      Sticky Banner
-    </Banner>
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="banner">
+      <Banner />
+    </div>
   );
+  expect(screen.getByTestId('banner').firstChild).toBeVisible();
+});
+
+test('Renders children', () => {
+  render(<Banner>Test</Banner>);
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders with class name pf-c-banner', () => {
+  render(<Banner>Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-c-banner');
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+  render(<Banner className="custom-class">Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('custom-class');
+});
+
+test('Renders without any modifier class when variant prop is not passed', () => {
+  render(<Banner>Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-c-banner', { exact: true });
+});
+
+test('Renders with class name pf-m-success when "success" is passed to variant prop', () => {
+  render(<Banner variant="success">Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-success');
+});
+
+test('Renders with class name pf-m-danger when "danger" is passed to variant prop', () => {
+  render(<Banner variant="danger">Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-danger');
+});
+
+test('Renders with class name pf-m-warning when "warning" is passed to variant prop', () => {
+  render(<Banner variant="warning">Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-warning');
+});
+
+test('Renders with class name pf-m-info when "info" is passed to variant prop', () => {
+  render(<Banner variant="info">Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-info');
+});
+
+test('Renders screenReaderText as "default banner" by default', () => {
+  render(<Banner>Test</Banner>);
+  expect(screen.getByText('Test').lastChild).toHaveTextContent(/^default banner$/);
+});
+
+test('Renders custom screenReaderText passed via prop', () => {
+  render(<Banner screenReaderText="Custom screen reader text">Test</Banner>);
+  expect(screen.getByText('Test').lastChild).toHaveTextContent(/^Custom screen reader text$/);
+});
+
+test('Renders without pf-m-sticky by default', () => {
+  render(<Banner>Test</Banner>);
+  expect(screen.getByText('Test')).not.toHaveClass('pf-m-sticky');
+});
+
+test('Renders with class name pf-m-sticky when isSticky prop is passed', () => {
+  render(<Banner isSticky>Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-sticky');
+});
+
+test('Renders with inherited element props spread to the component', () => {
+  render(<Banner aria-label="Test label">Test</Banner>);
+  expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<Banner>Test</Banner>);
   expect(asFragment()).toMatchSnapshot();
 });

packages/react-core/src/components/Banner/__tests__/__snapshots__/Banner.test.tsx.snap

@@ -1,60 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`danger banner 1`] = `
+exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <div
-    aria-label="danger"
-    class="pf-c-banner pf-m-danger"
-  >
-    danger Banner
-    <span
-      class="pf-u-screen-reader"
-    >
-      danger banner
-    </span>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`default banner 1`] = `
-<DocumentFragment>
-  <div
-    aria-label="default"
     class="pf-c-banner"
   >
-    default Banner
-    <span
-      class="pf-u-screen-reader"
-    >
-      default banner
-    </span>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`info banner 1`] = `
-<DocumentFragment>
-  <div
-    aria-label="info"
-    class="pf-c-banner pf-m-info"
-  >
-    info Banner
-    <span
-      class="pf-u-screen-reader"
-    >
-      info banner
-    </span>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`sticky banner 1`] = `
-<DocumentFragment>
-  <div
-    aria-label="sticky"
-    class="pf-c-banner pf-m-sticky"
-  >
-    Sticky Banner
+    Test
     <span
       class="pf-u-screen-reader"
     >
@@ -63,35 +14,3 @@ exports[`sticky banner 1`] = `
   </div>
 </DocumentFragment>
 `;
-
-exports[`success banner 1`] = `
-<DocumentFragment>
-  <div
-    aria-label="success"
-    class="pf-c-banner pf-m-success"
-  >
-    success Banner
-    <span
-      class="pf-u-screen-reader"
-    >
-      success banner
-    </span>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`warning banner 1`] = `
-<DocumentFragment>
-  <div
-    aria-label="warning"
-    class="pf-c-banner pf-m-warning"
-  >
-    warning Banner
-    <span
-      class="pf-u-screen-reader"
-    >
-      warning banner
-    </span>
-  </div>
-</DocumentFragment>
-`;