From 309975e35be8c00c33928c746fbe0873041cee82 Mon Sep 17 00:00:00 2001
From: "Felix C. Morency" <1102868+fmorency@users.noreply.github.com>
Date: Wed, 6 Nov 2024 10:17:56 -0500
Subject: [PATCH] fix: step indicator test

---
 .../__tests__/StepIndicator.test.tsx          | 31 ++++++++++++-------
 1 file changed, 19 insertions(+), 12 deletions(-)

diff --git a/components/groups/components/__tests__/StepIndicator.test.tsx b/components/groups/components/__tests__/StepIndicator.test.tsx
index 7cfbd7bb..f91db254 100644
--- a/components/groups/components/__tests__/StepIndicator.test.tsx
+++ b/components/groups/components/__tests__/StepIndicator.test.tsx
@@ -1,6 +1,6 @@
 import { describe, test, expect, afterEach } from 'bun:test';
 import React from 'react';
-import { render, screen, cleanup } from '@testing-library/react';
+import { render, screen, cleanup, getDefaultNormalizer } from '@testing-library/react';
 import StepIndicator from '@/components/groups/components/StepIndicator';
 import matchers from '@testing-library/jest-dom/matchers';
 
@@ -17,26 +17,33 @@ describe('StepIndicator Component', () => {
 
   test('renders steps correctly', () => {
     render(<StepIndicator currentStep={1} steps={steps} />);
-    expect(screen.getByText('Step 1')).toBeInTheDocument();
-    expect(screen.getByText('Step 2')).toBeInTheDocument();
-    expect(screen.getByText('Step 3')).toBeInTheDocument();
+    const normalizer = getDefaultNormalizer({ collapseWhitespace: true, trim: true });
+    expect(screen.getByText('1. Step 1', { normalizer })).toBeInTheDocument();
+    expect(screen.getByText('2. Step 2', { normalizer })).toBeInTheDocument();
+    expect(screen.getByText('3. Step 3', { normalizer })).toBeInTheDocument();
   });
 
   test('highlights the current step correctly', () => {
     render(<StepIndicator currentStep={2} steps={steps} />);
-    const currentStep = screen.getByText('Step 2');
-    expect(currentStep).toHaveClass('step-primary');
+    const normalizer = getDefaultNormalizer({ collapseWhitespace: true, trim: true });
+    const spanElement = screen.getByText('2. Step 2', { normalizer });
+    const divParent = spanElement.closest('div');
+    expect(divParent).toHaveClass('text-black');
   });
 
-  test('highlights the steps before the current step correctly', () => {
+  test('display the step before the current step correctly', () => {
     render(<StepIndicator currentStep={2} steps={steps} />);
-    const previousStep = screen.getByText('Step 1');
-    expect(previousStep).toHaveClass('step-primary');
+    const normalizer = getDefaultNormalizer({ collapseWhitespace: true, trim: true });
+    const spanElement = screen.getByText('1. Step 1', { normalizer });
+    const divParent = spanElement.closest('div');
+    expect(divParent).toHaveClass('text-gray-400');
   });
 
-  test('does not highlight the steps after the current step', () => {
+  test('display the step after the current step correctly', () => {
     render(<StepIndicator currentStep={2} steps={steps} />);
-    const nextStep = screen.getByText('Step 3');
-    expect(nextStep).not.toHaveClass('step-primary');
+    const normalizer = getDefaultNormalizer({ collapseWhitespace: true, trim: true });
+    const spanElement = screen.getByText('3. Step 3', { normalizer });
+    const divParent = spanElement.closest('div');
+    expect(divParent).toHaveClass('text-gray-400');
   });
 });