Implement tests for the StepsIndicator component and related

Author: BartoszKlonowski

package/__test__/components/StepNumber.test.tsx

@@ -4,7 +4,9 @@ import {StepNumber} from '../../src/components/StepNumber';
 
 describe('StepNumber', () => {
   it('Displays number of step according to given index', () => {
-    const {getByText} = render(<StepNumber i={0} style={undefined} />);
+    const {getByText} = render(
+      <StepNumber i={0} index={0} style={undefined} />,
+    );
     expect(getByText('0')).toBeDefined();
   });
 });

package/__test__/components/StepsIndicator.test.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import {render} from '@testing-library/react-native';
+import {StepsIndicator} from '../../src/components/StepsIndicator';
+import {constants} from '../../src/utils/constants';
+import {Platform} from 'react-native';
+import {styles} from '../../src/utils/styles';
+
+const defaultOptions = [0, 1, 2, 3, 4, 5];
+const longerOptions = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+
+describe('StepsIndicator', () => {
+  it('Renders every step provided in options', () => {
+    const {getByText} = render(
+      <StepsIndicator
+        options={defaultOptions}
+        sliderWidth={20}
+        currentValue={0}
+        renderStepNumber
+      />,
+    );
+    for (const step of defaultOptions) {
+      expect(getByText(step.toString())).toBeDefined();
+    }
+  });
+
+  it('Applies the big font size to the lower number of steps', () => {
+    const {getByTestId} = render(
+      <StepsIndicator
+        options={defaultOptions}
+        sliderWidth={20}
+        currentValue={0}
+        renderStepNumber
+      />,
+    );
+    expect(getByTestId('0th-step')).toHaveStyle({
+      fontSize: constants.STEP_NUMBER_TEXT_FONT_BIG,
+    });
+  });
+
+  it('Applies the small font size to the number of steps higher than 9', () => {
+    const {getByTestId} = render(
+      <StepsIndicator
+        options={longerOptions}
+        sliderWidth={20}
+        currentValue={0}
+        renderStepNumber
+      />,
+    );
+    expect(getByTestId('0th-step')).toHaveStyle({
+      fontSize: constants.STEP_NUMBER_TEXT_FONT_SMALL,
+    });
+  });
+
+  it('Applies platform-dependent styles for web', () => {
+    Platform.OS = 'web';
+    const {getByTestId} = render(
+      <StepsIndicator
+        options={longerOptions}
+        sliderWidth={20}
+        currentValue={0}
+        renderStepNumber
+      />,
+    );
+    expect(getByTestId('StepsIndicator-Container')).toHaveStyle(
+      styles.stepsIndicator,
+    );
+  });
+
+  it('Reverts given options when isLTR is set', () => {
+    const {getByTestId} = render(
+      <StepsIndicator
+        options={defaultOptions}
+        sliderWidth={20}
+        currentValue={0}
+        renderStepNumber
+        isLTR
+      />,
+    );
+    expect(getByTestId('0th-step')).toHaveTextContent('5');
+    expect(getByTestId('2th-step')).toHaveTextContent('3');
+  });
+
+  it('Does not display any step numbers if prop is not set', () => {
+    const {queryByTestId} = render(
+      <StepsIndicator
+        options={defaultOptions}
+        sliderWidth={20}
+        currentValue={0}
+      />,
+    );
+    expect(queryByTestId('0th-step')).toBeFalsy();
+  });
+});

package/src/components/StepNumber.tsx

@@ -4,14 +4,18 @@ import {styles} from '../utils/styles';
 
 export const StepNumber = ({
   i,
+  index,
   style,
 }: {
   i: number;
+  index: number;
   style: StyleProp<TextStyle>;
 }) => {
   return (
     <View style={styles.stepNumber}>
-      <Text style={style}>{i}</Text>
+      <Text testID={`${index}th-step`} style={style}>
+        {i}
+      </Text>
     </View>
   );
 };

package/src/components/StepsIndicator.tsx

@@ -74,6 +74,7 @@ export const StepsIndicator = ({
             {renderStepNumber ? (
               <StepNumber
                 i={i}
+                index={index}
                 style={stepNumberFontStyle}
                 key={`${index}th-step`}
               />
@@ -96,6 +97,7 @@ export const StepsIndicator = ({
   return (
     <View
       pointerEvents="none"
+      testID="StepsIndicator-Container"
       style={platformDependentStyles.stepIndicatorContainerStyle}>
       {values.map((i, index) => renderStepIndicator(i, index))}
     </View>