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

package/src/app/component/message/image/image.component.scss

@@ -21,22 +21,6 @@ img {
     transform: scale(1.05);
 }
 
-.c21-image-trigger {
-    display: block;
-    padding: 0;
-    margin: 0;
-    background: transparent;
-    border: none;
-    border-radius: var(--borderRadius);
-    width: 100%;
-    cursor: pointer;
-    line-height: 0;
-}
-.c21-image-trigger:focus-visible {
-    outline: 2px solid var(--c21-focus-ring, #1a73e8);
-    outline-offset: 2px;
-}
-
   
 .c21-img-container {
     text-align: center;

package/src/app/component/message/image/image.component.spec.ts

@@ -1,5 +1,4 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import * as FileSaver from 'file-saver';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ImageComponent } from './image.component';
 
@@ -7,115 +6,30 @@ describe('ImageComponent', () => {
   let component: ImageComponent;
   let fixture: ComponentFixture<ImageComponent>;
 
-  const metadata = {
-    height: 100,
-    name: 'logo_fb.png',
-    src: 'https://cdn.example.com/logo.png',
-    type: 'image/png',
-    uid: 'u1',
-    width: 100,
-  };
-
-  beforeEach(waitForAsync(() => {
+  beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ImageComponent],
-    }).compileComponents();
+      declarations: [ ImageComponent ]
+    })
+    .compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ImageComponent);
     component = fixture.componentInstance;
-    component.metadata = { ...metadata };
-    component.width = 80;
-    component.height = 80;
+    component.metadata = {
+      height: 650,
+      name: "logo_fb.png",
+      src: "https://firebasestorage.googleapis.com/v0/b/chat21-pre-01.appspot.com/o/public%2Fimages%2F42083ab3-3aa6-4507-831c-41c84b09dd83%2F0e8e8562-360e-4407-aa20-a0ccbe99b62d%2Flogo_fb.png?alt=media&token=8125435a-76ac-42f0-9017-cf3d8fb4e8a1",
+      type: "image/png",
+      uid: "ksg7sxnt",
+      width: 650
+    }
+    component.width = 650
+    component.height = 650
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
-
-  it('ngOnInit should run', () => {
-    expect(() => component.ngOnInit()).not.toThrow();
-  });
-
-  it('onLoaded should clear loading and emit', () => {
-    spyOn(component.onElementRendered, 'emit');
-    component.loading = true;
-    component.onLoaded({} as any);
-    expect(component.loading).toBe(false);
-    expect(component.onElementRendered.emit).toHaveBeenCalledWith({ element: 'image', status: true });
-  });
-
-  it('downloadImage should call saveAs with explicit fileName', () => {
-    spyOn(FileSaver, 'saveAs');
-    component.downloadImage('https://cdn/x/a.png', 'out.png');
-    expect(FileSaver.saveAs).toHaveBeenCalledWith('https://cdn/x/a.png', 'out.png');
-  });
-
-  it('downloadImage should derive fileName from URL when omitted', () => {
-    spyOn(FileSaver, 'saveAs');
-    const url = 'https://cdn/x/my%20file.png';
-    component.downloadImage(url, null as any);
-    expect(FileSaver.saveAs).toHaveBeenCalled();
-    const name = (FileSaver.saveAs as jasmine.Spy).calls.mostRecent().args[1] as string;
-    expect(name).toContain('my');
-  });
-
-  it('onClickImage onload should register keydown on iframe document and close on Escape', () => {
-    const origCreate = document.createElement.bind(document);
-    const origGetById = document.getElementById.bind(document);
-    const fakeIframe: any = {
-      setAttribute: jasmine.createSpy('setAttribute'),
-      style: {},
-      srcdoc: '',
-      onload: null as null | ((ev: Event) => void),
-    };
-    spyOn(document, 'createElement').and.callFake((tag: string) => (tag === 'iframe' ? fakeIframe : origCreate(tag)));
-    spyOn(document, 'getElementById').and.callFake((id: string) =>
-      id === 'tiledesk-image-preview' ? fakeIframe : origGetById(id),
-    );
-    spyOn(document.body, 'appendChild').and.callFake((node: any) => {
-      node.parentNode = document.body;
-      return node;
-    });
-    spyOn(document.body, 'removeChild').and.stub();
-    component.onClickImage();
-    const docMock: any = {
-      getElementById: jasmine.createSpy('getElementById').and.returnValue(null),
-      addEventListener: jasmine.createSpy('addEventListener'),
-    };
-    fakeIframe.contentWindow = { document: docMock };
-    expect(fakeIframe.onload).toBeTruthy();
-    fakeIframe.onload({} as any);
-    expect(docMock.addEventListener).toHaveBeenCalledWith('keydown', jasmine.any(Function));
-    const keydownHandler = docMock.addEventListener.calls.mostRecent().args[1] as (e: KeyboardEvent) => void;
-    keydownHandler({ key: 'Escape', keyCode: 27, preventDefault: jasmine.createSpy() } as any);
-    expect(document.body.removeChild).toHaveBeenCalledWith(fakeIframe);
-  });
-
-  it('onClickImage should append iframe with preview markup', () => {
-    const iframes: HTMLIFrameElement[] = [];
-    const origCreate = document.createElement.bind(document);
-    spyOn(document, 'createElement').and.callFake((tag: string) => {
-      const el = origCreate(tag) as HTMLElement;
-      if (tag === 'iframe') {
-        iframes.push(el as HTMLIFrameElement);
-      }
-      return el;
-    });
-    spyOn(document.body, 'appendChild').and.callThrough();
-    component.onClickImage();
-    expect(document.body.appendChild).toHaveBeenCalled();
-    expect(iframes.length).toBe(1);
-    expect(iframes[0].id).toBe('tiledesk-image-preview');
-    expect(iframes[0].srcdoc).toContain('tiledesk-popup');
-    expect(iframes[0].srcdoc).toContain(metadata.src);
-    document.body.removeChild(iframes[0]);
-  });
-
-  it('img should expose alt from metadata name', () => {
-    const img = (fixture.nativeElement as HTMLElement).querySelector('img');
-    expect(img?.getAttribute('alt')).toBe('logo_fb.png');
-  });
 });

