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

package/src/app/component/home-conversations/home-conversations.component.spec.ts

@@ -1,59 +1,235 @@
-import { CustomTranslateService } from './../../../chat21-core/providers/custom-translate.service';
-import { TranslatorService } from './../../providers/translator.service';
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
-import { AppConfigService } from './../../providers/app-config.service';
-import { WaitingService } from './../../providers/waiting.service';
-import { ChatManager } from './../../../chat21-core/providers/chat-manager';
-import { Globals } from './../../utils/globals';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { of, Subscription } from 'rxjs';
 
-import { HomeConversationsComponent } from './home-conversations.component';
-import { ImageRepoService } from '../../../chat21-core/providers/abstract/image-repo.service';
-import { ConversationsHandlerService } from '../../../chat21-core/providers/abstract/conversations-handler.service';
-import { ArchivedConversationsHandlerService } from '../../../chat21-core/providers/abstract/archivedconversations-handler.service';
-import { TranslateModule } from '@ngx-translate/core';
-import { NGXLogger } from 'ngx-logger';
+import { CustomTranslateService } from 'src/chat21-core/providers/custom-translate.service';
+import { TranslatorService } from 'src/app/providers/translator.service';
+import { ChatManager } from 'src/chat21-core/providers/chat-manager';
+import { ImageRepoService } from 'src/chat21-core/providers/abstract/image-repo.service';
 import { CustomLogger } from 'src/chat21-core/providers/logger/customLogger';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+import { ConversationModel } from 'src/chat21-core/models/conversation';
