E2E tests to report results

TODO.md

@@ -1,47 +0,0 @@
-# Focus
-
-Calendar
-
-## Features
-
-- [x] Add badges to the seed
-- [x] Implement badge prizes
-- [x] Implement tags
-- [x] Add initial tags.json
-- [x] Add tags to the seed
-- [x] Page to add a new event
-- [x] Edit page
-- [x] E2E test form controls (adding/removing date, adding/removing tags) etc.
-- [x] E2E test browsing events + event page
-- [x] E2E test adding and editing event
-- [x] Add winners page
-- [ ] E2E test add winners page
-- [x] Winners on the event info page
-- [x] There should be a banner on the list page if you have past tournaments to report
-- [x] On the user page tab showing past results
-- [x] Translations
-
-## Other
-
-- [x] can submit results with one invalid linked user
-- [x] Redirect to event page after submitting results
-- [x] date input take in account time zone difference between server and client
-- [x] User selector allow passing users from top level
-- [x] Constants use CALENDAR_EVENT object
-- [x] New unfriendly crash if omits dates
-- [x] badges inside tag?
-- [x] Tags selector can remove
-- [x] Calendar new title
-- [x] Sort tags so that they are always in same order
-- [x] Maybe make bracket URL mandatory?
-- [x] components render twice on state change?
-- [x] If week has no events show some text + don't show time zone text
-- [x] flatMap -> React.fragment
-- [x] Event page layout shift with time not taking space before mount (only if one day)
-- [x] WeekLinks make opaque blocks not take space on mobile
-- [x] Type problem with Avatar
-- [x] Maybe classNames that do nothing on calendar event page?
-- [x] refactor global.css/common.css -> variables.css / utils.css / common.css
-- [x] addTagArray get tags type from constant
-- [x] Rename model events -> calendarEvents
-- [x] On the event page should not say Day 1 if only one day

app/db/seed.ts

@@ -456,7 +456,8 @@ function calendarEventResults() {
   );
 
   for (const eventId of eventIdsOfPast) {
-    if (Math.random() < 0.3) continue;
+    // event id = 1 needs to be without results for e2e tests
+    if (Math.random() < 0.3 || eventId === 1) continue;
 
     db.calendarEvents.upsertReportedScores({
       eventId,

app/routes/calendar/$id/report-winners.tsx

@@ -164,7 +164,7 @@ export default function ReportWinnersPage() {
           {t("calendar:forms.reportResultsInfo")}
         </FormMessage>
         <TeamInputs />
-        <Button type="submit" className="mt-4">
+        <Button type="submit" className="mt-4" data-cy="submit-button">
           {t("common:actions.submit")}
         </Button>
         <FormErrors namespace="calendar" />
@@ -233,6 +233,7 @@ function TeamInputs() {
       <Button
         onClick={() => setAmountOfTeams((amountOfTeams) => amountOfTeams + 1)}
         tiny
+        data-cy="add-team-button"
       >
         {t("forms.team.add")}
       </Button>
@@ -309,6 +310,7 @@ function Team({
             onChange={handleTeamNameChange}
             required
             maxLength={CALENDAR_EVENT_RESULT.MAX_TEAM_NAME_LENGTH}
+            data-cy="team-name-input"
           />
         </div>
         <div>
@@ -321,6 +323,7 @@ function Team({
             required
             max={CALENDAR_EVENT_RESULT.MAX_TEAM_PLACEMENT}
             className="w-24"
+            data-cy="placing-input"
           />
         </div>
       </div>
@@ -387,6 +390,7 @@ function Players({
                 tiny
                 variant="minimal"
                 onClick={() => handlePlayerInputTypeChange(i)}
+                data-cy="change-input-type-button"
               >
                 {asPlainInput
                   ? t("forms.team.player.addAsUser")
@@ -399,6 +403,7 @@ function Players({
                 value={player}
                 onChange={(e) => handleInputChange(i, e.target.value)}
                 max={CALENDAR_EVENT_RESULT.MAX_PLAYER_NAME_LENGTH}
+                data-cy="plain-player-name-input"
               />
             ) : (
               <UserCombobox
@@ -422,6 +427,7 @@ function Players({
           onClick={handleAddPlayer}
           disabled={players.length === CALENDAR_EVENT_RESULT.MAX_PLAYERS_LENGTH}
           variant="outlined"
+          data-cy="add-player-button"
         >
           {t("forms.team.player.add")}
         </Button>{" "}
@@ -430,6 +436,7 @@ function Players({
           variant="destructive"
           onClick={handleRemovePlayer}
           disabled={players.length === 1}
+          data-cy="remove-player-button"
         >
           {t("forms.team.player.remove")}
         </Button>

cypress/e2e/calendar.cy.ts

@@ -103,4 +103,48 @@ describe("New calendar event page", () => {
     cy.url().should("include", "/1"); // we should have been redirected to the new event's page
     cy.contains("Edited Event");
   });
+
+  describe("Results", () => {
+    it("Adds results to tournament", () => {
+      cy.auth(2);
+
+      cy.visit(calendarEventPage(1));
+      cy.getCy("report-winners-button").click();
+
+      cy.getCy("participants-count-input").type("24");
+
+      cy.getCy("team-name-input").type("Team Olive");
+
+      for (let i = 0; i < 4; i++) {
+        cy.getCy("change-input-type-button").eq(i).click();
+        cy.getCy("plain-player-name-input")
+          .eq(i)
+          .type(`Player ${i + 1}`);
+      }
+
+      cy.getCy("add-player-button").first().click();
+      cy.getCy("team-player-combobox-input").clear().type("Sendou{enter}");
+
+      cy.getCy("add-team-button").click();
+
+      cy.getCy("team-name-input").eq(1).type("NSTC");
+      cy.getCy("placing-input").eq(1).clear().type("8");
+
+      for (let i = 0; i < 3; i++) {
+        cy.getCy("remove-player-button").eq(1).click();
+      }
+      cy.getCy("change-input-type-button").eq(5).click();
+      cy.getCy("plain-player-name-input").eq(4).type(`fuzzy`);
+
+      cy.getCy("submit-button").click();
+
+      // checking that added results show
+
+      cy.contains("8th");
+      cy.contains("Sendou").click();
+
+      cy.contains("Results").click();
+      cy.contains("Player 1");
+    });
+  });
 });