Merge pull request #9 from boostcampwm-2024/refactor/playwright_선택자_설정_및_시나리오_작성

Refactor/#3 playwright 선택자 설정 및 시나리오 작성

Author: github-actions[bot]

.gitignore

@@ -9,4 +9,9 @@
 tsconfig.tsbuildinfo
 
 # Jest globalConfig file
-../globalConfig.json
+../globalConfig.json
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

client/src/components/bottomNavigator/BottomNavigator.tsx

@@ -17,7 +17,7 @@ export const BottomNavigator = ({
 }: BottomNavigatorProps) => {
   return (
     <div className={bottomNavigatorContainer} {...BottomNavigatorOnBoardingProps}>
-      {pages.map((page) => (
+      {pages.map((page, idx) => (
         <motion.div
           key={page.id}
           initial={animation.initial}
@@ -29,6 +29,7 @@ export const BottomNavigator = ({
             key={page.id}
             icon={page.icon}
             size="md"
+            testKey={`BottomNavigator-iconButton-${idx}`}
             onClick={() => {
               handlePageSelect({
                 pageId: page.id,

client/src/components/button/IconButton.tsx

@@ -5,14 +5,16 @@ import { iconButtonContainer } from "./IconButton.style";
 interface IconButtonProps {
   icon: PageIconType | "plus";
   size: "sm" | "md";
+  testKey: string;
   onClick?: () => void;
 }
 
-export const IconButton = ({ icon, size, onClick }: IconButtonProps) => {
+export const IconButton = ({ icon, size, testKey, onClick }: IconButtonProps) => {
   const { icon: IconComponent, color: defaultColor }: IconConfig = iconComponents[icon];
 
   return (
     <button
+      data-testid={testKey}
       className={iconButtonContainer({ size })}
       data-onboarding="page-add-button"
       onClick={onClick}

client/src/components/button/textButton.tsx

@@ -3,12 +3,19 @@ import { textButtonContainer } from "./textButton.style";
 interface TextButtonProps {
   variant?: "primary" | "secondary";
   children: React.ReactNode;
+  testKey: string;
   onClick?: () => void;
 }
 
-export const TextButton = ({ variant = "primary", children, onClick }: TextButtonProps) => {
+export const TextButton = ({
+  variant = "primary",
+  children,
+  testKey,
+  onClick,
+}: TextButtonProps) => {
   return (
     <button
+      data-testid={testKey}
       className={textButtonContainer({ variant })}
       onClick={onClick}
       data-onboarding="login-button"

client/src/components/modal/modal.tsx

@@ -79,11 +79,17 @@ export const Modal = ({
             <div className={modalContent}>{children}</div>
             <div className={buttonContainer}>
               {secondaryButtonLabel && (
-                <TextButton onClick={secondaryButtonOnClick} variant="secondary">
+                <TextButton
+                  testKey="modalSecondaryButton"
+                  onClick={secondaryButtonOnClick}
+                  variant="secondary"
+                >
                   {secondaryButtonLabel}
                 </TextButton>
               )}
-              <TextButton onClick={primaryButtonOnClick}>{primaryButtonLabel}</TextButton>
+              <TextButton testKey="modalPrimaryButton" onClick={primaryButtonOnClick}>
+                {primaryButtonLabel}
+              </TextButton>
             </div>
           </motion.div>
         </div>

client/src/components/sidebar/Sidebar.tsx

@@ -84,13 +84,14 @@ export const Sidebar = ({
 
   return (
     <motion.aside
+      data-testid="sidebar"
       className={sidebarContainer}
       initial="open"
       animate={isSidebarOpen ? "open" : "closed"}
       variants={sidebarVariants}
       {...sidebarOnBoardingProps}
     >
-      <div className={sidebarToggleButton} onClick={toggleSidebar}>
+      <div data-testid="sidebarToggle" className={sidebarToggleButton} onClick={toggleSidebar}>
         {isSidebarOpen ? "«" : "»"}
       </div>
       <motion.div variants={contentVariants}>
@@ -100,7 +101,7 @@ export const Sidebar = ({
         {pages.length === 0 ? (
           <div className={placeholderMessage}>+ 버튼을 눌러 페이지를 추가하세요</div>
         ) : (
-          pages?.map((item) => (
+          pages?.map((item, idx) => (
             <motion.div
               key={item.id}
               initial={animation.initial}
@@ -109,6 +110,7 @@ export const Sidebar = ({
             >
               <PageItem
                 {...item}
+                testKey={`pageItem-${idx}`}
                 onClick={() => handlePageItemClick(item.id)}
                 onDelete={() => confirmPageDelete(item)}
                 handleIconUpdate={handlePageUpdate}
@@ -118,7 +120,12 @@ export const Sidebar = ({
         )}
       </motion.nav>
       <motion.div className={plusIconBox} variants={contentVariants}>
-        <IconButton icon="plus" onClick={handleAddPageButtonClick} size="sm" />
+        <IconButton
+          testKey="addPageButton"
+          icon="plus"
+          onClick={handleAddPageButtonClick}
+          size="sm"
+        />
         <AuthButton />
       </motion.div>
 

client/src/components/sidebar/components/pageIconButton/PageIconButton.tsx

@@ -4,14 +4,15 @@ import { IconBox } from "./PageIconButton.style";
 
 interface PageIconButtonProps {
   type: PageIconType;
+  testKey: string;
   onClick: (e: React.MouseEvent) => void;
 }
 
-export const PageIconButton = ({ type, onClick }: PageIconButtonProps) => {
+export const PageIconButton = ({ type, testKey, onClick }: PageIconButtonProps) => {
   const { icon: IconComponent, color: defaultColor }: IconConfig = iconComponents[type];
 
   return (
-    <div style={{ position: "relative" }}>
+    <div data-testid={testKey} style={{ position: "relative" }}>
       <div className={IconBox} onClick={(e) => onClick(e)}>
         <IconComponent color={defaultColor} size="24px" />
       </div>

client/src/components/sidebar/components/pageIconButton/PageIconModal.tsx

@@ -13,9 +13,9 @@ export interface PageIconModalProps {
 
 export const PageIconModal = ({ onClose, onSelect, currentType }: PageIconModalProps) => {
   return (
-    <div className={IconModal} onClick={onClose}>
+    <div data-testid="iconModal" className={IconModal} onClick={onClose}>
       <div className={IconModalContainer} onClick={onClose}>
-        <button onClick={onClose} className={IconModalClose}>
+        <button data-testid="iconModalCloseButton" onClick={onClose} className={IconModalClose}>
           <RiCloseLine width={16} height={16} />
         </button>
         <div>
@@ -39,6 +39,7 @@ export const PageIconModal = ({ onClose, onSelect, currentType }: PageIconModalP
 
                   return (
                     <button
+                      data-testid={`iconModalButton-${iconType}`}
                       key={iconType}
                       onClick={(e) => onSelect(e, iconType)}
                       className={IconButton(isSelected)}

client/src/components/sidebar/components/pageItem/PageItem.tsx

@@ -10,6 +10,7 @@ interface PageItemProps {
   id: string;
   title: string;
   icon: PageIconType;
+  testKey: string;
   onClick: () => void;
   onDelete?: (id: string) => void; // 추가: 삭제 핸들러
   handleIconUpdate: (
@@ -23,6 +24,7 @@ export const PageItem = ({
   id,
   icon,
   title,
+  testKey,
   onClick,
   onDelete,
   handleIconUpdate,
@@ -61,10 +63,20 @@ export const PageItem = ({
   };
 
   return (
-    <div className={pageItemContainer} onClick={onClick}>
-      <PageIconButton type={pageIcon ?? "Docs"} onClick={handleToggleModal} />
-      <span className={textBox}>{title || "새로운 페이지"}</span>
-      <span className={`delete_box ${deleteBox}`} onClick={handleDelete}>
+    <div data-testid={testKey} className={pageItemContainer} onClick={onClick}>
+      <PageIconButton
+        testKey={`pageIconButton-${testKey.split("-")[1]}-${pageIcon}`}
+        type={pageIcon ?? "Docs"}
+        onClick={handleToggleModal}
+      />
+      <span data-testid={`sidebarTitle-${testKey.split("-")[1]}`} className={textBox}>
+        {title || "새로운 페이지"}
+      </span>
+      <span
+        data-testid={`pageDeleteButton-${testKey.split("-")[1]}`}
+        className={`delete_box ${deleteBox}`}
+        onClick={handleDelete}
+      >
         <CloseIcon width={16} height={16} />
       </span>
       {isOpen && (

client/src/features/auth/AuthButton.tsx

@@ -26,11 +26,11 @@ export const AuthButton = () => {
   return (
     <div className={container}>
       {isLogin ? (
-        <TextButton onClick={openLogoutModal} variant="secondary">
+        <TextButton testKey="sidebarLogoutButton" onClick={openLogoutModal} variant="secondary">
           로그아웃
         </TextButton>
       ) : (
-        <TextButton onClick={openAuthModal} variant="secondary">
+        <TextButton testKey="sidebarLoginButton" onClick={openAuthModal} variant="secondary">
           로그인
         </TextButton>
       )}