Merge pull request #354 from ets-cfuhrman-pfe/Minh-Khoi-Le/feature-progression-bar

Add progression bar and fix % badge

Author: fuhrmanator

client/src/__tests__/components/QuestionsDisplay/ProgressOverlay/ProgressOverlay.test.tsx

@@ -0,0 +1,125 @@
+import React from 'react';
+import { render, cleanup } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import ProgressOverlay from 'src/components/QuestionsDisplay/ProgressOverlay/ProgressOverlay';
+
+// Test constants
+const TEST_PERCENTAGES = {
+  ZERO: 0,
+  QUARTER: 25,
+  THIRD: 33.33,
+  HALF: 50,
+  THREE_QUARTERS: 75,
+  FULL: 100,
+  SIXTY: 60
+} as const;
+
+const COLOR_CLASSES = {
+  CORRECT: 'progress-overlay-correct',
+  INCORRECT: 'progress-overlay-incorrect'
+} as const;
+
+describe('ProgressOverlay Component', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  test('should render when show is true', () => {
+    const { container } = render(<ProgressOverlay percentage={TEST_PERCENTAGES.HALF} show={true} />);
+    
+    const overlay = container.firstChild as HTMLElement;
+    expect(overlay).toBeInTheDocument();
+    expect(overlay).toHaveClass('MuiBox-root');
+  });
+
+  test('should render with different percentages', () => {
+    const percentages = [TEST_PERCENTAGES.THREE_QUARTERS, TEST_PERCENTAGES.QUARTER, TEST_PERCENTAGES.ZERO, TEST_PERCENTAGES.FULL];
+
+    percentages.forEach(percentage => {
+      const { container } = render(<ProgressOverlay percentage={percentage} show={true} />);
+      const overlay = container.firstChild as HTMLElement;
+      expect(overlay).toBeInTheDocument();
+      cleanup();
+    });
+  });
+
+  test('should render with different colors', () => {
+    const { container: container1 } = render(
+      <ProgressOverlay percentage={TEST_PERCENTAGES.HALF} show={true} colorClass={COLOR_CLASSES.CORRECT} />
+    );
+    const overlay1 = container1.firstChild as HTMLElement;
+    expect(overlay1).toBeInTheDocument();
+    expect(overlay1).toHaveClass(COLOR_CLASSES.CORRECT);
+    cleanup();
+
+    const { container: container2 } = render(
+      <ProgressOverlay percentage={TEST_PERCENTAGES.HALF} show={true} colorClass={COLOR_CLASSES.INCORRECT} />
+    );
+    const overlay2 = container2.firstChild as HTMLElement;
+    expect(overlay2).toBeInTheDocument();
+    expect(overlay2).toHaveClass(COLOR_CLASSES.INCORRECT);
+  });
+
+  test('should not render when show is false', () => {
+    const { container } = render(<ProgressOverlay percentage={TEST_PERCENTAGES.HALF} show={false} />);
+    
+    expect(container.firstChild).toBeNull();
+  });
+
+  test('should render as MUI Box component', () => {
+    const { container } = render(<ProgressOverlay percentage={TEST_PERCENTAGES.SIXTY} show={true} />);
+    
+    const overlay = container.firstChild as HTMLElement;
+    expect(overlay).toBeInTheDocument();
+    expect(overlay).toHaveClass('MuiBox-root');
+  });
+
+  test('should handle prop changes correctly', () => {
+    const TestWrapper = ({ 
+      percentage = TEST_PERCENTAGES.HALF, 
+      show = true, 
+      colorClass 
+    }: { 
+      percentage?: number; 
+      show?: boolean; 
+      colorClass?: string; 
+    }) => (
+      <div data-testid="wrapper">
+        <ProgressOverlay percentage={percentage} show={show} colorClass={colorClass} />
+      </div>
+    );
+
+    const { rerender, getByTestId } = render(<TestWrapper percentage={TEST_PERCENTAGES.HALF} />);
+    let wrapper = getByTestId('wrapper');
+    let overlay = wrapper.firstChild as HTMLElement;
+    expect(overlay).toHaveClass('MuiBox-root');
+
+    // Test show=false
+    rerender(<TestWrapper percentage={TEST_PERCENTAGES.HALF} show={false} />);
+    wrapper = getByTestId('wrapper');
+    expect(wrapper.firstChild).toBeNull();
+
+    // Test show=true again
+    rerender(<TestWrapper percentage={TEST_PERCENTAGES.THREE_QUARTERS} show={true} />);
+    wrapper = getByTestId('wrapper');
+    overlay = wrapper.firstChild as HTMLElement;
+    expect(overlay).toHaveClass('MuiBox-root');
+
+    // Test with colorClass
+    rerender(<TestWrapper percentage={TEST_PERCENTAGES.THREE_QUARTERS} show={true} colorClass={COLOR_CLASSES.CORRECT} />);
+    wrapper = getByTestId('wrapper');
+    overlay = wrapper.firstChild as HTMLElement;
+    expect(overlay).toHaveClass('MuiBox-root');
+    expect(overlay).toHaveClass(COLOR_CLASSES.CORRECT);
+  });
+
+  test('should work with edge case values', () => {
+    const edgeCases = [TEST_PERCENTAGES.ZERO, TEST_PERCENTAGES.FULL, TEST_PERCENTAGES.THIRD];
+
+    edgeCases.forEach(percentage => {
+      const { container } = render(<ProgressOverlay percentage={percentage} show={true} />);
+      expect(container.firstChild).toBeInTheDocument();
+      cleanup();
+    });
+  });
+});

