From 8fc80b0beb3686a928b5cd4af33c5aa16062bd32 Mon Sep 17 00:00:00 2001
From: Marcelo Serpa <boss@fullofcaffeine.com>
Date: Tue, 21 May 2024 18:56:32 -0600
Subject: [PATCH] Add new test cases

---
 .../src/progress-bar/test/index.tsx           | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/packages/components/src/progress-bar/test/index.tsx b/packages/components/src/progress-bar/test/index.tsx
index c3984318cc618a..eb2867890e741b 100644
--- a/packages/components/src/progress-bar/test/index.tsx
+++ b/packages/components/src/progress-bar/test/index.tsx
@@ -8,6 +8,7 @@ import { render, screen } from '@testing-library/react';
  */
 import { ProgressBar } from '..';
 import { INDETERMINATE_TRACK_WIDTH } from '../styles';
+import { CONFIG } from '../../utils';
 
 describe( 'ProgressBar', () => {
 	it( 'should render an indeterminate semantic progress bar element', () => {
@@ -79,4 +80,27 @@ describe( 'ProgressBar', () => {
 		);
 		expect( screen.getByRole( 'progressbar' ) ).toHaveStyle( style );
 	} );
+
+	it( 'should use default width if width for the track if the `width` prop is not passed', () => {
+		const { container } = render( <ProgressBar /> );
+
+		// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+		const track = container.firstChild;
+
+		expect( track ).toHaveStyle( {
+			maxWidth: `${ CONFIG.progressBarWidth }px`,
+		} );
+	} );
+
+	it( 'should apply custom width to tthe track if the `width` prop is passed', () => {
+		const customWidth = 400;
+		const { container } = render( <ProgressBar width={ customWidth } /> );
+
+		// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+		const track = container.firstChild;
+
+		expect( track ).toHaveStyle( {
+			maxWidth: `${ customWidth }px`,
+		} );
+	} );
 } );