chore(content-uploader): Migrated ProgressBar to TS and RTL (#3589)

chore(content-uploader): Migrated ProgressBar TS and RTL

src/elements/content-uploader/ProgressBar.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import './ProgressBar.scss';
+
+type Props = {
+    percent?: number;
+};
+
+const ProgressBar = ({ percent }: Props) => {
+    const clampedPercentage = Math.max(0, Math.min(100, percent || 0));
+
+    const containerStyle = {
+        transitionDelay: clampedPercentage > 0 && clampedPercentage < 100 ? '0' : '0.4s',
+    };
+
+    return (
+        <div className="bcu-progress-container" style={containerStyle}>
+            <div className="bcu-progress" role="progressbar" style={{ width: `${clampedPercentage}%` }} />
+        </div>
+    );
+};
+
+export default ProgressBar;

src/elements/content-uploader/__tests__/ProgressBar.test.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import ProgressBar from '../ProgressBar';
+
+describe('elements/content-uploader/ProgressBar', () => {
+    test('initializes with default percent if not provided', () => {
+        render(<ProgressBar />);
+        expect(screen.getByRole('progressbar').style.width).toEqual('0%');
+    });
+
+    test('handles progress percent correctly when updated to 100%', () => {
+        const { rerender } = render(<ProgressBar percent={50} />);
+        rerender(<ProgressBar percent={100} />);
+        expect(screen.getByRole('progressbar').style.width).toEqual('100%');
+    });
+
+    test('does not exceed 100% width when percent is over 100', () => {
+        render(<ProgressBar percent={150} />);
+        expect(screen.getByRole('progressbar').style.width).toEqual('100%');
+    });
+
+    test('does not go below 0% width when percent is negative', () => {
+        render(<ProgressBar percent={-20} />);
+        expect(screen.getByRole('progressbar').style.width).toEqual('0%');
+    });
+
+    test('updates transition delay based on percent', () => {
+        const { rerender } = render(<ProgressBar percent={0} />);
+        // @ts-ignore style does exsist
+        expect(screen.getByRole('progressbar').parentNode.style.transitionDelay).toEqual('0.4s');
+        rerender(<ProgressBar percent={50} />);
+        // @ts-ignore style does exist
+        expect(screen.getByRole('progressbar').parentNode.style.transitionDelay).toEqual('0');
+    });
+});