diff --git a/packages/react-core/src/components/Brand/__tests__/Brand.test.tsx b/packages/react-core/src/components/Brand/__tests__/Brand.test.tsx
index 08e4fd1051f..7ed327f91db 100644
--- a/packages/react-core/src/components/Brand/__tests__/Brand.test.tsx
+++ b/packages/react-core/src/components/Brand/__tests__/Brand.test.tsx
@@ -3,34 +3,109 @@ import { render, screen } from '@testing-library/react';
import { Brand } from '../Brand';
import '@testing-library/jest-dom';
-describe('Brand', () => {
- test('simple brand', () => {
- const { asFragment } = render();
- expect(asFragment()).toMatchSnapshot();
- });
-
- test('passing children creates picture brand', () => {
- render(
-
- test
-
- );
- expect(screen.getByText('test')).toBeInTheDocument();
- });
-
- test('styles get spread when there are children', () => {
- render(
-
- test width
-
- );
- expect(screen.getByTestId('brand')).toHaveStyle(`color: blue`);
- });
-
- test('styles get spread when there are no children', () => {
- render(
-
- );
- expect(screen.getByAltText('brand no children')).toHaveStyle(`width: 30px`);
- });
+test('simple brand', () => {
+ render();
+ expect(screen.getByAltText('brand')).toBeInTheDocument();
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+ render();
+ expect(screen.getByAltText('brand')).toHaveClass('custom-class');
+});
+
+test('Renders with custom class name when className prop and children are provided', () => {
+ render(
+
+ test
+
+ );
+ expect(screen.getByText('test')?.parentElement).toHaveClass('custom-class');
+});
+
+test('Renders passed children', () => {
+ render(
+
+ test
+
+ );
+ expect(screen.getByText('test')).toBeInTheDocument();
+});
+
+test('Renders as picture when children are present', () => {
+ render(
+
+ test
+
+ );
+ expect(screen.getByText('test')?.parentElement?.tagName).toBe('PICTURE');
+});
+
+test('Renders as img when no children are present', () => {
+ render();
+ expect(screen.getByAltText('brand')?.tagName).toBe('IMG');
+});
+
+test('Has correct src with passed src prop', () => {
+ render();
+ const image = screen.getByRole('img') as HTMLImageElement;
+ expect(image.src).toMatch('test.png');
+});
+
+test('Has correct alt text with passed alt prop', () => {
+ render();
+
+ expect(screen.getByAltText('brand')).toBeTruthy();
+});
+
+test('Has correct src with passed children', () => {
+ render(
+
+ test width
+
+ );
+ const image = screen.getByRole('img') as HTMLImageElement;
+ expect(image.src).toMatch('test.png');
+});
+
+test('Has correct alt text with passed children', () => {
+ render(
+
+ test width
+
+ );
+ expect(screen.getByAltText('brand')).toBeTruthy();
+});
+
+test('styles get spread when there are children', () => {
+ render(
+
+ test width
+
+ );
+ expect(screen.getByTestId('brand')).toHaveStyle(`color: blue`);
+});
+
+test('styles get spread when there are no children', () => {
+ render();
+ expect(screen.getByAltText('brand no children')).toHaveStyle(`width: 30px`);
+});
+
+test('width styles are present when passed', () => {
+ render(
+
+ );
+ expect(screen.getByAltText('brand with widths')).toHaveAttribute(
+ 'style',
+ '--pf-v5-c-brand--Width: 100px; --pf-v5-c-brand--Width-on-sm: 25px; --pf-v5-c-brand--Width-on-md: 50px; --pf-v5-c-brand--Width-on-lg: 100px; --pf-v5-c-brand--Width-on-xl: 125px; --pf-v5-c-brand--Width-on-2xl: 150px;'
+ );
});
diff --git a/packages/react-core/src/components/Brand/__tests__/__snapshots__/Brand.test.tsx.snap b/packages/react-core/src/components/Brand/__tests__/__snapshots__/Brand.test.tsx.snap
deleted file mode 100644
index 11d5e553ce6..00000000000
--- a/packages/react-core/src/components/Brand/__tests__/__snapshots__/Brand.test.tsx.snap
+++ /dev/null
@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Brand simple brand 1`] = `
-
-
-
-`;