From 6281c4cb5f244e2a20da505d1fd4cc85c24f00f3 Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Sun, 31 Jul 2022 15:25:26 +0300
Subject: [PATCH] "operates custom form controls" E2E test

---
 TODO.md                                 |  2 +-
 app/routes/calendar/components/Tags.tsx |  1 +
 app/routes/calendar/new.tsx             |  6 ++++
 app/utils/urls.ts                       |  4 +--
 cypress/e2e/calendar.cy.ts              | 48 +++++++++++++++++++++++++
 5 files changed, 58 insertions(+), 3 deletions(-)
 create mode 100644 cypress/e2e/calendar.cy.ts

diff --git a/TODO.md b/TODO.md
index b68bd4a85..e7c960aab 100644
--- a/TODO.md
+++ b/TODO.md
@@ -11,7 +11,7 @@ Calendar
 - [x] Add tags to the seed
 - [x] Page to add a new event
 - [x] Edit page
-- [ ] E2E test form controls (adding/removing date, adding/removing tags) etc.
+- [x] E2E test form controls (adding/removing date, adding/removing tags) etc.
 - [ ] E2E test browsing events + event page
 - [ ] E2E test adding and editing event
 - [ ] Add winners page
diff --git a/app/routes/calendar/components/Tags.tsx b/app/routes/calendar/components/Tags.tsx
index f0d19ef66..d3ee02305 100644
--- a/app/routes/calendar/components/Tags.tsx
+++ b/app/routes/calendar/components/Tags.tsx
@@ -31,6 +31,7 @@ export function Tags({
                 variant="minimal"
                 aria-label="Remove date"
                 tiny
+                data-cy="tag-delete-button"
               />
             )}
           </li>
diff --git a/app/routes/calendar/new.tsx b/app/routes/calendar/new.tsx
index 30f98b1f1..e101f0e0b 100644
--- a/app/routes/calendar/new.tsx
+++ b/app/routes/calendar/new.tsx
@@ -303,6 +303,7 @@ function DatesInput() {
             onChange={(e) => setDateInputValue(e.target.value)}
             min={dateToYearMonthDayHourMinuteString(MIN_DATE)}
             max={dateToYearMonthDayHourMinuteString(MAX_DATE)}
+            data-cy="date-input"
           />
           <Button
             tiny
@@ -318,6 +319,7 @@ function DatesInput() {
                 ].sort((a, b) => a.date.getTime() - b.date.getTime())
               );
             }}
+            data-cy="add-date-button"
           >
             Add date
           </Button>
@@ -355,6 +357,7 @@ function DatesInput() {
                 icon={<TrashIcon />}
                 variant="minimal-destructive"
                 aria-label="Remove date"
+                data-cy="date-delete-button"
               />
             </React.Fragment>
           ))}
@@ -426,6 +429,7 @@ function TagsAdder() {
           onChange={(e) =>
             setTags([...tags, e.target.value as CalendarEventTag])
           }
+          data-cy="tags-select"
         >
           <option value="">Choose a tag</option>
           {tagsForSelect.map((tag) => (
@@ -486,6 +490,7 @@ function BadgesAdder() {
               )!,
             ]);
           }}
+          data-cy="badges-select"
         >
           <option value="">Choose a badge prize</option>
           {badgesForSelect.map((badge) => (
@@ -507,6 +512,7 @@ function BadgesAdder() {
                 icon={<TrashIcon />}
                 variant="minimal-destructive"
                 aria-label="Remove badge"
+                data-cy="badge-delete-button"
               />
             </div>
           ))}
diff --git a/app/utils/urls.ts b/app/utils/urls.ts
index fbe8389c2..fdc9726ce 100644
--- a/app/utils/urls.ts
+++ b/app/utils/urls.ts
@@ -25,8 +25,8 @@ export const badgePage = (badgeId: number) => `${BADGES_PAGE}/${badgeId}`;
 export const plusSuggestionPage = (tier?: string | number) =>
   `/plus/suggestions${tier ? `?tier=${tier}` : ""}`;
 export const calendarEventPage = (eventId: number) => `/calendar/${eventId}`;
-export const calendarEditPage = (eventId: number) =>
-  `/calendar/new?eventId=${eventId}`;
+export const calendarEditPage = (eventId?: number) =>
+  `/calendar/new${eventId ? `?eventId=${eventId}` : ""}`;
 
 export const badgeUrl = ({
   code,
diff --git a/cypress/e2e/calendar.cy.ts b/cypress/e2e/calendar.cy.ts
new file mode 100644
index 000000000..e31843aa3
--- /dev/null
+++ b/cypress/e2e/calendar.cy.ts
@@ -0,0 +1,48 @@
+import { dateToYearMonthDayHourMinuteString } from "~/utils/dates";
+import { calendarEditPage } from "~/utils/urls";
+
+export {};
+
+describe("New calendar event page", () => {
+  beforeEach(() => {
+    cy.seed();
+  });
+
+  it("operates custom form controls", function () {
+    cy.auth(2);
+    cy.visit(calendarEditPage());
+
+    // dates
+
+    cy.getCy("date-input").type(
+      dateToYearMonthDayHourMinuteString(new Date(Date.UTC(2022, 5, 20)))
+    );
+    cy.getCy("add-date-button").click();
+    cy.getCy("date-input")
+      .clear()
+      .type(
+        dateToYearMonthDayHourMinuteString(new Date(Date.UTC(2022, 5, 21)))
+      );
+    cy.getCy("add-date-button").click();
+
+    cy.getCy("date-delete-button").its("length").should("eq", 2);
+    cy.getCy("date-delete-button").first().click();
+    cy.getCy("date-delete-button").its("length").should("eq", 1);
+
+    // tags
+
+    cy.getCy("tags-select").select("ART");
+    cy.getCy("tags-select").select("MONEY");
+    cy.getCy("tag-delete-button").its("length").should("eq", 2);
+    cy.getCy("tag-delete-button").first().click();
+    cy.getCy("tag-delete-button").its("length").should("eq", 1);
+
+    // badges
+
+    cy.getCy("badges-select").select(1);
+    cy.getCy("badges-select").select(2);
+    cy.getCy("badge-delete-button").its("length").should("eq", 2);
+    cy.getCy("badge-delete-button").first().click();
+    cy.getCy("badge-delete-button").its("length").should("eq", 1);
+  });
+});