fix test runner

__mocks__/participants.mock.ts

@@ -1,5 +1,5 @@
 import { Avatar, Group, Participant, ParticipantType } from '../src';
-import { AblyParticipant } from "../src/services/realtime/ably/types";
+import { AblyParticipant } from '../src/services/realtime/ably/types';
 
 export const MOCK_AVATAR: Avatar = {
   model: 'unit-test-avatar-model.glb',
@@ -10,7 +10,6 @@ export const MOCK_LOCAL_PARTICIPANT: Participant = {
   id: 'unit-test-local-participant-id',
   name: 'unit-test-local-participant-name',
   color: '#000',
-  type: ParticipantType.HOST,
 };
 
 export const MOCK_GROUP: Group = {
@@ -19,14 +18,14 @@ export const MOCK_GROUP: Group = {
 };
 
 export const MOCK_ABLY_PARTICIPANT: AblyParticipant = {
-    clientId: MOCK_LOCAL_PARTICIPANT.id,
-    action: 'present',
-    connectionId: 'connection1',
-    encoding: 'h264',
-    id: 'unit-test-participant1-ably-id',
-    timestamp: new Date().getTime(),
-    data: {
-      participantId: MOCK_LOCAL_PARTICIPANT.id,
-      slotIndex: 0,
-    },
-}
+  clientId: MOCK_LOCAL_PARTICIPANT.id,
+  action: 'present',
+  connectionId: 'connection1',
+  encoding: 'h264',
+  id: 'unit-test-participant1-ably-id',
+  timestamp: new Date().getTime(),
+  data: {
+    participantId: MOCK_LOCAL_PARTICIPANT.id,
+    slotIndex: 0,
+  },
+};

src/components/presence-mouse/index.test.ts

@@ -2,8 +2,6 @@ import { PresenceMouseComponent } from './index';
 import { MeetingEvent } from '../../common/types/events.types';
 import { AblyParticipant } from '../../services/realtime/ably/types';
 import { ABLY_REALTIME_MOCK } from "../../../__mocks__/realtime.mock";
-import { MOCK_ABLY_PARTICIPANT } from "../../../__mocks__/participants.mock";
-import { MouseOptions } from "./types";
 
 describe('PresenceMouseComponent', () => {
     let presenceMouseComponent: PresenceMouseComponent;
@@ -44,11 +42,17 @@ describe('PresenceMouseComponent', () => {
         });
 
         it('should remove event listener and remove presence mouse element from container', () => {
-            const removeEventListenerSpy = jest.spyOn(document, 'removeEventListener');
-            const removeChildSpy = jest.spyOn(document.body, 'removeChild');
+            const presenceContainerId = document.createElement('div');
+            presenceMouseComponent['containerId'] = 'container';
+            document.getElementById = jest.fn().mockReturnValue(presenceContainerId);
+
+            const removeEventListenerSpy = jest.spyOn(presenceContainerId, 'removeEventListener');
+            const removeChildSpy = jest.spyOn(presenceContainerId, 'removeChild');
 
             presenceMouseComponent['containerId'] = 'container';
 
+            presenceContainerId.appendChild(presenceMouseComponent['presenceMouseElement']);
+
             presenceMouseComponent['destroy']();
 
             expect(removeEventListenerSpy).toHaveBeenCalledWith('mousemove', presenceMouseComponent['onMyParticipantMouseMove']);
@@ -109,6 +113,20 @@ describe('PresenceMouseComponent', () => {
             // @ts-ignore
             const updatePresenceMouseParticipantSpy = jest.spyOn(presenceMouseComponent['presenceMouseElement'], 'updatePresenceMouseParticipant');
 
+            const MOCK_ABLY_PARTICIPANT: AblyParticipant = {
+                clientId: 'MOCK_LOCAL_PARTICIPANT.id',
+                action: 'present',
+                connectionId: 'connection1',
+                encoding: 'h264',
+                id: 'unit-test-participant1-ably-id',
+                timestamp: new Date().getTime(),
+                data: {
+                    participantId: 'MOCK_LOCAL_PARTICIPANT.id',
+                    mousePositionX: 1,
+                    slotIndex: 0,
+                },
+            }
+
             const participant2 = MOCK_ABLY_PARTICIPANT
             participant2.id = 'unit-test-participant2-ably-id'
             participant2.data.participantId = 'participant2-id'
@@ -128,12 +146,29 @@ describe('PresenceMouseComponent', () => {
 
     describe('onParticipantJoinedOnRealtime', () => {
         it('should create presence mouse element and add event listener', () => {
-            const appendChildSpy = jest.spyOn(document.body, 'appendChild');
-            const addEventListenerSpy = jest.spyOn(document, 'addEventListener');
             const presenceContainerId = document.createElement('div');
             presenceMouseComponent['containerId'] = 'container';
+
+            const appendChildSpy = jest.spyOn(presenceContainerId, 'appendChild');
+            const addEventListenerSpy = jest.spyOn(presenceContainerId, 'addEventListener');
+
             document.getElementById = jest.fn().mockReturnValue(presenceContainerId);
 
+            const MOCK_ABLY_PARTICIPANT: AblyParticipant = {
+                clientId: 'MOCK_LOCAL_PARTICIPANT.id',
+                action: 'present',
+                connectionId: 'connection1',
+                encoding: 'h264',
+                id: 'unit-test-participant-ably-id',
+                timestamp: new Date().getTime(),
+                data: {
+                    id: 'unit-test-participant-ably-id',
+                    slotIndex: 0,
+                },
+            }
+
+            presenceMouseComponent['localParticipant'] = { id: 'unit-test-participant-ably-id' };
+
             presenceMouseComponent['onParticipantJoinedOnRealtime'](MOCK_ABLY_PARTICIPANT);
 
             expect(appendChildSpy).toHaveBeenCalledWith(presenceMouseComponent['presenceMouseElement']);
@@ -146,6 +181,19 @@ describe('PresenceMouseComponent', () => {
             // @ts-ignore
             const removePresenceMouseParticipantSpy = jest.spyOn(presenceMouseComponent['presenceMouseElement'], 'removePresenceMouseParticipant');
 
+            const MOCK_ABLY_PARTICIPANT: AblyParticipant = {
+                clientId: 'MOCK_LOCAL_PARTICIPANT.id',
+                action: 'present',
+                connectionId: 'connection1',
+                encoding: 'h264',
+                id: 'unit-test-participant1-ably-id',
+                timestamp: new Date().getTime(),
+                data: {
+                    participantId: 'MOCK_LOCAL_PARTICIPANT.id',
+                    slotIndex: 0,
+                },
+            }
+
             presenceMouseComponent['onParticipantLeftOnRealtime'](MOCK_ABLY_PARTICIPANT);
 
             expect(removePresenceMouseParticipantSpy).toHaveBeenCalledWith(MOCK_ABLY_PARTICIPANT.clientId);

src/components/presence-mouse/index.ts

@@ -42,10 +42,12 @@ export class PresenceMouseComponent extends BaseComponent {
     this.unsubscribeFromRealtimeEvents();
 
     const presenceContainerId = this.containerId ?
-      document.getElementById(this.containerId) : document?.body;
+        document.getElementById(this.containerId) : null;
 
-    presenceContainerId.removeEventListener('mousemove', this.onMyParticipantMouseMove);
-    presenceContainerId.removeChild(this.presenceMouseElement);
+    if (presenceContainerId) {
+      presenceContainerId.removeEventListener('mousemove', this.onMyParticipantMouseMove);
+      presenceContainerId.removeChild(this.presenceMouseElement);
+    }
   }
 
   /**
@@ -80,7 +82,7 @@ export class PresenceMouseComponent extends BaseComponent {
    */
   private onMyParticipantMouseMove = (e): void => {
     const presenceContainerId = this.containerId ?
-      document.getElementById(this.containerId) : document?.body;
+        document.getElementById(this.containerId) : document?.body;
 
     const rect = presenceContainerId.getBoundingClientRect();
 
@@ -105,7 +107,7 @@ export class PresenceMouseComponent extends BaseComponent {
     Object.values(participants).forEach((participant: AblyParticipant) => {
       const externalParticipantData: MouseOptions = participant.data;
       const hasPresenceMouseElement = externalParticipantData?.mousePositionX
-      && this.presenceMouseElement;
+          && this.presenceMouseElement;
       const myParticipant = externalParticipantData?.id === this.localParticipant?.id;
 
       externalParticipantData.color = this.realtime.getSlotColor(participant.data.slotIndex).color;
@@ -129,7 +131,7 @@ export class PresenceMouseComponent extends BaseComponent {
 
     if (participant?.data?.id === this.localParticipant?.id) {
       const presenceContainerId = this.containerId ?
-        document.getElementById(this.containerId) : document?.body;
+          document.getElementById(this.containerId) : document?.body;
 
       this.presenceMouseElement = document.createElement('superviz-presence-mouse');
 

src/web-components/presence-mouse/index.test.ts

@@ -0,0 +1,104 @@
+import { MouseOptions } from '../../components/presence-mouse/types';
+import '.';
+
+const createEl = async () => {
+  const element = document.createElement('superviz-presence-mouse');
+  document.body.appendChild(element);
+  await element['updateComplete'];
+  return element;
+};
+
+describe('PresenceMouse', () => {
+  afterEach(() => {
+    document.body.querySelector('superviz-presence-mouse')
+      ?.remove();
+  });
+
+  describe('updatePresenceMouseParticipant', () => {
+    it('should add a new mouse follower element if it does not exist', async () => {
+      const renderedElement = await createEl();
+      const externalParticipant: MouseOptions = {
+        id: 'participant1',
+        name: 'participant',
+        slotIndex: 1,
+        color: '#FF0000',
+        mousePositionX: 10,
+        mousePositionY: 20,
+        originalWidth: 100,
+        originalHeight: 100,
+        containerId: 'container',
+      };
+
+      renderedElement!.shadowRoot!.getElementById = jest.fn().mockReturnValue(null);
+
+      renderedElement['updatePresenceMouseParticipant'](externalParticipant);
+
+      expect(renderedElement!.shadowRoot!.getElementById).toHaveBeenCalledWith(`mouse-${externalParticipant.id}`);
+    });
+
+    it('should update the existing mouse follower element if it exists', async () => {
+      const renderedElement = await createEl();
+      const externalParticipant: MouseOptions = {
+        id: 'participant1',
+        name: 'participant',
+        slotIndex: 1,
+        color: '#FF0000',
+        mousePositionX: 10,
+        mousePositionY: 20,
+        originalWidth: 100,
+        originalHeight: 100,
+        containerId: 'container',
+      };
+
+      const mouseFollowerElement = document.createElement('div');
+      mouseFollowerElement.setAttribute('id', `mouse-${externalParticipant.id}`);
+      mouseFollowerElement.setAttribute('class', 'mouse-follower');
+
+      const mouseUserNameElement = document.createElement('div');
+      mouseUserNameElement.setAttribute('class', 'mouse-user-name');
+      mouseUserNameElement.innerHTML = externalParticipant.name;
+
+      renderedElement!.shadowRoot!.getElementById =
+        jest.fn().mockReturnValue(mouseFollowerElement);
+      mouseFollowerElement!.getElementsByClassName =
+        jest.fn().mockReturnValue([mouseUserNameElement]);
+
+      renderedElement['updatePresenceMouseParticipant'](externalParticipant);
+
+      expect(renderedElement!.shadowRoot!.getElementById).toHaveBeenCalledWith(`mouse-${externalParticipant.id}`);
+      expect(mouseUserNameElement.style.color).toBe('rgb(0, 0, 0)');
+      expect(mouseUserNameElement.style.backgroundColor).toBe('rgb(255, 0, 0)');
+      expect(mouseUserNameElement.innerHTML).toBe(externalParticipant.name);
+      expect(mouseFollowerElement.style.left).toBe('0.1px');
+      expect(mouseFollowerElement.style.top).toBe('0.2px');
+    });
+  });
+
+  describe('removePresenceMouseParticipant', () => {
+    it('should remove the mouse follower element if it exists', async () => {
+      const renderedElement = await createEl();
+      const participantId = 'participant1';
+      const mouseFollowerElement = document.createElement('div');
+
+        renderedElement!.shadowRoot!.getElementById =
+            jest.fn().mockReturnValue(mouseFollowerElement);
+        mouseFollowerElement.remove = jest.fn();
+
+        renderedElement['removePresenceMouseParticipant'](participantId);
+
+        expect(renderedElement!.shadowRoot!.getElementById).toHaveBeenCalledWith(`mouse-${participantId}`);
+        expect(mouseFollowerElement.remove).toHaveBeenCalled();
+    });
+
+    it('should do nothing if the mouse follower element does not exist', async () => {
+      const renderedElement = await createEl();
+      const participantId = 'participant1';
+
+      renderedElement!.shadowRoot!.getElementById = jest.fn().mockReturnValue(null);
+
+      renderedElement['removePresenceMouseParticipant'](participantId);
+
+      expect(renderedElement!.shadowRoot!.getElementById).toHaveBeenCalledWith(`mouse-${participantId}`);
+    });
+  });
+});

src/web-components/presence-mouse/index.ts

@@ -75,12 +75,12 @@ export class PresenceMouse extends LitElement {
       let adjustedY = externalParticipant.mousePositionY;
 
       if (containerId) {
-        const windowWidth = presenceContainerId.clientWidth;
-        const windowHeight = presenceContainerId.clientHeight;
+        const windowWidth = presenceContainerId?.clientWidth || 1;
+        const windowHeight = presenceContainerId?.clientHeight || 1;
         adjustedX = (externalParticipant.mousePositionX /
-        externalParticipant.originalWidth) * windowWidth;
+            externalParticipant.originalWidth) * windowWidth;
         adjustedY = (externalParticipant.mousePositionY /
-        externalParticipant.originalHeight) * windowHeight;
+            externalParticipant.originalHeight) * windowHeight;
       }
 
       divMouseFollower.style.left = `${adjustedX}px`;
@@ -103,10 +103,10 @@ export class PresenceMouse extends LitElement {
 
   protected render() {
     return html`
-    <div id="mouse-container" class="mouse-board">
-      <div id="mouse-sync">
+      <div id="mouse-container" class="mouse-board">
+        <div id="mouse-sync">
+        </div>
       </div>
-  </div>
     `;
   }
 }

web-test-runner.config.js

@@ -45,7 +45,7 @@ module.exports = {
       functions: 70,
       lines: 70,
     },
-    include: ['src/web-components/**/*.{ts}'],
+    include: ['src/web-components/**/*.ts'],
   },
   testRunnerHtml: (testFramework) => `
     <html>