From e91bb25eccec13fc6610b8f43e3b494d792f6a68 Mon Sep 17 00:00:00 2001
From: instalando <instalando@protonmail.com>
Date: Thu, 24 Aug 2023 16:37:33 -0300
Subject: [PATCH] fix: comment test

---
 src/components/comments/index.test.ts | 77 ++++++++++++++++++++++-----
 src/components/comments/index.ts      | 37 +++++++------
 2 files changed, 84 insertions(+), 30 deletions(-)

diff --git a/src/components/comments/index.test.ts b/src/components/comments/index.test.ts
index b9c2740e..c6ea51a3 100644
--- a/src/components/comments/index.test.ts
+++ b/src/components/comments/index.test.ts
@@ -6,10 +6,18 @@ import ApiService from '../../services/api';
 
 import { CommentsComponent } from './index';
 
+jest.mock('../../services/api', () => ({
+  fetchAnnotation: jest.fn().mockImplementation((): any => []),
+  createAnnotations: jest.fn().mockImplementation(() => []),
+  createComment: jest.fn().mockImplementation(() => []),
+  resolveAnnotation: jest.fn().mockImplementation(() => []),
+}));
+
 describe('CommentsComponent', () => {
   let commentsComponent: CommentsComponent;
 
   beforeEach(() => {
+    jest.clearAllMocks();
     commentsComponent = new CommentsComponent();
 
     commentsComponent.attach({
@@ -23,19 +31,6 @@ describe('CommentsComponent', () => {
       eventBus: EVENT_BUS_MOCK,
     });
 
-    const mockFetch = jest.fn();
-    global.fetch = mockFetch;
-
-    mockFetch.mockResolvedValueOnce({
-      ok: true,
-      json: jest.fn(),
-    });
-
-    ApiService.fetchAnnotation = jest.fn().mockImplementation(() => []);
-    ApiService.createAnnotations = jest.fn().mockImplementation(() => []);
-    ApiService.createComment = jest.fn().mockImplementation(() => []);
-    ApiService.resolveAnnotation = jest.fn().mockImplementation(() => []);
-
     commentsComponent['element'].addAnnotation = jest.fn().mockImplementation(() => []);
   });
 
@@ -56,7 +51,7 @@ describe('CommentsComponent', () => {
   });
 
   it('should have an element property', () => {
-    expect(commentsComponent['element']).toBeUndefined();
+    expect(commentsComponent['element']).toBeDefined();
   });
 
   it('should create a new element when start() is called', () => {
@@ -75,4 +70,58 @@ describe('CommentsComponent', () => {
 
     expect(document.body.contains(commentsComponent['element'])).toBe(false);
   });
+
+  it('should call apiService when fetch annotation', async () => {
+    const result = jest.spyOn(ApiService, 'fetchAnnotation');
+
+    expect(result).toHaveBeenCalledWith(
+      expect.any(String),
+      expect.any(String),
+      {
+        roomId: expect.any(String),
+        url: expect.any(String),
+      },
+    );
+  });
+
+  it('should call apiService when create annotation', async () => {
+    const result = jest.spyOn(ApiService, 'createAnnotations');
+
+    commentsComponent['element'].dispatchEvent(new CustomEvent('create-annotation', {
+      detail: {
+        text: 'test',
+        position: {
+          x: 0,
+          y: 0,
+        },
+      },
+    }));
+
+    expect(result).toHaveBeenCalledWith(
+      expect.any(String),
+      expect.any(String),
+      {
+        roomId: expect.any(String),
+        url: expect.any(String),
+        userId: expect.any(String),
+        position: expect.any(String),
+      },
+    );
+  });
+
+  it('should call apiService when resolve annotation', async () => {
+    const result = jest.spyOn(ApiService, 'resolveAnnotation');
+
+    commentsComponent['element'].dispatchEvent(new CustomEvent('resolve-annotation', {
+      detail: {
+        uuid: 'test',
+      },
+    }));
+
+    expect(result).toHaveBeenCalledWith(
+      expect.any(String),
+      expect.any(String),
+      'test',
+    );
+  });
 });
diff --git a/src/components/comments/index.ts b/src/components/comments/index.ts
index 138c8708..a54ec120 100644
--- a/src/components/comments/index.ts
+++ b/src/components/comments/index.ts
@@ -74,22 +74,27 @@ export class CommentsComponent extends BaseComponent {
    * @returns {Promise<void>}
    */
   private createAnnotation = async (e: CustomEvent): Promise<void> => {
-    const { text, position } = e.detail;
-    const { url } = this;
-
-    const annotation: Annotation = await ApiService.createAnnotations(config.get<string>('apiUrl'), config.get<string>('apiKey'), {
-      roomId: config.get<string>('roomId'),
-      position: JSON.stringify(position),
-      url,
-      userId: this.localParticipant.id,
-    });
-
-    const comment = await this.createComment(annotation.uuid, text);
-
-    this.addAnnotation([{
-      ...annotation,
-      comments: [comment],
-    }]);
+    try {
+      const { text, position } = e.detail;
+      const { url } = this;
+
+      const annotation: Annotation = await ApiService.createAnnotations(config.get<string>('apiUrl'), config.get<string>('apiKey'), {
+        roomId: config.get<string>('roomId'),
+        position: JSON.stringify(position),
+        url,
+        userId: this.localParticipant.id,
+      });
+
+      const comment = await this.createComment(annotation.uuid, text);
+
+      this.addAnnotation([{
+        ...annotation,
+        comments: [comment],
+      }]);
+    } catch (error) {
+      this.logger.log('error when creating annotation', error);
+      throw error;
+    }
   };
 
   /**