test: add e2e case for delete a cube collection

bryanlundberg · Sep 20, 2024 · 418f129 · 418f129
1 parent 64070ad
commit 418f129
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 23 deletions.
diff --git a/e2e/delete-cube-collection.spec.ts b/e2e/delete-cube-collection.spec.ts
@@ -0,0 +1,40 @@
+import { test, expect } from "@playwright/test";
+
+test("Should be able to delete a cube collection", async ({ page }) => {
+  await page.goto("http://localhost:3000/en/cubes");
+  await expect(page.getByTestId("empty-cubes-container")).toBeVisible();
+  await expect(page.getByTestId("create-collection-button")).toBeVisible();
+  await page.getByTestId("create-collection-button").click();
+  await page.getByTestId("drawer-input-name").click();
+  await page.getByTestId("drawer-input-name").fill("fake-cube-name");
+  await page.getByTestId("checkbox-category-6x6").click();
+  await page.getByTestId("drawer-accept-button").click();
+  await expect(page.getByTestId("cube-name-fake-cube-name")).toBeVisible();
+  await expect(page.getByTestId("cube-options")).toBeVisible();
+  await page.getByTestId("cube-options").click();
+  await expect(page.getByTestId("dropdown-cube-options-delete")).toBeVisible();
+  await page.getByTestId("dropdown-cube-options-delete").click();
+  await expect(page.getByTestId("dialog-delete-cube-container")).toBeVisible();
+  await expect(page.getByTestId("dialog-delete-cube-title")).toBeVisible();
+  await expect(
+    page.getByTestId("dialog-delete-cube-description")
+  ).toBeVisible();
+  await expect(page.getByTestId("dialog-delete-cube-warning")).toBeVisible();
+  await expect(page.getByTestId("dialog-delete-cube-input")).toBeVisible();
+  await expect(
+    page.getByTestId("dialog-delete-cube-cancel-button")
+  ).toBeVisible();
+  await expect(
+    page.getByTestId("dialog-delete-cube-accept-button")
+  ).toBeVisible();
+  await page.getByTestId("dialog-delete-cube-input").click();
+  await page.getByTestId("dialog-delete-cube-input").fill("asd");
+  await page.getByTestId("dialog-delete-cube-accept-button").click();
+  await expect(
+    page.getByTestId("dialog-delete-cube-error-message")
+  ).toBeVisible();
+  await page.getByTestId("dialog-delete-cube-input").click();
+  await page.getByTestId("dialog-delete-cube-input").fill("fake-cube-name");
+  await page.getByTestId("dialog-delete-cube-accept-button").click();
+  await expect(page.getByTestId("empty-cubes-container")).toBeVisible();
+});
diff --git a/e2e/test-4.spec.ts b/e2e/test-4.spec.ts
diff --git a/src/components/cubes/cubes-table.tsx b/src/components/cubes/cubes-table.tsx
@@ -116,12 +116,13 @@ export default function CubesTable({
                   <TableCell>
                     <DropdownMenu>
                       <DropdownMenuTrigger asChild>
-                        <Button variant={"ghost"}>
+                        <Button variant={"ghost"} data-testId="cube-options">
                           <DotsHorizontalIcon />
                         </Button>
                       </DropdownMenuTrigger>
-                      <DropdownMenuContent>
+                      <DropdownMenuContent data-testId="dropdown-cube-options-container">
                         <DropdownMenuItem
+                          data-testId="dropdown-cube-options-edit"
                           onClick={() =>
                             openDialogType({
                               type: "edit",
@@ -132,6 +133,7 @@ export default function CubesTable({
                           Edit
                         </DropdownMenuItem>
                         <DropdownMenuItem
+                          data-testId="dropdown-cube-options-delete"
                           onClick={() =>
                             openDialogType({
                               type: "delete",

diff --git a/src/components/dialogs/dialog-delete-collection/dialog-delete-collection.tsx b/src/components/dialogs/dialog-delete-collection/dialog-delete-collection.tsx
@@ -46,15 +46,23 @@ export default function DialogDeleteCollection() {
   };
   return (
     <>
-      <DialogContent className="sm:max-w-[425px]">
+      <DialogContent
+        className="sm:max-w-[425px]"
+        data-testId="dialog-delete-cube-container"
+      >
         <DialogHeader>
-          <DialogTitle>{t("Cubes-modal.delete-collection")}</DialogTitle>
-          <DialogDescription>
+          <DialogTitle data-testId="dialog-delete-cube-title">
+            {t("Cubes-modal.delete-collection")}
+          </DialogTitle>
+          <DialogDescription data-testId="dialog-delete-cube-description">
             {t("Cubes-modal.delete-collection-description")}
           </DialogDescription>
         </DialogHeader>
 
-        <Alert className="bg-red-200/20 text-red-500">
+        <Alert
+          className="bg-red-200/20 text-red-500"
+          data-testId="dialog-delete-cube-warning"
+        >
           <AlertDescription className="font-semibold">
             <span className="font-black">{t("Cubes-modal.warning-alert")}</span>{" "}
             {t("Cubes-modal.warning-msg")}
@@ -71,18 +79,33 @@ export default function DialogDeleteCollection() {
             setError((prev) => ({ ...prev, status: false, message: "" }));
             setCubeName(e.target.value);
           }}
+          data-testId="dialog-delete-cube-input"
         />
 
         {error && error.status && (
-          <p className="text-destructive text-sm">{error.message}</p>
+          <p
+            className="text-destructive text-sm"
+            data-testId="dialog-delete-cube-error-message"
+          >
+            {error.message}
+          </p>
         )}
         <DialogFooter>
           <div className="flex justify-between w-full">
             <DialogClose asChild>
-              <Button variant={"outline"}>{t("Inputs.cancel")}</Button>
+              <Button
+                variant={"outline"}
+                data-testId="dialog-delete-cube-cancel-button"
+              >
+                {t("Inputs.cancel")}
+              </Button>
             </DialogClose>
 
-            <Button variant={"default"} onClick={handleDeleteCube}>
+            <Button
+              variant={"default"}
+              onClick={handleDeleteCube}
+              data-testId="dialog-delete-cube-accept-button"
+            >
               {t("Inputs.continue")}
             </Button>
           </div>