Added some more cypress test cases.

davidemioma · Mar 26, 2024 · 2d4f3ea · 2d4f3ea
1 parent 108ae54
commit 2d4f3ea
Show file tree

Hide file tree

Showing 20 changed files with 790 additions and 252 deletions.
diff --git a/app/(store)/dashboard/[storeId]/categories/_components/CategoryForm.tsx b/app/(store)/dashboard/[storeId]/categories/_components/CategoryForm.tsx
@@ -98,7 +98,7 @@ const CategoryForm = ({ data }: Props) => {
   };
 
   return (
-    <div data-testid="category-form">
+    <div data-testid="category-form" data-cy="category-form">
       <AlertModal
         isOpen={open}
         onClose={() => setOpen(false)}
@@ -124,16 +124,21 @@ const CategoryForm = ({ data }: Props) => {
                     {...field}
                     disabled={isPending}
                     placeholder="Shoes..."
+                    data-cy="category-name-input"
                   />
                 </FormControl>
 
-                <FormMessage />
+                <FormMessage data-cy="category-name-input-err" />
               </FormItem>
             )}
           />
 
           <div className="flex items-center gap-3">
-            <Button type="submit" disabled={isPending}>
+            <Button
+              type="submit"
+              disabled={isPending}
+              data-cy={data ? "category-save-btn" : "category-create-btn"}
+            >
               {data ? "Save" : "Create"}
             </Button>
 

