Add Step Time Digits Testing

Added testing to ensure StepTimeDigits has the correct structure. Added testing to ensure initial values for target zones and step time are correctly rendered.
oss-slu · Oct 26, 2024 · cafd478 · cafd478
1 parent 84f07e2
commit cafd478
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 7 deletions.
diff --git a/frontend/src/StepTimeDigits.js b/frontend/src/StepTimeDigits.js
@@ -3,17 +3,17 @@ import "./StepTimeDigits.css";
 function StepTimeDigits({ stepTime }) {
   return (
     <div data-testid='step-time-digits-view' className="StepTimeDigits">
-      <div className="TargetZones">
-        <p>Target Zones</p>
+      <div data-testid='target-zones-values' className="TargetZones">
+        <p data-testid='target-zones-title'>Target Zones</p>
         <ul>
-          <li>{stepTime.targetZones.left.min}-{stepTime.targetZones.left.max}</li>
-          <li>{stepTime.targetZones.right.min}-{stepTime.targetZones.right.max}</li>
+          <li data-testid='target-zones-left'>{stepTime.targetZones.left.min}-{stepTime.targetZones.left.max}</li>
+          <li data-testid='target-zones-right'>{stepTime.targetZones.right.min}-{stepTime.targetZones.right.max}</li>
         </ul>
       </div>
-      <div className="CurrentStepTime">
+      <div data-testid='current-step-time-values' className="CurrentStepTime">
         <ul>
-          <li className="Left">{stepTime.left}</li>
-          <li className="Right">{stepTime.right}</li>
+          <li data-testid='current-step-time-left'>{stepTime.left}</li>
+          <li data-testid='current-step-time-right'>{stepTime.right}</li>
         </ul>
       </div>
     </div>

diff --git a/frontend/src/__tests__/StepTimeDigits.test.js b/frontend/src/__tests__/StepTimeDigits.test.js
@@ -0,0 +1,55 @@
+import { render, screen } from "@testing-library/react";
+import StepTimeDigits from "../StepTimeDigits";
+
+describe("Step Time View Structure", () => {
+    const testStepTime = {
+        left: 0,
+        right: 0, 
+        targetZones: {
+            left: {min: 0, max:0},
+            right: {min: 0, max:0},
+        },
+    };
+
+    test("Target Zone Structure Correctly Rendered", () => {
+        render(<StepTimeDigits stepTime={testStepTime} />);
+        expect(screen.getByTestId('target-zones-values')).toBeInTheDocument();
+        expect(screen.getByTestId('target-zones-title')).toBeInTheDocument();
+        expect(screen.getByTestId('target-zones-left')).toBeInTheDocument();
+        expect(screen.getByTestId('target-zones-right')).toBeInTheDocument();
+    });
+
+    test("Step Time Value Structure Correctly Rendered", () => {
+        render(<StepTimeDigits stepTime={testStepTime} />);
+        expect(screen.getByTestId('current-step-time-values')).toBeInTheDocument();
+        expect(screen.getByTestId('current-step-time-left')).toBeInTheDocument();
+        expect(screen.getByTestId('current-step-time-right')).toBeInTheDocument();
+    });
+}); 
+
+describe("Step Time Data", () => {
+    let testStepTime;
+
+    beforeEach(() => {
+        testStepTime = {
+            left: 12,
+            right: 27,
+            targetZones: {
+                left: {min: 5, max: 10},
+                right: {min: 3, max: 20},
+            },
+        }; 
+    });
+
+    test("Initial Target Zones correctly rendered", () => {
+        render(<StepTimeDigits stepTime={testStepTime}/>);
+        expect(screen.getByTestId('target-zones-left').textContent).toBe('5-10');
+        expect(screen.getByTestId('target-zones-right').textContent).toBe('3-20');
+    });
+
+    test("Initial Current Step Time Values correctly rendered", () => {
+        render(<StepTimeDigits stepTime={testStepTime}/>);
+        expect(screen.getByTestId('current-step-time-left').textContent).toBe('12');
+        expect(screen.getByTestId('current-step-time-right').textContent).toBe('27');
+    });
+});