client/src/__tests__/components/QuestionsDisplay/QuestionDisplayV2.test.tsx

@@ -292,4 +292,122 @@ describe('QuestionDisplayV2 Component', () => {
             expect(screen.queryByText('Répondre')).not.toBeInTheDocument();
         });
     });
+
+    describe('Answer Statistics and Progression Features', () => {
+        test('should display percentage and fraction when showStatistics is enabled', () => {
+            render(
+                <QuestionDisplayV2 
+                    question={sampleMultipleChoiceQuestion} 
+                    {...sampleProps}
+                    students={mockStudents}
+                    showStatistics={true}
+                />
+            );
+
+            // Should display percentage badges (mocked components will show some indication)
+            const questionContainer = screen.getByText(/Sample Multiple Choice Question/);
+            expect(questionContainer).toBeInTheDocument();
+        });
+
+        test('should not display statistics when showStatistics is false', () => {
+            render(
+                <QuestionDisplayV2 
+                    question={sampleMultipleChoiceQuestion} 
+                    {...sampleProps}
+                    students={mockStudents}
+                    showStatistics={false}
+                />
+            );
+
+            // Should render without statistics
+            const questionContainer = screen.getByText(/Sample Multiple Choice Question/);
+            expect(questionContainer).toBeInTheDocument();
+        });
+
+        test('should pass students array to question components for statistics calculation', () => {
+            render(
+                <QuestionDisplayV2 
+                    question={sampleTrueFalseQuestion} 
+                    {...sampleProps}
+                    students={mockStudents}
+                    showStatistics={true}
+                />
+            );
+
+            // Should render the True/False question with students data
+            expect(screen.getByText(/Sample True/)).toBeInTheDocument();
+        });
+
+        test('should handle empty students array', () => {
+            render(
+                <QuestionDisplayV2 
+                    question={sampleMultipleChoiceQuestion} 
+                    {...sampleProps}
+                    students={[]}
+                    showStatistics={true}
+                />
+            );
+
+            expect(screen.getByText(/Sample Multiple Choice Question/)).toBeInTheDocument();
+        });
+
+        test('should work with different question types and statistics', () => {
+            const testCases = [
+                { question: sampleTrueFalseQuestion, name: 'True/False' },
+                { question: sampleMultipleChoiceQuestion, name: 'Multiple Choice' },
+                { question: sampleNumericalQuestion, name: 'Numerical' },
+                { question: sampleShortAnswerQuestion, name: 'Short Answer' }
+            ];
+
+            testCases.forEach(({ question, name }) => {
+                const { unmount } = render(
+                    <QuestionDisplayV2 
+                        question={question} 
+                        {...sampleProps}
+                        students={mockStudents}
+                        showStatistics={true}
+                    />
+                );
+                
+                // Should render without errors
+                expect(screen.getByText(new RegExp(name === 'True/False' ? 'Sample True' : 'Sample', 'i'))).toBeInTheDocument();
+                
+                unmount();
+            });
+        });
+
+        test('should handle showAnswer and showStatistics combination', () => {
+            render(
+                <QuestionDisplayV2 
+                    question={sampleTrueFalseQuestion} 
+                    {...sampleProps}
+                    students={mockStudents}
+                    showStatistics={true}
+                    showAnswer={true}
+                />
+            );
+
+            // Should render with both validation and statistics
+            expect(screen.getByText(/Sample True/)).toBeInTheDocument();
+        });
+
+        test('should pass correct props to child question components', () => {
+            const props = {
+                ...sampleProps,
+                students: mockStudents,
+                showStatistics: true,
+                showAnswer: false
+            };
+
+            render(
+                <QuestionDisplayV2 
+                    question={sampleMultipleChoiceQuestion} 
+                    {...props}
+                />
+            );
+
+            // The component should render and pass props correctly
+            expect(screen.getByText(/Sample Multiple Choice Question/)).toBeInTheDocument();
+        });
+    });
 });