test(progressbar): add-test

.github/workflows/sonar.yml

@@ -43,4 +43,4 @@ jobs:
             -Dsonar.projectKey=${{ secrets.SONAR_PROJECT }}
             -Dsonar.sonar.sourceEncoding=UTF-8
             -Dsonar.javascript.lcov.reportPaths=coverage/lcov.info
-            -Dsonar.coverage.exclusions=**/storage/**,**/**.config.js,**/*.test.tsx, **/icons,
+            -Dsonar.coverage.exclusions=**/storage/**,**/**.config.js,**/*.test.tsx,**/icons/**

src/constants/test-ids.ts

@@ -0,0 +1,2 @@
+export const PROGRESS_BAR = 'progress-bar';
+export const PROGRESS_BAR_CONTAINER = 'progress-bar-container';

src/ui/progress-bar.test.tsx

@@ -0,0 +1,41 @@
+import { render, screen } from '@testing-library/react-native';
+import React, { createRef } from 'react';
+import { getAnimatedStyle } from 'react-native-reanimated';
+
+import { PROGRESS_BAR, PROGRESS_BAR_CONTAINER } from '@/constants/test-ids';
+
+import type { ProgressBarRef } from './progress-bar';
+import { ProgressBar } from './progress-bar';
+
+describe('ProgressBar component', () => {
+  it('renders correctly', () => {
+    render(<ProgressBar className="custom-class" />);
+    expect(screen.getByTestId(PROGRESS_BAR_CONTAINER)).toBeTruthy();
+  });
+
+  it('sets initial progress correctly', () => {
+    render(<ProgressBar initialProgress={50} />);
+    const progressBar = screen.getByTestId(PROGRESS_BAR);
+    expect(progressBar.props.style).toEqual(
+      expect.objectContaining({ width: '50%' })
+    );
+  });
+
+  it('setProgress function works correctly', async () => {
+    const ref = createRef<ProgressBarRef>();
+    render(<ProgressBar ref={ref} initialProgress={0} />);
+    const progressBar = screen.getByTestId(PROGRESS_BAR);
+
+    // Call setProgress and check the updated value
+    if (ref.current) {
+      expect(getAnimatedStyle(progressBar)).toMatchObject({ width: '0%' });
+      jest.useFakeTimers();
+      ref.current.setProgress(75);
+      jest.advanceTimersByTime(250); // Duration of the animation
+      const updatedProgressBar = await screen.findByTestId(PROGRESS_BAR);
+      expect(getAnimatedStyle(updatedProgressBar)).toMatchObject({
+        width: '75%',
+      });
+    }
+  });
+});

src/ui/progress-bar.tsx

@@ -8,6 +8,8 @@ import Animated, {
 } from 'react-native-reanimated';
 import { twMerge } from 'tailwind-merge';
 
+import { PROGRESS_BAR, PROGRESS_BAR_CONTAINER } from '@/constants/test-ids';
+
 type Props = {
   initialProgress?: number;
   className?: string;
@@ -43,8 +45,11 @@ export const ProgressBar = forwardRef<ProgressBarRef, Props>(
       };
     });
     return (
-      <View className={twMerge(` bg-[#EAEAEA]`, className)}>
-        <Animated.View style={style} />
+      <View
+        testID={PROGRESS_BAR_CONTAINER}
+        className={twMerge(` bg-[#EAEAEA]`, className)}
+      >
+        <Animated.View testID={PROGRESS_BAR} style={style} />
       </View>
     );
   }