diff --git a/app/(store)/dashboard/[storeId]/categories/_components/CellActions.tsx b/app/(store)/dashboard/[storeId]/categories/_components/CellActions.tsx
@@ -20,9 +20,10 @@ import {
 
 type Props = {
   data: Category;
+  index: number;
 };
 
-const CellActions = ({ data }: Props) => {
+const CellActions = ({ data, index }: Props) => {
   const params = useParams();
 
   const router = useRouter();
@@ -60,10 +61,11 @@ const CellActions = ({ data }: Props) => {
         onConfirm={onDelete}
         loading={isPending}
         featureToDelete="category"
+        testId={`category-${index}-delete`}
       />
 
       <DropdownMenu>
-        <DropdownMenuTrigger asChild>
+        <DropdownMenuTrigger asChild data-cy={`category-${index}-trigger`}>
           <Button variant="ghost" className="h-8 w-8 p-0">
             <span className="sr-only">Open menu</span>
 
@@ -81,12 +83,17 @@ const CellActions = ({ data }: Props) => {
               router.push(`/dashboard/${data.storeId}/categories/${data.id}`)
             }
             disabled={isPending}
+            data-cy={`category-${index}-update-btn`}
           >
             <Edit className="w-4 h-4 mr-2" />
             Update
           </DropdownMenuItem>
 
-          <DropdownMenuItem onClick={() => setOpen(true)} disabled={isPending}>
+          <DropdownMenuItem
+            onClick={() => setOpen(true)}
+            disabled={isPending}
+            data-cy={`category-${index}-delete-btn`}
+          >
             <Trash className="w-4 h-4 mr-2" />
             Delete
           </DropdownMenuItem>

diff --git a/app/(store)/dashboard/[storeId]/categories/_components/Columns.tsx b/app/(store)/dashboard/[storeId]/categories/_components/Columns.tsx
@@ -27,6 +27,6 @@ export const columns: ColumnDef<CategoryCol>[] = [
   },
   {
     id: "actions",
-    cell: ({ row }) => <CellActions data={row.original} />,
+    cell: ({ row }) => <CellActions index={row.index} data={row.original} />,
   },
 ];
diff --git a/app/(store)/dashboard/[storeId]/categories/page.tsx b/app/(store)/dashboard/[storeId]/categories/page.tsx
@@ -43,6 +43,7 @@ export default async function StoreCategoriesPage({
           <Link
             href={`/dashboard/${storeId}/categories/new`}
             className={buttonVariants()}
+            data-cy="new-category-btn"
           >
             <Plus className="w-4 h-4 mr-2" />
             Add new

diff --git a/app/(store)/dashboard/[storeId]/colors/_components/CellActions.tsx b/app/(store)/dashboard/[storeId]/colors/_components/CellActions.tsx
@@ -20,9 +20,10 @@ import {
 
 type Props = {
   data: Color;
+  index: number;
 };
 
-const CellActions = ({ data }: Props) => {
+const CellActions = ({ data, index }: Props) => {
   const params = useParams();
 
   const router = useRouter();
@@ -58,10 +59,11 @@ const CellActions = ({ data }: Props) => {
         onConfirm={onDelete}
         loading={isPending}
         featureToDelete="color"
+        testId={`color-${index}-delete`}
       />
 
       <DropdownMenu>
-        <DropdownMenuTrigger asChild>
+        <DropdownMenuTrigger asChild data-cy={`color-${index}-trigger`}>
           <Button variant="ghost" className="h-8 w-8 p-0">
             <span className="sr-only">Open menu</span>
 
@@ -79,12 +81,17 @@ const CellActions = ({ data }: Props) => {
               router.push(`/dashboard/${data.storeId}/colors/${data.id}`)
             }
             disabled={isPending}
+            data-cy={`color-${index}-update-btn`}
           >
             <Edit className="w-4 h-4 mr-2" />
             Update
           </DropdownMenuItem>
 
-          <DropdownMenuItem onClick={() => setOpen(true)} disabled={isPending}>
+          <DropdownMenuItem
+            onClick={() => setOpen(true)}
+            disabled={isPending}
+            data-cy={`color-${index}-delete-btn`}
+          >
             <Trash className="w-4 h-4 mr-2" />
             Delete
           </DropdownMenuItem>

diff --git a/app/(store)/dashboard/[storeId]/colors/_components/ColorForm.tsx b/app/(store)/dashboard/[storeId]/colors/_components/ColorForm.tsx
@@ -95,7 +95,7 @@ const ColorForm = ({ data }: Props) => {
   };
 
   return (
-    <div data-testid="color-form">
+    <div data-testid="color-form" data-cy="color-form">
       <AlertModal
         isOpen={open}
         onClose={() => setOpen(false)}
@@ -122,10 +122,11 @@ const ColorForm = ({ data }: Props) => {
                       {...field}
                       disabled={isPending}
                       placeholder="Black"
+                      data-cy="color-name-input"
                     />
                   </FormControl>
 
-                  <FormMessage />
+                  <FormMessage data-cy="color-name-input-err" />
                 </FormItem>
               )}
             />
@@ -134,7 +135,7 @@ const ColorForm = ({ data }: Props) => {
               control={form.control}
               name="value"
               render={({ field }) => (
-                <FormItem>
+                <FormItem data-cy="color-value-input">
                   <FormLabel>Value</FormLabel>
 
                   <FormControl>
@@ -144,14 +145,18 @@ const ColorForm = ({ data }: Props) => {
                     />
                   </FormControl>
 
-                  <FormMessage />
+                  <FormMessage data-cy="color-value-input-err" />
                 </FormItem>
               )}
             />
           </div>
 
           <div className="flex items-center gap-3">
-            <Button type="submit" disabled={isPending}>
+            <Button
+              type="submit"
+              disabled={isPending}
+              data-cy={data ? "color-save-btn" : "color-create-btn"}
+            >
               {data ? "Save" : "Create"}
             </Button>
 

diff --git a/app/(store)/dashboard/[storeId]/colors/_components/Columns.tsx b/app/(store)/dashboard/[storeId]/colors/_components/Columns.tsx
@@ -32,6 +32,6 @@ export const columns: ColumnDef<ColorCol>[] = [
   },
   {
     id: "actions",
-    cell: ({ row }) => <CellActions data={row.original} />,
+    cell: ({ row }) => <CellActions index={row.index} data={row.original} />,
   },
 ];
diff --git a/app/(store)/dashboard/[storeId]/colors/page.tsx b/app/(store)/dashboard/[storeId]/colors/page.tsx
@@ -34,6 +34,7 @@ export default async function ColorsPage({
           <Link
             href={`/dashboard/${storeId}/colors/new`}
             className={buttonVariants()}
+            data-cy="new-color-btn"
           >
             <Plus className="w-4 h-4 mr-2" />
             Add new

diff --git a/app/(store)/dashboard/[storeId]/products/_components/CellActions.tsx b/app/(store)/dashboard/[storeId]/products/_components/CellActions.tsx
@@ -21,9 +21,10 @@ import {
 
 type Props = {
   data: ProductCol;
+  index: number;
 };
 
-const CellActions = ({ data }: Props) => {
+const CellActions = ({ data, index }: Props) => {
   const params = useParams();
 
   const router = useRouter();
@@ -63,6 +64,7 @@ const CellActions = ({ data }: Props) => {
         onConfirm={onDelete}
         loading={isPending}
         featureToDelete="product"
+        testId={`product-${index}-delete`}
       />
 
       <ViewProductModal
@@ -79,7 +81,7 @@ const CellActions = ({ data }: Props) => {
       />
 
       <DropdownMenu>
-        <DropdownMenuTrigger asChild data-cy={`${data.id}-trigger`}>
+        <DropdownMenuTrigger asChild data-cy={`product-${index}-trigger`}>
           <Button variant="ghost" className="h-8 w-8 p-0">
             <span className="sr-only">Open menu</span>
 
@@ -129,7 +131,7 @@ const CellActions = ({ data }: Props) => {
               router.push(`/dashboard/${data.storeId}/products/${data.id}`)
             }
             disabled={isPending}
-            data-cy={`${data.id}-update`}
+            data-cy={`product-${index}-update-btn`}
           >
             <Edit className="w-4 h-4 mr-2" />
             Update
@@ -138,7 +140,7 @@ const CellActions = ({ data }: Props) => {
           <DropdownMenuItem
             onClick={() => setOpen(true)}
             disabled={isPending}
-            data-cy={`${data.id}-delete`}
+            data-cy={`product-${index}-delete-btn`}
           >
             <Trash className="w-4 h-4 mr-2" />
             Delete

diff --git a/app/(store)/dashboard/[storeId]/products/_components/Columns.tsx b/app/(store)/dashboard/[storeId]/products/_components/Columns.tsx
@@ -45,6 +45,6 @@ export const columns: ColumnDef<ProductCol>[] = [
   },
   {
     id: "actions",
-    cell: ({ row }) => <CellActions data={row.original} />,
+    cell: ({ row }) => <CellActions index={row.index} data={row.original} />,
   },
 ];
diff --git a/app/(store)/dashboard/[storeId]/products/_components/ProductForm.tsx b/app/(store)/dashboard/[storeId]/products/_components/ProductForm.tsx
@@ -228,10 +228,7 @@ const ProductForm = ({ data }: Props) => {
   };
 
   return (
-    <div
-      data-testid="product-form"
-      data-cy={data ? `product-form-${data.id}` : "product-form"}
-    >
+    <div data-testid="product-form" data-cy="product-form">
       <AlertModal
         isOpen={open}
         onClose={() => setOpen(false)}
@@ -264,13 +261,11 @@ const ProductForm = ({ data }: Props) => {
                         {...field}
                         disabled={creating || updating || deletingItem}
                         placeholder="Name..."
-                        data-cy={
-                          data ? `product-name-${data.id}` : "product-name"
-                        }
+                        data-cy="product-name-input"
                       />
                     </FormControl>
 
-                    <FormMessage />
+                    <FormMessage data-cy="product-name-input-err" />
                   </FormItem>
                 )}
               />
@@ -300,13 +295,7 @@ const ProductForm = ({ data }: Props) => {
                         disabled={creating || updating || deletingItem}
                       >
                         <FormControl>
-                          <SelectTrigger
-                            data-cy={
-                              data
-                                ? `product-select-${data.id}`
-                                : "product-select"
-                            }
-                          >
+                          <SelectTrigger data-cy="product-category-select-trigger">
                             <SelectValue placeholder="Choose Category" />
                           </SelectTrigger>
                         </FormControl>
@@ -330,11 +319,7 @@ const ProductForm = ({ data }: Props) => {
                                 <SelectItem
                                   key={cat.id}
                                   value={cat.id}
-                                  data-cy={
-                                    data
-                                      ? `product-${data.id}-${i}`
-                                      : `product-${i}`
-                                  }
+                                  data-cy={`product-category-select-${i}`}
                                 >
                                   {cat.name}
                                 </SelectItem>
@@ -345,7 +330,7 @@ const ProductForm = ({ data }: Props) => {
                       </Select>
                     </FormControl>
 
-                    <FormMessage />
+                    <FormMessage data-cy="product-category-input-err" />
                   </FormItem>
                 )}
               />
@@ -363,11 +348,10 @@ const ProductForm = ({ data }: Props) => {
                       value={field.value}
                       onChange={field.onChange}
                       disabled={creating || updating || deletingItem}
-                      data-cy="product-description"
                     />
                   </FormControl>
 
-                  <FormMessage />
+                  <FormMessage data-cy="product-description-input-err" />
                 </FormItem>
               )}
             />
@@ -563,7 +547,7 @@ const ProductForm = ({ data }: Props) => {
                 className="disabled:cursor-not-allowed disabled:opacity-75"
                 type="submit"
                 disabled={creating || updating || deletingItem}
-                data-cy={data ? `save-btn-${data.id}` : "create-btn"}
+                data-cy={data ? `product-save-btn` : "product-create-btn"}
               >
                 {data ? "Save" : "Create"}
               </Button>

diff --git a/app/(store)/dashboard/[storeId]/sizes/_components/CellActions.tsx b/app/(store)/dashboard/[storeId]/sizes/_components/CellActions.tsx
@@ -20,9 +20,10 @@ import {
 
 type Props = {
   data: Size;
+  index: number;
 };
 
-const CellActions = ({ data }: Props) => {
+const CellActions = ({ data, index }: Props) => {
   const params = useParams();
 
   const router = useRouter();
@@ -58,10 +59,11 @@ const CellActions = ({ data }: Props) => {
         onConfirm={onDelete}
         loading={isPending}
         featureToDelete="size"
+        testId={`size-${index}-delete`}
       />
 
       <DropdownMenu>
-        <DropdownMenuTrigger asChild>
+        <DropdownMenuTrigger asChild data-cy={`size-${index}-trigger`}>
           <Button variant="ghost" className="h-8 w-8 p-0">
             <span className="sr-only">Open menu</span>
 
@@ -79,12 +81,17 @@ const CellActions = ({ data }: Props) => {
               router.push(`/dashboard/${data.storeId}/sizes/${data.id}`)
             }
             disabled={isPending}
+            data-cy={`size-${index}-update-btn`}
           >
             <Edit className="w-4 h-4 mr-2" />
             Update
           </DropdownMenuItem>
 
-          <DropdownMenuItem onClick={() => setOpen(true)} disabled={isPending}>
+          <DropdownMenuItem
+            onClick={() => setOpen(true)}
+            disabled={isPending}
+            data-cy={`size-${index}-delete-btn`}
+          >
             <Trash className="w-4 h-4 mr-2" />
             Delete
           </DropdownMenuItem>

diff --git a/app/(store)/dashboard/[storeId]/sizes/_components/Columns.tsx b/app/(store)/dashboard/[storeId]/sizes/_components/Columns.tsx
@@ -19,6 +19,6 @@ export const columns: ColumnDef<SizeCol>[] = [
   },
   {
     id: "actions",
-    cell: ({ row }) => <CellActions data={row.original} />,
+    cell: ({ row }) => <CellActions index={row.index} data={row.original} />,
   },
 ];