test: 🚨 added Reminders e2e tests

singhAmandeep007 · Jul 7, 2024 · e5ddf26 · e5ddf26
1 parent 0e78865
commit e5ddf26
Show file tree

Hide file tree

Showing 11 changed files with 208 additions and 30 deletions.
diff --git a/cypress/pages/Reminders.ts b/cypress/pages/Reminders.ts
@@ -4,6 +4,109 @@ export class RemindersElements extends LayoutElements {
   get root() {
     return this.content.findByTestId("reminders");
   }
+
+  getReminderGroupItemByText(text: string) {
+    return this.root.findByTestId(`reminder-group-item-${text}`).closest("li");
+  }
+
+  getReminderGroupMenuBtnByText(text: string) {
+    return this.getReminderGroupItemByText(text).findByTestId("reminder-group-item-menu-btn");
+  }
+
+  get reminderGroupItemMenu() {
+    return cy.findByTestId("reminder-group-item-menu");
+  }
+
+  get createReminderGroupBtn() {
+    return this.root.findByTestId("reminder-group-create-btn");
+  }
+
+  get reminderGroupCreateSaveBtn() {
+    return this.root.findByTestId("reminder-group-create-save");
+  }
+
+  get reminderGroupCreateCancelBtn() {
+    return this.root.findByTestId("reminder-group-create-cancel");
+  }
+
+  get reminderGroupCreateTextInput() {
+    return this.root.findByTestId("reminder-group-create-text");
+  }
+
+  createReminderGroup(text: string) {
+    this.createReminderGroupBtn.click();
+
+    this.reminderGroupCreateTextInput.type(text);
+
+    this.reminderGroupCreateSaveBtn.click({ force: true });
+  }
+
+  get reminderListTitle() {
+    return this.root.findByTestId("reminder-list-title");
+  }
+  get createReminderBtn() {
+    return this.root.findByTestId("reminder-create-btn");
+  }
+
+  get reminderCreateSaveBtn() {
+    return this.root.findByTestId("reminder-item-create-save");
+  }
+
+  get reminderCreateCancelBtn() {
+    return this.root.findByTestId("reminder-item-create-cancel");
+  }
+
+  get reminderCreateTextInput() {
+    return this.root.findByTestId("reminder-item-create-text");
+  }
+
+  createReminder(text: string) {
+    this.createReminderBtn.click();
+
+    this.reminderCreateTextInput.type(text);
+
+    this.reminderCreateSaveBtn.click({ force: true });
+  }
+
+  getReminderItemByText(text: string) {
+    return this.root.findByTestId(`reminder-item-${text}`).closest("li");
+  }
+
+  getReminderMenuBtnByText(text: string) {
+    return this.getReminderItemByText(text).findByTestId("reminder-item-menu-btn");
+  }
+
+  get reminderItemMenu() {
+    return cy.findByTestId("reminder-item-menu");
+  }
+
+  get deleteReminderMenuItem() {
+    return this.reminderItemMenu.findByTestId("reminder-item-menuitem-delete");
+  }
+
+  get editReminderMenuItem() {
+    return this.reminderItemMenu.findByTestId("reminder-item-menuitem-edit");
+  }
+
+  get reminderDueDateMenuItem() {
+    return this.reminderItemMenu.findByTestId("reminder-item-menuitem-due-date");
+  }
+
+  get pinReminderMenuItem() {
+    return this.reminderItemMenu.findByTestId("reminder-item-menuitem-pin");
+  }
+
+  get saveReminderDueDateBtn() {
+    return cy.findByTestId("reminder-item-save-due-date-btn");
+  }
+
+  get reminderDueDateDialog() {
+    return cy.findByTestId("reminder-item-due-date-dialog");
+  }
+
+  get reminderDueDateTimeInput() {
+    return this.reminderDueDateDialog.findByTestId("select-time-input");
+  }
 }
 
 export const remindersElements = new RemindersElements();
diff --git a/cypress/specs/reminders.cy.ts b/cypress/specs/reminders.cy.ts
@@ -1,25 +1,74 @@
 import { http, HttpResponse } from "msw";
+import { format } from "date-fns";
 
