From ce3c5cb73ae625c5799b4140a0b60c99cff2682a Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Mon, 11 Sep 2023 13:38:01 -0400 Subject: [PATCH 1/4] chore(BackgroundImage): update tests --- .../__tests__/BackgroundImage.test.tsx | 18 +++++++++++++----- .../BackgroundImage.test.tsx.snap | 11 +++++++++++ 2 files changed, 24 insertions(+), 5 deletions(-) create mode 100644 packages/react-core/src/components/BackgroundImage/__tests__/__snapshots__/BackgroundImage.test.tsx.snap diff --git a/packages/react-core/src/components/BackgroundImage/__tests__/BackgroundImage.test.tsx b/packages/react-core/src/components/BackgroundImage/__tests__/BackgroundImage.test.tsx index ddca7b08c6b..137e25cb9d7 100644 --- a/packages/react-core/src/components/BackgroundImage/__tests__/BackgroundImage.test.tsx +++ b/packages/react-core/src/components/BackgroundImage/__tests__/BackgroundImage.test.tsx @@ -2,19 +2,27 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; import { BackgroundImage } from '../BackgroundImage'; -test('has default className and src URL applied to style', () => { +test('renders with default className pf-v5-c-background-image', () => { + render(); + expect(screen.getByTestId('test-id')).toHaveClass('pf-v5-c-background-image', { exact: true }); +}); + +test('has src URL applied to style', () => { render(); - const backgroundImage = screen.getByTestId('test-id'); - const backgroundImageStyle = backgroundImage.getAttribute('style'); + const backgroundImageStyle = screen.getByTestId('test-id').getAttribute('style'); - expect(backgroundImage).toHaveClass('pf-v5-c-background-image'); expect(backgroundImageStyle).toContain('--pf-v5-c-background-image--BackgroundImage'); expect(backgroundImageStyle).toContain('/image/url.png'); }); -test('has additional className when one is provided', () => { +test('renders with custom className when one is provided', () => { render(); expect(screen.getByTestId('test-id')).toHaveClass('another-class'); }); + +test('Matches the snapshot', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); +}); diff --git a/packages/react-core/src/components/BackgroundImage/__tests__/__snapshots__/BackgroundImage.test.tsx.snap b/packages/react-core/src/components/BackgroundImage/__tests__/__snapshots__/BackgroundImage.test.tsx.snap new file mode 100644 index 00000000000..4fba894cd6b --- /dev/null +++ b/packages/react-core/src/components/BackgroundImage/__tests__/__snapshots__/BackgroundImage.test.tsx.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Matches the snapshot 1`] = ` + +
+ +`; From cd7b3db73b6664080e75d90038d177a424b4c3cd Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Thu, 14 Sep 2023 10:44:07 -0400 Subject: [PATCH 2/4] add spread prop test, update test --- .../__tests__/BackgroundImage.test.tsx | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/packages/react-core/src/components/BackgroundImage/__tests__/BackgroundImage.test.tsx b/packages/react-core/src/components/BackgroundImage/__tests__/BackgroundImage.test.tsx index 137e25cb9d7..c325cb310fa 100644 --- a/packages/react-core/src/components/BackgroundImage/__tests__/BackgroundImage.test.tsx +++ b/packages/react-core/src/components/BackgroundImage/__tests__/BackgroundImage.test.tsx @@ -7,13 +7,18 @@ test('renders with default className pf-v5-c-background-image', () => { expect(screen.getByTestId('test-id')).toHaveClass('pf-v5-c-background-image', { exact: true }); }); +test('spreads additional props', () => { + render(); + expect(screen.getByTestId('test-id')).toHaveProperty('lang'); +}); + test('has src URL applied to style', () => { render(); - const backgroundImageStyle = screen.getByTestId('test-id').getAttribute('style'); - - expect(backgroundImageStyle).toContain('--pf-v5-c-background-image--BackgroundImage'); - expect(backgroundImageStyle).toContain('/image/url.png'); + expect(screen.getByTestId('test-id')).toHaveAttribute( + 'style', + '--pf-v5-c-background-image--BackgroundImage: url(/image/url.png);' + ); }); test('renders with custom className when one is provided', () => { From e5e32783b7da7dab5f7335f72c376c2185ffbf27 Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Thu, 21 Sep 2023 10:37:02 -0400 Subject: [PATCH 3/4] use styles obj --- .../BackgroundImage/__tests__/BackgroundImage.test.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/react-core/src/components/BackgroundImage/__tests__/BackgroundImage.test.tsx b/packages/react-core/src/components/BackgroundImage/__tests__/BackgroundImage.test.tsx index c325cb310fa..5f098418bbb 100644 --- a/packages/react-core/src/components/BackgroundImage/__tests__/BackgroundImage.test.tsx +++ b/packages/react-core/src/components/BackgroundImage/__tests__/BackgroundImage.test.tsx @@ -1,10 +1,11 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; import { BackgroundImage } from '../BackgroundImage'; +import styles from '@patternfly/react-styles/css/components/BackgroundImage/background-image'; test('renders with default className pf-v5-c-background-image', () => { render(); - expect(screen.getByTestId('test-id')).toHaveClass('pf-v5-c-background-image', { exact: true }); + expect(screen.getByTestId('test-id')).toHaveClass(styles.backgroundImage, { exact: true }); }); test('spreads additional props', () => { From 4b176d2d7fec8c9438b2749867145ce12e247030 Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Thu, 21 Sep 2023 11:59:02 -0400 Subject: [PATCH 4/4] update test name to use styles --- .../BackgroundImage/__tests__/BackgroundImage.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-core/src/components/BackgroundImage/__tests__/BackgroundImage.test.tsx b/packages/react-core/src/components/BackgroundImage/__tests__/BackgroundImage.test.tsx index 5f098418bbb..5bed2e3e323 100644 --- a/packages/react-core/src/components/BackgroundImage/__tests__/BackgroundImage.test.tsx +++ b/packages/react-core/src/components/BackgroundImage/__tests__/BackgroundImage.test.tsx @@ -3,7 +3,7 @@ import { render, screen } from '@testing-library/react'; import { BackgroundImage } from '../BackgroundImage'; import styles from '@patternfly/react-styles/css/components/BackgroundImage/background-image'; -test('renders with default className pf-v5-c-background-image', () => { +test(`renders with default className ${styles.backgroundImage}`, () => { render(); expect(screen.getByTestId('test-id')).toHaveClass(styles.backgroundImage, { exact: true }); });