+import { UserAgent } from 'src/models/userAgent';
+
+import { WaitingService } from 'src/app/providers/waiting.service';
+import { Globals } from '../../utils/globals';
+import { HomeConversationsComponent } from './home-conversations.component';
 
 describe('HomeConversationsComponent', () => {
   let component: HomeConversationsComponent;
   let fixture: ComponentFixture<HomeConversationsComponent>;
-  let ngxlogger: NGXLogger;
-  let customLogger = new CustomLogger(ngxlogger)
-  
+  let globals: Globals;
+  const ngxlogger = jasmine.createSpyObj('NGXLogger', ['log', 'trace', 'debug', 'warn', 'error', 'info']);
+
+  const waitingStub = {
+    getCurrent: jasmine.createSpy('getCurrent').and.returnValue(of([{ waiting_time_avg: 45000 }])),
+  };
+
+  const imageRepoStub = {
+    getImagePhotoUrl: jasmine.createSpy('getImagePhotoUrl').and.returnValue('https://cdn.example/photo.png'),
+    checkImageExists: jasmine.createSpy('checkImageExists'),
+  };
+
+  const translateStub = {
+    translateLanguage: jasmine.createSpy('translateLanguage').and.callFake((keys: string[]) => {
+      const m = new Map<string, string>();
+      keys.forEach((k) => m.set(k, `T:${k}`));
+      return m;
+    }),
+  };
+
   beforeEach(waitForAsync(() => {
+    LoggerInstance.setInstance(new CustomLogger(ngxlogger));
     TestBed.configureTestingModule({
-    declarations: [HomeConversationsComponent],
-    schemas: [NO_ERRORS_SCHEMA],
-    imports: [TranslateModule.forRoot()],
-    providers: [
+      declarations: [HomeConversationsComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+      providers: [
         Globals,
-        ImageRepoService,
-        ChatManager,
-        ConversationsHandlerService,
-        ArchivedConversationsHandlerService,
-        WaitingService,
-        AppConfigService,
-        TranslatorService,
-        CustomTranslateService,
-        provideHttpClient(withInterceptorsFromDi())
-    ]
-})
-    .compileComponents();
+        { provide: ImageRepoService, useValue: imageRepoStub },
+        { provide: ChatManager, useValue: {} },
+        { provide: TranslatorService, useValue: { getLanguage: () => 'en' } },
+        { provide: CustomTranslateService, useValue: translateStub },
+        { provide: WaitingService, useValue: waitingStub },
+      ],
+    }).compileComponents();
   }));
 
   beforeEach(() => {
+    globals = TestBed.inject(Globals);
+    globals.initDefafultParameters();
+    globals.projectid = 'proj-1';
+    globals.WAITING_TIME_FOUND = 'Tempo stimato $reply_time';
+    globals.dynamicWaitTimeReply = true;
+    globals.showWaitTime = true;
+    globals.PREV_CONVERSATIONS = 'Le tue conversazioni';
+    globals.NO_CONVERSATION = 'Nessuna';
+    globals.SHOW_ALL_CONV = 'Vedi tutte';
+    globals.LABEL_START_NW_CONV = 'Nuova';
+    globals.themeColor = '#00f';
+    globals.themeForegroundColor = '#fff';
+    globals.showAllConversations = true;
+    globals.showAvailableAgents = false;
+    globals.availableAgents = [{ id: 'a1', firstname: 'Ada', imageurl: '' } as UserAgent];
+
     fixture = TestBed.createComponent(HomeConversationsComponent);
     component = fixture.componentInstance;
-    LoggerInstance.setInstance(customLogger)
-    let logger = LoggerInstance.getInstance()
-    component['logger']= logger
+    component.stylesMap = new Map();
+    component.listConversations = [];
+    component.archivedConversations = [];
+    component.hideNewConversationButton = false;
+
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  describe('initialize and waiting time', () => {
+    it('should load translations and agent image URLs', () => {
+      expect(translateStub.translateLanguage).toHaveBeenCalled();
+      expect(imageRepoStub.getImagePhotoUrl).toHaveBeenCalledWith('a1');
+      expect(component.availableAgents.length).toBe(1);
+    });
+
+    it('should set waitingTime and placeholder when API returns averages', fakeAsync(() => {
+      tick(0);
+      expect(waitingStub.getCurrent).toHaveBeenCalledWith('proj-1');
+      expect(component.waitingTime).toBe(45000);
+      expect(component.humanWaitingTime).toBeTruthy();
+      expect(component.WAITING_TIME_FOUND_WITH_REPLYTIME_PLACEHOLDER).toContain(component.humanWaitingTime);
+    }));
+
+    it('should render root container id', () => {
+      const root = fixture.debugElement.query(By.css('#c21-app-list-conversations'));
+      expect(root).toBeTruthy();
+    });
+  });
+
+  /** Allineato a twp/index + tiledesk_open: lista vuota, CTA primaria, footer tempo attesa */
+  describe('empty state UI (widget integration)', () => {
+    beforeEach(() => {
+      globals.NO_CONVERSATION = 'Nessuna conversazione attiva';
+      globals.LABEL_START_NW_CONV = 'Nuova conversazione';
+      globals.showAvailableAgents = false;
+      globals.availableAgents = [{ id: 'solo', firstname: 'Ada', imageurl: 'https://cdn.example/photo.png' } as UserAgent];
+      component.listConversations = [];
+      component.archivedConversations = [];
+      fixture.detectChanges();
+    });
+
+    it('should show NO_CONVERSATION title in header when both lists are empty', () => {
+      const titleEl = fixture.nativeElement.querySelector('.c21-header .c21-title') as HTMLElement;
+      expect(titleEl.textContent?.trim()).toBe('Nessuna conversazione attiva');
+    });
+
+    it('should render primary new-conversation button with theme label and paper-plane icon', () => {
+      const btn = fixture.nativeElement.querySelector('.c21-new-conversation .c21-button-primary') as HTMLButtonElement;
+      expect(btn).toBeTruthy();
+      expect(btn.getAttribute('aria-label')).toBe('Nuova conversazione');
+      expect(btn.textContent).toContain('Nuova conversazione');
+      expect(btn.querySelector('svg')).toBeTruthy();
+    });
+
+    it('should surface waiting footer copy when showWaitTime and API returned average', fakeAsync(() => {
+      tick(0);
+      fixture.detectChanges();
+      const footer = fixture.nativeElement.querySelector('.c21-footer .c21-waiting-time') as HTMLElement;
+      expect(footer).toBeTruthy();
+      expect(footer.textContent).toContain(component.humanWaitingTime);
+    }));
+  });
+
+  describe('checkShowAllConversation', () => {
+    it('should return true when archived list has items', () => {
+      component.archivedConversations = [{ uid: 'x' } as ConversationModel];
+      expect(component.checkShowAllConversation()).toBe(true);
+    });
+
+    it('should return true when active list has items', () => {
+      component.archivedConversations = [];
+      component.listConversations = [{ uid: 'y' } as ConversationModel];
+      expect(component.checkShowAllConversation()).toBe(true);
+    });
+
+    it('should return false when both lists are empty', () => {
+      component.archivedConversations = [];
+      component.listConversations = [];
+      expect(component.checkShowAllConversation()).toBe(false);
+    });
+  });
+
+  describe('outputs and selection', () => {
+    it('openNewConversation should emit onNewConversation', () => {
+      spyOn(component.onNewConversation, 'emit');
+      component.openNewConversation();
+      expect(component.onNewConversation.emit).toHaveBeenCalled();
+    });
+
+    it('returnOpenAllConversation should emit onOpenAllConvesations', () => {
+      spyOn(component.onOpenAllConvesations, 'emit');
+      component.returnOpenAllConversation();
+      expect(component.onOpenAllConvesations.emit).toHaveBeenCalled();
+    });
+
+    it('onConversationSelectedFN should emit when conversation is defined', () => {
+      spyOn(component.onConversationSelected, 'emit');
+      const c = { uid: 'c1' } as ConversationModel;
+      component.onConversationSelectedFN(c);
+      expect(component.onConversationSelected.emit).toHaveBeenCalledWith(c);
+    });
+
+    it('onConversationSelectedFN should not emit for falsy conversation', () => {
+      spyOn(component.onConversationSelected, 'emit');
+      component.onConversationSelectedFN(null as any);
+      expect(component.onConversationSelected.emit).not.toHaveBeenCalled();
+    });
+
+    it('onImageLoadedFN / onConversationLoadedFN should forward', () => {
+      spyOn(component.onImageLoaded, 'emit');
+      spyOn(component.onConversationLoaded, 'emit');
+      const c = { uid: 'z' } as ConversationModel;
+      component.onImageLoadedFN(c);
+      component.onConversationLoadedFN(c);
+      expect(component.onImageLoaded.emit).toHaveBeenCalledWith(c);
+      expect(component.onConversationLoaded.emit).toHaveBeenCalledWith(c);
+    });
+  });
+
+  describe('agent image map', () => {
+    it('isImageLoaded should be false without url or before load', () => {
+      const agent = { id: 'x2', firstname: 'B', imageurl: '' } as UserAgent;
+      expect(component.isImageLoaded(agent)).toBe(false);
+    });
+
+    it('onImageLoad should mark agent as loaded', () => {
+      const agent = { id: 'x3', imageurl: 'https://x' } as UserAgent;
+      component.onImageLoad(agent);
+      expect(component.isImageLoaded(agent)).toBe(true);
+    });
+
+    it('onImageError should mark agent as not loaded', () => {
+      const agent = { id: 'x4', imageurl: 'https://x' } as UserAgent;
+      component.onImageError(agent);
+      expect(component.imageLoadedMap.get('x4')).toBe(false);
+    });
+  });
+
+  describe('ngOnDestroy and unsubscribe', () => {
+    it('unsubscribe should clear subscription list', () => {
+      const sub = new Subscription();
+      spyOn(sub, 'unsubscribe');
+      component.subscriptions.push(sub);
+      component.unsubscribe();
+      expect(sub.unsubscribe).toHaveBeenCalled();
+      expect(component.subscriptions.length).toBe(0);
+    });
+
+    it('ngOnDestroy should call unsubscribe', () => {
+      spyOn(component, 'unsubscribe');
+      component.ngOnDestroy();
+      expect(component.unsubscribe).toHaveBeenCalled();
+    });
+  });
 });

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

@@ -10,14 +10,17 @@
           <span>View more</span>
         </div> -->
   
-        <div aria-label="Dismiss" role="button" tabindex="0" class="buttonClose" (click)="closeMessagePreview()">
+        <button type="button"
+          aria-label="Dismiss"
+          class="buttonClose c21-button-clean"
+          (click)="closeMessagePreview()">
           <span>
-            <svg aria-labelledby="altIconTitle" height="20px" role="img" viewBox="0 0 24 24" width="20px" xmlns="http://www.w3.org/2000/svg" style="fill: rgb(255, 255, 255);">
+            <svg aria-hidden="true" focusable="false" height="20px" viewBox="0 0 24 24" width="20px" xmlns="http://www.w3.org/2000/svg" style="fill: rgb(255, 255, 255);">
               <path d="M0 0h24v24H0V0z" fill="none"></path>
               <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 12 19 6.41z"></path>
             </svg>
           </span>
-        </div>
+        </button>
   
       </div>
   
@@ -26,8 +29,11 @@
   
     <div class="container">
 
-      <div class="previewNewMessagge" (click)="openConversationByID(conversation)"
-        [class.left-indicator]="isFirst && (!isImage(message) || isFrame(message))" 
+      <button type="button"
+        class="previewNewMessagge c21-button-clean"
+        [attr.aria-label]="g.START_A_CONVERSATION"
+        (click)="openConversationByID(conversation)"
+        [class.left-indicator]="isFirst && (!isImage(message) || isFrame(message))"
         [class.no-background]="(isImage(message) || isFrame(message)) && message?.text?.trim() === ''">
   
         <chat-bubble-message class="messages no-background"
@@ -49,9 +55,9 @@
             </chat-avatar-image>
           </div> 
         </div>
-  
-      </div>
-  
+
+      </button>
+
       <div *ngIf="message?.attributes && message?.attributes?.attachment && last" class="conversations-buttons">
         <chat-message-attachment 
           style="height: 100%; display: block;"
@@ -64,6 +70,6 @@
       </div>
      
     </div>
-  
+
   </div>
 </div>

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

@@ -7,8 +7,9 @@
         min-height: 38px;
     }  
 }
