@chat21/chat21-web-widget 5.1.34-rc1 → 5.1.34

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

@@ -1,72 +1,53 @@
-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 { async, ComponentFixture, TestBed, waitForAsync, inject } from '@angular/core/testing';
 
-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>;
 
-  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(),
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ 
+        ConversationContentComponent,
+        // BubbleMessageComponent,
+        // ReturnReceiptComponent,
+        // AvatarComponent,
+        // InfoMessageComponent,
+        // MessageAttachmentComponent,
+        // ImageComponent,
+        // FrameComponent,
+        // TextComponent,
+        // TextButtonComponent,
+        // LinkButtonComponent,
+        // ActionButtonComponent,
+
+        MarkedPipe,
+        HtmlEntitiesEncodePipe,
+      ],
+      imports: [
+      ],
+      providers: [ 
+        UploadService,
+        ImageRepoService
       ],
+      schemas: [NO_ERRORS_SCHEMA],
     })
-      .overrideComponent(ConversationContentComponent, {
-        set: {
-          template: `
-            <div class="c21-body">
-              <div #scrollMe>
-                <div id="c21-contentScroll" style="height:20px;">inner</div>
-              </div>
-            </div>
-          `,
-        },
-      })
-      .compileComponents();
+    .compileComponents();
+  }));
 
-    uploadState$ = uploadServiceStub.BSStateUpload as BehaviorSubject<any>;
+  beforeEach(() => {
     fixture = TestBed.createComponent(ConversationContentComponent);
-    component = fixture.componentInstance;
-    component.messages = [];
-    component.stylesMap = new Map([
-      ['bubbleSentTextColor', '#111'],
-      ['bubbleReceivedTextColor', '#222'],
-    ]);
-    component.translationMap = new Map([['LABEL_LOADING', 'Loading']]);
+    let upload = fixture.debugElement.injector.get(UploadService) as UploadService
+    upload.BSStateUpload.next({ upload: 100, type: 'image' })
     fixture.detectChanges();
   });
 
@@ -74,194 +55,120 @@ describe('ConversationContentComponent', () => {
     expect(component).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 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('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 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('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();
-    });
+  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();
   });
 
 });

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

@@ -1,5 +1,4 @@
-import { ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnInit, OnDestroy, Output, SimpleChanges, ViewChild } from '@angular/core';
-import { Subscription } from 'rxjs';
+import { ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
 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';
@@ -13,7 +12,7 @@ import { isCarousel, isEmojii, isFirstMessage, isFrame, isImage, isInfo, isLastM
   templateUrl: './conversation-content.component.html',
   styleUrls: ['./conversation-content.component.scss']
 })
-export class ConversationContentComponent implements OnInit, OnDestroy {
+export class ConversationContentComponent implements OnInit {
   @ViewChild('scrollMe') public scrollMe: ElementRef;
   
   @Input() messages: MessageModel[]
@@ -27,7 +26,6 @@ export class ConversationContentComponent implements OnInit, OnDestroy {
   @Input() showThinkingMessage: boolean;
   @Input() lastServerSenderKind: 'bot' | 'human' | null;
   @Input() fullscreenMode: boolean;
-  @Input() isStreamAudioActive: boolean;
   @Input() translationMap: Map< string, string>;
   @Input() stylesMap: Map<string, string>;
   @Output() onBeforeMessageRender = new EventEmitter();
@@ -74,7 +72,6 @@ export class ConversationContentComponent implements OnInit, OnDestroy {
   showUploadProgress: boolean = false;
   fileType: string;
   private logger: LoggerService = LoggerInstance.getInstance();
-  private uploadSub?: Subscription;
 
   constructor(private cdref: ChangeDetectorRef,
               private elementRef: ElementRef,
@@ -84,8 +81,8 @@ export class ConversationContentComponent implements OnInit, OnDestroy {
     this.listenToUploadFileProgress();
   }
 
-  ngOnDestroy() {
-    this.uploadSub?.unsubscribe();
+  ngAfterContentChecked() {
+    this.cdref.detectChanges();
   }
 
   ngOnChanges(changes: SimpleChanges){
@@ -123,7 +120,7 @@ export class ConversationContentComponent implements OnInit, OnDestroy {
 
   // ENABLE HTML SECTION 'FILE PENDING UPLOAD'
   listenToUploadFileProgress() {
-    this.uploadSub = this.uploadService.BSStateUpload.subscribe((data: any) => {
+    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,73 +1,23 @@
 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],
-      providers: [
-        provideHttpClient(withInterceptorsFromDi()),
-        provideHttpClientTesting(),
-      ],
+      declarations: [ ConversationEmojiiComponent ]
     })
-      .overrideComponent(ConversationEmojiiComponent, {
-        set: { template: '<span></span>' },
-      })
-      .compileComponents();
+    .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');
-    });
-  });
 });