test: add cypress foundation (#2903) [skip ci]

src/components/Common/Header/index.tsx

@@ -13,7 +13,10 @@ const Header: React.FC<HeaderProps> = ({
   return (
     <div className="mt-8 md:flex md:items-center md:justify-between">
       <div className={`min-w-0 flex-1 mx-${extraMargin}`}>
-        <h2 className="mb-4 truncate text-2xl font-bold leading-7 text-gray-100 sm:overflow-visible sm:text-4xl sm:leading-9 md:mb-0">
+        <h2
+          className="mb-4 truncate text-2xl font-bold leading-7 text-gray-100 sm:overflow-visible sm:text-4xl sm:leading-9 md:mb-0"
+          data-testid="page-header"
+        >
           <span className="bg-gradient-to-br from-indigo-400 to-purple-400 bg-clip-text text-transparent">
             {children}
           </span>

src/components/Common/Modal/index.tsx

@@ -141,6 +141,7 @@ const Modal: React.FC<ModalProps> = ({
                 <span
                   className="truncate text-lg font-bold leading-6"
                   id="modal-headline"
+                  data-testid="modal-title"
                 >
                   {title}
                 </span>
@@ -160,6 +161,7 @@ const Modal: React.FC<ModalProps> = ({
                   onClick={onOk}
                   className="ml-3"
                   disabled={okDisabled}
+                  data-testid="modal-ok-button"
                 >
                   {okText ? okText : 'Ok'}
                 </Button>
@@ -170,6 +172,7 @@ const Modal: React.FC<ModalProps> = ({
                   onClick={onSecondary}
                   className="ml-3"
                   disabled={secondaryDisabled}
+                  data-testid="modal-secondary-button"
                 >
                   {secondaryText}
                 </Button>
@@ -189,6 +192,7 @@ const Modal: React.FC<ModalProps> = ({
                   buttonType={cancelButtonType}
                   onClick={onCancel}
                   className="ml-3 sm:ml-0"
+                  data-testid="modal-cancel-button"
                 >
                   {cancelText
                     ? cancelText

src/components/Layout/Sidebar/index.tsx

@@ -37,6 +37,7 @@ interface SidebarLinkProps {
   as?: string;
   requiredPermission?: Permission | Permission[];
   permissionType?: 'and' | 'or';
+  dataTestId?: string;
 }
 
 const SidebarLinks: SidebarLinkProps[] = [
@@ -72,6 +73,7 @@ const SidebarLinks: SidebarLinkProps[] = [
     svgIcon: <UsersIcon className="mr-3 h-6 w-6" />,
     activeRegExp: /^\/users/,
     requiredPermission: Permission.MANAGE_USERS,
+    dataTestId: 'sidebar-menu-users',
   },
   {
     href: '/settings',
@@ -168,6 +170,7 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
                                     : 'hover:bg-gray-700 focus:bg-gray-700'
                                 }
                               `}
+                              data-testid={`${sidebarLink.dataTestId}-mobile`}
                             >
                               {sidebarLink.svgIcon}
                               {intl.formatMessage(
@@ -229,6 +232,7 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
                                     : 'hover:bg-gray-700 focus:bg-gray-700'
                                 }
                               `}
+                        data-testid={sidebarLink.dataTestId}
                       >
                         {sidebarLink.svgIcon}
                         {intl.formatMessage(messages[sidebarLink.messagesKey])}

src/components/Layout/index.tsx

@@ -68,6 +68,7 @@ const Layout: React.FC = ({ children }) => {
             } transition duration-300 focus:outline-none lg:hidden`}
             aria-label="Open sidebar"
             onClick={() => setSidebarOpen(true)}
+            data-testid="sidebar-toggle"
           >
             <MenuAlt2Icon className="h-6 w-6" />
           </button>

src/components/Login/LocalLogin.tsx

@@ -77,6 +77,7 @@ const LocalLogin: React.FC<LocalLoginProps> = ({ revalidate }) => {
                       name="email"
                       type="text"
                       inputMode="email"
+                      data-testid="email"
                     />
                   </div>
                   {errors.email && touched.email && (
@@ -94,6 +95,7 @@ const LocalLogin: React.FC<LocalLoginProps> = ({ revalidate }) => {
                       name="password"
                       type="password"
                       autoComplete="current-password"
+                      data-testid="password"
                     />
                   </div>
                   {errors.password && touched.password && (
@@ -113,6 +115,7 @@ const LocalLogin: React.FC<LocalLoginProps> = ({ revalidate }) => {
                       buttonType="primary"
                       type="submit"
                       disabled={isSubmitting || !isValid}
+                      data-testid="local-signin-button"
                     >
                       <LoginIcon />
                       <span>

src/components/MovieDetails/index.tsx

@@ -340,7 +340,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
                 />
               )}
           </div>
-          <h1>
+          <h1 data-testid="media-title">
             {data.title}{' '}
             {data.releaseDate && (
               <span className="media-year">

src/components/Slider/index.tsx

@@ -149,7 +149,7 @@ const Slider: React.FC<SliderProps> = ({
   };
 
   return (
-    <div className="relative">
+    <div className="relative" data-testid="media-slider">
       <div className="absolute right-0 -mt-10 flex text-gray-400">
         <button
           className={`${

src/components/TitleCard/index.tsx

@@ -78,7 +78,10 @@ const TitleCard: React.FC<TitleCardProps> = ({
   );
 
   return (
-    <div className={canExpand ? 'w-full' : 'w-36 sm:w-36 md:w-44'}>
+    <div
+      className={canExpand ? 'w-full' : 'w-36 sm:w-36 md:w-44'}
+      data-testid="title-card"
+    >
       <RequestModal
         tmdbId={id}
         show={showRequestModal}
@@ -212,6 +215,7 @@ const TitleCard: React.FC<TitleCardProps> = ({
                           WebkitBoxOrient: 'vertical',
                           wordBreak: 'break-word',
                         }}
+                        data-testid="title-card-title"
                       >
                         {title}
                       </h1>

src/components/TvDetails/index.tsx

@@ -343,7 +343,7 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
                 />
               )}
           </div>
-          <h1>
+          <h1 data-testid="media-title">
             {data.name}{' '}
             {data.firstAirDate && (
               <span className="media-year">

src/components/UserList/index.tsx

@@ -557,7 +557,7 @@ const UserList: React.FC = () => {
         </thead>
         <Table.TBody>
           {data?.results.map((user) => (
-            <tr key={`user-list-${user.id}`}>
+            <tr key={`user-list-${user.id}`} data-testid="user-list-row">
               <Table.TD>
                 {isUserPermsEditable(user.id) && (
                   <input