-:host .previewNewMessagge ::ng-deep > chat-bubble-message > #bubble-message > div > div > chat-text {
-    p {
+:host .previewNewMessagge ::ng-deep > chat-bubble-message > .bubble-message > div > div > chat-text {
+    p,
+    .message_innerhtml {
         overflow: hidden;
         text-overflow: ellipsis;
         display: -webkit-box;
@@ -111,6 +112,19 @@
     padding: 0px 5px;
 }
 
+button.previewNewMessagge {
+    display: block;
+    align-self: stretch;
+    max-width: 100%;
+    text-align: left;
+    font: inherit;
+    -webkit-appearance: none;
+    appearance: none;
+    border: none;
+    cursor: pointer;
+    color: inherit;
+}
+
 .previewNewMessagge.no-background{
     background-color: transparent;
     box-shadow: unset;

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

@@ -1,41 +1,222 @@
-import { MarkedPipe } from './../../pipe/marked.pipe';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { ImageRepoService } from '../../../chat21-core/providers/abstract/image-repo.service';
+import { Injectable, NO_ERRORS_SCHEMA, SimpleChange } from '@angular/core';
+import { ComponentFixture, fakeAsync, flush, TestBed, tick, waitForAsync } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { NGXLogger } from 'ngx-logger';
+import { ConversationModel } from 'src/chat21-core/models/conversation';
+import { ImageRepoService } from 'src/chat21-core/providers/abstract/image-repo.service';
+import { CustomLogger } from 'src/chat21-core/providers/logger/customLogger';
+import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+import { EventsService } from '../../providers/events.service';
+import { HtmlEntitiesEncodePipe } from '../../pipe/html-entities-encode.pipe';
+import { MarkedPipe } from '../../pipe/marked.pipe';
 import { Globals } from '../../utils/globals';
-
+import { MIN_WIDTH_IMAGES } from '../../utils/constants';
 import { LastMessageComponent } from './last-message.component';
-import { HtmlEntitiesEncodePipe } from '../../pipe/html-entities-encode.pipe';
+
+@Injectable()
+class ImageRepoStub extends ImageRepoService {
+  getImagePhotoUrl(): string {
+    return '';
+  }
+  checkImageExists(_uid: string, callback: (exist: boolean) => void): void {
+    callback(false);
+  }
+}
 
 describe('LastMessageComponent', () => {
-  let component: LastMessageComponent;
   let fixture: ComponentFixture<LastMessageComponent>;
+  let component: LastMessageComponent;
+  let globals: Globals;
+  let events: EventsService;
+  const ngxlogger = jasmine.createSpyObj('NGXLogger', ['log', 'trace', 'debug', 'warn', 'error', 'info']);
+
+  function makeConversation(overrides: Partial<ConversationModel> = {}): ConversationModel {
+    return {
+      uid: 'conv-1',
+      attributes: {},
+      channel_type: 'direct',
+      conversation_with_fullname: 'Agent',
+      conversation_with: 'agent-1',
+      recipient: 'user-1',
+      recipient_fullname: 'User',
+      image: '',
+      is_new: true,
+      last_message_text: 'Messaggio mock in anteprima',
+      text: '',
+      sender: 'agent-1',
+      senderAuthInfo: null,
+      sender_fullname: 'Agent Name',
+      status: '200',
+      timestamp: '1',
+      selected: false,
+      color: '',
+      avatar: '',
+      archived: false,
+      type: 'text',
+      sound: true,
+      ...overrides,
+    } as ConversationModel;
+  }
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
+    LoggerInstance.setInstance(new CustomLogger(ngxlogger));
     TestBed.configureTestingModule({
-      declarations: [ 
-        LastMessageComponent,
-        MarkedPipe,
-        HtmlEntitiesEncodePipe
-      ],
-      imports: [  
-      ],
-      providers: [
-        Globals,
-        ImageRepoService,
-      ],
-      schemas: [NO_ERRORS_SCHEMA]
-    })
-    .compileComponents();
+      declarations: [LastMessageComponent, MarkedPipe, HtmlEntitiesEncodePipe],
+      providers: [Globals, EventsService, { provide: ImageRepoService, useClass: ImageRepoStub }],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(LastMessageComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
+    globals = TestBed.inject(Globals);
+    events = TestBed.inject(EventsService);
+    globals.initDefafultParameters();
+    globals.senderId = 'user-1';
+    globals.isOpen = false;
+    globals.isOpenNewMessage = true;
+    spyOn(globals, 'setWidgetPreviewContainerSize').and.stub();
+    component.baseLocation = 'https://widget.test/';
+    component.stylesMap = new Map([['bubbleReceivedTextColor', '#111']]);
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('con widget chiuso (isOpen=false) e anteprima attiva: mostra il bubble con il testo del messaggio mockato', fakeAsync(() => {
+    const conv = makeConversation();
+    component.conversation = conv;
+    component.ngOnChanges({
+      conversation: new SimpleChange(undefined, conv, true),
+    });
+    fixture.detectChanges();
+
+    const preview = fixture.debugElement.query(By.css('#messagePreview'));
+    expect(preview).toBeTruthy();
+    expect(component.messages.length).toBe(1);
+    expect(component.messages[0].text).toContain('Messaggio mock in anteprima');
+    expect(globals.isOpen).toBe(false);
+    flush();
+  }));
+
+  it('closeMessagePreview azzera conversazione, isOpenNewMessage e emette onCloseMessagePreview', () => {
+    const conv = makeConversation();
+    component.conversation = conv;
+    component.ngOnChanges({ conversation: new SimpleChange(undefined, conv, true) });
+    fixture.detectChanges();
+
+    spyOn(component.onCloseMessagePreview, 'emit');
+    component.closeMessagePreview();
+    expect(component.conversation).toBeNull();
+    expect(globals.isOpenNewMessage).toBe(false);
+    expect(component.onCloseMessagePreview.emit).toHaveBeenCalled();
+  });
+
+  it('openConversationByID emette onSelectedConversation e azzera isOpenNewMessage', () => {
+    const conv = makeConversation();
+    spyOn(component.onSelectedConversation, 'emit');
+    component.openConversationByID(conv);
+    expect(component.onSelectedConversation.emit).toHaveBeenCalledWith(conv as any);
+    expect(globals.isOpenNewMessage).toBe(false);
+    expect(component.conversation).toBeNull();
+  });
+
+  it('onAttachmentButtonClicked apre la conversazione e pubblica lastMessage:attachmentButtonClicked', fakeAsync(() => {
+    spyOn(events, 'publish');
+    const conv = makeConversation({
+      attributes: { attachment: { a: 1 } },
+      last_message_text: 'file',
+    });
+    component.conversation = conv;
+    component.ngOnChanges({ conversation: new SimpleChange(undefined, conv, true) });
+    fixture.detectChanges();
+
+    const payload = { kind: 'test' };
+    component.onAttachmentButtonClicked(payload);
+    tick(600);
+    expect(events.publish).toHaveBeenCalledWith('lastMessage:attachmentButtonClicked', payload);
+  }));
+
+  it('conversation con attributes.commands usa addCommandMessage', fakeAsync(() => {
+    const conv = makeConversation({
+      attributes: {
+        commands: [
+          {
+            type: 'message',
+            message: { text: ' cmd-a ', type: 'text', metadata: {} },
+          },
+          { type: 'wait', time: 5 },
+          {
+            type: 'message',
+            message: { text: ' cmd-b ', type: 'text', metadata: {} },
+          },
+        ],
+      },
+      last_message_text: 'ignored',
+    });
+    component.conversation = conv;
+    component.ngOnChanges({ conversation: new SimpleChange(undefined, conv, true) });
+    tick(0);
+    expect(component.messages.length).toBe(1);
+    tick(5);
+    expect(component.messages.length).toBe(2);
+    expect(component.messages[0].text).toContain('cmd-a');
+    expect(component.messages[1].text).toContain('cmd-b');
+  }));
+
+  it('getMetadataSize scala larghezza oltre il massimo', () => {
+    const meta = { width: 400, height: 100 };
+    const out = component.getMetadataSize(meta);
+    expect(out.width).toBe(230);
+    expect(out.height).toBeLessThan(100);
+  });
+
+  it('getMetadataSize alza immagini molto strette al minimo', () => {
+    const meta = { width: 40, height: 80 };
+    const out = component.getMetadataSize(meta);
+    expect(out.width).toBe(MIN_WIDTH_IMAGES);
+  });
+
+  it('getMetadataSize scala altezza oltre il massimo verticale', () => {
+    const meta = { width: 100, height: 400 };
+    const out = component.getMetadataSize(meta);
+    expect(out.height).toBe(150);
+  });
+
+  it('isSameSender delega a utils-message', () => {
+    component.messages = [{ sender: 'a' } as any, { sender: 'a' } as any];
+    expect(component.isSameSender('a', 1)).toBe(true);
+  });
+
+  it('onElementRenderedFN con messaggi renderizzati agenda setWidgetPreviewContainerSize', fakeAsync(() => {
+    const conv = makeConversation();
+    component.conversation = conv;
+    component.ngOnChanges({ conversation: new SimpleChange(undefined, conv, true) });
+    fixture.detectChanges();
+    component.onElementRenderedFN({});
+    tick(100);
+    flush();
+    expect(globals.setWidgetPreviewContainerSize).toHaveBeenCalled();
+  }));
+
+  it('ngOnDestroy pulisce stato', () => {
+    const conv = makeConversation();
+    component.conversation = conv;
+    component.messages = [{} as any];
+    globals.isOpenNewMessage = true;
+    component.ngOnDestroy();
+    expect(component.conversation).toBeNull();
+    expect(globals.isOpenNewMessage).toBe(false);
+    expect(component.messages.length).toBe(0);
+  });
+
+  it('unsubscribe svuota subscriptions', () => {
+    const sub = jasmine.createSpyObj('Subscription', ['unsubscribe']);
+    component.subscriptions = [sub];
+    component.unsubscribe();
+    expect(sub.unsubscribe).toHaveBeenCalled();
+    expect(component.subscriptions.length).toBe(0);
+  });
 });

package/src/app/component/launcher-button/launcher-button.component.html

@@ -1,20 +1,15 @@
-<!-- tabindex="000"-->
-
-<button aflauncherbutton #aflauncherbutton id="c21-launcher-button" class="c21-button-clean scale-in-center" 
-    *ngIf="g.isOpen == false" 
+<button aflauncherbutton #aflauncherbutton type="button" id="c21-launcher-button" class="c21-button-clean scale-in-center"
+    *ngIf="g.isOpen == false"
     [ngClass]="{'c21-align-left' : g.align === 'left', 'c21-align-right' : g.align !== 'left'}"
     [ngStyle]="{ 'background-color': g.baloonImage? null: g.themeColor, 'bottom': g.marginY+'px!important', 'left':(g.align==='left')?g.marginX+'px!important':'', 'right':(g.align==='right')?g.marginX+'px!important':'', 'width': g.launcherWidth, 'height': g.launcherHeight, 'border-radius': g.baloonShape}"
     (click)="openCloseWidget()"
-    tabindex="1000" 
-    aria-label="    apri chat"
-    >
-
-    <!-- <div *ngIf="g.conversationsBadge>0" class="c21-divBudge">{{g.conversationsBadge}}</div> -->
+    [attr.aria-label]="g.BUTTON_OPEN_CHAT || 'Open chat'"
+    [attr.aria-expanded]="g.isOpen ? 'true' : 'false'">
 
     <!-- OPEN ICON -->
     <div *ngIf="!g.isOpen" class="launcher-button rotate-center" [@enterBubbleAnimation]>
-        <img *ngIf="g.baloonImage !== '' " [src]="g.baloonImage" [ngStyle]="{'width': '100%', 'height': '100%', 'margin': 'auto', 'border-radius': g.baloonShape}">
-        <svg role="img" [ngStyle]="{'fill': g.themeForegroundColor, 'display': (g.baloonImage==='')?'':'none' }" xmlns="http://www.w3.org/2000/svg" width="100%"
+        <img *ngIf="g.baloonImage !== '' " [src]="g.baloonImage" alt="" [ngStyle]="{'width': '100%', 'height': '100%', 'margin': 'auto', 'border-radius': g.baloonShape}">
+        <svg aria-hidden="true" focusable="false" [ngStyle]="{'fill': g.themeForegroundColor, 'display': (g.baloonImage==='')?'':'none' }" xmlns="http://www.w3.org/2000/svg" width="100%"
             height="100%" viewBox="0 0 90 90">
             <path fill="none" d="M0 0h24v24H0V0z" />
             <path d="M33.57,31A4.58,4.58,0,0,0,29,35.57V58.3a1.94,1.94,0,0,0,3.32,1.38l3-3a.29.29,0,0,1,.21-.09H56.43A4.58,4.58,0,0,0,61,52V35.57A4.58,4.58,0,0,0,56.43,31Z" />
@@ -28,11 +23,11 @@
 
     <!-- CLOSE ICON -->
     <div *ngIf="g.isOpen" class="launcher-button rotate-center" [@enterCloseAnimation]>
-        <svg role="img" [ngStyle]="{'fill': g.themeForegroundColor }" xmlns="http://www.w3.org/2000/svg" width="100%"
+        <svg aria-hidden="true" focusable="false" [ngStyle]="{'fill': g.themeForegroundColor }" xmlns="http://www.w3.org/2000/svg" width="100%"
             height="100%" viewBox="0 0 90 90">
             <path fill="none" d="M0 0h24v24H0V0z" />
             <path class="cls-1" d="M54.92,37.08l-2-2L45,43l-7.92-7.92-2,2L43,45l-7.92,7.92,2,2L45,47l7.92,7.92,2-2L47,45Z" />
         </svg>
     </div>
 
-</button>
+</button>