From 2b23e5add6e745d39b8100b56c66b997f98b62b8 Mon Sep 17 00:00:00 2001 From: Jeff Puzzo Date: Fri, 26 May 2023 11:34:03 -0400 Subject: [PATCH] fix(BackgroundImage): Added src URL back, improved unit tests, updated screenshot --- .../BackgroundImage/BackgroundImage.tsx | 25 ++++++++------- .../__tests__/BackgroundImage.test.tsx | 29 +++++++++--------- .../BackgroundImage.test.tsx.snap | 19 ------------ .../__snapshots__/LoginPage.test.tsx.snap | 2 +- .../background-image/react/basic.png | Bin 212372 -> 27827 bytes 5 files changed, 27 insertions(+), 48 deletions(-) delete mode 100644 packages/react-core/src/components/BackgroundImage/__tests__/__snapshots__/BackgroundImage.test.tsx.snap diff --git a/packages/react-core/src/components/BackgroundImage/BackgroundImage.tsx b/packages/react-core/src/components/BackgroundImage/BackgroundImage.tsx index fedd8a298c2..f8303224167 100644 --- a/packages/react-core/src/components/BackgroundImage/BackgroundImage.tsx +++ b/packages/react-core/src/components/BackgroundImage/BackgroundImage.tsx @@ -1,30 +1,29 @@ -import * as React from 'react'; +import React from 'react'; + import { css } from '@patternfly/react-styles'; import styles from '@patternfly/react-styles/css/components/BackgroundImage/background-image'; -// eslint-disable-next-line camelcase -// import c_background_image_BackgroundImage from '@patternfly/react-tokens/dist/esm/c_background_image_BackgroundImage'; -export interface BackgroundImageProps extends Omit, 'src'> { - /** Additional classes added to the background image. */ - className?: string; +export interface BackgroundImageProps extends React.HTMLProps { /** The URL or file path of the image for the background */ src: string; + /** Additional classes added to the background image. */ + className?: string; } export const BackgroundImage: React.FunctionComponent = ({ className, - // src, + src, ...props }: BackgroundImageProps) => (
+ /> ); BackgroundImage.displayName = 'BackgroundImage'; 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 e8ab030a4ea..ddca7b08c6b 100644 --- a/packages/react-core/src/components/BackgroundImage/__tests__/BackgroundImage.test.tsx +++ b/packages/react-core/src/components/BackgroundImage/__tests__/BackgroundImage.test.tsx @@ -1,21 +1,20 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; import { BackgroundImage } from '../BackgroundImage'; -import * as React from 'react'; -import { render } from '@testing-library/react'; -const images = { - lg: '/assets/images/pfbg_1200.jpg', - sm: '/assets/images/pfbg_768.jpg', - sm2x: '/assets/images/pfbg_768@2x.jpg', - xs: '/assets/images/pfbg_576.jpg', - xs2x: '/assets/images/pfbg_576@2x.jpg' -}; +test('has default className and src URL applied to style', () => { + render(); -test('BackgroundImage', () => { - const { asFragment } = render(); - expect(asFragment()).toMatchSnapshot(); + const backgroundImage = screen.getByTestId('test-id'); + const backgroundImageStyle = backgroundImage.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('allows passing in a single string as the image src', () => { - const { asFragment } = render(); - expect(asFragment()).toMatchSnapshot(); +test('has additional className when one is provided', () => { + render(); + + expect(screen.getByTestId('test-id')).toHaveClass('another-class'); }); 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 deleted file mode 100644 index daad9cd19c7..00000000000 --- a/packages/react-core/src/components/BackgroundImage/__tests__/__snapshots__/BackgroundImage.test.tsx.snap +++ /dev/null @@ -1,19 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`BackgroundImage 1`] = ` - -
- -`; - -exports[`allows passing in a single string as the image src 1`] = ` - -
- -`; diff --git a/packages/react-core/src/components/LoginPage/__tests__/__snapshots__/LoginPage.test.tsx.snap b/packages/react-core/src/components/LoginPage/__tests__/__snapshots__/LoginPage.test.tsx.snap index 36fa6013445..8e35e02296c 100644 --- a/packages/react-core/src/components/LoginPage/__tests__/__snapshots__/LoginPage.test.tsx.snap +++ b/packages/react-core/src/components/LoginPage/__tests__/__snapshots__/LoginPage.test.tsx.snap @@ -4,7 +4,7 @@ exports[`check loginpage example against snapshot 1`] = `