test: add e2e test for creating a cube collection

bryanlundberg · Sep 20, 2024 · 64070ad · 64070ad
1 parent 5eca39d
commit 64070ad
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 28 deletions.
diff --git a/e2e/create-new-collection.spec.ts b/e2e/create-new-collection.spec.ts
@@ -0,0 +1,23 @@
+import { test, expect } from "@playwright/test";
+
+test("should create a cube", async ({ page }) => {
+  await page.locator("body").click();
+  await expect(page.getByTestId("main-cube-selector")).toBeVisible();
+  await page.getByTestId("main-cube-selector").click();
+  await expect(
+    page.getByRole("button", { name: "New collection" })
+  ).toBeVisible();
+  await page.getByRole("button", { name: "New collection" }).click();
+  await expect(page.getByTestId("empty-cubes-container")).toBeVisible();
+  await expect(page.getByTestId("create-collection-button")).toBeVisible();
+  await page.getByTestId("create-collection-button").click();
+  await expect(page.getByTestId("drawer-create-collection")).toBeVisible();
+  await expect(page.getByTestId("drawer-input-name")).toBeVisible();
+  await expect(page.getByTestId("drawer-accept-button")).toBeVisible();
+  await expect(page.getByTestId("drawer-cancel-button")).toBeVisible();
+  await page.getByTestId("drawer-input-name").click();
+  await page.getByTestId("drawer-input-name").fill("experimental");
+  await page.getByTestId("checkbox-category-3x3").click();
+  await page.getByTestId("drawer-accept-button").click();
+  await expect(page.getByTestId("cube-name-experimental")).toBeVisible();
+});
diff --git a/e2e/test-2.spec.ts b/e2e/test-2.spec.ts
diff --git a/e2e/test-3.spec.ts b/e2e/test-3.spec.ts
diff --git a/src/app/[locale]/cubes/page.tsx b/src/app/[locale]/cubes/page.tsx
@@ -50,7 +50,10 @@ export default function Page() {
                 onOpenChange={setIsOpenDrawerNewCollection}
               >
                 <DrawerTrigger asChild>
-                  <Button className="p-2">
+                  <Button
+                    className="p-2"
+                    data-testId="create-collection-button"
+                  >
                     <PlusIcon className="size-4" strokeWidth={5} />{" "}
                     <span className="hidden sm:inline">
                       {t("CubesPage.new-collection")}

diff --git a/src/components/cubes/EmptyCubes.tsx b/src/components/cubes/EmptyCubes.tsx
@@ -9,6 +9,7 @@ export default function EmptyCubes({ ...rest }: EmptyCubesProps) {
     <>
       <div
         {...rest}
+        data-testId="empty-cubes-container"
         className="flex flex-col items-center justify-center h-full m-3 overflow-auto border border-dashed rounded-md cursor-pointer grow  min-h-96"
       >
         <div className="flex flex-col items-center justify-center gap-1 p-3 font-medium">

diff --git a/src/components/cubes/cubes-table.tsx b/src/components/cubes/cubes-table.tsx
@@ -37,7 +37,7 @@ export default function CubesTable({
   const { openDialogType } = useDialogCubesOptions();
   return (
     <>
-      <Card className="overflow-auto">
+      <Card className="overflow-auto" data-testId="table-of-cubes">
         <Table>
           <TableHeader>
             <TableRow>
@@ -73,6 +73,7 @@ export default function CubesTable({
                   <TableCell
                     onClick={() => handleRedirectToTimer(cube.id)}
                     className="hover:cursor-pointer"
+                    data-testId={"cube-name-" + cube.name}
                   >
                     {cube.name}
                   </TableCell>

diff --git a/src/components/drawners/drawner-create-collection/drawner-create-collection.tsx b/src/components/drawners/drawner-create-collection/drawner-create-collection.tsx
@@ -76,7 +76,10 @@ export default function DrawerCreateCollection({
   };
 
   return (
-    <DrawerContent className="max-w-[850px] mx-auto">
+    <DrawerContent
+      className="max-w-[850px] mx-auto"
+      data-testId="drawer-create-collection"
+    >
       <DrawerHeader>
         <DrawerTitle>{t("Cubes-modal.new-collection")}</DrawerTitle>
         <DrawerDescription>
@@ -87,6 +90,7 @@ export default function DrawerCreateCollection({
       <div className="p-3">
         <Label htmlFor="name">{t("Cubes-modal.name")}</Label>
         <Input
+          data-testId="drawer-input-name"
           id="name"
           placeholder="E.g: X Man Tornado V3 M"
           onChange={(e) => {
@@ -103,6 +107,7 @@ export default function DrawerCreateCollection({
           {cubeCollection.map((e) => {
             return (
               <Image
+                data-testId={"checkbox-category-" + e.name}
                 key={genId()}
                 src={e.src}
                 alt={e.event || ""}
@@ -131,11 +136,18 @@ export default function DrawerCreateCollection({
       </div>
 
       <DrawerFooter>
-        <Button onClick={handleSubmitNewCollection}>
+        <Button
+          onClick={handleSubmitNewCollection}
+          data-testId="drawer-accept-button"
+        >
           {t("Inputs.create")}
         </Button>
         <DrawerClose asChild>
-          <Button variant="outline" className="w-full">
+          <Button
+            variant="outline"
+            className="w-full"
+            data-testId="drawer-cancel-button"
+          >
             {t("Inputs.cancel")}
           </Button>
         </DrawerClose>