add tests (#536)

packages/app/src/components/Header/index.tsx

@@ -117,6 +117,7 @@ export const Header = () => {
       />
       <StyledHeader hasWarning={showWarning}>
         <StyledLogo
+          data-testid="left-top-corner-logo"
           onClick={() => {
             contactModalHandler(true);
           }}

packages/app/src/components/contact-modal/index.tsx

@@ -76,7 +76,7 @@ type TransitionsModalProps = {
 export const ContactModal = ({ open, onClose }: TransitionsModalProps) => {
   return (
     <Modal open={open} onClose={onClose}>
-      <StyledModalWrapper>
+      <StyledModalWrapper data-testid="contact-us-modal-content">
         <StyledModalHeader>
           <StyledModalHeaderLeft>
             <StyledLogo src={logo.src} alt="" />

packages/app/src/components/editor-mode-switch/index.tsx

@@ -51,7 +51,7 @@ const AnimateRadioItem = ({
     </StyledIcon>
   );
   return (
-    <StyledRadioItem active={active} status={status} {...props}>
+    <StyledRadioItem title={label} active={active} status={status} {...props}>
       {isLeft ? icon : null}
       <StyledLabel shrink={status !== 'stretch'} isLeft={isLeft}>
         {label}
@@ -95,7 +95,11 @@ export const EditorModeSwitch = ({
   }, [isHover, mode]);
 
   return (
-    <StyledAnimateRadioContainer shrink={!isHover} style={style}>
+    <StyledAnimateRadioContainer
+      data-testid="editor-mode-switcher"
+      shrink={!isHover}
+      style={style}
+    >
       <AnimateRadioItem
         isLeft={true}
         label="Paper"

packages/app/src/components/faq/index.tsx

@@ -34,6 +34,7 @@ export const FAQ = () => {
           <StyledFAQWrapper>
             <Tooltip content="Contact Us" placement="left-end">
               <StyledIconWrapper
+                data-testid="right-bottom-contact-us-icon"
                 isEdgelessDark={isEdgelessDark}
                 onClick={() => {
                   setShowContent(false);
@@ -45,6 +46,7 @@ export const FAQ = () => {
             </Tooltip>
             <Tooltip content="Keyboard Shortcuts" placement="left-end">
               <StyledIconWrapper
+                data-testid="shortcuts-icon"
                 isEdgelessDark={isEdgelessDark}
                 onClick={() => {
                   setShowContent(false);
@@ -58,7 +60,10 @@ export const FAQ = () => {
         </Grow>
 
         <div style={{ position: 'relative' }}>
-          <StyledIconWrapper isEdgelessDark={isEdgelessDark}>
+          <StyledIconWrapper
+            data-testid="faq-icon"
+            isEdgelessDark={isEdgelessDark}
+          >
             <HelpIcon />
           </StyledIconWrapper>
           <StyledTransformIcon in={showContent}>

packages/app/src/components/shortcuts-modal/index.tsx

@@ -34,7 +34,7 @@ export const ShortcutsModal = ({ open, onClose }: ModalProps) => {
     : windowsKeyboardShortcuts;
   return createPortal(
     <Slide direction="left" in={open} mountOnEnter unmountOnExit>
-      <StyledShortcutsModal>
+      <StyledShortcutsModal data-testid="shortcuts-modal">
         <>
           <StyledModalHeader>
             <StyledTitle>