package/src/app/component/message/image/image.component.ts

@@ -42,99 +42,60 @@ export class ImageComponent implements OnInit {
     // this.onClickImage()
   }
 
-  /**
-   * Opens the image in an accessible lightbox.
-   *
-   * Accessibility features (WCAG 2.1.1, 2.1.2, 2.4.3, 4.1.2):
-   * - Lightbox container is rendered as role="dialog" aria-modal="true" with aria-label.
-   * - A real <button> with aria-label closes the dialog.
-   * - The dialog can be dismissed via Escape, click on the backdrop, or the close button.
-   * - The previously focused element is restored when the lightbox closes.
-   * - Focus is moved to the close button on open to keep keyboard users inside the dialog.
-   */
   onClickImage(){
-    const previouslyFocused = document.activeElement as HTMLElement | null;
-    const altText = this.metadata?.name || 'Image preview';
-    const closeLabel = this.tooltipMessage || 'Close';
-
-    const ifrm = document.createElement('iframe');
-    ifrm.setAttribute('frameborder', '0');
-    ifrm.setAttribute('id', 'tiledesk-image-preview');
-    ifrm.setAttribute('tiledesk_context', 'parent');
-    ifrm.setAttribute('title', altText);
-    ifrm.setAttribute('aria-label', altText);
-    ifrm.setAttribute('style', 'width: 100%; height: 100%; position: absolute; z-index: 2147483003; border: 0;');
-
-    let iframeContent = '<!doctype html><html lang="' + (document.documentElement.lang || 'en') + '"><head>';
-    iframeContent += '<meta charset="utf-8"/>';
-    iframeContent += '<title>' + altText.replace(/[<>]/g, '') + '</title>';
-    iframeContent += '<style>';
-    iframeContent += 'html,body{margin:0;padding:0;height:100%;}';
-    iframeContent += '.tiledesk-popup-backdrop{position:fixed;inset:0;background-color:rgba(0,0,0,0.6);}';
-    iframeContent += '.tiledesk-popup-content{position:fixed;inset:0;display:flex;justify-content:center;align-items:center;padding:32px;}';
-    iframeContent += '.tiledesk-popup-image{max-height:85vh;max-width:90vw;border-radius:8px;}';
-    iframeContent += '.tiledesk-popup-button{position:fixed;top:16px;right:16px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background-color:rgba(255,255,255,0.95);border:1px solid rgba(0,0,0,0.1);border-radius:50%;cursor:pointer;padding:0;}';
-    iframeContent += '.tiledesk-popup-button:focus-visible{outline:3px solid #1a73e8;outline-offset:2px;}';
-    iframeContent += '.tiledesk-popup-button svg{width:20px;height:20px;fill:#000;}';
-    iframeContent += '@media (prefers-reduced-motion: reduce){.tiledesk-popup-backdrop{transition:none;}}';
-    iframeContent += '</style></head><body>';
-    iframeContent += '<div role="dialog" aria-modal="true" aria-label="' + altText.replace(/"/g, '&quot;') + '" id="frame-root">';
-    iframeContent += '<div class="tiledesk-popup-backdrop" id="popup-backdrop"></div>';
-    iframeContent += '<div class="tiledesk-popup-content">';
-    iframeContent += '<img src="' + this.metadata.src + '" class="tiledesk-popup-image" id="image-popup" alt="' + altText.replace(/"/g, '&quot;') + '">';
-    iframeContent += '</div>';
-    iframeContent += '<button type="button" id="closeButton" class="tiledesk-popup-button" aria-label="' + closeLabel.replace(/"/g, '&quot;') + '">';
-    iframeContent += '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>';
-    iframeContent += '</button>';
-    iframeContent += '</div>';
-    iframeContent += '</body></html>';
-
-    ifrm.srcdoc = iframeContent;
-    window.document.body.appendChild(ifrm);
-
-    const closeLightbox = () => {
-      const node = window.document.getElementById('tiledesk-image-preview');
-      if (node && node.parentNode) {
-        node.parentNode.removeChild(node);
-      }
-      if (previouslyFocused && typeof previouslyFocused.focus === 'function') {
-        try { previouslyFocused.focus(); } catch(e) { /* noop */ }
-      }
-    };
-
-    ifrm.onload = function () {
-      const doc = ifrm.contentWindow?.document;
-      if (!doc) { return; }
-
-      const closeBtn = doc.getElementById('closeButton') as HTMLButtonElement | null;
-      const backdrop = doc.getElementById('popup-backdrop');
-      const image = doc.getElementById('image-popup');
-
-      if (closeBtn) {
-        closeBtn.addEventListener('click', (e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          closeLightbox();
-        });
-        closeBtn.focus();
-      }
-
-      if (backdrop) {
-        backdrop.addEventListener('click', () => closeLightbox());
-      }
-
-      if (image) {
-        image.addEventListener('click', (e) => e.stopPropagation());
-      }
-
-      // Escape key handler from inside the lightbox iframe
-      doc.addEventListener('keydown', (event: KeyboardEvent) => {
-        if (event.key === 'Escape' || event.keyCode === 27) {
-          event.preventDefault();
-          closeLightbox();
-        }
+    const that = this;
+    var ifrm = document.createElement("iframe");
+    ifrm.setAttribute("frameborder", "0");
+    // ifrm.setAttribute("border", "0");
+    ifrm.setAttribute('id','tiledesk-image-preview');
+    ifrm.setAttribute('tiledesk_context','parent');
+    ifrm.setAttribute('style', 'width: 100%; height: 100%; position: absolute; z-index: 2147483003;')
+    
+    var iframeContent = '<head>'
+    iframeContent += '<style> .tiledesk-popup {position: absolute; inset: 1px; outline-offset: -5px; background-color: rgba(0, 0, 0, 0.35); border-radius:16px; will-change: opacity;}'
+    iframeContent +=    '.tiledesk-popup-content { position: fixed; inset: 0px; width: 100%;  height: 100%; display: flex;  justify-content: center; align-items: center; outline: 0px;}'
+    iframeContent +=    '.tiledesk-popup-button { display: flex; align-items: center; justify-content: center; width: 35px; height: 35px; position: absolute; top: 0px; right: 0px; background-color: transparent; border: none; cursor: pointer; margin: 9px; padding: 0px; }'
+    iframeContent +=    '.tiledesk-popup-image { max-height: 80vh; max-width: 80vw; }'
+    iframeContent += '</style>'
+    iframeContent += '</head>';
+    iframeContent += '<body>'
+    iframeContent +=  '<div class="frame-root" id="frame-root">'
+    iframeContent +=    '<div class="frame-content">'
+    iframeContent +=      '<div class="tiledesk-popup" style="opacity: 1;"></div>'
+    iframeContent +=      '<div role="button" tabindex="-1" class="tiledesk-popup-content">'
+    // iframeContent +=         '<button id="button" type="button" data-testid="closeButton" class="tiledesk-popup-button">'
+    // iframeContent +=           '<svg id="ic_close" fill="#000000" height="20" viewBox="0 0 24 24" width="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg>'
+    // iframeContent +=         '</button>'
+    iframeContent +=         '<a href="'+this.metadata.src+'" data-testid="popupImage-wrapper" class="tidio-popup-vgwcqv" style="opacity: 1; transform: translate3d(0px, 0px, 0px);">'
+    iframeContent +=           '<img src="'+this.metadata.src+'" class="tiledesk-popup-image" id="image-popup">'
+    iframeContent +=         '</a>'
+    iframeContent +=      '</div>'
+    iframeContent +=   '</div>'
+    iframeContent +='</body>'
+
+    // ifrm.src = 'data:text/html;charset=utf-8,' + encodeURI(iframeContent);
+    ifrm.srcdoc = iframeContent
+    window.document.body.appendChild(ifrm)
+
+
+    ifrm.onload = function(ev) {
+      var iframe = window.document.getElementById('tiledesk-image-preview')
+      // var button = ifrm.contentWindow.document.getElementById("button");
+      // button.addEventListener("click", function(event){
+      //   window.document.body.removeChild(iframe)
+      // });
+      var div = ifrm.contentWindow.document.getElementById('frame-root')
+      div.addEventListener("click", function(event){
+        window.document.body.removeChild(iframe)
       });
+      // var image = ifrm.contentWindow.document.getElementById('image-popup')
+      // image.addEventListener("click", function(event){
+      //   event.preventDefault();
+      //   event.stopPropagation();
+      //   that.downloadImage(that.metadata.src, that.metadata.name)
+      // });
     };
+    
   }
 
 

package/src/app/component/message/info-message/info-message.component.spec.ts

@@ -1,48 +1,36 @@
+import { CustomLogger } from './../../../../chat21-core/providers/logger/customLogger';
+import { LoggerInstance } from './../../../../chat21-core/providers/logger/loggerInstance';
+import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
 import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { MessageModel } from 'src/chat21-core/models/message';
-import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
-import { CustomLogger } from 'src/chat21-core/providers/logger/customLogger';
-import { NGXLogger } from 'ngx-logger';
-import { TooltipDirective } from '../../../directives/tooltip.directive';
-import { DateAgoPipe } from '../../../pipe/date-ago.pipe';
 import { MarkedPipe } from '../../../pipe/marked.pipe';
+
 import { InfoMessageComponent } from './info-message.component';
+import { NGXLogger } from 'ngx-logger';
 
 describe('InfoMessageComponent', () => {
   let component: InfoMessageComponent;
   let fixture: ComponentFixture<InfoMessageComponent>;
-  const ngxlogger = jasmine.createSpyObj('NGXLogger', ['log', 'trace', 'debug', 'warn', 'error', 'info']);
-  const customLogger = new CustomLogger(ngxlogger);
+  let ngxlogger: NGXLogger;
+  let customLogger = new CustomLogger(ngxlogger)
 
   beforeEach(waitForAsync(() => {
-    LoggerInstance.setInstance(customLogger);
     TestBed.configureTestingModule({
-      declarations: [InfoMessageComponent, MarkedPipe, DateAgoPipe, TooltipDirective],
-    }).compileComponents();
+      declarations: [ InfoMessageComponent, MarkedPipe ],
+      providers: [LoggerService, NGXLogger]
+    })
+    .compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(InfoMessageComponent);
     component = fixture.componentInstance;
-    component.message = { text: 'hello', timestamp: Date.now() } as MessageModel;
+    LoggerInstance.setInstance(customLogger)
+    let logger = LoggerInstance.getInstance()
+    component['logger']= logger
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
-
-  it('ngOnInit should replace br tags with newlines in message text', () => {
-    const msg = { text: 'a<br/>b<br>c', timestamp: Date.now() } as MessageModel;
-    component.message = { ...msg };
-    component.ngOnInit();
-    expect(component.message.text).toContain('\n');
-    expect(component.message.text).not.toContain('<br');
-  });
-
-  it('ngOnInit should tolerate missing message', () => {
-    component.message = undefined as any;
-    expect(() => component.ngOnInit()).not.toThrow();
-  });
 });

package/src/app/component/message/like-unlike/like-unlike.component.html

@@ -1,19 +1,21 @@
 <div class="like-container">
     <div class="menu">
         <!-- LIKE -->
-        <button type="button" class="c21-button-clean c21-like" (click)="onClick('like')" aria-label="Like message">
-            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-                width="24" height="24" viewBox="0 0 24 24" xml:space="preserve" aria-hidden="true" focusable="false">
+        <button class="c21-button-clean c21-like" (click)="onClick('like')">
+            <svg role="img" aria-labelledby="altIconTitle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  
+                width="24" height="24" viewBox="0 0 24 24" xml:space="preserve">
                 <path fill="black" d="M4.5,9h-3C0.7,9,0,9.6,0,10.4v10.4c0,0.8,0.7,1.5,1.5,1.5h3c0.8,0,1.5-0.7,1.5-1.5V10.5C6,9.7,5.3,9,4.5,9z"/>
                 <path fill="black" d="M24,10.5c-0.1-1.7-1.6-3-3.3-3h-4.5c0,0,0,0,0,0c0.4-1.2,0.7-2.2,0.7-2.7c0-1.6-1.2-3.2-3.3-3.2  c-2.2,0-2.8,1.5-3.3,2.7C8.8,8,7.5,7.4,7.5,8.6c0,0.6,0.5,1.1,1.1,1.1c0.2,0,0.5-0.1,0.7-0.2c3.6-2.9,2.7-5.8,4.3-5.8  c0.8,0,1,0.6,1,1c0,0.3-0.4,1.9-1.2,3.4c-0.1,0.2-0.1,0.4-0.1,0.5c0,0.7,0.5,1.1,1.1,1.1h6.5c0.5,0,0.9,0.4,0.9,0.9  c0,0.5-0.4,0.8-0.8,0.9c-0.6,0-1,0.5-1,1.1c0,0.7,0.5,0.7,0.5,1.4c0,1.2-1.6,0.6-1.6,2c0,0.5,0.3,0.6,0.3,1c0,1.1-1.4,0.6-1.4,1.9  c0,0.1,0,0.2,0,0.2c0.1,0.6-0.3,1.1-0.9,1.1l-2.4,0c-1.2,0-2.4-0.4-3.4-1.1l-1.7-1.3c-0.2-0.2-0.4-0.2-0.7-0.2  c-0.6,0-1.1,0.5-1.1,1.1c0,0.3,0.2,0.7,0.4,0.9l1.7,1.3c1.4,1,3,1.6,4.7,1.6h2.5c1.7,0,3-1.3,3.1-2.9c0,0,0,0,0,0  c0.8-0.6,1.3-1.5,1.3-2.6c0-0.1,0-0.3,0-0.4c0.8-0.6,1.4-1.5,1.4-2.6c0-0.2,0-0.5-0.1-0.7C23.5,12.6,24.1,11.6,24,10.5z"/>
-            </svg>
+                <title id="altIconTitle">LIKE</title>
+            </svg>  
         </button>
         <!-- UNLIKE -->
-        <button type="button" class="c21-button-clean" (click)="onClick('unlike')" aria-label="Unlike message">
-            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-                width="24" height="24" viewBox="0 0 24 24" xml:space="preserve" aria-hidden="true" focusable="false">
+        <button class="c21-button-clean" (click)="onClick('like')">
+            <svg role="img" aria-labelledby="altIconTitle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  
+                width="24" height="24" viewBox="0 0 24 24" xml:space="preserve">
                 <path d="M6,13.5V3c0-0.8-0.7-1.5-1.5-1.5h-3C0.7,1.5,0,2.2,0,3v10.5c0,0.8,0.7,1.5,1.5,1.5h3C5.3,15,6,14.3,6,13.5z"/>
                 <path d="M22.6,10.7c0.1-0.2,0.1-0.5,0.1-0.7c0-1.1-0.5-2-1.4-2.6c0-0.1,0-0.3,0-0.4c0-1-0.5-2-1.4-2.6c-0.1-1.6-1.5-2.9-3.1-2.9  h-2.5c-1.7,0-3.4,0.6-4.7,1.6L8,4.4C7.7,4.6,7.5,4.9,7.5,5.3c0,0.6,0.5,1.1,1.1,1.1c0.2,0,0.5-0.1,0.7-0.2L11,4.9  c1-0.7,2.2-1.1,3.4-1.1h2.5c0.5,0,0.9,0.4,0.9,0.9c0,0.2-0.1,0.2-0.1,0.4c0,1.3,1.4,0.8,1.4,1.9c0,0.4-0.3,0.5-0.3,1  c0,0.7,0.5,1,0.9,1.1c0.4,0.1,0.7,0.4,0.7,0.9c0,0.6-0.5,0.6-0.5,1.4c0,0.6,0.5,1.1,1,1.1c0.5,0,0.8,0.4,0.8,0.8  c0,0.5-0.4,0.9-0.9,0.9h-6.5c-0.6,0-1.1,0.5-1.1,1.1c0,0.2,0,0.4,0.1,0.5c0.8,1.6,1.2,3.1,1.2,3.4c0,0.4-0.3,1-1,1  c-0.6,0-0.7,0-1.2-1.3c-1.2-2.9-2.9-4.7-3.8-4.7c-0.6,0-1.1,0.5-1.1,1.1c0,0.3,0.1,0.7,0.4,0.9c3.2,2.6,2,6.2,5.7,6.2  c2.1,0,3.3-1.6,3.3-3.2c0-0.6-0.2-1.7-0.7-2.8h4.7c1.7,0,3.1-1.4,3.1-3.2C24,12.3,23.4,11.3,22.6,10.7z"/>
+                <title id="altIconTitle">UNLIKE</title>
             </svg>
         </button>
     </div>

package/src/app/component/message/like-unlike/like-unlike.component.spec.ts

@@ -1,22 +1,16 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
-import { CustomLogger } from 'src/chat21-core/providers/logger/customLogger';
-import { NGXLogger } from 'ngx-logger';
 
 import { LikeUnlikeComponent } from './like-unlike.component';
 
 describe('LikeUnlikeComponent', () => {
   let component: LikeUnlikeComponent;
   let fixture: ComponentFixture<LikeUnlikeComponent>;
-  const ngxlogger = jasmine.createSpyObj('NGXLogger', ['log', 'trace', 'debug', 'warn', 'error', 'info']);
-  const customLogger = new CustomLogger(ngxlogger);
 
   beforeEach(async () => {
-    LoggerInstance.setInstance(customLogger);
     await TestBed.configureTestingModule({
-      declarations: [LikeUnlikeComponent],
-    }).compileComponents();
+      declarations: [ LikeUnlikeComponent ]
+    })
+    .compileComponents();
   });
 
   beforeEach(() => {
@@ -28,26 +22,4 @@ describe('LikeUnlikeComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
-
-  it('onClick should log icon id', () => {
-    spyOn((component as any).logger, 'debug');
-    component.onClick('like');
-    expect((component as any).logger.debug).toHaveBeenCalledWith('[LIKE-UNLIKE] onClick-->', 'like');
-  });
-
-  it('like button should have accessible name', () => {
-    const btn = fixture.debugElement.queryAll(By.css('button'))[0];
-    expect(btn.nativeElement.getAttribute('aria-label')).toBe('Like message');
-  });
-
-  it('unlike button should have accessible name', () => {
-    const btn = fixture.debugElement.queryAll(By.css('button'))[1];
-    expect(btn.nativeElement.getAttribute('aria-label')).toBe('Unlike message');
-  });
-
-  it('clicking like should invoke logger', () => {
-    spyOn((component as any).logger, 'debug');
-    fixture.debugElement.queryAll(By.css('button'))[0].triggerEventHandler('click', {});
-    expect((component as any).logger.debug).toHaveBeenCalledWith('[LIKE-UNLIKE] onClick-->', 'like');
-  });
 });

package/src/app/component/message/return-receipt/return-receipt.component.spec.ts

@@ -1,10 +1,6 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { async, ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import {
-  MSG_STATUS_RETURN_RECEIPT,
-  MSG_STATUS_SENT,
-  MSG_STATUS_SENT_SERVER,
-} from 'src/app/utils/constants';
+import { MSG_STATUS_SENT } from 'src/chat21-core/utils/constants';
 
 import { ReturnReceiptComponent } from './return-receipt.component';
 
@@ -14,48 +10,31 @@ describe('ReturnReceiptComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ReturnReceiptComponent],
-    }).compileComponents();
+      declarations: [ ReturnReceiptComponent ]
+    })
+    .compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ReturnReceiptComponent);
     component = fixture.componentInstance;
+    fixture.detectChanges();
   });
 
   it('should create', () => {
-    fixture.detectChanges();
     expect(component).toBeTruthy();
   });
 
-  it('should render schedule icon when status is falsy', () => {
-    component.status = 0 as any;
-    fixture.detectChanges();
-    const icons = fixture.debugElement.queryAll(By.css('.icon'));
-    expect(icons.length).toBe(1);
-  });
-
-  it('should render sent icon for MSG_STATUS_SENT', () => {
-    component.status = MSG_STATUS_SENT;
-    fixture.detectChanges();
-    expect(fixture.debugElement.queryAll(By.css('.icon')).length).toBe(1);
-  });
-
-  it('should render server-sent icon for MSG_STATUS_SENT_SERVER', () => {
-    component.status = MSG_STATUS_SENT_SERVER;
-    fixture.detectChanges();
-    expect(fixture.debugElement.queryAll(By.css('.icon')).length).toBe(1);
-  });
-
-  it('should render return receipt icon for MSG_STATUS_RETURN_RECEIPT', () => {
-    component.status = MSG_STATUS_RETURN_RECEIPT;
+  it('shold render MSG_STATUS_SENT icon', ()=> {
+    component.status= MSG_STATUS_SENT
     fixture.detectChanges();
-    expect(fixture.debugElement.queryAll(By.css('.icon')).length).toBe(1);
-  });
-
-  it('should expose status constants on component', () => {
-    expect(component.MSG_STATUS_SENT).toBe(MSG_STATUS_SENT);
-    expect(component.MSG_STATUS_SENT_SERVER).toBe(MSG_STATUS_SENT_SERVER);
-    expect(component.MSG_STATUS_RETURN_RECEIPT).toBe(MSG_STATUS_RETURN_RECEIPT);
-  });
+    expect(component.status).toBe(MSG_STATUS_SENT)
+  })
+
+  // it('shold render MSG_STATUS_SENT icon', ()=> {
+  //   component.status= MSG_STATUS_SENT
+  //   fixture.detectChanges();
+  //   let element = fixture.debugElement.query(By.css('icon'))
+  //   expect(element.classes).toBeE('icon')
+  // })
 });

package/src/app/component/message/text/text.component.html

@@ -1,3 +1,3 @@
-<div #messageEl class="message_innerhtml marked"
-    [innerHTML]="printMessage(text, messageEl, this) | marked"
-    [style.color]="color"></div>
+<p  #messageEl class="message_innerhtml marked" 
+    [innerHTML]="printMessage(text, messageEl, this) | marked" 
+    [style.color]="color"></p>