"operates custom form controls" E2E test

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

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>

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>
           ))}

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,

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);
+  });
+});