"browses weeks and inspects event page" E2E test

TODO.md

@@ -12,7 +12,7 @@ Calendar
 - [x] Page to add a new event
 - [x] Edit page
 - [x] E2E test form controls (adding/removing date, adding/removing tags) etc.
-- [ ] E2E test browsing events + event page
+- [x] E2E test browsing events + event page
 - [x] E2E test adding and editing event
 - [ ] Add winners page
 - [ ] Winners on the event info page

app/routes/calendar/$id.tsx

@@ -120,7 +120,11 @@ export default function CalendarEventPage() {
               {resolveBaseUrl(event.bracketUrl)}
             </LinkButton>
             {canEditCalendarEvent({ user, event }) && (
-              <LinkButton tiny to={calendarEditPage(event.eventId)}>
+              <LinkButton
+                tiny
+                to={calendarEditPage(event.eventId)}
+                data-cy="edit-button"
+              >
                 Edit
               </LinkButton>
             )}
@@ -136,7 +140,7 @@ export default function CalendarEventPage() {
           />
           {discordFullName(event)}
         </div>
-        <div>{event.description}</div>
+        <div data-cy="event-description">{event.description}</div>
       </div>
     </Main>
   );

app/routes/calendar/index.tsx

@@ -160,7 +160,9 @@ export default function CalendarPage() {
                 </div>
               </>
             ) : (
-              <h2 className="calendar__no-events">No events this week</h2>
+              <h2 className="calendar__no-events" data-cy="no-events">
+                No events this week
+              </h2>
             )}
           </>
         ) : (
@@ -338,7 +340,10 @@ function EventsList({
                           </div>
                         </div>
                         <div className="stack xs">
-                          <Link to={String(calendarEvent.eventId)}>
+                          <Link
+                            to={String(calendarEvent.eventId)}
+                            data-cy="event-page-link"
+                          >
                             <h2 className="calendar__event__title">
                               {calendarEvent.name}{" "}
                               {calendarEvent.nthAppearance > 1 ? (

app/utils/urls.ts

@@ -16,6 +16,7 @@ export const ADMIN_PAGE = "/admin";
 export const FAQ_PAGE = "/faq";
 export const CONTRIBUTIONS_PAGE = "/contributions";
 export const BADGES_PAGE = "/badges";
+export const CALENDAR_PAGE = "/calendar";
 export const STOP_IMPERSONATING_URL = "/auth/impersonate/stop";
 
 export const userPage = (discordId: string) => `/u/${discordId}`;

cypress/e2e/calendar.cy.ts

@@ -1,8 +1,28 @@
 import { dateToYearMonthDayHourMinuteString } from "~/utils/dates";
-import { calendarEditPage } from "~/utils/urls";
+import {
+  calendarEditPage,
+  calendarEventPage,
+  CALENDAR_PAGE,
+} from "~/utils/urls";
 
 export {};
 
+describe("Calendar", () => {
+  beforeEach(() => {
+    cy.seed();
+  });
+
+  it("browses weeks and inspects one event page", () => {
+    cy.visit(CALENDAR_PAGE);
+
+    cy.contains("Last").click();
+    cy.getCy("no-events");
+    cy.contains("Next").click();
+    cy.getCy("event-page-link").first().click();
+    cy.getCy("event-description"); // page switched after link click
+  });
+});
+
 describe("New calendar event page", () => {
   beforeEach(() => {
     cy.seed();
@@ -69,7 +89,9 @@ describe("New calendar event page", () => {
 
   it("edits an event", () => {
     cy.auth(2);
-    cy.visit(calendarEditPage(1));
+
+    cy.visit(calendarEventPage(1));
+    cy.getCy("edit-button").click();
 
     cy.getCy("name-input").clear().type("Edited Event");