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

package/src/app/component/message/bubble-message/bubble-message.component.html

@@ -1,4 +1,26 @@
-<div class="bubble-message messages primary-color">
+<!-- [ngClass]="{'button-in-msg' : message.metadata && message.metadata.button}" -->
+<!-- ngStyle]="{'padding': (isImage(message) || isFrame(message))?'1px':'0 8px'}" -->
+<!-- 'width': (isImage(message) || isFrame(message))? sizeImage?.width + 'px': null  -->
+
+
+    
+<!-- <div id="bubble-message" *ngIf="isAudio(message)" [ngStyle]="{'padding': '0'}" class="messages primary-color">
+  <div>
+    <chat-audio-track  *ngIf="isAudio(message)"
+      [metadata]="message.metadata" 
+    ></chat-audio-track>
+  </div>
+</div> 
+
+
+[ngStyle]="{'padding': (isImage(message) || isFrame(message) || isAudio(message))?'0 0px':'0 8px'}"
+-->
+
+
+
+
+
+<div id="bubble-message" *ngIf="hasRenderableContent()" class="messages primary-color">
     <div>
 
       <div *ngIf="messageType(MESSAGE_TYPE_OTHERS, message) && !isSameSender"
@@ -6,7 +28,17 @@
         [ngStyle]="{'margin': (isImage(message) || isFrame(message))? '12px 16px 8px 16px': '12px 16px 0px 16px'}" class="message_sender_fullname">
         {{message?.sender_fullname}}
       </div>
+      <!-- message type:: image -->
+      <!-- <div *ngIf="message.type == 'image' && message.metadata"  [ngStyle] = "{ 'max-width': getSizeImg(message).width, 'max-height': getSizeImg(message).height }">
+          <img class="message-contentX message-content-imageX" [src]="message.metadata.src" />
+      </div> -->
+  
+      <!-- <img *ngIf="message.type == 'image' && message.metadata" class="message-contentX message-content-imageX"
+      [src]="message.metadata.src" [width]="getSizeImg(message).width"
+      [height]="getSizeImg(message).height" /> -->
 
+      <!-- [width]="getMetadataSize(message.metadata).width"
+      [height]="getMetadataSize(message.metadata).height" -->
       <chat-image *ngIf="isImage(message)"
         [metadata]="message.metadata"
         [width]="sizeImage?.width"
@@ -21,42 +53,22 @@
         (onElementRendered)="onElementRenderedFN($event)">
       </chat-frame>
 
+      <!-- <chat-audio *ngIf="isAudio(message)"
+        [metadata]="message.metadata" 
+        (onElementRendered)="onElementRenderedFN($event)">
+      </chat-audio> -->
 
       <chat-audio *ngIf="isAudio(message)"
         [metadata]="message.metadata"
         [color]="fontColor"
-        [stylesMap]="stylesMap"
-        [translationMap]="translationMap">
+        [stylesMap]="stylesMap">
       </chat-audio>
-      
-      <!-- Json sources -->
+
       <chat-json-sources *ngIf="jsonSources !== null && jsonSources.length > 0"
         [items]="jsonSources"
         (onElementRendered)="onElementRenderedFN($event)">
       </chat-json-sources> 
-      <!-- TTS player: only when voice proxy is NOT active (avoids double playback)
-           and the message was not already played by the proxy (avoids replay on session end) -->
-      <chat-audio-sync *ngIf="isAudioTTS(message) && !(voiceService.isWssVoiceActive$ | async) && !voiceService.wasProxyHandled(message?.uid)"
-        [message]="message"
-        [color]="fontColor">
-      </chat-audio-sync>
-
-      <!-- Karaoke display for TTS messages while a WSS voice session is active -->
-      <p *ngIf="isAudioTTS(message) && (voiceService.isWssVoiceActive$ | async) && _wssKaraokeWords$"
-         class="wss-karaoke"
-         [style.color]="fontColor">
-        <span *ngFor="let w of (_wssKaraokeWords$ | async); trackBy: trackKaraokeWord"
-              class="wss-word"
-              [class.future]="w.state === 'future'"
-              [class.active]="w.state === 'active'"
-              [class.past]="w.state === 'past'">{{ w.text }}&nbsp;</span>
-      </p>
-
-      <!-- Text fallback for TTS messages after the voice proxy session ended -->
-      <chat-text *ngIf="isAudioTTS(message) && !(voiceService.isWssVoiceActive$ | async) && voiceService.wasProxyHandled(message?.uid) && message?.text"
-        [text]="message?.text"
-        [color]="fontColor">
-      </chat-text>
+
 
       <!-- <chat-frame *ngIf="message.metadata && message.metadata.type && message.metadata.type.includes('video')"
         [metadata]="message.metadata"
