Add data-testid to all React Components_9: 110185823

src/components/common/ProofStatusDropDown.tsx

@@ -91,7 +91,7 @@ const StatusDropdown: React.FC<StatusDropdownProps> = observer(
     }, [shouldSetAccepted, proofId, onStatusUpdate]);
 
     return (
-      <div
+      <div data-testid="status-dropdown-component"
         style={{
           display: 'flex',
           alignItems: 'center',
@@ -148,4 +148,4 @@ const StatusDropdown: React.FC<StatusDropdownProps> = observer(
   }
 );
 
-export default StatusDropdown;
+export default StatusDropdown;

src/components/common/QR.tsx

@@ -36,7 +36,7 @@ export default function QR(props: QRProps) {
     );
 
   return (
-    <div style={{ position: 'relative' }}>
+    <div data-testid="qr-component" style={{ position: 'relative' }}>
       <QRCode
         data-testid={'testid-qrcode'}
         bgColor={color.pureWhite}
@@ -83,4 +83,4 @@ export default function QR(props: QRProps) {
       )}
     </div>
   );
-}
+}

src/components/common/RefineDescriptionModal/index.tsx

@@ -12,6 +12,7 @@ export const RefineDescriptionModal = () => {
 
   return (
     <EuiPopover
+      data-testid="refine-description-modal-component"
       button={
         <ActionButton
           onClick={togglePopover}
@@ -50,4 +51,4 @@ export const RefineDescriptionModal = () => {
       </EuiText>
     </EuiPopover>
   );
-};
+};

src/components/common/SearchBar.tsx

@@ -133,6 +133,7 @@ function SearchBar({
 
   return (
     <Container
+      data-testid="search-bar-component"
       style={{ position: 'relative' }}
       border={border}
       borderActive={borderActive}
@@ -210,4 +211,4 @@ function SearchBar({
     </Container>
   );
 }
-export default observer(SearchBar);
+export default observer(SearchBar);

src/components/common/SearchTextInput.tsx

@@ -50,7 +50,7 @@ function SearchTextInput(props: SearchTextInputProps) {
   }
 
   return (
-    <div style={{ position: 'relative' }}>
+    <div data-testid="search-text-input-component" style={{ position: 'relative' }}>
       <Text
         {...props}
         onFocus={() => setExpand(true)}
@@ -100,4 +100,4 @@ function SearchTextInput(props: SearchTextInputProps) {
   );
 }
 
-export default observer(SearchTextInput);
+export default observer(SearchTextInput);

src/components/common/SearchableSelect.tsx

@@ -36,7 +36,7 @@ export default function SearchableSelect(props: SelProps) {
     : [];
 
   return (
-    <div id="dropdown-wrapper" style={{ position: 'relative', ...style }}>
+    <div data-testid="searchable-select-component" id="dropdown-wrapper" style={{ position: 'relative', ...style }}>
       <S
         options={opts}
         isLoading={loading}
@@ -55,4 +55,4 @@ export default function SearchableSelect(props: SelProps) {
       />
     </div>
   );
-}
+}

src/components/common/Select.tsx

@@ -143,7 +143,7 @@ export default function CustomSelect(props: SelProps) {
   };
 
   return (
-    <DropdownContainer ref={dropdownRef} style={{ ...props.style }} data-testid={props.testId}>
+    <DropdownContainer data-testid="custom-select-component" ref={dropdownRef} style={{ ...props.style }} data-testid={props.testId}>
       <StyledLabel isFocused={isFocused} hasContent={props.value}>
         {props.placeholder}
       </StyledLabel>
@@ -167,4 +167,4 @@ export default function CustomSelect(props: SelProps) {
       </DropdownOptions>
     </DropdownContainer>
   );
-}
+}

src/components/common/SidebarComponent.test.tsx

@@ -63,7 +63,7 @@ const mockChats: Chat[] = [
 
 const renderSidebar = (props: any) =>
   render(
-    <BrowserRouter>
+    <BrowserRouter data-testid="sidebar-component-component">
       <SidebarComponent uuid="test-uuid" workspaces={[]} {...props} />
     </BrowserRouter>
   );
@@ -174,4 +174,4 @@ describe('SidebarComponent Chat Section', () => {
       expect(screen.getByText('No date')).toBeInTheDocument();
     });
   });
-});
+});

src/components/common/SidebarComponent.tsx

@@ -648,6 +648,7 @@ export default function SidebarComponent({
 
   return (
     <SidebarContainer
+      data-testid="sidebar-component"
       collapsed={collapsed}
       onClick={(e) => {
         e.stopPropagation();
@@ -1107,4 +1108,4 @@ export default function SidebarComponent({
       )}
     </SidebarContainer>
   );
-}
+}