diff --git a/packages/react-core/src/components/Banner/__tests__/Banner.test.tsx b/packages/react-core/src/components/Banner/__tests__/Banner.test.tsx index 1a7f8c64a7d..1dc8d86b33e 100644 --- a/packages/react-core/src/components/Banner/__tests__/Banner.test.tsx +++ b/packages/react-core/src/components/Banner/__tests__/Banner.test.tsx @@ -1,27 +1,92 @@ +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( - - {variant} Banner - - ); - expect(asFragment()).toMatchSnapshot(); - }); -}); - -test(`sticky banner`, () => { - const { asFragment } = render( - - Sticky Banner - + +test('Renders without children', () => { + render( +
+ +
); + expect(screen.getByTestId('banner').firstChild).toBeVisible(); +}); + +test('Renders children', () => { + render(Test); + expect(screen.getByText('Test')).toBeVisible(); +}); + +test('Renders with class name pf-c-banner', () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass('pf-c-banner'); +}); + +test('Renders with custom class name when className prop is provided', () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass('custom-class'); +}); + +test('Renders without any modifier class when variant prop is not passed', () => { + render(Test); + 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(Test); + expect(screen.getByText('Test')).toHaveClass('pf-m-success'); +}); + +test('Renders with class name pf-m-danger when "danger" is passed to variant prop', () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass('pf-m-danger'); +}); + +test('Renders with class name pf-m-warning when "warning" is passed to variant prop', () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass('pf-m-warning'); +}); + +test('Renders with class name pf-m-info when "info" is passed to variant prop', () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass('pf-m-info'); +}); + +test('Renders pf-u-screen-reader class by default for screenReaderText', () => { + render(Test); + expect(screen.getByText('default banner')).toHaveClass('pf-u-screen-reader', { exact: true }); +}); + +test('Renders screenReaderText as "default banner" by default', () => { + render(Test); + expect(screen.getByText('default banner')).toBeInTheDocument(); +}); + +test('Renders screenReaderText as "success banner" when variant="success"', () => { + render(Test); + expect(screen.getByText('success banner')).toBeInTheDocument(); +}); + +test('Renders custom screenReaderText passed via prop', () => { + render(Test); + expect(screen.getByText('Custom screen reader text')).toBeInTheDocument(); +}); + +test('Renders without pf-m-sticky by default', () => { + render(Test); + expect(screen.getByText('Test')).not.toHaveClass('pf-m-sticky'); +}); + +test('Renders with class name pf-m-sticky when isSticky prop is passed', () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass('pf-m-sticky'); +}); + +test('Renders with inherited element props spread to the component', () => { + render(Test); + expect(screen.getByText('Test')).toHaveAccessibleName('Test label'); +}); + +test('Matches the snapshot', () => { + const { asFragment } = render(Test); expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-core/src/components/Banner/__tests__/__snapshots__/Banner.test.tsx.snap b/packages/react-core/src/components/Banner/__tests__/__snapshots__/Banner.test.tsx.snap index b55f80bace6..1d6551bd157 100644 --- a/packages/react-core/src/components/Banner/__tests__/__snapshots__/Banner.test.tsx.snap +++ b/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`] = `
- danger Banner - - danger banner - -
-
-`; - -exports[`default banner 1`] = ` - -
- default Banner - - default banner - -
-
-`; - -exports[`info banner 1`] = ` - -
- info Banner - - info banner - -
-
-`; - -exports[`sticky banner 1`] = ` - -
- Sticky Banner + Test @@ -63,35 +14,3 @@ exports[`sticky banner 1`] = `
`; - -exports[`success banner 1`] = ` - -
- success Banner - - success banner - -
-
-`; - -exports[`warning banner 1`] = ` - -
- warning Banner - - warning banner - -
-
-`;