@@ -68,17 +80,10 @@
       <!-- <div *ngIf="message.type == 'text'"> -->     
 
       <!-- tooltip="{{message.timestamp | dateAgo}} ({{message.timestamp | date:'shortDate'}} {{message.timestamp | date:'HH:mm:ss'}})" placement="bottom" -->
-      <div *ngIf="message?.text && (!isAudio(message) && !isAudioTTS(message)) && !isJsonSources(message)" >
-
-        <!-- Word-by-word streaming reveal during an active voice session -->
-        <p *ngIf="_isStreaming" class="streaming-text" [style.color]="fontColor">
-          <span *ngFor="let w of _streamingWords; trackBy: trackWord"
-                class="stream-word"
-                [style.animation-delay]="(w.index * 80) + 'ms'">{{w.word}} </span>
-        </p>
+      <div *ngIf="(message?.text && !isAudio(message)) && !isJsonSources(message)">
 
         <!-- [htmlEnabled]="(message?.type==='html')? true : false" -->
-        <chat-text *ngIf="message?.type !=='html'"
+        <chat-text *ngIf="jsonSources === null && message?.type !=='html'"
           [text]="message?.text"
           [color]="fontColor"
           (onBeforeMessageRender)="onBeforeMessageRenderFN($event)"
@@ -93,5 +98,13 @@
         </chat-html>
 
       </div>
+  
     </div>
-</div>
+  
+  </div>
+
+
+  
+
+
+

package/src/app/component/message/bubble-message/bubble-message.component.scss

@@ -37,57 +37,4 @@
     chat-audio {
         display: flex;
     }
