Add data-testid to all React Components_8: 110185261

src/components/common/ImageButton.tsx

@@ -64,6 +64,7 @@ const ButtonContainer = styled.div<ButtonContainerProps>`
 `;
 const ImageButton = (props: ImageButtonProps) => (
   <ButtonContainer
+    data-testid="image-button-component"
     disabled={props.disabled}
     onClick={props?.buttonAction}
     style={{
@@ -113,4 +114,4 @@ const ImageButton = (props: ImageButtonProps) => (
   </ButtonContainer>
 );
 
-export default ImageButton;
+export default ImageButton;

src/components/common/LazyImg.tsx

@@ -94,8 +94,8 @@ export const LazyImgBg = (
   }, [inView, props.src]);
 
   return inView ? (
-    <ImgDiv loaded={imgLoaded} {...props} />
+    <ImgDiv data-testid="lazy-img-component" loaded={imgLoaded} {...props} />
   ) : (
     <div {...props} ref={placeholderRef} />
   );
-};
+};

src/components/common/Modal.spec.tsx

@@ -5,17 +5,17 @@ import Modal from './Modal';
 describe('<Modal /> Arrow Buttons', () => {
   test('calls prevArrowNew function when previous arrow is clicked', () => {
     const prevArrowFunction = jest.fn();
-    render(<Modal prevArrowNew={prevArrowFunction} visible={true} />);
+    render(<Modal data-testid="modal-component" prevArrowNew={prevArrowFunction} visible={true} />);
     const prevArrow = screen.getByText('chevron_left');
     fireEvent.click(prevArrow);
     expect(prevArrowFunction).toHaveBeenCalled();
   });
 
   test('calls nextArrowNew function when next arrow is clicked', () => {
     const nextArrowFunction = jest.fn();
-    render(<Modal nextArrowNew={nextArrowFunction} visible={true} />);
+    render(<Modal data-testid="modal-component" nextArrowNew={nextArrowFunction} visible={true} />);
     const nextArrow = screen.getByText('chevron_right');
     fireEvent.click(nextArrow);
     expect(nextArrowFunction).toHaveBeenCalled();
   });
-});
+});

src/components/common/Modal.tsx

@@ -139,7 +139,7 @@ export default function Modal(props: ModalProps) {
     : {};
 
   return (
-    <Portal>
+    <Portal data-testid="modal-component">
       <FadeLeft
         withOverlay={!hideOverlay}
         drift={100}
@@ -265,4 +265,4 @@ export default function Modal(props: ModalProps) {
       </FadeLeft>
     </Portal>
   );
-}
+}

src/components/common/MultiSelect.tsx

@@ -42,7 +42,7 @@ export default function Sel(props: SelProps) {
     : [];
 
   return (
-    <div id="dropdown-wrapper" style={{ position: 'relative', ...style }}>
+    <div data-testid="sel-component" id="dropdown-wrapper" style={{ position: 'relative', ...style }}>
       <S
         color={color}
         closeMenuOnSelect={false}
@@ -59,4 +59,4 @@ export default function Sel(props: SelProps) {
       />
     </div>
   );
-}
+}

src/components/common/PaymentConfirmationModal/PaymentConfirmationModal.tsx

@@ -10,7 +10,7 @@ export type PaymentConfirmationModalProps = PropsWithChildren<{
   onCancel?: () => void;
 }>;
 
-export const PaymentConfirmationModal = ({
+export const PaymentConfirmationModal = data-testid="payment-confirmation-modal-component" ({
   onClose,
   children,
   onCancel,
@@ -56,4 +56,4 @@ export const usePaymentConfirmationModal = () => {
   };
 
   return { openPaymentConfirmation };
-};
+};

src/components/common/PaymentConfirmationModal/__tests__/PaymentConfirmationModal.spec.tsx

@@ -8,7 +8,7 @@ describe('PaymentConfirmationModal', () => {
     const onCloseMock = jest.fn();
     const onConfirmPaymentMock = jest.fn();
     const { getByText } = render(
-      <PaymentConfirmationModal onClose={onCloseMock} onConfirmPayment={onConfirmPaymentMock}>
+      <PaymentConfirmationModal data-testid="payment-confirmation-modal-component" onClose={onCloseMock} onConfirmPayment={onConfirmPaymentMock}>
         Are you sure you want to pay this bounty?
       </PaymentConfirmationModal>
     );
@@ -20,7 +20,7 @@ describe('PaymentConfirmationModal', () => {
     const onCloseMock = jest.fn();
     const onConfirmPaymentMock = jest.fn();
     const { getByText } = render(
-      <PaymentConfirmationModal onClose={onCloseMock} onConfirmPayment={onConfirmPaymentMock}>
+      <PaymentConfirmationModal data-testid="payment-confirmation-modal-component" onClose={onCloseMock} onConfirmPayment={onConfirmPaymentMock}>
         Are you sure you want to pay this bounty?
       </PaymentConfirmationModal>
     );
@@ -34,7 +34,7 @@ describe('PaymentConfirmationModal', () => {
     const onCloseMock = jest.fn();
     const onConfirmPaymentMock = jest.fn();
     const { getByText } = render(
-      <PaymentConfirmationModal onClose={onCloseMock} onConfirmPayment={onConfirmPaymentMock}>
+      <PaymentConfirmationModal data-testid="payment-confirmation-modal-component" onClose={onCloseMock} onConfirmPayment={onConfirmPaymentMock}>
         Are you sure you want to pay this bounty?
       </PaymentConfirmationModal>
     );
@@ -43,4 +43,4 @@ describe('PaymentConfirmationModal', () => {
     await waitFor(() => expect(onCloseMock).toHaveBeenCalledTimes(1));
     expect(onConfirmPaymentMock).toHaveBeenCalledTimes(1);
   });
-});
+});

src/components/common/PriceOuterContainer.tsx

@@ -5,7 +5,7 @@ interface PriceContainerProps {
   priceBackground?: string;
   session_text_color?: string;
 }
-export const PriceOuterContainer = styled.div<PriceContainerProps>`
+export const PriceOuterContainer = styled.div<PriceContainerProps> data-testid="price-outer-container-component"`
   display: flex;
   align-items: center;
   height: 33px;
@@ -40,4 +40,4 @@ export const PriceOuterContainer = styled.div<PriceContainerProps>`
       margin-left: 6px;
     }
   }
-`;
+`;