-import { urlPrefix } from "services/mocker/msw";
+import { buildScenarios, urlPrefix } from "services/mocker/msw";
 
 import { remindersElements } from "../pages";
 
 describe("Reminders Page", () => {
-  it("should render reminders page content", () => {
+  it("should be able to create a reminder under a reminder group and add a due date", () => {
+    const reminderTitle = "Learn Cypress";
+
+    cy.visit("/reminders");
+
+    remindersElements.root.should("exist");
+
+    remindersElements.createReminderGroup("Reminder group title");
+
+    remindersElements.root.findByText("Reminder group title").click();
+
+    remindersElements.reminderListTitle.should("have.text", "Reminder group title");
+
+    remindersElements.createReminder(reminderTitle);
+
+    remindersElements.getReminderItemByText(reminderTitle).should("exist");
+
+    remindersElements.getReminderMenuBtnByText(reminderTitle).click();
+
+    remindersElements.reminderDueDateMenuItem.click();
+
+    const dueDate = new Date();
+
+    remindersElements.reminderDueDateDialog.findByRole("gridcell", { name: dueDate.getDate().toString() }).click();
+
+    remindersElements.reminderDueDateTimeInput.type(format(dueDate, "HH:mm"));
+
+    remindersElements.saveReminderDueDateBtn.click();
+
+    remindersElements.getReminderItemByText(reminderTitle).should("not.contain", "Reminder group title");
+
+    remindersElements.getReminderItemByText(reminderTitle).contains(format(dueDate, "MMM d, yyyy, h:mm a"));
+  });
+
+  it("should handle negative scenario for create reminder", () => {
     cy.interceptRequest(
-      http.get(
+      http.post(
         urlPrefix("/reminders"),
         () => {
           return HttpResponse.json(null, { status: 500 });
         },
-        {
-          once: false,
-        }
+        { once: true }
       )
     );
 
+    cy.getMswDb().then((db) => {
+      buildScenarios(db)
+        .withReminders(5)
+        .withReminderGroups({ reminderGroups: ["Personal"], remindersPerGroup: 2 });
+    });
+
     cy.visit("/reminders");
 
     remindersElements.root.should("exist");
+
+    remindersElements.getReminderGroupItemByText("Personal").findByText("Personal").click();
+
+    remindersElements.createReminder("Learn Cypress");
+
+    cy.contains("Error creating reminder");
+
+    remindersElements.createReminder("Learn Cypress");
+
+    remindersElements.getReminderItemByText("Learn Cypress").should("exist");
   });
 });
diff --git a/cypress/support/msw.ts b/cypress/support/msw.ts
@@ -1,21 +1,23 @@
 import { setupWorker, type SetupWorker } from "msw/browser";
 import { RequestHandler } from "msw";
 
-import { handlers } from "services/mocker/msw";
+import { setupHandlers, db } from "services/mocker/msw";
 
 declare global {
   namespace Cypress {
     // eslint-disable-next-line
     interface Chainable {
       interceptRequest(...handlers: RequestHandler[]): void;
+
+      getMswDb(): Promise<typeof db>;
     }
   }
 }
 
 let worker: SetupWorker;
 
 before(() => {
-  worker = setupWorker(...handlers);
+  worker = setupWorker(...setupHandlers(db));
 
   cy.wrap(
     worker.start({
@@ -38,3 +40,7 @@ Cypress.on("test:before:run", () => {
 Cypress.Commands.add("interceptRequest", (...handlers: RequestHandler[]) => {
   worker.use(...handlers);
 });
+
+Cypress.Commands.add("getMswDb", () => {
+  return Promise.resolve(db);
+});
diff --git a/src/components/DateTimePicker.tsx b/src/components/DateTimePicker.tsx
@@ -40,6 +40,7 @@ const TimeField = ({
           value={time}
           onChange={handleChange}
           disabled={disabled}
+          data-testid="select-time-input"
         />
       </div>
     </div>

diff --git a/src/views/Reminders/ReminderGroupItem/ReminderGroupItem.tsx b/src/views/Reminders/ReminderGroupItem/ReminderGroupItem.tsx
@@ -67,7 +67,7 @@ export const ReminderGroupItem: FC<PropsWithChildren<TReminderGroupItemProps>> =
   return (
     <div
       className={cn("flex cursor-pointer items-center justify-between gap-2 px-1 py-2")}
-      data-testid={`reminder-group-item-${reminderGroup ? reminderGroup.id : "all"}`}
+      data-testid={`reminder-group-item-${reminderGroup ? reminderGroup.name : "all"}`}
     >
       {renderItem}
 
@@ -80,7 +80,7 @@ export const ReminderGroupItem: FC<PropsWithChildren<TReminderGroupItemProps>> =
             <Button
               variant="outline"
               size="icon"
-              data-testid={`reminder-group-item-menu-${reminderGroup.id}`}
+              data-testid={`reminder-group-item-menu-btn`}
               disabled={isMenuDisabled}
             >
               {isDropdownOpen ? <ChevronUp className="icon" /> : <ChevronDown className="icon" />}
@@ -90,10 +90,11 @@ export const ReminderGroupItem: FC<PropsWithChildren<TReminderGroupItemProps>> =
             align="end"
             onInteractOutside={() => setIsDropdownOpen(false)}
             className="min-w-min"
+            data-testid={`reminder-group-item-menu`}
           >
             <DropdownMenuItem
               onClick={() => setIsUpdating(true)}
-              data-testid={`reminder-group-item-update-${reminderGroup.id}`}
+              data-testid={`reminder-group-item-update-${reminderGroup.name}`}
               className="group"
             >
               <Pencil
@@ -105,7 +106,7 @@ export const ReminderGroupItem: FC<PropsWithChildren<TReminderGroupItemProps>> =
             <DropdownMenuSeparator />
             <DropdownMenuItem
               onClick={() => handleOnDelete(reminderGroup.id)}
-              data-testid={`reminder-group-item-delete-${reminderGroup.id}`}
+              data-testid={`reminder-group-item-delete-${reminderGroup.name}`}
               className="group"
             >
               <Trash

diff --git a/src/views/Reminders/ReminderGroupsList/ReminderGroupsList.spec.tsx b/src/views/Reminders/ReminderGroupsList/ReminderGroupsList.spec.tsx
@@ -12,10 +12,10 @@ const testMswServer = createTestMswServer();
 
 describe("ReminderGroupsList", () => {
   const setup = () => {
-    const getAddListBtn = () => screen.getByRole("button", { name: "Add List" });
-    const getSaveBtn = () => screen.getByTestId("reminder-group-item-create-save");
-    const getCancelBtn = () => screen.getByTestId("reminder-group-item-create-cancel");
-    const getTextInput = () => screen.getByTestId("reminder-group-item-create-text");
+    const getAddListBtn = () => screen.getByTestId("reminder-group-create-btn");
+    const getSaveBtn = () => screen.getByTestId("reminder-group-create-save");
+    const getCancelBtn = () => screen.getByTestId("reminder-group-create-cancel");
+    const getTextInput = () => screen.getByTestId("reminder-group-create-text");
 
     return {
       result: render(<ReminderGroupsList />),

diff --git a/src/views/Reminders/ReminderGroupsList/ReminderGroupsList.tsx b/src/views/Reminders/ReminderGroupsList/ReminderGroupsList.tsx
@@ -19,6 +19,7 @@ export const ReminderGroupsList: FC<PropsWithChildren<TReminderGroupsListProps>>
           size={"full"}
           onClick={() => setIsCreating((isCreating) => !isCreating)}
           disabled={isCreating}
+          data-testid={"reminder-group-create-btn"}
         >
           Add List
         </AddButton>
@@ -48,9 +49,9 @@ export const ReminderGroupsList: FC<PropsWithChildren<TReminderGroupsListProps>>
             setIsCreating(false);
           }}
           testIds={{
-            cancel: `reminder-group-item-create-cancel`,
-            save: `reminder-group-item-create-save`,
-            text: `reminder-group-item-create-text`,
+            cancel: `reminder-group-create-cancel`,
+            save: `reminder-group-create-save`,
+            text: `reminder-group-create-text`,
           }}
         />
       )}