-}
-.streaming-text {
-    padding: 0;
-    margin: 0;
-    line-height: 1.5;
-
-    .stream-word {
-        display: inline;
-        opacity: 0;
-        animation: stream-word-in 200ms ease-out forwards;
-    }
-}
-
-@keyframes stream-word-in {
-    from {
-        opacity: 0;
-        transform: translateY(3px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-// -- WSS TTS Karaoke ----------------------------------------------------------
-.wss-karaoke {
-    // Match chat-text (ShadowDom) visual layout so there's no jump when voice opens.
-    // font-size must be set explicitly: the parent has font-size:10px but chat-text
-    // overrides it via :host { font-size: var(--font-size-bubble-message, 14px) }.
-    display: block;
-    margin: 0;
-    padding: 12px 16px;
-    font-size: var(--font-size-bubble-message, 14px);
-    line-height: 1.4em;
-    font-weight: 300;
-    overflow: hidden;
-}
-
-.wss-word {
-    display: inline;
-    transition: opacity 120ms ease;
-
-    &.future {
-        opacity: 0.35;
-    }
-
-    &.active {
-        opacity: 1;
-    }
-
-    &.past {
-        opacity: 1;
-    }
-}
+}

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

@@ -1,62 +1,26 @@
-import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { of } from 'rxjs';
-import { MAX_WIDTH_IMAGES, MIN_WIDTH_IMAGES } from 'src/chat21-core/utils/constants';
-import { VoiceService } from 'src/app/providers/voice/voice.service';
-import { JsonSourcesParserService } from 'src/app/providers/json-sources-parser.service';
 
 import { BubbleMessageComponent } from './bubble-message.component';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
 
 describe('BubbleMessageComponent', () => {
   let component: BubbleMessageComponent;
   let fixture: ComponentFixture<BubbleMessageComponent>;
 
-  const voiceServiceMock = {
-    isWssVoiceActive: false,
-    markProxyHandled: jasmine.createSpy('markProxyHandled'),
-    voiceTtsKaraoke$: of({ text: '', words: [], activeIndex: -1 }),
-  };
-
-  const jsonSourcesParserMock = {
-    parseBaseFromMessage: jasmine.createSpy('parseBaseFromMessage').and.returnValue(null),
-    enrichSources: jasmine.createSpy('enrichSources').and.resolveTo(null),
-  };
-
-  const textMessage: any = {
-    attributes: { projectId: 'p1' },
-    channel_type: 'group',
-    recipient: 'support-group-x',
-    recipient_fullname: 'Guest ',
-    sender: 'bot_1',
-    sender_fullname: 'BOT2',
-    status: 150,
-    text: 'Hello',
-    timestamp: 1629273999970,
-    type: 'text',
-    uid: 'm1',
-    isSender: false,
-  };
-
-  beforeEach(waitForAsync(() => {
+  beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [BubbleMessageComponent],
+      declarations: [ BubbleMessageComponent ],
       schemas: [NO_ERRORS_SCHEMA],
-      providers: [
-        { provide: VoiceService, useValue: voiceServiceMock },
-        { provide: JsonSourcesParserService, useValue: jsonSourcesParserMock },
+      imports: [
       ],
-    }).compileComponents();
+    })
+    .compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(BubbleMessageComponent);
     component = fixture.componentInstance;
-    component.stylesMap = new Map([
-      ['buttonFontSize', '14px'],
-      ['themeColor', '#000'],
-      ['foregroundColor', '#fff'],
-    ]);
     fixture.detectChanges();
   });
 
@@ -64,115 +28,54 @@ describe('BubbleMessageComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should have a chat-text child for plain text messages', () => {
-    component.message = textMessage;
-    fixture.detectChanges();
-    expect(fixture.debugElement.query(By.css('chat-text'))).toBeTruthy();
-  });
-
-  it('should bind chat-text inputs from message', () => {
-    component.message = textMessage;
-    fixture.detectChanges();
-    const textChild = fixture.debugElement.query(By.css('chat-text'));
-    expect(textChild.properties.text).toEqual(textMessage.text);
-  });
-
-  describe('ngOnChanges', () => {
-    it('should compute sizeImage from message metadata object', () => {
-      component.message = {
-        ...textMessage,
-        metadata: { width: 100, height: 50 },
-      };
-      component.ngOnChanges();
-      expect(component.sizeImage.width).toBe(100);
-    });
-
-    it('should cap width when metadata exceeds MAX_WIDTH_IMAGES (calcImageSize)', () => {
-      component.message = {
-        ...textMessage,
-        metadata: { width: MAX_WIDTH_IMAGES * 2, height: 100 },
-      };
-      component.ngOnChanges();
-      expect(component.sizeImage.width).toBe(MAX_WIDTH_IMAGES);
-    });
-
-    it('should scale up narrow thumbnails when width <= 55 (calcImageSize)', () => {
-      component.message = {
-        ...textMessage,
-        metadata: { width: 40, height: 80 },
-      };
-      component.ngOnChanges();
-      expect(component.sizeImage.width).toBe(MIN_WIDTH_IMAGES);
-      expect(component.sizeImage.height).toBe(MIN_WIDTH_IMAGES / (40 / 80));
-    });
-
-    it('should keep metadata dimensions for mid-sized images', () => {
-      component.message = {
-        ...textMessage,
-        metadata: { width: 120, height: 60 },
-      };
-      component.ngOnChanges();
-      expect(component.sizeImage.width).toBe(120);
-      expect(component.sizeImage.height).toBe(60);
-    });
-
-    it('should leave width undefined when metadata has no width (calcImageSize)', () => {
-      component.message = {
-        ...textMessage,
-        metadata: { width: undefined, height: 10 },
-      };
-      component.ngOnChanges();
-      expect(component.sizeImage.width).toBeUndefined();
-      expect(component.sizeImage.height).toBe(10);
-    });
-
-    it('should ignore non-object metadata', () => {
-      component.message = { ...textMessage, metadata: 'x' as any };
-      component.ngOnChanges();
-      expect(component.sizeImage).toEqual({ width: 0, height: 0 });
-    });
-
-    it('should derive fullnameColor from fontColor', () => {
-      component.message = textMessage;
-      component.fontColor = '#ff0000';
-      component.ngOnChanges();
-      expect(component.fullnameColor).toBeTruthy();
-    });
-
-    it('should prefer sender fullname color when name present', () => {
-      component.message = { ...textMessage, sender_fullname: 'Anna' };
-      component.fontColor = '#00ff00';
-      component.ngOnChanges();
-      expect(component.fullnameColor).toBeTruthy();
-    });
-  });
-
-  describe('emitters', () => {
-    beforeEach(() => {
-      component.message = textMessage;
-    });
-
-    it('onBeforeMessageRenderFN should emit with sanitizer and message', () => {
-      spyOn(component.onBeforeMessageRender, 'emit');
-      const ev = { messageEl: {}, component: {} };
-      component.onBeforeMessageRenderFN(ev);
-      expect(component.onBeforeMessageRender.emit).toHaveBeenCalled();
-      const arg = (component.onBeforeMessageRender.emit as jasmine.Spy).calls.mostRecent().args[0];
-      expect(arg.message).toBe(component.message);
-      expect(arg.sanitizer).toBe(component.sanitizer);
-    });
-
-    it('onAfterMessageRenderFN should emit', () => {
-      spyOn(component.onAfterMessageRender, 'emit');
-      const ev = { messageEl: {}, component: {} };
-      component.onAfterMessageRenderFN(ev);
-      expect(component.onAfterMessageRender.emit).toHaveBeenCalled();
-    });
-
-    it('onElementRenderedFN should forward element and status', () => {
-      spyOn(component.onElementRendered, 'emit');
-      component.onElementRenderedFN({ element: 'image', status: true });
-      expect(component.onElementRendered.emit).toHaveBeenCalledWith({ element: 'image', status: true });
-    });
-  });
+  it('should have a "chat-text" child element', () => {
+    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.message = messages
+    // component.textColor = 'black'
+    fixture.detectChanges()
+    const textChild = fixture.debugElement.query(By.css('chat-text'))
+    textChild.properties.text
+    expect(textChild).toBeTruthy();
+  })
+
+  it('should have a text inside "chat-text" child element', () => {
+    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.message = messages
+    // component.textColor = 'black'
+    fixture.detectChanges()
+    const textChild = fixture.debugElement.query(By.css('chat-text'))
+    expect(textChild.properties.text).toEqual(messages.text)
+  })
 });

