From 6482d2db2e75ccbdd3d98f135e688a58b3a0403d Mon Sep 17 00:00:00 2001 From: Samuel Atefah Date: Tue, 4 Oct 2022 23:07:56 -0400 Subject: [PATCH 1/4] chore(Banner): update tests to new react testing library standards --- .../Banner/__tests__/Banner.test.tsx | 101 ++++++++++++++---- .../__snapshots__/Banner.test.tsx.snap | 85 +-------------- 2 files changed, 80 insertions(+), 106 deletions(-) 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..12c51904d3e 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,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( - - {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 screenReaderText as "default banner" by default', () => { + render(Test); + expect(screen.getByText('Test').lastChild).toHaveTextContent(/^default banner$/); +}); + +test('Renders custom screenReaderText passed via prop', () => { + render(Test); + expect(screen.getByText('Test').lastChild).toHaveTextContent(/^Custom screen reader text$/); +}); + +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 - -
- -`; From 92870ffe380a74aba463a0d8145bbf4866326563 Mon Sep 17 00:00:00 2001 From: Samuel Atefah Date: Wed, 5 Oct 2022 16:22:12 -0400 Subject: [PATCH 2/4] add additional test to test screenReaderText --- .../src/components/Banner/__tests__/Banner.test.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) 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 12c51904d3e..afd16b6a3b4 100644 --- a/packages/react-core/src/components/Banner/__tests__/Banner.test.tsx +++ b/packages/react-core/src/components/Banner/__tests__/Banner.test.tsx @@ -53,12 +53,17 @@ test('Renders with class name pf-m-info when "info" is passed to variant prop', test('Renders screenReaderText as "default banner" by default', () => { render(Test); - expect(screen.getByText('Test').lastChild).toHaveTextContent(/^default banner$/); + expect(screen.getByText('default banner')).toHaveTextContent(/^default banner$/); +}); + +test('Renders screenReaderText as "success banner" when variant="success"', () => { + render(Test); + expect(screen.getByText('success banner')).toHaveTextContent(/^success banner$/); }); test('Renders custom screenReaderText passed via prop', () => { render(Test); - expect(screen.getByText('Test').lastChild).toHaveTextContent(/^Custom screen reader text$/); + expect(screen.getByText('Custom screen reader text')).toHaveTextContent(/^Custom screen reader text$/); }); test('Renders without pf-m-sticky by default', () => { From 92ed5c90a448c3c5282624bff012b33674f3f229 Mon Sep 17 00:00:00 2001 From: Samuel Atefah Date: Wed, 5 Oct 2022 18:10:38 -0400 Subject: [PATCH 3/4] replace toHaveTextContent with toBeInTheDocument matcher --- .../src/components/Banner/__tests__/Banner.test.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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 afd16b6a3b4..a4895bbfb74 100644 --- a/packages/react-core/src/components/Banner/__tests__/Banner.test.tsx +++ b/packages/react-core/src/components/Banner/__tests__/Banner.test.tsx @@ -53,17 +53,17 @@ test('Renders with class name pf-m-info when "info" is passed to variant prop', test('Renders screenReaderText as "default banner" by default', () => { render(Test); - expect(screen.getByText('default banner')).toHaveTextContent(/^default banner$/); + expect(screen.getByText('default banner')).toBeInTheDocument(); }); test('Renders screenReaderText as "success banner" when variant="success"', () => { render(Test); - expect(screen.getByText('success banner')).toHaveTextContent(/^success banner$/); + expect(screen.getByText('success banner')).toBeInTheDocument(); }); test('Renders custom screenReaderText passed via prop', () => { render(Test); - expect(screen.getByText('Custom screen reader text')).toHaveTextContent(/^Custom screen reader text$/); + expect(screen.getByText('Custom screen reader text')).toBeInTheDocument(); }); test('Renders without pf-m-sticky by default', () => { From 849fa9fd348e6199148bf130e99a3ff25b931b8b Mon Sep 17 00:00:00 2001 From: Samuel Atefah Date: Wed, 5 Oct 2022 18:12:51 -0400 Subject: [PATCH 4/4] add test to check for pf-u-screen-reader class --- .../src/components/Banner/__tests__/Banner.test.tsx | 5 +++++ 1 file changed, 5 insertions(+) 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 a4895bbfb74..1dc8d86b33e 100644 --- a/packages/react-core/src/components/Banner/__tests__/Banner.test.tsx +++ b/packages/react-core/src/components/Banner/__tests__/Banner.test.tsx @@ -51,6 +51,11 @@ test('Renders with class name pf-m-info when "info" is passed to variant prop', 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();