fix: create webcomponent presence mouse tests

SuperViz · Sep 11, 2023 · 7472104 · 7472104
1 parent d8ddd7e
commit 7472104
Show file tree

Hide file tree

Showing 3 changed files with 104 additions and 3 deletions.
diff --git a/src/components/presence-mouse/index.test.ts b/src/components/presence-mouse/index.test.ts
@@ -180,7 +180,7 @@ describe('PresenceMouseComponent', () => {
         it('should remove presence mouse participant', () => {
             // @ts-ignore
             const removePresenceMouseParticipantSpy = jest.spyOn(presenceMouseComponent['presenceMouseElement'], 'removePresenceMouseParticipant');
-            
+
             const MOCK_ABLY_PARTICIPANT: AblyParticipant = {
                 clientId: 'MOCK_LOCAL_PARTICIPANT.id',
                 action: 'present',

diff --git a/src/web-components/presence-mouse/index.test.ts b/src/web-components/presence-mouse/index.test.ts
@@ -0,0 +1,101 @@
+import { PresenceMouse } from './index';
+import { MouseOptions } from '../../components/presence-mouse/types';
+import sleep from "../../common/utils/sleep";
+
+describe('PresenceMouse', () => {
+    let presenceMouse: PresenceMouse;
+
+    beforeEach(async () => {
+        presenceMouse = new PresenceMouse();
+        document.body.appendChild(presenceMouse);
+        await sleep();
+    });
+
+    describe('updatePresenceMouseParticipant', () => {
+        it('should add a new mouse follower element if it does not exist', () => {
+            const externalParticipant: MouseOptions = {
+                id: 'participant1',
+                name: 'participant',
+                slotIndex: 1,
+                color: '#FF0000',
+                mousePositionX: 10,
+                mousePositionY: 20,
+                originalWidth: 100,
+                originalHeight: 100,
+                containerId: 'container',
+            };
+
+            const renderedElement = document.getElementsByTagName('superviz-presence-mouse')[0];
+
+            renderedElement.shadowRoot.getElementById = jest.fn().mockReturnValue(null);
+
+            presenceMouse.updatePresenceMouseParticipant(externalParticipant);
+
+            expect(renderedElement.shadowRoot.getElementById).toHaveBeenCalledWith(`mouse-${externalParticipant.id}`);
+        });
+
+        it('should update the existing mouse follower element if it exists', () => {
+            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;
+
+            const renderedElement = document.getElementsByTagName('superviz-presence-mouse')[0];
+
+            renderedElement.shadowRoot.getElementById = jest.fn().mockReturnValue(mouseFollowerElement);
+            mouseFollowerElement.getElementsByClassName = jest.fn().mockReturnValue([mouseUserNameElement]);
+
+            presenceMouse.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', () => {
+            const participantId = 'participant1';
+            const mouseFollowerElement = document.createElement('div');
+
+            const renderedElement = document.getElementsByTagName('superviz-presence-mouse')[0];
+
+            renderedElement.shadowRoot.getElementById = jest.fn().mockReturnValue(mouseFollowerElement);
+            mouseFollowerElement.remove = jest.fn();
+
+            presenceMouse.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', () => {
+            const participantId = 'participant1';
+
+            const renderedElement = document.getElementsByTagName('superviz-presence-mouse')[0];
+            renderedElement.shadowRoot.getElementById = jest.fn().mockReturnValue(null);
+
+            presenceMouse.removePresenceMouseParticipant(participantId);
+
+            expect(renderedElement.shadowRoot.getElementById).toHaveBeenCalledWith(`mouse-${participantId}`);
+        });
+    });
+});
diff --git a/src/web-components/presence-mouse/index.ts b/src/web-components/presence-mouse/index.ts
@@ -75,8 +75,8 @@ 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;
         adjustedY = (externalParticipant.mousePositionY /