package/src/app/component/message/bubble-message/bubble-message.component.ts

@@ -1,39 +1,25 @@
-import { Component, EventEmitter, HostBinding, Input, OnDestroy, OnInit, Output } from '@angular/core';
-import { Observable, Subscription } from 'rxjs';
-import { map, startWith } from 'rxjs/operators';
+import { Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { MessageModel } from 'src/chat21-core/models/message';
 import { MESSAGE_TYPE_MINE, MESSAGE_TYPE_OTHERS, TYPE_MSG_URL_PREVIEW } from 'src/chat21-core/utils/constants';
 import { convertColorToRGBA } from 'src/chat21-core/utils/utils';
-import { JsonSourcesParserService } from 'src/app/providers/json-sources-parser.service';
-import { calcImageSize, isAudio, isAudioTTS, isFile, isFrame, isImage, isJsonSources, messageType } from 'src/chat21-core/utils/utils-message';
+import { calcImageSize, isAudio, isFile, isFrame, isImage, isJsonSources, messageType } from 'src/chat21-core/utils/utils-message';
 import { getColorBck } from 'src/chat21-core/utils/utils-user';
-import { VoiceService } from 'src/app/providers/voice/voice.service';
+import { JsonSourcesParserService } from 'src/app/providers/json-sources-parser.service';
 import { JsonSourceItem } from '../json-sources/json-sources.component';
-import { VoiceTtsKaraokeWord } from 'src/app/providers/voice/voice-streaming.types';
 
 @Component({
   selector: 'chat-bubble-message',
   templateUrl: './bubble-message.component.html',
   styleUrls: ['./bubble-message.component.scss']
 })
-export class BubbleMessageComponent implements OnInit, OnDestroy {
+export class BubbleMessageComponent {
 
   @Input() message: MessageModel;
   @Input() isSameSender: boolean;
   @Input() fontColor: string;
   @Input() stylesMap: Map<string, string>;
-  @Input() translationMap: Map<string, string>;
-  /** When true, a newly-arrived bot text message reveals its words one by one. */
-  @Input() streamOnArrival = false;
-  /** One-shot flag: set once in ngOnChanges, never reverts so animation isn't replayed. */
-  _isStreaming = false;
-  /** Precomputed word list; rebuilt only when the message text changes. */
-  _streamingWords: Array<{ word: string; index: number }> = [];
-  /** Live karaoke word states driven by voiceTtsKaraoke$ during an active WSS session. */
-  _wssKaraokeWords$?: Observable<VoiceTtsKaraokeWord[]>;
-
-  private _kSub?: Subscription;
+
   @Output() onBeforeMessageRender = new EventEmitter();
   @Output() onAfterMessageRender = new EventEmitter();
   @Output() onElementRendered = new EventEmitter<{ element: string; status: boolean }>();
@@ -58,56 +44,22 @@ export class BubbleMessageComponent implements OnInit, OnDestroy {
   readonly isFrame = isFrame;
   readonly isAudio = isAudio;
   readonly isJsonSources = isJsonSources;
-  readonly isAudioTTS = isAudioTTS;
   readonly messageType = messageType;
   readonly convertColorToRGBA = convertColorToRGBA;
   readonly MESSAGE_TYPE_MINE = MESSAGE_TYPE_MINE;
   readonly MESSAGE_TYPE_OTHERS = MESSAGE_TYPE_OTHERS;
 
-  sizeImage: { width: number; height: number } = { width: 0, height: 0 };
-  fullnameColor: string = '';
+  sizeImage: { width: number; height: number };
+  fullnameColor: string;
   jsonSources: JsonSourceItem[] | null = null;
   isUrlPreviewMessage = false;
 
   private urlPreviewReqId = 0;
 
   constructor(
-    public sanitizer: DomSanitizer, 
-    public voiceService: VoiceService, 
+    public sanitizer: DomSanitizer,
     private jsonSourcesParser: JsonSourcesParserService
-  ) { }
-
-  ngOnInit() {
-    // If this TTS message arrived while the voice proxy was active, mark it so
-    // audio-sync never replays it after the session ends.
-    if (isAudioTTS(this.message) && this.voiceService.isWssVoiceActive && this.message?.uid) {
-      this.voiceService.markProxyHandled(this.message.uid);
-    }
-
-    // Set up karaoke observable for TTS messages during WSS sessions.
-    if (isAudioTTS(this.message) && this.message?.text) {
-      const text = this.message.text;
-      const rawWords = text.trim().split(/\s+/).filter((w) => w.length > 0);
-      // Always start as 'past' (fully visible). The karaoke RAF loop will drive
-      // words through future→active→past for the current speaking turn; using
-      // 'future' here would dimm old/history messages the moment voice opens.
-      const initialWords: VoiceTtsKaraokeWord[] = rawWords.map((w) => ({ text: w, state: 'past' as const }));
-
-      this._wssKaraokeWords$ = this.voiceService.voiceTtsKaraoke$.pipe(
-        startWith({ text, words: initialWords, activeIndex: -1 }),
-        map((frame) =>
-          frame.text === text
-            ? (frame.words as VoiceTtsKaraokeWord[])
-            : initialWords,
-        ),
-      );
-    }
-  }
-
-  ngOnDestroy(): void {
-    this._kSub?.unsubscribe();
-    this._kSub = undefined;
-  }
+  ) {}
 
   ngOnChanges(): void {
     if (this.message?.metadata && typeof this.message.metadata === 'object') {
@@ -122,30 +74,8 @@ export class BubbleMessageComponent implements OnInit, OnDestroy {
       this.fullnameColor = getColorBck(this.message.sender_fullname);
     }
 
-    // One-shot: activate word streaming for newly-arrived bot text messages during a voice session.
-    // Reset isJustRecived so the animation never replays on subsequent change detection cycles.
-    if (
-      !this._isStreaming &&
-      this.streamOnArrival &&
-      this.message?.isJustRecived === true &&
-      this.messageType(this.MESSAGE_TYPE_OTHERS, this.message) &&
-      !this.isAudio(this.message) &&
-      !this.isAudioTTS(this.message) &&
-      this.message?.type !== 'html'
-    ) {
-      this._isStreaming = true;
-      this._streamingWords = (this.message.text ?? '')
-        .trim()
-        .split(/\s+/)
-        .filter(w => w.length > 0)
-        .map((word, index) => ({ word, index }));
-      this.message.isJustRecived = false;
-    }
-
-    if (this.message?.type !== TYPE_MSG_URL_PREVIEW) {
-      this.jsonSources = null;
-      return;
-    }
+    // Reset on every message change: we must not "leak" sources across different messages.
+    this.jsonSources = null;
 
     // url_preview payload can live on message root OR inside metadata/attributes depending on the integration.
     const urlPreviewLike =
@@ -169,14 +99,6 @@ export class BubbleMessageComponent implements OnInit, OnDestroy {
     this.jsonSources = enriched;
   }
 
-  trackWord(_index: number, item: { word: string; index: number }): number {
-    return item.index;
-  }
-
-  trackKaraokeWord(index: number): number {
-    return index;
-  }
-
   onBeforeMessageRenderFN(event: any): void {
     this.onBeforeMessageRender.emit({ message: this.message, sanitizer: this.sanitizer, messageEl: event.messageEl, component: event.component });
   }

package/src/app/component/message/buttons/action-button/action-button.component.html

@@ -1,7 +1,8 @@
-<div #actionButton class="button-in-msg action action-button"
+<div #actionButton id="actionButton" class="button-in-msg action" 
   [ngClass]="{'disabled': isConversationArchived}"
-  (click)="actionButtonAction()"
-  (mouseover)="onMouseOver($event)"
+  (click)="actionButtonAction()" 
+  (mouseover)="onMouseOver($event)" 
   (mouseout)="onMouseOut($event)">
     {{button?.value}}
 </div>
+<!-- title="{{button?.value}}" -->

package/src/app/component/message/buttons/action-button/action-button.component.spec.ts

@@ -1,6 +1,4 @@
-import { SimpleChange } from '@angular/core';
-import { ComponentFixture, TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ActionButtonComponent } from './action-button.component';
 
@@ -8,62 +6,20 @@ describe('ActionButtonComponent', () => {
   let component: ActionButtonComponent;
   let fixture: ComponentFixture<ActionButtonComponent>;
 
-  beforeEach(waitForAsync(() => {
+  beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ActionButtonComponent],
-    }).compileComponents();
+      declarations: [ ActionButtonComponent ]
+    })
+    .compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ActionButtonComponent);
     component = fixture.componentInstance;
-    component.button = { value: 'OK', action: 'go' };
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
-
-  it('ngOnChanges should map theme CSS variables onto .action', () => {
-    component.fontSize = '16px';
-    component.backgroundColor = '#111';
-    component.textColor = '#222';
-    component.hoverBackgroundColor = '#333';
-    component.hoverTextColor = '#444';
-    component.ngOnChanges({
-      fontSize: new SimpleChange(null, '16px', true),
-    });
-    const el = fixture.nativeElement.querySelector('.action') as HTMLElement;
-    expect(el.style.getPropertyValue('--buttonFontSize').trim()).toBe('16px');
-    expect(el.style.getPropertyValue('--buttonBackgroundColor').trim()).toBeTruthy();
-  });
-
-  it('actionButtonAction should emit when action present', fakeAsync(() => {
-    spyOn(component.onButtonClicked, 'emit');
-    const de = fixture.debugElement.query(By.css('.action'));
-    de.triggerEventHandler('click', {});
-    tick(500);
-    expect(component.onButtonClicked.emit).toHaveBeenCalled();
-  }));
-
-  it('actionButtonAction should no-op when button has no action', () => {
-    component.button = { value: 'X', action: '' };
-    fixture.detectChanges();
-    spyOn(component.onButtonClicked, 'emit');
-    component.actionButtonAction();
-    expect(component.onButtonClicked.emit).not.toHaveBeenCalled();
-  });
-
-  it('mouseover and mouseout should not throw', () => {
-    expect(() => component.onMouseOver({} as any)).not.toThrow();
-    expect(() => component.onMouseOut({} as any)).not.toThrow();
-  });
-
-  it('template should mark archived conversations as disabled', () => {
-    component.isConversationArchived = true;
-    fixture.detectChanges();
-    const el = fixture.nativeElement.querySelector('.action');
-    expect(el.classList.contains('disabled')).toBe(true);
-  });
 });