Merge pull request #1706 from notaphplover/refactor/extract-use-game-utils

Extract use game utils

Author: notaphplover

packages/frontend/web-ui/package.json

@@ -21,6 +21,7 @@
   "dependencies": {
     "@cornie-js/api-http-client": "workspace:*",
     "@cornie-js/api-models": "workspace:*",
+    "@cornie-js/eventsource": "workspace:*",
     "@cornie-js/frontend-api-rtk-query": "workspace:*",
     "@cornie-js/frontend-common": "workspace:*",
     "@emotion/react": "11.13.3",

…mmon/env/services/EnvironmentService.tsx …ommon/env/services/EnvironmentService.tspackages/frontend/web-ui/src/common/env/services/EnvironmentService.tsx renamed to packages/frontend/web-ui/src/common/env/services/EnvironmentService.ts packages/frontend/web-ui/src/common/env/services/EnvironmentService.tsx renamed to packages/frontend/web-ui/src/common/env/services/EnvironmentService.ts

@@ -1,6 +1,6 @@
 import { Environment } from '../models/Environment';
 
-class EnvironmentService {
+export class EnvironmentService {
   readonly #env: Environment;
 
   constructor() {

packages/frontend/web-ui/src/common/env/services/__mocks__/EnvironmentService.ts

@@ -0,0 +1,8 @@
+import { jest } from '@jest/globals';
+
+import { Environment } from '../../models/Environment';
+import type { EnvironmentService as OriginalEnvironmentService } from '../EnvironmentService';
+
+export const environmentService: Partial<OriginalEnvironmentService> = {
+  getEnvironment: jest.fn<() => Environment>(),
+};

packages/frontend/web-ui/src/common/http/services/CornieEventSource.ts

@@ -0,0 +1,36 @@
+import { EventSource } from '@cornie-js/eventsource';
+
+export interface CornieEventSourceInit extends EventSourceInit {
+  defaultLastEventId?: string | undefined;
+  getAccessToken: () => string;
+}
+
+export class CornieEventSource extends EventSource {
+  readonly #defaultLastEventId: string | undefined;
+  readonly #getAccessToken: () => string;
+
+  constructor(url: string, eventSourceInitDict: CornieEventSourceInit) {
+    const { defaultLastEventId, getAccessToken, ...eventSourceInit } =
+      eventSourceInitDict;
+
+    super(url, eventSourceInit);
+
+    this.#defaultLastEventId = defaultLastEventId;
+    this.#getAccessToken = getAccessToken;
+  }
+
+  protected override _buildHeaders(): Headers {
+    const headers: Headers = super._buildHeaders();
+
+    headers.set('authorization', `Bearer ${this.#getAccessToken()}`);
+
+    if (
+      !headers.has('last-event-id') &&
+      this.#defaultLastEventId !== undefined
+    ) {
+      headers.set('last-event-id', this.#defaultLastEventId);
+    }
+
+    return headers;
+  }
+}

packages/frontend/web-ui/src/common/http/services/__mocks__/CornieEventSource.ts

@@ -0,0 +1,9 @@
+import { jest } from '@jest/globals';
+
+import { EventSource } from '@cornie-js/eventsource';
+
+export const CornieEventSource: jest.Mock<(this: EventSource) => void> = jest
+  .fn()
+  .mockImplementation(function (this: EventSource) {
+    this.addEventListener = jest.fn();
+  });

packages/frontend/web-ui/src/game/helpers/buildEventSource.spec.ts

@@ -0,0 +1,134 @@
+import { beforeAll, describe, expect, it, jest } from '@jest/globals';
+
+jest.mock(
+  '../../app/store/features/authSlice',
+  () => ({
+    selectAuthToken: jest.fn(),
+  }),
+  { virtual: true },
+);
+jest.mock(
+  require.resolve('../../app/store/features/authSlice'),
+  () => ({
+    selectAuthToken: jest.fn(),
+  }),
+  { virtual: true },
+);
+jest.mock(
+  '../../app/store/store',
+  () => ({
+    store: {
+      getState: jest.fn(),
+    },
+  }),
+  { virtual: true },
+);
+jest.mock(
+  require.resolve('../../app/store/store'),
+  () => ({
+    store: {
+      getState: jest.fn(),
+    },
+  }),
+  { virtual: true },
+);
+jest.mock('../../common/env/services/EnvironmentService');
+jest.mock('../../common/http/services/CornieEventSource');
+
+import { models as apiModels } from '@cornie-js/api-models';
+
+import { Environment } from '../../common/env/models/Environment';
+import {
+  EnvironmentService,
+  environmentService,
+} from '../../common/env/services/EnvironmentService';
+import {
+  CornieEventSource,
+  CornieEventSourceInit,
+} from '../../common/http/services/CornieEventSource';
+import { buildEventSource } from './buildEventSource';
+
+describe(buildEventSource.name, () => {
+  describe('having an active game with last event id', () => {
+    let gameFixture: apiModels.ActiveGameV1;
+    let setMessageEventsQueueMock: jest.Mock<
+      React.Dispatch<React.SetStateAction<[string, apiModels.GameEventV2][]>>
+    >;
+
+    beforeAll(() => {
+      gameFixture = gameFixture = {
+        id: 'game-id',
+        isPublic: false,
+        state: {
+          currentCard: {
+            kind: 'wild',
+          },
+          currentColor: 'blue',
+          currentDirection: 'antiClockwise',
+          currentPlayingSlotIndex: 0,
+          currentTurnCardsDrawn: true,
+          currentTurnCardsPlayed: true,
+          drawCount: 0,
+          lastEventId: 'event-id-fixture',
+          slots: [],
+          status: 'active',
+        },
+      };
+
+      setMessageEventsQueueMock = jest.fn();
+    });
+
+    describe('when called', () => {
+      let environmentFixture: Environment;
+
+      let result: unknown;
+
+      beforeAll(() => {
+        environmentFixture = {
+          backendBaseUrl: 'backend-base-url-fixture',
+        };
+
+        (
+          environmentService as jest.Mocked<EnvironmentService>
+        ).getEnvironment.mockReturnValueOnce(environmentFixture);
+
+        result = buildEventSource(gameFixture, setMessageEventsQueueMock);
+      });
+
+      it('should call CornieEventSource()', () => {
+        const expectedUrl: string = `${environmentFixture.backendBaseUrl}/v2/events/games/${gameFixture.id}`;
+        const expectedInitDict: CornieEventSourceInit = {
+          defaultLastEventId: gameFixture.state.lastEventId as string,
+          getAccessToken: expect.any(Function) as unknown as () => string,
+        };
+
+        expect(CornieEventSource).toHaveBeenCalledTimes(1);
+        expect(CornieEventSource).toHaveBeenCalledWith(
+          expectedUrl,
+          expectedInitDict,
+        );
+      });
+
+      it('should call a cornieEventSource.addEventListener()', () => {
+        expect(
+          (result as CornieEventSource).addEventListener,
+        ).toHaveBeenCalledTimes(1);
+        expect(
+          (result as CornieEventSource).addEventListener,
+        ).toHaveBeenCalledWith('message', expect.any(Function));
+      });
+
+      it('should return a CornieEventSource', () => {
+        const expectedProperties: Partial<CornieEventSource> = {
+          addEventListener: expect.any(
+            Function,
+          ) as unknown as CornieEventSource['addEventListener'],
+        };
+
+        expect(result).toStrictEqual(
+          expect.objectContaining(expectedProperties),
+        );
+      });
+    });
+  });
+});

packages/frontend/web-ui/src/game/helpers/buildEventSource.ts

@@ -0,0 +1,41 @@
+import { models as apiModels } from '@cornie-js/api-models';
+
+import { selectAuthToken } from '../../app/store/features/authSlice';
+import { store } from '../../app/store/store';
+import { environmentService } from '../../common/env/services/EnvironmentService';
+import { CornieEventSource } from '../../common/http/services/CornieEventSource';
+
+export function buildEventSource(
+  game: apiModels.ActiveGameV1,
+  setMessageEventsQueue: React.Dispatch<
+    React.SetStateAction<[string, apiModels.GameEventV2][]>
+  >,
+): CornieEventSource {
+  const url: string = `${environmentService.getEnvironment().backendBaseUrl}/v2/events/games/${game.id}`;
+
+  const eventSource: CornieEventSource = new CornieEventSource(url, {
+    defaultLastEventId: game.state.lastEventId ?? undefined,
+    getAccessToken: () => selectAuthToken(store.getState()) ?? '',
+  });
+
+  const gameEventsListener: (event: MessageEvent<unknown>) => void = (
+    event: MessageEvent<unknown>,
+  ): void => {
+    const parsedGameEventV2: apiModels.GameEventV2 = JSON.parse(
+      event.data as string,
+    ) as apiModels.GameEventV2;
+
+    setMessageEventsQueue(
+      (
+        messageEventsQueue: [string, apiModels.GameEventV2][],
+      ): [string, apiModels.GameEventV2][] => [
+        ...messageEventsQueue,
+        [event.lastEventId, parsedGameEventV2],
+      ],
+    );
+  };
+
+  eventSource.addEventListener('message', gameEventsListener);
+
+  return eventSource;
+}