fix(BackgroundImage): Added src URL back, improved unit tests, updated screenshot

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<React.HTMLProps<HTMLDivElement>, 'src'> {
-  /** Additional classes added to the background image. */
-  className?: string;
+export interface BackgroundImageProps extends React.HTMLProps<HTMLDivElement> {
   /** 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<BackgroundImageProps> = ({
   className,
-  // src,
+  src,
   ...props
 }: BackgroundImageProps) => (
   <div
     className={css(styles.backgroundImage, className)}
-    /* eslint-disable camelcase */
-    style={{
-      // [c_background_image_BackgroundImage.name as string]: `url(${src})`
-    }}
-    /* eslint-enable camelcase */
+    style={
+      {
+        '--pf-v5-c-background-image--BackgroundImage': `url(${src})`
+      } as React.CSSProperties
+    }
     {...props}
-  ></div>
+  />
 );
 
 BackgroundImage.displayName = 'BackgroundImage';

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(<BackgroundImage src="/image/url.png" data-testid="test-id" />);
 
-test('BackgroundImage', () => {
-  const { asFragment } = render(<BackgroundImage src={images} />);
-  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(<BackgroundImage src={images.lg} />);
-  expect(asFragment()).toMatchSnapshot();
+test('has additional className when one is provided', () => {
+  render(<BackgroundImage src="/image/url.png" className="another-class" data-testid="test-id" />);
+
+  expect(screen.getByTestId('test-id')).toHaveClass('another-class');
 });

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

@@ -4,7 +4,7 @@ exports[`check loginpage example against snapshot 1`] = `
 <DocumentFragment>
   <div
     class="pf-v5-c-background-image"
-    src="Background src"
+    style="--pf-v5-c-background-image--BackgroundImage: url(Background src);"
   />
   <div
     class="pf-v5-c-login"