:sparkles feat(agenda-events): select surface to create timed events (#1392)

chore: update dev dependencies add jest-canvas-mock

Author: victor-enogwe

jest.config.js

@@ -166,6 +166,7 @@ const config = {
         "<rootDir>/packages/core/src/__tests__/core.test.init.ts",
         "<rootDir>/packages/core/src/__tests__/core.test.start.ts",
         "<rootDir>/packages/web/src/__tests__/web.test.init.ts",
+        "jest-canvas-mock",
       ],
       setupFilesAfterEnv: [
         "<rootDir>/packages/web/src/__tests__/web.test.start.ts",

packages/web/package.json

@@ -73,13 +73,13 @@
     "autoprefixer": "^10.4.21",
     "babel-jest": "^29.3.1",
     "babel-plugin-styled-components": "^2.0.2",
-    "canvas": "^3.2.0",
     "eslint-plugin-jest-dom": "^4.0.3",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-testing-library": "^5.0.5",
     "jest": "^29.0.3",
+    "jest-canvas-mock": "^2.5.2",
     "jest-environment-jsdom": "^29.7.0",
     "jest-styled-components": "^7.0.5",
     "msw": "^1.0.1",

packages/web/src/__tests__/jsdom.ts

@@ -59,6 +59,49 @@ class MediaQuery implements MediaQueryList {
   }
 }
 
+function getPointerEvent(mouseEvent: typeof globalThis.MouseEvent) {
+  class PointerEvent extends mouseEvent implements globalThis.PointerEvent {
+    altitudeAngle: number;
+    azimuthAngle: number;
+    height: number;
+    isPrimary: boolean;
+    pointerId: number;
+    pointerType: string;
+    pressure: number;
+    tangentialPressure: number;
+    tiltX: number;
+    tiltY: number;
+    twist: number;
+    width: number;
+
+    constructor(type: string, eventInitDict?: PointerEventInit) {
+      super(type, eventInitDict);
+      this.altitudeAngle = eventInitDict?.altitudeAngle ?? 0;
+      this.azimuthAngle = eventInitDict?.azimuthAngle ?? 0;
+      this.height = eventInitDict?.height ?? 1;
+      this.isPrimary = eventInitDict?.isPrimary ?? false;
+      this.pointerId = eventInitDict?.pointerId ?? 0;
+      this.pointerType = eventInitDict?.pointerType ?? "";
+      this.pressure = eventInitDict?.pressure ?? 0;
+      this.tangentialPressure = eventInitDict?.tangentialPressure ?? 0;
+      this.tiltX = eventInitDict?.tiltX ?? 0;
+      this.tiltY = eventInitDict?.tiltY ?? 0;
+      this.twist = eventInitDict?.twist ?? 0;
+      this.width = eventInitDict?.width ?? 1;
+    }
+
+    getCoalescedEvents(): globalThis.PointerEvent[] {
+      throw new Error("Method not implemented.");
+    }
+
+    getPredictedEvents(): globalThis.PointerEvent[] {
+      throw new Error("Method not implemented.");
+    }
+  }
+
+  return PointerEvent;
+}
+
 export default class WASMEnvironment extends TestEnvironment {
   override async setup(): Promise<void> {
     const css = await getTailwindCss();
@@ -73,6 +116,7 @@ export default class WASMEnvironment extends TestEnvironment {
     this.global.window.HTMLElement.prototype.scroll = () => {};
     this.global.window.HTMLElement.prototype.scrollIntoView = () => {};
     this.global.window.document.elementFromPoint = () => null;
+    this.global.PointerEvent = getPointerEvent(this.global.MouseEvent);
 
     this.global.fetch = fetch as unknown as typeof globalThis.fetch;
     this.global.Blob = globalThis.Blob;

packages/web/src/__tests__/utils/agenda/agenda.test.util.tsx

@@ -0,0 +1,31 @@
+import "@testing-library/jest-dom";
+import { Schema_Event } from "@core/types/event.types";
+import { createStoreWithEvents } from "@web/__tests__/utils/state/store.test.util";
+import * as eventSelectors from "@web/ducks/events/selectors/event.selectors";
+import * as reduxStore from "@web/store";
+import { store } from "@web/store";
+import { Agenda } from "@web/views/Day/components/Agenda/Agenda";
+import { renderWithDayProviders } from "@web/views/Day/util/day.test-util";
+
+export const selectIsDayEventsProcessingSpy = jest.spyOn(
+  eventSelectors,
+  "selectIsDayEventsProcessing",
+);
+
+export const renderAgenda = (
+  events: Schema_Event[] = [],
+  options?: { isProcessing?: boolean },
+) => {
+  selectIsDayEventsProcessingSpy.mockReturnValue(!!options?.isProcessing);
+
+  const newStore = createStoreWithEvents(events, options);
+
+  jest.replaceProperty(
+    reduxStore,
+    "store",
+    newStore as unknown as typeof reduxStore.store,
+  );
+
+  const utils = renderWithDayProviders(<Agenda />, { store });
+  return { ...utils, store };
+};

packages/web/src/common/context/compass-refs.tsx

@@ -0,0 +1,30 @@
+import { PropsWithChildren, createContext, useRef } from "react";
+
+interface CompassRefs {
+  nowLineRef: React.MutableRefObject<HTMLDivElement | null>;
+  timedEventsContainerRef: React.MutableRefObject<HTMLDivElement | null>;
+  timedEventsGridRef: React.MutableRefObject<HTMLDivElement | null>;
+  allDayEventsGridRef: React.MutableRefObject<HTMLDivElement | null>;
+}
+
+export const CompassRefsContext = createContext<CompassRefs | null>(null);
+
+export function CompassRefsProvider({ children }: PropsWithChildren) {
+  const nowLineRef = useRef<HTMLDivElement | null>(null);
+  const timedEventsContainerRef = useRef<HTMLDivElement | null>(null);
+  const timedEventsGridRef = useRef<HTMLDivElement | null>(null);
+  const allDayEventsGridRef = useRef<HTMLDivElement | null>(null);
+
+  return (
+    <CompassRefsContext.Provider
+      value={{
+        timedEventsContainerRef,
+        nowLineRef,
+        timedEventsGridRef,
+        allDayEventsGridRef,
+      }}
+    >
+      {children}
+    </CompassRefsContext.Provider>
+  );
+}