From f26b2da372841f9a5976f6669b35a4ecdd238614 Mon Sep 17 00:00:00 2001 From: Faustin Date: Mon, 18 Nov 2024 11:22:40 +0100 Subject: [PATCH] test: create --- ...e-inspect-message-dialog.component.spec.ts | 79 +++++++++++++++ .../table-inspect-message.component.html | 4 +- .../table-inspect-message.component.spec.ts | 99 +++++++++++++++++++ .../table/table-inspect-message.component.ts | 6 +- 4 files changed, 181 insertions(+), 7 deletions(-) create mode 100644 src/app/components/table/table-inspect-message-dialog.component.spec.ts create mode 100644 src/app/components/table/table-inspect-message.component.spec.ts diff --git a/src/app/components/table/table-inspect-message-dialog.component.spec.ts b/src/app/components/table/table-inspect-message-dialog.component.spec.ts new file mode 100644 index 000000000..69535c480 --- /dev/null +++ b/src/app/components/table/table-inspect-message-dialog.component.spec.ts @@ -0,0 +1,79 @@ +import { Clipboard } from '@angular/cdk/clipboard'; +import { TestBed } from '@angular/core/testing'; +import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; +import { IconsService } from '@services/icons.service'; +import { NotificationService } from '@services/notification.service'; +import { TableInspectMessageDialogComponent, TableInspectMessageDialogData } from './table-inspect-message-dialog.component'; + +describe('TableInspectMessageDialogComponent', () => { + let component: TableInspectMessageDialogComponent; + + const label = 'Message'; + + const message = 'A long and complete message'; + + const mockMatDialogRef = { + close: jest.fn() + }; + + const mockData: TableInspectMessageDialogData = { + label: label, + message: message, + }; + + const mockNotificationService = { + success: jest.fn(), + }; + + const mockClipboard = { + copy: jest.fn() + }; + + beforeEach(() => { + component = TestBed.configureTestingModule({ + providers: [ + TableInspectMessageDialogComponent, + IconsService, + { provide: Clipboard, useValue: mockClipboard }, + { provide: NotificationService, useValue: mockNotificationService }, + { provide: MatDialogRef, useValue: mockMatDialogRef }, + { provide: MAT_DIALOG_DATA, useValue: mockData } + ] + }).inject(TableInspectMessageDialogComponent); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); + + it('should get label', () => { + expect(component.label).toEqual(label); + }); + + it('should get message', () => { + expect(component.message).toEqual(message); + }); + + describe('onCopy', () => { + beforeEach(() => { + component.copy(); + }); + + it('should copy the message', () => { + expect(mockClipboard.copy).toHaveBeenCalledWith(message); + }); + + it('should notify the user', () => { + expect(mockNotificationService.success).toHaveBeenCalled(); + }); + }); + + it('should get icon', () => { + expect(component.getIcon('heart')).toEqual('favorite'); + }); + + it('should close dialog', () => { + component.onNoClick(); + expect(mockMatDialogRef.close).toHaveBeenCalled(); + }); +}); \ No newline at end of file diff --git a/src/app/components/table/table-inspect-message.component.html b/src/app/components/table/table-inspect-message.component.html index 21e1c0eda..b3cdd9313 100644 --- a/src/app/components/table/table-inspect-message.component.html +++ b/src/app/components/table/table-inspect-message.component.html @@ -1,7 +1,7 @@
- {{croppedMessage | emptyCell }} - @if (message) { + {{ croppedMessage | emptyCell }} + @if (croppedMessage) { } @if (displayEye) { diff --git a/src/app/components/table/table-inspect-message.component.spec.ts b/src/app/components/table/table-inspect-message.component.spec.ts new file mode 100644 index 000000000..d079bb487 --- /dev/null +++ b/src/app/components/table/table-inspect-message.component.spec.ts @@ -0,0 +1,99 @@ +import { Clipboard } from '@angular/cdk/clipboard'; +import { TestBed } from '@angular/core/testing'; +import { MatDialog } from '@angular/material/dialog'; +import { IconsService } from '@services/icons.service'; +import { NotificationService } from '@services/notification.service'; +import { TableInspectMessageDialogComponent } from './table-inspect-message-dialog.component'; +import { TableInspectMessageComponent } from './table-inspect-message.component'; + +describe('TableInspectMessageComponent', () => { + let component: TableInspectMessageComponent; + + const label = 'Message'; + + const message = 'A long and complete message'; + + const mockNotificationService = { + success: jest.fn(), + }; + + const mockDialog = { + open: jest.fn() + }; + + const mockClipboard = { + copy: jest.fn() + }; + + beforeEach(() => { + component = TestBed.configureTestingModule({ + providers: [ + TableInspectMessageComponent, + IconsService, + { provide: NotificationService, useValue: mockNotificationService }, + { provide: MatDialog, useValue: mockDialog }, + { provide: Clipboard, useValue: mockClipboard } + ] + }).inject(TableInspectMessageComponent); + component.label = label; + component.message = message; + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); + + describe('setting message', () => { + it('should set the cropped message', () => { + expect(component.croppedMessage).toEqual('A long and com...'); + }); + + it('should display the eye', () => { + expect(component.displayEye).toBeTruthy(); + }); + + it('should set the full message if it not too long', () => { + const newMessage = 'message'; + component.message = newMessage; + expect(component.croppedMessage).toEqual(newMessage); + }); + + it('should not display the eye if the message is too long', () => { + component.message = 'message'; + expect(component.displayEye).toBeFalsy(); + }); + }); + + describe('onCopy', () => { + beforeEach(() => { + component.copy(); + }); + + it('should copy the message', () => { + expect(mockClipboard.copy).toHaveBeenCalledWith(message); + }); + + it('should notify the user', () => { + expect(mockNotificationService.success).toHaveBeenCalled(); + }); + }); + + it('should get icon', () => { + expect(component.getIcon('heart')).toEqual('favorite'); + }); + + describe('on View', () => { + beforeEach(() => { + component.onView(); + }); + + it('should display pass the data to the dialog', () => { + expect(mockDialog.open).toHaveBeenCalledWith(TableInspectMessageDialogComponent, { + data: { + label: label, + message: message + } + }); + }); + }); +}); \ No newline at end of file diff --git a/src/app/components/table/table-inspect-message.component.ts b/src/app/components/table/table-inspect-message.component.ts index 5f39790cd..cfeb14630 100644 --- a/src/app/components/table/table-inspect-message.component.ts +++ b/src/app/components/table/table-inspect-message.component.ts @@ -29,7 +29,6 @@ export class TableInspectMessageComponent { @Input({ required: true }) label: string; @Input({ required: true }) set message(entry: string | undefined) { - if (entry && entry !== '') { if (entry.length > 15) { this._croppedMessage = `${entry.substring(0, 14).trimEnd()}...`; @@ -37,6 +36,7 @@ export class TableInspectMessageComponent { this._displayEye = true; } else { this._croppedMessage = entry; + this._displayEye = false; } } } @@ -50,10 +50,6 @@ export class TableInspectMessageComponent { private _message: string |undefined; private _displayEye = false; - get message() { - return this._message; - } - get croppedMessage() { return this._croppedMessage; }