Update Cypress tests

6 files changed, 147 insertions, 88 deletions

diff --git a/cypress/e2e/event.cy.ts b/cypress/e2e/event.cy.ts
index 1160586..270ca0a 100644
--- a/cypress/e2e/event.cy.ts
+++ b/cypress/e2e/event.cy.ts
@@ -7,8 +7,6 @@ const eventData = {
     hostName: "Your Name",
     creatorEmail: "test@example.com",
     eventGroupCheckbox: false,
-    eventGroupID: "YourEventGroupID",
-    eventGroupEditToken: "YourEventGroupEditToken",
     interactionCheckbox: true,
     joinCheckbox: true,
     maxAttendeesCheckbox: true,
@@ -28,7 +26,7 @@ describe("Events", () => {
         cy.get("#eventStart").type(eventData.eventStart);
         cy.get("#eventEnd").type(eventData.eventEnd);
 
-        cy.get(".select2-container").click();
+        cy.get("select#timezone + span.select2").click();
         cy.get(".select2-results__option")
             .contains(eventData.timezone)
             .click({ force: true });
@@ -177,7 +175,7 @@ describe("Events", () => {
         cy.get("#editEventForm #eventStart").type("2030-12-01T00:00");
         cy.get("#editEventForm #eventEnd").type("2030-12-01T01:00");
 
-        cy.get("#editEventForm .select2-container").click();
+        cy.get("#editEventForm select#timezone + span.select2").click();
         cy.get(".select2-results__option")
             .contains("Australia/Sydney")
             .click({ force: true });
@@ -218,4 +216,32 @@ describe("Events", () => {
         // Check that the attendee form is not visible
         cy.get("#attendEvent").should("not.exist");
     });
+
+    it("sets a group for an event", function () {
+        // For this we need to create a group first. This will load the group edit token
+        // into our localStorage, and will then appear in the group select dropdown.
+        // We then go back to the event page, edit the event, and set the group.
+        cy.createGroup({
+            eventGroupName: "Test Group",
+            eventGroupDescription: "Test Group Description",
+            eventGroupURL: "testgroup",
+            hostName: "Test Host",
+            creatorEmail: "test@example.com",
+        });
+
+        cy.visit(`/${this.eventID}`);
+        cy.url().should("include", this.editToken);
+
+        cy.get("#editEvent").click();
+        cy.get("#editEventForm #eventGroupCheckbox").check();
+        cy.get("select#eventGroupSelect + span.select2").click();
+        cy.get(".select2-results__option")
+            .contains("Test Group")
+            .click({ force: true });
+        cy.get("#editEventForm").submit();
+
+        cy.get("#editModal").should("not.be.visible");
+
+        cy.get("#event-group").should("contain.text", "Test Group");
+    });
 });
diff --git a/cypress/e2e/group.cy.ts b/cypress/e2e/group.cy.ts
index 8250179..279cb6c 100644
--- a/cypress/e2e/group.cy.ts
+++ b/cypress/e2e/group.cy.ts
@@ -8,28 +8,7 @@ const groupData = {
 
 describe("Groups", () => {
     beforeEach(() => {
-        cy.visit("/new");
-        cy.get("#showNewEventGroupFormButton").click();
-
-        // Fill in the form
-        cy.get("#eventGroupName").type(groupData.eventGroupName);
-        cy.get("#eventGroupDescription").type(groupData.eventGroupDescription);
-        cy.get("#eventGroupURL").type(groupData.eventGroupURL);
-        cy.get("#eventGroupHostName").type(groupData.hostName);
-        cy.get("#eventGroupCreatorEmail").type(groupData.creatorEmail);
-
-        // Submit the form
-        cy.get("#newEventGroupForm").submit();
-
-        // Wait for the new page to load
-        cy.url().should("not.include", "/new");
-
-        // Get the new group ID from the URL
-        cy.url().then((url) => {
-            const [groupID, editToken] = url.split("/").pop().split("?");
-            cy.wrap(groupID).as("groupID");
-            cy.wrap(editToken.slice(2)).as("editToken");
-        });
+        cy.createGroup(groupData);
     });
     it("creates a new group", function () {
         cy.get("#eventGroupName").should("have.text", groupData.eventGroupName);
@@ -47,23 +26,42 @@ describe("Groups", () => {
     });
 
     it("edits a group", function () {
-        // // Wait for the modal to not be visible
-        // cy.get("#editModal").should("not.be.visible");
-        // // Check that all the data is correct
-        // cy.get(".p-name").should("have.text", "Edited Event Name");
-        // cy.get(".p-location").should("have.text", "Edited Event Location");
-        // cy.get(".p-summary").should("contain.text", "Edited Event Description");
-        // cy.get("#hosted-by").should("contain.text", "Hosted by Edited Name");
-        // cy.get(".dt-duration").should(
-        //     "contain.text",
-        //     "Sunday 1 December 2030 from 12:00 am to 1:00 am",
-        // );
-        // cy.get(".dt-duration")
-        //     .invoke("text")
-        //     .should("match", /AE(D|S)T/);
-        // // Check that the comment form is not visible
-        // cy.get("#postComment").should("not.exist");
-        // // Check that the attendee form is not visible
-        // cy.get("#attendEvent").should("not.exist");
+        cy.get("#editGroup").click();
+
+        cy.get("#editEventGroupForm #eventGroupName").focus().clear();
+        cy.get("#editEventGroupForm #eventGroupDescription").focus().clear();
+        cy.get("#editEventGroupForm #eventGroupURL").focus().clear();
+        cy.get("#editEventGroupForm #eventGroupHostName").focus().clear();
+        cy.get("#editEventGroupForm #eventGroupCreatorEmail").focus().clear();
+
+        cy.get("#editEventGroupForm #eventGroupName").type("Edited Group Name");
+        cy.get("#editEventGroupForm #eventGroupDescription").type(
+            "Edited Group Description",
+        );
+        cy.get("#editEventGroupForm #eventGroupURL").type(
+            "https://edited.example.com",
+        );
+        cy.get("#editEventGroupForm #eventGroupHostName").type("Edited Name");
+        cy.get("#editEventGroupForm #eventGroupCreatorEmail").type(
+            "edited@example.com",
+        );
+
+        // Submit the form
+        cy.get("#editEventGroupForm").submit();
+
+        // Wait for the modal to not be visible
+        cy.get("#editModal").should("not.be.visible");
+
+        // Check that all the data is correct
+        cy.get("#eventGroupName").should("have.text", "Edited Group Name");
+        cy.get("#eventDescription").should(
+            "contain.text",
+            "Edited Group Description",
+        );
+        cy.get("#eventGroupURL").should(
+            "contain.text",
+            "https://edited.example.com",
+        );
+        cy.get("#hostName").should("contain.text", "Edited Name");
     });
 });
diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
index 95857ae..6fc8768 100644
--- a/cypress/support/commands.ts
+++ b/cypress/support/commands.ts
@@ -35,3 +35,40 @@
 //     }
 //   }
 // }
+
+declare namespace Cypress {
+    interface Chainable<Subject> {
+        createGroup(groupData: {
+            eventGroupName: string;
+            eventGroupDescription: string;
+            eventGroupURL: string;
+            hostName: string;
+            creatorEmail: string;
+        }): Chainable<Subject>;
+    }
+}
+
+Cypress.Commands.add("createGroup", (groupData) => {
+    cy.visit("/new");
+    cy.get("#showNewEventGroupFormButton").click();
+
+    // Fill in the form
+    cy.get("#eventGroupName").type(groupData.eventGroupName);
+    cy.get("#eventGroupDescription").type(groupData.eventGroupDescription);
+    cy.get("#eventGroupURL").type(groupData.eventGroupURL);
+    cy.get("#eventGroupHostName").type(groupData.hostName);
+    cy.get("#eventGroupCreatorEmail").type(groupData.creatorEmail);
+
+    // Submit the form
+    cy.get("#newEventGroupForm").submit();
+
+    // Wait for the new page to load
+    cy.url().should("not.include", "/new");
+
+    // Get the new group ID from the URL
+    cy.url().then((url) => {
+        const [groupID, editToken] = url.split("/").pop().split("?");
+        cy.wrap(groupID).as("groupID");
+        cy.wrap(editToken.slice(2)).as("editToken");
+    });
+});
diff --git a/views/event.handlebars b/views/event.handlebars
index f4f1a2e..999a12b 100755
--- a/views/event.handlebars
+++ b/views/event.handlebars
@@ -48,7 +48,7 @@
             </li>
           {{/if}}
           {{#if eventData.eventGroup}}
-            <li>
+            <li id="event-group">
               <span class="fa-li">
                 <i class="fas fa-fw fa-calendar-alt"></i>
               </span>
diff --git a/views/eventgroup.handlebars b/views/eventgroup.handlebars
index 1d3975a..434f691 100755
--- a/views/eventgroup.handlebars
+++ b/views/eventgroup.handlebars
@@ -9,9 +9,9 @@
   </div>
   <div class="col-lg-2 ml-2 edit-buttons">
     {{#if editingEnabled}}
-      <button type="button" id="editEvent" class="btn btn-success text-nowrap" data-event-id="{{eventGroupData.id}}" data-toggle="modal" data-target="#editModal"><i class="fas fa-edit"></i> Edit group</button>
+      <button type="button" id="editGroup" class="btn btn-success text-nowrap" data-event-id="{{eventGroupData.id}}" data-toggle="modal" data-target="#editModal"><i class="fas fa-edit"></i> Edit group</button>
     {{else}}
-      <button type="button" id="editEvent" class="btn btn-success text-nowrap" data-event-id="{{eventGroupData.id}}" data-toggle="modal" data-target="#editTokenModal"><i class="fas fa-edit"></i> Edit group</button>
+      <button type="button" id="editGroup" class="btn btn-success text-nowrap" data-event-id="{{eventGroupData.id}}" data-toggle="modal" data-target="#editTokenModal"><i class="fas fa-edit"></i> Edit group</button>
     {{/if}}
   </div>
 </div>
@@ -26,52 +26,50 @@
 <div class="container my-4 pr-0">
   <div class="row">
     <div class="col-lg-9 card p-0">
-      <div class="card">
-        <div class="card-body">
-          <ul class="fa-ul eventInformation">
-            {{#if eventGroupHasHost}}
-              <li id="hostName">
-                <span class="fa-li">
-                  <i class="fas fa-fw fa-user-circle"></i>
-                </span>
-                <span class="text-muted">Hosted by</span> {{eventGroupData.hostName}}
-              </li>
-            {{/if}}
-            {{#if eventGroupData.url}}
-              <li id="eventGroupURL">
-                <span class="fa-li">
-                  <i class="fas fa-link"></i>
-                </span>
-                <a href="{{eventGroupData.url}}">
-                  {{eventGroupData.url}}
-                </a>
-              </li>
-            {{/if}}
-            <li>
+      <div class="card-body">
+        <ul class="fa-ul eventInformation">
+          {{#if eventGroupHasHost}}
+            <li id="hostName">
               <span class="fa-li">
-                <i class="fas fa-share-square"></i>
+                <i class="fas fa-fw fa-user-circle"></i>
               </span>
-              <a href="https://{{domain}}/group/{{eventGroupData.id}}">https://{{domain}}/group/{{eventGroupData.id}}</a>
-              <button type="button" id="copyEventLink" class="eventInformationAction btn btn-outline-secondary btn-sm" data-clipboard-text="https://{{domain}}/group/{{eventGroupData.id}}">
-                <i class="fas fa-copy"></i> Copy
-              </button>
+              <span class="text-muted">Hosted by</span> {{eventGroupData.hostName}}
             </li>
-            <li>
+          {{/if}}
+          {{#if eventGroupData.url}}
+            <li id="eventGroupURL">
               <span class="fa-li">
-                <i class="fas fa-rss"></i>
+                <i class="fas fa-link"></i>
               </span>
-              <a
-                href="https://{{domain}}/group/{{eventGroupData.id}}/feed.ics">https://{{domain}}/group/{{eventGroupData.id}}/feed.ics</a>&nbsp;
-              <button type="button" id="copyFeedLink"
-                class="eventInformationAction btn btn-outline-secondary btn-sm"
-                data-clipboard-text="https://{{domain}}/group/{{eventGroupData.id}}/feed.ics">
-                <i class="fas fa-copy"></i> Copy
-              </button>
-              <p class="text-muted small">Paste this URL into your calendar app
-                to subscribe to a live feed of events from this group.</p>
+              <a href="{{eventGroupData.url}}">
+                {{eventGroupData.url}}
+              </a>
             </li>
-          </ul>
-        </div>
+          {{/if}}
+          <li>
+            <span class="fa-li">
+              <i class="fas fa-share-square"></i>
+            </span>
+            <a href="https://{{domain}}/group/{{eventGroupData.id}}">https://{{domain}}/group/{{eventGroupData.id}}</a>
+            <button type="button" id="copyEventLink" class="eventInformationAction btn btn-outline-secondary btn-sm" data-clipboard-text="https://{{domain}}/group/{{eventGroupData.id}}">
+              <i class="fas fa-copy"></i> Copy
+            </button>
+          </li>
+          <li>
+            <span class="fa-li">
+              <i class="fas fa-rss"></i>
+            </span>
+            <a
+              href="https://{{domain}}/group/{{eventGroupData.id}}/feed.ics">https://{{domain}}/group/{{eventGroupData.id}}/feed.ics</a>&nbsp;
+            <button type="button" id="copyFeedLink"
+              class="eventInformationAction btn btn-outline-secondary btn-sm"
+              data-clipboard-text="https://{{domain}}/group/{{eventGroupData.id}}/feed.ics">
+              <i class="fas fa-copy"></i> Copy
+            </button>
+            <p class="text-muted small">Paste this URL into your calendar app
+              to subscribe to a live feed of events from this group.</p>
+          </li>
+        </ul>
       </div> <!-- /card -->
     </div>
     <div class="col-lg-3" id="eventActions">
diff --git a/views/partials/editeventgroupmodal.handlebars b/views/partials/editeventgroupmodal.handlebars
index 7c6f933..41e7f00 100644
--- a/views/partials/editeventgroupmodal.handlebars
+++ b/views/partials/editeventgroupmodal.handlebars
@@ -8,7 +8,7 @@
         </button>
       </div>
       <div class="modal-body">
-        <form id="editEventForm" enctype="multipart/form-data" @submit.prevent="submitForm">
+        <form id="editEventGroupForm" enctype="multipart/form-data" @submit.prevent="submitForm">
 
           {{> eventGroupForm }}