Change test-id to id

Author: aarathyKeyvalue

src/bubble/bubble.tsx

@@ -31,7 +31,7 @@ const Bubble: FC<IBubbleProps> = (props) => {
       }}
       onClick={(): void | null => handleStepClick && handleStepClick()}
       role="presentation"
-      data-testId="stepper-bubble"
+      id="stepper-bubble"
     >
       {(renderAdornment && renderAdornment(step, index))
     || (

src/stepper-component/stepperComponent.tsx

@@ -25,7 +25,7 @@ const Stepper: FC<IStepperProps> = (props) => {
   return (
     <div className={classes.stepperContainer}>
       {steps?.map((step: IStep, stepIndex: number): ReactElement => (
-        <div key={stepIndex} className={classes.eachStep} data-testId="stepper-steps">
+        <div key={stepIndex} className={classes.eachStep} id="stepper-steps">
           <div className={classes.bubbleLineWrapper}>
             <Bubble
               step={step}
@@ -48,7 +48,7 @@ const Stepper: FC<IStepperProps> = (props) => {
                   }}
                   onClick={(): void => onStepClick && onStepClick(step, stepIndex)}
                   role="presentation"
-                  data-testId={`stepper-label-${stepIndex}`}
+                  id={`stepper-label-${stepIndex}`}
                 >
                   {step.label}
                 </span>
@@ -65,7 +65,7 @@ const Stepper: FC<IStepperProps> = (props) => {
                   }}
                   onClick={(): void => onStepClick && onStepClick(step, stepIndex)}
                   role="presentation"
-                  data-testId={`stepper-desc-${stepIndex}`}
+                  id={`stepper-desc-${stepIndex}`}
                 >
                   {step.description}
                 </span>

src/tests/stepperComponent.test.tsx

@@ -1,18 +1,25 @@
 import React from 'react';
-import { render, fireEvent } from "@testing-library/react";
+import {
+    render,
+    fireEvent,
+    queryByAttribute,
+    queryAllByAttribute
+} from "@testing-library/react";
 import { IStep } from '../stepper-component/types';
 import Stepper from "../stepper-component/stepperComponent";
 
+const getById = queryByAttribute.bind(null, 'id');
+const getAllById = queryAllByAttribute.bind(null, 'id');
 test("Stepper Component - Label and description", async () => {
     const steps: IStep[] = [{
         label: 'Step 1',
         description: 'Demo description',
         status: 'completed'
     }]
-    const {findByTestId} = render(<Stepper steps={steps} />)
-    const label = await findByTestId("stepper-label-0");
+    const dom = render(<Stepper steps={steps} />)
+    const label = await getById(dom.container, "stepper-label-0");
     expect(label.innerHTML).toBe('Step 1');
-    const description = await findByTestId("stepper-desc-0");
+    const description = await getById(dom.container, "stepper-desc-0");
     expect(description.innerHTML).toBe('Demo description');
 });
 
@@ -21,9 +28,10 @@ test("Stepper Component - No description", async () => {
         label: 'Step 1',
         status: 'completed'
     }];
-    const {findByTestId} = render(<Stepper steps={steps} />)
+    const dom = render(<Stepper steps={steps} />)
     try {
-        await findByTestId("stepper-desc-0");
+        const val = await getById(dom.container, "stepper-desc-0");
+        if (val === null) throw Error();
     } catch (err){
         return;
     }
@@ -38,8 +46,8 @@ test("Stepper Component - Number of steps", async () => {
         label: 'Step 2',
         status: 'visited'
     }];
-    const {findAllByTestId} = render(<Stepper steps={steps} />);
-    const elements = await findAllByTestId("stepper-steps");
+    const dom = render(<Stepper steps={steps} />);
+    const elements = await getAllById(dom.container, "stepper-steps");
     expect(elements?.length).toBe(2);
 })
 
@@ -50,13 +58,13 @@ test("Stepper Component - On Click function", async () => {
         status: 'completed'
     }];
     const onClick = jest.fn();
-    const {findByTestId} = render(
+    const dom = render(
         <Stepper
             steps={steps}
             onStepClick={onClick}
         />
     )
-    const bubble = await findByTestId("stepper-bubble");
+    const bubble = await getById(dom.container, "stepper-bubble");
     fireEvent.click(bubble);
     expect(onClick).toBeCalled();
 })