Add data-testid to all React Components_11: 110187576

src/components/common/WorkspaceEditableFeild.tsx

@@ -44,7 +44,7 @@ export const WorkspaceEditableField = ({
   };
 
   return (
-    <FieldWrap>
+    <FieldWrap data-testid="workspace-editable-field-component">
       <Label>{label}</Label>
       <Data>
         <OptionsWrap>
@@ -99,4 +99,4 @@ export const WorkspaceEditableField = ({
       </Data>
     </FieldWrap>
   );
-};
+};

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

@@ -24,7 +24,7 @@ describe('Button Component', () => {
     const mockOnClick = jest.fn();
 
     render(
-      <Button
+      <Button data-testid="button-component"
         id={'1'}
         icon={''}
         height={10}
@@ -45,4 +45,4 @@ describe('Button Component', () => {
     //If we click on text it should register click
     expect(mockOnClick).toHaveBeenCalledTimes(1);
   });
-});
+});

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

@@ -20,9 +20,9 @@ beforeAll(() => {
 describe('ButtonContainer', () => {
   nock(user.url).get('/person/id/1').reply(200, {});
   test('is rendered', async () => {
-    const { container } = render(<ButtonContainer />);
+    const { container } = render(<ButtonContainer data-testid="button-container-component" />);
 
     //Expect text to be there
     expect(container).toBeTruthy();
   });
-});
+});

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

@@ -20,9 +20,9 @@ beforeAll(() => {
 describe('Button Component', () => {
   nock(user.url).get('/person/id/1').reply(200, {});
   test('display text and click button', async () => {
-    render(<Divider style={{ color: 'blue' }} />);
+    render(<Divider data-testid="divider-component" style={{ color: 'blue' }} />);
 
     expect(screen.getByTestId('testid-divider')).toBeInTheDocument();
     expect(screen.getByTestId('testid-divider')).toHaveAttribute('style', 'color: blue;');
   });
-});
+});

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

@@ -21,7 +21,7 @@ describe('Elements', () => {
   nock(user.url).get('/person/id/1').reply(200, {});
   test('Title', async () => {
     const TitleText = 'Title Text';
-    render(<Title>{TitleText}</Title>);
+    render(<Title data-testid="elements-component">{TitleText}</Title>);
 
     expect(screen.queryByText(TitleText)).toBeInTheDocument();
   });
@@ -43,4 +43,4 @@ describe('Elements', () => {
 
     expect(screen.queryByText(LinkText)).toBeInTheDocument();
   });
-});
+});

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

@@ -21,10 +21,10 @@ describe('QR Component', () => {
   nock(user.url).get('/person/id/1').reply(200, {});
   test('does display qr code', async () => {
     const value = 'test value';
-    render(<QR type={'connect'} value={value} size={10} />);
+    render(<QR data-testid="qr-component" type={'connect'} value={value} size={10} />);
 
     //Expect text to be there
     expect(screen.getByTestId('testid-qrcode')).toBeInTheDocument();
     expect(screen.getByTestId('testid-connectimg')).toBeInTheDocument();
   });
-});
+});

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

@@ -32,7 +32,7 @@ const mockStores = {
 
 const renderSidebar = (props = {}) =>
   render(
-    <BrowserRouter>
+    <BrowserRouter data-testid="sidebar-component-component">
       <SidebarComponent uuid="test-uuid" {...props} />
     </BrowserRouter>
   );
@@ -235,4 +235,4 @@ describe('SidebarComponent Tooltip Tests', () => {
       });
     });
   });
-});
+});

src/components/common/index.tsx

@@ -42,4 +42,4 @@ export {
   Portal,
   SearchBar,
   QR
-};
+};

src/components/common/useCreateModal.tsx

@@ -26,6 +26,7 @@ export function CreateModalPortal<T>(
   if (!modal) throw new Error('"#modal-root" element not found');
   return createPortal(
     <Component
+      data-testid="create-modal-portal-component"
       {...props}
       onClose={() => {
         props.onClose?.();
@@ -49,4 +50,4 @@ export const CreateModalContext =
     >
   >();
 
-export const useCreateModal = () => useContext(CreateModalContext).current;
+export const useCreateModal = () => useContext(CreateModalContext).current;

src/components/common/withCreateModal.tsx

@@ -48,10 +48,10 @@ export function withCreateModal<T extends Object>(Component: FC<T>) {
     const injectModalCb = useRef<(props: CreateModalProps) => void>(() => {});
 
     return (
-      <CreateModalContext.Provider value={injectModalCb}>
+      <CreateModalContext.Provider data-testid="modal-injector-component" value={injectModalCb}>
         <ModalInjector createCb={injectModalCb} />
         <Component {...props} />
       </CreateModalContext.Provider>
     );
   };
-}
+}