test: create

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();
+  });
+});

src/app/components/table/table-inspect-message.component.html

@@ -1,7 +1,7 @@
 <mat-chip disableRipple>
   <section>
-    <span>{{croppedMessage | emptyCell }}</span>
-    @if (message) {
+    <span>{{ croppedMessage | emptyCell }}</span>
+    @if (croppedMessage) {
       <mat-icon [fontIcon]="getIcon('copy')" (click)="copy()" />
     }
     @if (displayEye) {

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
+        }
+      });
+    });
+  });
+});

src/app/components/table/table-inspect-message.component.ts

@@ -29,14 +29,14 @@ 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()}...`;
         this._message = entry;
         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;
   }