From 6a12772e31fc0b845d04aba0441c6bb9c3d83011 Mon Sep 17 00:00:00 2001 From: instalando 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 +++++---- .../comments/components/annotation-item.ts | 2 +- .../comments/components/comment-item.ts | 25 ++++-- .../tests/components/comment-item.test.ts | 1 + 5 files changed, 104 insertions(+), 38 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} */ private createAnnotation = async (e: CustomEvent): Promise => { - const { text, position } = e.detail; - const { url } = this; - - const annotation: Annotation = await ApiService.createAnnotations(config.get('apiUrl'), config.get('apiKey'), { - roomId: config.get('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('apiUrl'), config.get('apiKey'), { + roomId: config.get('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; + } }; /** diff --git a/src/web-components/comments/components/annotation-item.ts b/src/web-components/comments/components/annotation-item.ts index 562fcffd..67f945ee 100644 --- a/src/web-components/comments/components/annotation-item.ts +++ b/src/web-components/comments/components/annotation-item.ts @@ -90,7 +90,7 @@ export class CommentsAnnotationItem extends WebComponentsBaseElement { this.emitEvent('resolve-annotation', { uuid, - resolved: resolved === 'true', + resolved, }); this.options.resolved = resolved; diff --git a/src/web-components/comments/components/comment-item.ts b/src/web-components/comments/components/comment-item.ts index fbc30d87..63b4ab4a 100644 --- a/src/web-components/comments/components/comment-item.ts +++ b/src/web-components/comments/components/comment-item.ts @@ -1,4 +1,4 @@ -import { CSSResultGroup, LitElement, html } from 'lit'; +import { CSSResultGroup, LitElement, PropertyValueMap, html } from 'lit'; import { customElement } from 'lit/decorators.js'; import { DateTime } from 'luxon'; @@ -12,13 +12,17 @@ const styles: CSSResultGroup[] = [WebComponentsBaseElement.styles, commentItemSt @customElement('superviz-comments-comment-item') export class CommentsCommentItem extends WebComponentsBaseElement { + constructor() { + super(); + this.resolved = false; + } + static styles = styles; declare avatar: string; declare username: string; declare text: string; - declare resolved: string; - declare resolvable: boolean; + declare resolved: boolean; declare createdAt: string; declare options: AnnotationOptions; @@ -26,12 +30,17 @@ export class CommentsCommentItem extends WebComponentsBaseElement { avatar: { type: String }, username: { type: String }, text: { type: String }, - resolved: { type: String }, - resolvable: { type: Boolean }, + resolved: { type: Boolean }, createdAt: { type: String }, options: { type: Object }, }; + updated = (changedProperties: PropertyValueMap) => { + if (changedProperties.has('options')) { + this.resolved = this.options?.resolved; + } + }; + protected render() { const humanizeDate = (date: string) => { return DateTime.fromISO(date).toFormat('yyyy-dd-MM'); @@ -39,11 +48,13 @@ export class CommentsCommentItem extends WebComponentsBaseElement { const isResolvable = this.options?.resolvable ? 'comment-item__resolve' : 'hidden'; - const iconResolve = this.options?.resolved ? 'resolved' : 'unresolved'; + const iconResolve = this.resolved ? 'resolved' : 'unresolved'; const resolveAnnotation = () => { + this.resolved = !this.resolved; + this.emitEvent('resolve-annotation', { - resolved: !this.options.resolved, + resolved: this.resolved, }, { composed: false, bubbles: false }); }; diff --git a/src/web-components/comments/tests/components/comment-item.test.ts b/src/web-components/comments/tests/components/comment-item.test.ts index a8dbe071..da8716a6 100644 --- a/src/web-components/comments/tests/components/comment-item.test.ts +++ b/src/web-components/comments/tests/components/comment-item.test.ts @@ -49,5 +49,6 @@ describe('CommentsCommentItem', () => { { detail: { resolved: true } }, ), ); + expect(element['resolved']).toEqual(true); }); });