[agenda] dispatch eventClicked when event is clicked

components/agenda/CHANGELOG.md

@@ -4,6 +4,8 @@
 
 ## New Features
 
+- [Agenda] Dispatch `eventClicked` when event is clicked [#372](https://github.com/nylas/components/pull/372)
+
 ## Bug Fixes
 
 - [Agenda] Added min height to agenda body [#339](https://github.com/nylas/components/pull/339)

components/agenda/src/Agenda.svelte

@@ -657,6 +657,8 @@
     event: MouseEvent | KeyboardEvent,
     calendarEvent: Event,
   ) {
+    dispatchEvent("eventClicked", calendarEvent);
+
     if (typeof click_action === "function") {
       const clonedEvent = JSON.parse(JSON.stringify(calendarEvent));
       for (const internalProp of INTERNAL_EVENT_PROPS) {

components/agenda/src/init.spec.js

@@ -288,27 +288,12 @@ describe("Agenda interactions", () => {
   beforeEach(() => {
     cy.clock(1642179039224);
 
-    cy.intercept(
-      "GET",
-      "https://web-components.nylas.com/middleware/manifest",
-      {
-        fixture: "agenda/manifest.json",
-      },
-    );
-    cy.intercept(
-      "GET",
-      "https://web-components.nylas.com/middleware/calendars/test-calendar-id",
-      {
-        fixture: "agenda/calendars/calendarId.json",
-      },
-    );
-    cy.intercept(
-      "GET",
-      "https://web-components.nylas.com/middleware/agenda/events?calendar_id=test-calendar-id*",
-      {
-        fixture: "agenda/events.json",
-      },
-    );
+    cy.batchIntercept("GET", {
+      "**/middleware/manifest": "agenda/manifest",
+      "**/middleware/calendars/test-calendar-id": "agenda/calendars/calendarId",
+      "**/middleware/agenda/events?calendar_id=test-calendar-id*":
+        "agenda/events",
+    });
 
     cy.visit("/components/agenda/src/cypress.html");
     cy.get("nylas-agenda").should("exist").as("agenda");
@@ -328,3 +313,60 @@ describe("Agenda interactions", () => {
     cy.get("@agenda").contains("Thursday 13");
   });
 });
+
+describe("Agenda custom events", () => {
+  beforeEach(() => {
+    cy.clock(1642179039224);
+
+    cy.batchIntercept("GET", {
+      "**/middleware/manifest": "agenda/manifest",
+      "**/middleware/calendars/test-calendar-id": "agenda/calendars/calendarId",
+      "**/middleware/agenda/events?*": "agenda/events",
+    });
+
+    cy.visit("/components/agenda/src/cypress.html");
+    cy.get("nylas-agenda").should("exist").as("agenda");
+  });
+
+  it("dispatches dateChange when date goes forward", () => {
+    const dateChangeStub = cy.stub().as("dateChange");
+    cy.get("@agenda").addListener("dateChange", dateChangeStub);
+
+    cy.get("@agenda")
+      .find(".next.change-date")
+      .click()
+      .then(() => {
+        const [event] = dateChangeStub.args[0];
+        expect(event.detail).to.deep.equal(
+          new Date("Sat, 15 Jan 2022 05:00:00 GMT"),
+        );
+      });
+  });
+
+  it("dispatches dateChange when date goes backward", () => {
+    const dateChangeStub = cy.stub().as("dateChange");
+    cy.get("@agenda").addListener("dateChange", dateChangeStub);
+
+    cy.get("@agenda")
+      .find(".prev.change-date")
+      .click()
+      .then(() => {
+        const [event] = dateChangeStub.args[0];
+        expect(event.detail).to.deep.equal(
+          new Date("Thu, 13 Jan 2022 05:00:00 GMT"),
+        );
+      });
+  });
+
+  it("dispatches eventClicked when calendar event clicked", () => {
+    const eventClickedStub = cy.stub().as("event");
+    cy.get("@agenda").addListener("eventClicked", eventClickedStub);
+
+    cy.get("@agenda").find("li.event").first().click();
+
+    cy.fixture("agenda/events").then((events) => {
+      const [event] = eventClickedStub.args[0];
+      expect(event.detail).to.deep.include(events.response[0]);
+    });
+  });
+});

cypress/support/commands.js

@@ -40,3 +40,11 @@ Cypress.Commands.add("batchIntercept", (method, fixtures) => {
     cy.intercept(method, url, { fixture }).as(fixture);
   });
 });
+
+Cypress.Commands.add(
+  "addListener",
+  { prevSubject: "element" },
+  ($element, eventName, callbackFn) => {
+    $element[0].addEventListener(eventName, callbackFn);
+  },
+);