@chat21/chat21-web-widget 5.1.32-rc9 → 5.1.33-rc11

package/src/app/component/conversation-detail/conversation-content/conversation-content.component.spec.ts

@@ -1,53 +1,72 @@
-import { async, ComponentFixture, TestBed, waitForAsync, inject } from '@angular/core/testing';
+import { SimpleChange } from '@angular/core';
+import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { BehaviorSubject } from 'rxjs';
 
+import { UploadService } from 'src/chat21-core/providers/abstract/upload.service';
+import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+import { CustomLogger } from 'src/chat21-core/providers/logger/customLogger';
+import { NGXLogger } from 'ngx-logger';
+import { MAX_WIDTH_IMAGES } from 'src/app/utils/constants';
 import { ConversationContentComponent } from './conversation-content.component';
-import { MarkedPipe } from '../../../pipe/marked.pipe';
-import { HtmlEntitiesEncodePipe } from '../../../pipe/html-entities-encode.pipe';
-import { UploadService } from '../../../../chat21-core/providers/abstract/upload.service';
-import { CustomLogger } from '../../../../chat21-core/providers/logger/customLogger';
-import { LoggerInstance } from '../../../../chat21-core/providers/logger/loggerInstance';
-import { NO_ERRORS_SCHEMA, Injectable } from '@angular/core';
-import { By } from '@angular/platform-browser';
-import { ImageRepoService } from '../../../../chat21-core/providers/abstract/image-repo.service';
 
 describe('ConversationContentComponent', () => {
   let component: ConversationContentComponent;
   let fixture: ComponentFixture<ConversationContentComponent>;
+  let uploadState$: BehaviorSubject<any>;
 
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [ 
-        ConversationContentComponent,
-        // BubbleMessageComponent,
-        // ReturnReceiptComponent,
-        // AvatarComponent,
-        // InfoMessageComponent,
-        // MessageAttachmentComponent,
-        // ImageComponent,
-        // FrameComponent,
-        // TextComponent,
-        // TextButtonComponent,
-        // LinkButtonComponent,
-        // ActionButtonComponent,
-
-        MarkedPipe,
-        HtmlEntitiesEncodePipe,
-      ],
-      imports: [
-      ],
-      providers: [ 
-        UploadService,
-        ImageRepoService
+  const ngxlogger = jasmine.createSpyObj('NGXLogger', ['log', 'trace', 'debug', 'warn', 'error', 'info']);
+  const customLogger = new CustomLogger(ngxlogger);
+
+  const uploadServiceStub = {
+    BSStateUpload: new BehaviorSubject<any>(null),
+    initialize: jasmine.createSpy('initialize'),
+    upload: jasmine.createSpy('upload').and.resolveTo({ downloadURL: '', src: '' }),
+    uploadFile: jasmine.createSpy('uploadFile').and.resolveTo({ downloadURL: '', src: '' }),
+    uploadAsset: jasmine.createSpy('uploadAsset').and.resolveTo({ downloadURL: '', src: '' }),
+    uploadProfile: jasmine.createSpy('uploadProfile').and.resolveTo({}),
+    delete: jasmine.createSpy('delete').and.resolveTo({}),
+    deleteFile: jasmine.createSpy('deleteFile').and.resolveTo({}),
+    deleteAsset: jasmine.createSpy('deleteAsset').and.resolveTo({}),
+    deleteProfile: jasmine.createSpy('deleteProfile').and.resolveTo({}),
+    setBaseUrl: jasmine.createSpy('setBaseUrl'),
+    getBaseUrl: jasmine.createSpy('getBaseUrl').and.returnValue(''),
+  };
+
+  beforeEach(async () => {
+    LoggerInstance.setInstance(customLogger);
+
+    await TestBed.configureTestingModule({
+      declarations: [ConversationContentComponent],
+      providers: [
+        { provide: UploadService, useValue: uploadServiceStub },
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
       ],
-      schemas: [NO_ERRORS_SCHEMA],
     })
-    .compileComponents();
-  }));
+      .overrideComponent(ConversationContentComponent, {
+        set: {
+          template: `
+            <div class="c21-body">
+              <div #scrollMe>
+                <div id="c21-contentScroll" style="height:20px;">inner</div>
+              </div>
+            </div>
+          `,
+        },
+      })
+      .compileComponents();
 
-  beforeEach(() => {
+    uploadState$ = uploadServiceStub.BSStateUpload as BehaviorSubject<any>;
     fixture = TestBed.createComponent(ConversationContentComponent);
-    let upload = fixture.debugElement.injector.get(UploadService) as UploadService
-    upload.BSStateUpload.next({ upload: 100, type: 'image' })
+    component = fixture.componentInstance;
+    component.messages = [];
+    component.stylesMap = new Map([
+      ['bubbleSentTextColor', '#111'],
+      ['bubbleReceivedTextColor', '#222'],
+    ]);
+    component.translationMap = new Map([['LABEL_LOADING', 'Loading']]);
     fixture.detectChanges();
   });
 
@@ -55,120 +74,194 @@ describe('ConversationContentComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('renders a div el with class ".c21-body"', () => {
-    const bubble_message = fixture.debugElement.query(By.css('.c21-body'));
-    expect(bubble_message).toBeTruthy();
-  })
-
-  it('renders a div el with class ".base_receive"', () => {
-    const messages: [any] = [{
-          attributes: {
-              projectId: "6013ec749b32000045be650e",
-              tiledesk_message_id: "611cbf8ffb379b00346660e7"
-          },
-          channel_type: "group",
-          recipient: "support-group-6013ec749b32000045be650e-4904aee91f8b487aad117bcda860549d",
-          recipient_fullname: "Guest ",
-          sender: "bot_602256f6c001b800342cb76f",
-          sender_fullname: "BOT2",
-          status: 150,
-          text: "Hello 👋. I'm a bot 🤖.\n\nChoose one of the options below or write a message to reach our staff.",
-          timestamp: 1629273999970,
-          type: "text",
-          uid: "-MhNI3eaIoLTOLoX3TAu",
-          isSender: false
-      }
-    ]
-    component.messages = messages
-    component.senderId = '9d3b6aa5-0aea-4b7e-935f-1c1c675cd8d4'
-    component.baseLocation = 'http://tiledesk-widget-pre.s3-eu-west-1.amazonaws.com'
-    component.translationMap = new Map();
-    component.stylesMap = new Map();
-    fixture.detectChanges()
-    const nativeEl: HTMLElement = fixture.nativeElement;
-    const baseReceiveEl = nativeEl.querySelector('.base_receive');
-    expect(baseReceiveEl).toBeTruthy();
+  describe('ngOnInit', () => {
+    it('should subscribe to upload progress', () => {
+      spyOn(component, 'scrollToBottom');
+      uploadState$.next({ upload: 50, type: 'image/png' });
+      expect(component.showUploadProgress).toBe(true);
+      expect(component.uploadProgress).toBe(50);
+      expect(component.scrollToBottom).toHaveBeenCalled();
+    });
+
+    it('should hide progress when upload is complete (100 or NaN)', () => {
+      uploadState$.next({ upload: 100, type: 'image/png' });
+      expect(component.showUploadProgress).toBe(false);
+    });
   });
 
-  it('renders the right textContext of div el with class ".message_sender_fullname"', () => {
-    const messages: [any] = [{
-          attributes: {
-              projectId: "6013ec749b32000045be650e",
-              tiledesk_message_id: "611cbf8ffb379b00346660e7"
-          },
-          channel_type: "group",
-          recipient: "support-group-6013ec749b32000045be650e-4904aee91f8b487aad117bcda860549d",
-          recipient_fullname: "Guest ",
-          sender: "bot_602256f6c001b800342cb76f",
-          sender_fullname: "BOT2",
-          status: 150,
-          text: "Hello 👋. I'm a bot 🤖.\n\nChoose one of the options below or write a message to reach our staff.",
-          timestamp: 1629273999970,
-          type: "text",
-          uid: "-MhNI3eaIoLTOLoX3TAu",
-          isSender: false
-      }
-    ]
-    component.messages = messages
-    component.senderId = '9d3b6aa5-0aea-4b7e-935f-1c1c675cd8d4'
-    component.baseLocation = 'http://tiledesk-widget-pre.s3-eu-west-1.amazonaws.com'
-    component.translationMap = new Map();
-    component.stylesMap = new Map();
-    const nativeEl: HTMLElement = fixture.nativeElement;
-    const baseReceiveEl = nativeEl.querySelector('.message_sender_fullname');
-    fixture.detectChanges()
-    expect(baseReceiveEl.textContent).toBe('BOT2');
+  describe('ngOnChanges', () => {
+    it('should set CSS variables on .c21-body from stylesMap', () => {
+      const body = (fixture.debugElement.nativeElement as HTMLElement).querySelector('.c21-body') as HTMLElement;
+      spyOn(body.style, 'setProperty');
+      component.ngOnChanges({
+        stylesMap: new SimpleChange(null, component.stylesMap, true),
+      });
+      expect(body.style.setProperty).toHaveBeenCalledWith('--textColorSent', '#111');
+      expect(body.style.setProperty).toHaveBeenCalledWith('--textColorReceive', '#222');
+    });
   });
 
-  it('renders a chat-avatar-image & chat-bubble-message components in div with ".base_receive" class', () => {
-    const messages: Array<any> = [{
-          attributes: {
-              projectId: "6013ec749b32000045be650e",
-              tiledesk_message_id: "611cbf8ffb379b00346660e7"
-          },
-          channel_type: "group",
-          recipient: "support-group-6013ec749b32000045be650e-4904aee91f8b487aad117bcda860549d",
-          recipient_fullname: "Guest ",
-          sender: "bot_602256f6c001b800342cb76f",
-          sender_fullname: "BOT2",
-          status: 150,
-          text: "Hello 👋. I'm a bot 🤖.\n\nChoose one of the options below or write a message to reach our staff.",
-          timestamp: 1629273999970,
-          type: "text",
-          uid: "-MhNI3eaIoLTOLoX3TAu",
-          isSender: false
-      },
-      {
-        attributes: {
-            projectId: "6013ec749b32000045be650e",
-            tiledesk_message_id: "611cbf8ffb379b00346660e7"
-        },
-        channel_type: "group",
-        recipient: "support-group-6013ec749b32000045be650e-4904aee91f8b487aad117bcda860549d",
-        recipient_fullname: "Guest ",
-        sender: "bot_602256f6c001b800342cb76f",
-        sender_fullname: "BOT1",
-        status: 150,
-        text: "Hello 👋. I'm a bot 🤖.\n\nChoose one of the options below or write a message to reach our staff.",
-        timestamp: 1629273999970,
-        type: "text",
-        uid: "-MhNI3eaIoLTOLoX3TAu",
-        isSender: false
-    }
-    ]
-    component.messages = messages
-    component.senderId = '9d3b6aa5-0aea-4b7e-935f-1c1c675cd8d4'
-    component.baseLocation = 'http://tiledesk-widget-pre.s3-eu-west-1.amazonaws.com'
-    component.translationMap = new Map();
-    component.stylesMap = new Map();
-    
-    const nativeEl: HTMLElement = fixture.nativeElement;
-    const baseReceiveEl = nativeEl.querySelectorAll('.base_receive')
-    const chatImageComponentChild = baseReceiveEl[0].querySelector('chat-avatar-image')
-    const bubbleMessageComponentChild = baseReceiveEl[0].querySelector('chat-bubble-message.msg_receive')
-    fixture.detectChanges()
-    expect(chatImageComponentChild).toBeTruthy();
-    expect(bubbleMessageComponentChild).toBeTruthy();
+  describe('getMetadataSize', () => {
+    it('should default width/height and scale wide images', () => {
+      const meta: any = { width: MAX_WIDTH_IMAGES * 2, height: 100 };
+      const s = component.getMetadataSize(meta);
+      expect(s.width).toBe(MAX_WIDTH_IMAGES);
+      const ratio = meta.width / meta.height;
+      expect(s.height).toBeCloseTo(MAX_WIDTH_IMAGES / ratio, 5);
+    });
+
+    it('should fill missing dimensions', () => {
+      const s = component.getMetadataSize({});
+      expect(s.width).toBe('100%');
+      expect(s.height).toBe(MAX_WIDTH_IMAGES);
+    });
+  });
+
+  describe('scroll and badge', () => {
+    beforeEach(() => {
+      const scrollHost = document.createElement('div');
+      scrollHost.style.height = '100px';
+      scrollHost.style.overflow = 'auto';
+      const inner = document.createElement('div');
+      inner.style.height = '300px';
+      scrollHost.appendChild(inner);
+      component.scrollMe = { nativeElement: scrollHost } as any;
+    });
+
+    it('onScroll should emit true at bottom', () => {
+      spyOn(component.onScrollContent, 'emit');
+      const el = component.scrollMe.nativeElement;
+      el.scrollTop = el.scrollHeight - el.clientHeight;
+      component.onScroll({ target: el });
+      expect(component.onScrollContent.emit).toHaveBeenCalledWith(true);
+    });
+
+    it('checkContentScrollPosition should return false when not at bottom', () => {
+      spyOn(component, 'checkContentScrollPosition').and.callThrough();
+      const el = component.scrollMe.nativeElement;
+      Object.defineProperty(el, 'scrollHeight', { configurable: true, value: 500 });
+      Object.defineProperty(el, 'clientHeight', { configurable: true, value: 100 });
+      el.scrollTop = 0;
+      expect(component.checkContentScrollPosition(el)).toBe(false);
+    });
+
+    it('scrollToBottom should emit onScrollContent true', fakeAsync(() => {
+      const wrap = document.createElement('div');
+      wrap.style.height = '40px';
+      wrap.style.overflow = 'auto';
+      const inner = document.createElement('div');
+      inner.id = 'c21-contentScroll';
+      inner.style.height = '200px';
+      wrap.appendChild(inner);
+      document.body.appendChild(wrap);
+      spyOn(component.onScrollContent, 'emit');
+      component.scrollToBottom(true);
+      tick(0);
+      expect(component.onScrollContent.emit).toHaveBeenCalledWith(true);
+      document.body.removeChild(wrap);
+    }));
+  });
+
+  describe('emitters', () => {
+    it('hideOutsideElements should close menus', () => {
+      spyOn(component.onMenuOptionShow, 'emit');
+      spyOn(component.onEmojiiPickerShow, 'emit');
+      component.hideOutsideElements();
+      expect(component.onMenuOptionShow.emit).toHaveBeenCalledWith(false);
+      expect(component.onEmojiiPickerShow.emit).toHaveBeenCalledWith(false);
+    });
+
+    it('onAttachmentButtonClickedFN should forward event', () => {
+      spyOn(component.onAttachmentButtonClicked, 'emit');
+      const ev = { a: 1 };
+      component.onAttachmentButtonClickedFN(ev);
+      expect(component.onAttachmentButtonClicked.emit).toHaveBeenCalledWith(ev);
+    });
+
+    it('onBeforeMessageRenderFN / onAfterMessageRenderFN should emit', () => {
+      spyOn(component.onBeforeMessageRender, 'emit');
+      spyOn(component.onAfterMessageRender, 'emit');
+      const ev = { x: 'y' };
+      component.onBeforeMessageRenderFN(ev);
+      component.onAfterMessageRenderFN(ev);
+      expect(component.onBeforeMessageRender.emit).toHaveBeenCalledWith(ev);
+      expect(component.onAfterMessageRender.emit).toHaveBeenCalledWith(ev);
+    });
+
+    it('onElementRenderedFN with status should call scrollToBottom', () => {
+      spyOn(component, 'scrollToBottom');
+      component.scrollMe = { nativeElement: document.createElement('div') } as any;
+      component.onElementRenderedFN({ status: true });
+      expect(component.scrollToBottom).toHaveBeenCalled();
+    });
+
+    it('onElementRenderedFN with status false should not scroll', () => {
+      spyOn(component, 'scrollToBottom');
+      component.scrollMe = { nativeElement: document.createElement('div') } as any;
+      component.onElementRenderedFN({ status: false });
+      expect(component.scrollToBottom).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('upload observable edge cases', () => {
+    it('should ignore null BSStateUpload payloads', () => {
+      component.showUploadProgress = true;
+      uploadState$.next(null);
+      expect(component.showUploadProgress).toBe(true);
+    });
+
+    it('should treat NaN upload as complete for progress UI', () => {
+      uploadState$.next({ upload: NaN, type: 'image/png' });
+      expect(component.showUploadProgress).toBe(false);
+    });
+  });
+
+  describe('onScroll without ViewChild', () => {
+    it('should not emit when scrollMe is missing', () => {
+      spyOn(component.onScrollContent, 'emit');
+      component.scrollMe = undefined as any;
+      component.onScroll({ target: document.createElement('div') });
+      expect(component.onScrollContent.emit).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('scrollToBottom error path (sync)', () => {
+    it('should log when getElementById throws synchronously', () => {
+      spyOn(document, 'getElementById').and.throwError('no-dom');
+      spyOn((component as any).logger, 'error');
+      component.scrollToBottom();
+      expect((component as any).logger.error).toHaveBeenCalled();
+    });
+  });
+
+  describe('message helper delegates', () => {
+    it('isLastMessage / isSameSender / isFirstMessage use messages array', () => {
+      component.messages = [
+        { uid: 'm1', sender: 'alice' },
+        { uid: 'm2', sender: 'alice' },
+      ] as any;
+      expect(component.isLastMessage('m2')).toBe(true);
+      expect(component.isSameSender('alice', 1)).toBe(true);
+      expect(component.isFirstMessage('alice', 0)).toBe(true);
+    });
+  });
+
+  describe('getMetadataSize string width', () => {
+    it('should not scale when width is non-numeric string', () => {
+      const s = component.getMetadataSize({ width: '100%', height: 200 });
+      expect(s.width).toBe('100%');
+    });
+  });
+
+  describe('ngOnChanges styles edge', () => {
+    it('should not touch DOM when bubble color keys are absent', () => {
+      const spy = spyOn((component as any).elementRef.nativeElement, 'querySelector');
+      component.stylesMap = new Map();
+      component.ngOnChanges({
+        stylesMap: new SimpleChange(null, component.stylesMap, false),
+      });
+      expect(spy).not.toHaveBeenCalled();
+    });
   });
 
 });

package/src/app/component/conversation-detail/conversation-content/conversation-content.component.ts

@@ -1,4 +1,5 @@
-import { ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
+import { ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnInit, OnDestroy, Output, SimpleChanges, ViewChild } from '@angular/core';
+import { Subscription } from 'rxjs';
 import { MAX_WIDTH_IMAGES, MSG_STATUS_RETURN_RECEIPT, MSG_STATUS_SENT, MSG_STATUS_SENT_SERVER } from 'src/app/utils/constants';
 import { MessageModel } from 'src/chat21-core/models/message';
 import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
@@ -12,7 +13,7 @@ import { isCarousel, isEmojii, isFirstMessage, isFrame, isImage, isInfo, isLastM
   templateUrl: './conversation-content.component.html',
   styleUrls: ['./conversation-content.component.scss']
 })
-export class ConversationContentComponent implements OnInit {
+export class ConversationContentComponent implements OnInit, OnDestroy {
   @ViewChild('scrollMe') public scrollMe: ElementRef;
   
   @Input() messages: MessageModel[]
@@ -73,6 +74,7 @@ export class ConversationContentComponent implements OnInit {
   showUploadProgress: boolean = false;
   fileType: string;
   private logger: LoggerService = LoggerInstance.getInstance();
+  private uploadSub?: Subscription;
 
   constructor(private cdref: ChangeDetectorRef,
               private elementRef: ElementRef,
@@ -82,8 +84,8 @@ export class ConversationContentComponent implements OnInit {
     this.listenToUploadFileProgress();
   }
 
-  ngAfterContentChecked() {
-    this.cdref.detectChanges();
+  ngOnDestroy() {
+    this.uploadSub?.unsubscribe();
   }
 
   ngOnChanges(changes: SimpleChanges){
@@ -93,7 +95,6 @@ export class ConversationContentComponent implements OnInit {
 
   }
 
-
   /**
    *
    * @param message
@@ -122,7 +123,7 @@ export class ConversationContentComponent implements OnInit {
 
   // ENABLE HTML SECTION 'FILE PENDING UPLOAD'
   listenToUploadFileProgress() {
-    this.uploadService.BSStateUpload.subscribe((data: any) => {
+    this.uploadSub = this.uploadService.BSStateUpload.subscribe((data: any) => {
       this.logger.debug('[CONV-CONTENT] BSStateUpload', data);
       // && data.type.startsWith("application")
       if (data) { 

package/src/app/component/conversation-detail/conversation-emojii/conversation-emojii.component.spec.ts

@@ -1,23 +1,73 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 
 import { ConversationEmojiiComponent } from './conversation-emojii.component';
 
+/** Template references `stylesMap`, which is not declared on the component; use a shallow template for unit tests. */
 describe('ConversationEmojiiComponent', () => {
   let component: ConversationEmojiiComponent;
   let fixture: ComponentFixture<ConversationEmojiiComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ ConversationEmojiiComponent ]
+      declarations: [ConversationEmojiiComponent],
+      providers: [
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
     })
-    .compileComponents();
+      .overrideComponent(ConversationEmojiiComponent, {
+        set: { template: '<span></span>' },
+      })
+      .compileComponents();
 
     fixture = TestBed.createComponent(ConversationEmojiiComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
   });
 
   it('should create', () => {
+    fixture.detectChanges();
     expect(component).toBeTruthy();
   });
+
+  describe('ngOnInit', () => {
+    it('should initialise default emoji-mart options', () => {
+      component.ngOnInit();
+      expect(component.emojiiOptions.emojiPerLine).toBe(9);
+      expect(component.emojiiOptions.include).toContain('people');
+    });
+  });
+
+  describe('addEmojiFN', () => {
+    it('should emit addEmoji when picker selects an emoji', () => {
+      let emitted: unknown;
+      component.addEmoji.subscribe((e) => (emitted = e));
+      const payload = { emoji: { native: '🙂' } };
+      component.addEmojiFN(payload);
+      expect(emitted).toEqual(payload);
+    });
+
+    it('should emit multiple selections to all subscribers', () => {
+      const out: unknown[] = [];
+      component.addEmoji.subscribe((e) => out.push(e));
+      component.addEmoji.subscribe((e) => out.push(e));
+      const p = { emoji: { native: '🎯' } };
+      component.addEmojiFN(p);
+      expect(out).toEqual([p, p]);
+    });
+
+    it('should forward undefined-like payloads without throwing', () => {
+      spyOn(component.addEmoji, 'emit');
+      component.addEmojiFN(undefined);
+      expect(component.addEmoji.emit).toHaveBeenCalledWith(undefined);
+    });
+  });
+
+  describe('@Input var', () => {
+    it('should accept custom picker label', () => {
+      component.var = 'picker-a';
+      expect(component.var).toBe('picker-a');
+    });
+  });
 });