✅ Add remaining test cases

equinor · Nov 4, 2024 · 7ac5380 · 7ac5380
1 parent accd71c
commit 7ac5380
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 7 deletions.
diff --git a/src/molecules/Stepper/Stepper.test.tsx b/src/molecules/Stepper/Stepper.test.tsx
@@ -155,6 +155,21 @@ test('Clicking a previous step via the label works as expected', async () => {
   expect(screen.getByText(`Current step: 0`)).toBeInTheDocument();
 });
 
+test('maxWidth works as expected', () => {
+  const steps = fakeSteps();
+  const maxWidth = '800px';
+  render(<Stepper maxWidth={maxWidth} />, {
+    wrapper: ({ children }) => (
+      <StepperProvider steps={steps}>{children}</StepperProvider>
+    ),
+  });
+
+  expect(screen.getByTestId('stepper-container')).toHaveStyleRule(
+    'max-width',
+    maxWidth
+  );
+});
+
 test('onlyShowCurrentLabel works as expected', () => {
   const steps = fakeSteps();
   render(<Stepper onlyShowCurrentStepLabel />, {
@@ -171,3 +186,73 @@ test('onlyShowCurrentLabel works as expected', () => {
     }
   }
 });
+
+test('Works as expected with substeps', async () => {
+  const steps: StepperProviderProps['steps'] = [
+    {
+      label: 'Step 1',
+      subSteps: [
+        {
+          title: faker.animal.dog(),
+          description: faker.lorem.sentence(),
+        },
+        {
+          title: faker.animal.cat(),
+        },
+      ],
+    },
+    {
+      label: 'Step 2',
+    },
+  ];
+  render(<StepperTestComponent />, {
+    wrapper: ({ children }) => (
+      <StepperProvider steps={steps}>{children}</StepperProvider>
+    ),
+  });
+
+  const user = userEvent.setup();
+
+  expect(screen.getByText(`1 of 2`)).toBeInTheDocument();
+  expect(screen.getByText(steps[0].subSteps![0].title)).toBeInTheDocument();
+  expect(
+    screen.getByText(steps[0].subSteps![0].description!)
+  ).toBeInTheDocument();
+
+  await user.click(screen.getByText('Next'));
+
+  expect(screen.getByText(steps[0].subSteps![1].title)).toBeInTheDocument();
+
+  await user.click(screen.getByText('Next'));
+
+  expect(screen.getByText(`Current step: 1`)).toBeInTheDocument();
+
+  await user.click(screen.getByText('Previous'));
+
+  expect(screen.getByText(steps[0].subSteps![1].title)).toBeInTheDocument();
+
+  await user.click(screen.getByText('Previous'));
+
+  expect(screen.getByText(steps[0].subSteps![0].title)).toBeInTheDocument();
+});
+
+test('Works as expected with title in steps', () => {
+  const steps: StepperProviderProps['steps'] = [
+    {
+      label: 'Step 1',
+      title: faker.animal.bear(),
+      description: faker.animal.dog(),
+    },
+    {
+      label: 'Step 2',
+    },
+  ];
+  render(<StepperTestComponent />, {
+    wrapper: ({ children }) => (
+      <StepperProvider steps={steps}>{children}</StepperProvider>
+    ),
+  });
+
+  expect(screen.getByText(steps[0].title!)).toBeInTheDocument();
+  expect(screen.getByText(steps[0].description!)).toBeInTheDocument();
+});
diff --git a/src/molecules/Stepper/SubTitle/SubStepIndicator.tsx b/src/molecules/Stepper/SubTitle/SubStepIndicator.tsx
@@ -44,10 +44,7 @@ const Line = styled.span<LineProps>`
 
 export const SubStepIndicator: FC = () => {
   const { currentSubStep, steps, currentStep } = useStepper();
-  const amountOfSubSteps =
-    'subSteps' in steps[currentStep] ? steps[currentStep].subSteps.length : 0;
-
-  if (!amountOfSubSteps) return null;
+  const amountOfSubSteps = steps[currentStep].subSteps!.length;
 
   return (
     <Container $amountOfSubSteps={amountOfSubSteps}>

diff --git a/src/molecules/Stepper/SubTitle/SubTitle.tsx b/src/molecules/Stepper/SubTitle/SubTitle.tsx
@@ -21,7 +21,10 @@ export const SubTitle: FC = () => {
     'subSteps' in steps[currentStep] ? steps[currentStep].subSteps : [];
   const currentSubStep = currentSubSteps?.at(subStepIndex);
 
-  if (!currentSubStep && steps[currentStep].title === undefined) {
+  if (
+    (!currentSubStep && steps[currentStep].title === undefined) ||
+    !currentSubSteps
+  ) {
     return null;
   }
 

diff --git a/src/providers/StepperProvider.tsx b/src/providers/StepperProvider.tsx
@@ -16,6 +16,7 @@ interface StepWithoutSubSteps {
   label: string;
   title?: string;
   description?: string;
+  subSteps?: undefined;
 }
 
 type Step = StepWithSubSteps | StepWithoutSubSteps;
@@ -66,6 +67,7 @@ export const StepperProvider: FC<StepperProviderProps> = ({
   const goToNextStep = () => {
     if (
       'subSteps' in steps[currentStep] &&
+      steps[currentStep].subSteps &&
       currentSubStep < steps[currentStep].subSteps.length - 1
     ) {
       setCurrentSubStep((prev) => prev + 1);
@@ -82,6 +84,7 @@ export const StepperProvider: FC<StepperProviderProps> = ({
     if (
       currentSubStep > 0 &&
       'subSteps' in steps[currentStep] &&
+      steps[currentStep].subSteps &&
       steps[currentStep].subSteps.length > 0
     ) {
       setCurrentSubStep((prev) => prev - 1);
@@ -92,8 +95,8 @@ export const StepperProvider: FC<StepperProviderProps> = ({
 
     setCurrentStep((prev) => prev - 1);
 
-    const previousStep = steps[currentStep - 1];
-    if ('subSteps' in previousStep) {
+    const previousStep = steps.at(currentStep - 1);
+    if (previousStep && 'subSteps' in previousStep && previousStep.subSteps) {
       // Set substeps to the last substep of the previous step
       setCurrentSubStep(previousStep.subSteps.length - 1);
     }