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

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

@@ -1,8 +1,14 @@
 import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { ComponentFixture, fakeAsync, 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 { CustomTranslateService } from 'src/chat21-core/providers/custom-translate.service';
 import { CustomLogger } from 'src/chat21-core/providers/logger/customLogger';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk-auth.service';
+import { HEADER_MENU_OPTION } from '../../utils/constants';
 import { Globals } from '../../utils/globals';
 
 import { HomeComponent } from './home.component';
@@ -10,31 +16,240 @@ import { HomeComponent } from './home.component';
 describe('HomeComponent', () => {
   let component: HomeComponent;
   let fixture: ComponentFixture<HomeComponent>;
-  let ngxlogger: NGXLogger;
-  let customLogger = new CustomLogger(ngxlogger)
+  let globals: Globals;
+  const ngxlogger = jasmine.createSpyObj('NGXLogger', ['log', 'trace', 'debug', 'warn', 'error', 'info']);
+
+  const tiledeskAuthStub = {
+    getCurrentUser: jasmine.createSpy('getCurrentUser').and.returnValue({
+      uid: 'u-1',
+      firstname: 'Ada',
+      lastname: 'Lovelace',
+      email: 'ada@example.com',
+    }),
+  };
+
+  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: [ HomeComponent ],
+      declarations: [HomeComponent],
       providers: [
         Globals,
-        NGXLogger
+        { provide: NGXLogger, useValue: ngxlogger },
+        { provide: TiledeskAuthService, useValue: tiledeskAuthStub },
+        { provide: CustomTranslateService, useValue: translateStub },
       ],
-      schemas: [NO_ERRORS_SCHEMA]
-    })
-    .compileComponents();
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(HomeComponent);
     component = fixture.componentInstance;
-    let loggerInstance = LoggerInstance.setInstance(customLogger)
-    let logger = LoggerInstance.getInstance()
-    component['logger']= logger
+    globals = TestBed.inject(Globals);
+    globals.initDefafultParameters();
+    globals.welcomeTitle = 'Benvenuto';
+    globals.welcomeMsg = 'Intro';
+    globals.themeForegroundColor = '#fff';
+    globals.colorGradient = 'linear-gradient(red,blue)';
+    globals.project = { logoChat: 'nologo' } as any;
+    globals.poweredBy = '<a href="https://brand.example"><span id="pb-inner">Logo</span></a>';
+    globals.whatsappNumber = '1234567890';
+    globals.telegramUsername = '';
+    globals.messangerPageTitle = '';
+
+    component.listConversations = [];
+    component.archivedConversations = [];
+    component.hideSettings = true;
+    component.hideNewConversationButton = false;
+    component.stylesMap = new Map([
+      ['themeColor', '#111'],
+      ['foregroundColor', '#fff'],
+    ]);
+    component.size = 'min';
+    component.fullscreenMode = false;
+    component.hideHeaderConversationOptionsMenu = false;
+    component.isButtonsDisabled = false;
+    component.translationMap = new Map([
+      ['MAXIMIZE', 'Massimizza'],
+      ['MINIMIZE', 'Riduci'],
+      ['CENTER', 'Centra'],
+    ]);
+
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  describe('translations and DOM shell', () => {
+    it('initiTranslations should fill header/footer maps via CustomTranslateService', () => {
+      component.initiTranslations();
+      expect(component.translationMapHeader?.get('BUTTON_CLOSE_TO_ICON')).toBe('T:BUTTON_CLOSE_TO_ICON');
+      expect(component.translationMapFooter?.get('SWITCH_TO')).toBe('T:SWITCH_TO');
+    });
+
+    it('should render region root, welcome title and close control', () => {
+      const region = fixture.debugElement.query(By.css('#chat21-home-component'));
+      expect(region).toBeTruthy();
+      const h1 = fixture.nativeElement.querySelector('.c21-text-welcome') as HTMLElement;
+      expect(h1.textContent).toContain('Benvenuto');
+      const closeBtn = fixture.debugElement.query(By.css('.c21-close-button-body'));
+      expect(closeBtn).toBeTruthy();
+    });
+
+    it('should set region aria-label from welcomeTitle (accessibility / MCP home shell)', () => {
+      globals.welcomeTitle = 'Ciao, benvenuto su BrandExample';
+      fixture.detectChanges();
+      const host = fixture.nativeElement.querySelector('#chat21-home-component') as HTMLElement;
+      expect(host.getAttribute('aria-label')).toBe('Ciao, benvenuto su BrandExample');
+    });
+
+    it('should render welcome intro paragraph when welcomeMsg is set', () => {
+      globals.welcomeMsg = 'Come possiamo aiutarti?';
+      fixture.detectChanges();
+      const intro = fixture.nativeElement.querySelector('.c21-text-intro') as HTMLElement;
+      expect(intro.textContent).toContain('Come possiamo aiutarti?');
+    });
+  });
+
+  describe('outputs and actions', () => {
+    it('f21_close should emit onCloseWidget and add start-animation class', () => {
+      spyOn(component.onCloseWidget, 'emit');
+      component.f21_close();
+      expect(component.onCloseWidget.emit).toHaveBeenCalled();
+      const root = fixture.debugElement.query(By.css('#chat21-home-component')).nativeElement as HTMLElement;
+      expect(root.classList.contains('start-animation')).toBe(true);
+    });
+
+    it('onChangeSize should emit correct HEADER_MENU_OPTION', () => {
+      spyOn(component.onMenuOptionClick, 'emit');
+      component.onChangeSize('min');
+      component.onChangeSize('max');
+      component.onChangeSize('top');
+      expect(component.onMenuOptionClick.emit).toHaveBeenCalledWith(HEADER_MENU_OPTION.MINIMIZE);
+      expect(component.onMenuOptionClick.emit).toHaveBeenCalledWith(HEADER_MENU_OPTION.MAXIMIZE);
+      expect(component.onMenuOptionClick.emit).toHaveBeenCalledWith(HEADER_MENU_OPTION.TOP);
+    });
+
+    it('onNewConversationFN should emit onNewConversation and strip animation', () => {
+      spyOn(component.onNewConversation, 'emit');
+      const root = fixture.debugElement.query(By.css('#chat21-home-component')).nativeElement as HTMLElement;
+      root.classList.add('start-animation');
+      component.onNewConversationFN();
+      expect(component.onNewConversation.emit).toHaveBeenCalled();
+      expect(root.classList.contains('start-animation')).toBe(false);
+    });
+
+    it('onConversationSelectedFN should emit conversation', () => {
+      spyOn(component.onConversationSelected, 'emit');
+      const conv = { uid: 'c1' } as ConversationModel;
+      component.onConversationSelectedFN(conv);
+      expect(component.onConversationSelected.emit).toHaveBeenCalledWith(conv);
+    });
+
+    it('onConversationSelectedFN should ignore null', () => {
+      spyOn(component.onConversationSelected, 'emit');
+      component.onConversationSelectedFN(null as any);
+      expect(component.onConversationSelected.emit).not.toHaveBeenCalled();
+    });
+
+    it('onOpenAllConversation should emit onOpenAllConvesations', () => {
+      spyOn(component.onOpenAllConvesations, 'emit');
+      component.onOpenAllConversation();
+      expect(component.onOpenAllConvesations.emit).toHaveBeenCalled();
+    });
+
+    it('onSignOutFN should emit onSignOut', () => {
+      spyOn(component.onSignOut, 'emit');
+      component.onSignOutFN();
+      expect(component.onSignOut.emit).toHaveBeenCalled();
+    });
+
+    it('onImageLoadedFN / onConversationLoadedFN should forward emits', () => {
+      spyOn(component.onImageLoaded, 'emit');
+      spyOn(component.onConversationLoaded, 'emit');
+      const c = { uid: 'x' } as ConversationModel;
+      component.onImageLoadedFN(c);
+      component.onConversationLoadedFN(c);
+      expect(component.onImageLoaded.emit).toHaveBeenCalledWith(c);
+      expect(component.onConversationLoaded.emit).toHaveBeenCalledWith(c);
+    });
+  });
+
+  describe('hideMenuOptions and openConversationOnPlatform', () => {
+    it('hideMenuOptions should set isOpenMenuOptions on Globals', () => {
+      spyOn(globals, 'setParameter');
+      component.hideMenuOptions();
+      expect(globals.setParameter).toHaveBeenCalledWith('isOpenMenuOptions', false, true);
+    });
+
+    it('openConversationOnPlatform should open external URLs', () => {
+      spyOn(window, 'open');
+      globals.telegramUsername = 'mybot';
+      globals.whatsappNumber = '39333';
+      globals.messangerPageTitle = 'mypage';
+      component.openConversationOnPlatform('telegram');
+      component.openConversationOnPlatform('whatsapp');
+      component.openConversationOnPlatform('messanger');
+      expect(window.open).toHaveBeenCalledWith('https://telegram.me/mybot', '_blank');
+      expect(window.open).toHaveBeenCalledWith(jasmine.stringMatching(/^https:\/\/wa\.me\/39333/), '_blank');
+      expect(window.open).toHaveBeenCalledWith('https://m.me/mypage', '_blank');
+    });
+  });
+
+  describe('managePoweredBy and analytics', () => {
+    it('managePoweredBy should open parent anchor href', () => {
+      spyOn(window, 'open');
+      const anchor = document.createElement('a');
+      anchor.setAttribute('href', 'https://brand.example');
+      const inner = document.createElement('span');
+      anchor.appendChild(inner);
+      const ev = new MouseEvent('click', { bubbles: true });
+      Object.defineProperty(ev, 'target', { value: inner, configurable: true });
+      component.managePoweredBy(ev);
+      expect(window.open).toHaveBeenCalledWith('https://brand.example', '_blank');
+    });
+
+    it('segmentLogoClick should invoke analytics when present', () => {
+      (window as any).analytics = {
+        page: jasmine.createSpy('page'),
+        identify: jasmine.createSpy('identify'),
+        track: jasmine.createSpy('track'),
+      };
+      (component as any).segmentLogoClick();
+      expect((window as any).analytics.page).toHaveBeenCalled();
+      expect((window as any).analytics.identify).toHaveBeenCalled();
+      expect((window as any).analytics.track).toHaveBeenCalled();
+      delete (window as any).analytics;
+    });
+  });
+
+  describe('ngAfterViewInit', () => {
+    it('should add animation only on first open then clear flag', () => {
+      globals.firstOpen = true;
+      component.ngAfterViewInit();
+      const root = fixture.debugElement.query(By.css('#chat21-home-component')).nativeElement as HTMLElement;
+      expect(root.classList.contains('start-animation')).toBe(true);
+      expect(globals.firstOpen).toBe(false);
+    });
+
+    it('should focus aflistconv after delay when present', fakeAsync(() => {
+      const btn = document.createElement('button');
+      btn.setAttribute('aflistconv', '');
+      spyOn(btn, 'focus');
+      (component as any).aflistconv = { nativeElement: btn };
+      component.ngAfterViewInit();
+      tick(1000);
+      expect(btn.focus).toHaveBeenCalled();
+    }));
+  });
 });

package/src/app/component/home-conversations/home-conversations.component.html

@@ -1,32 +1,34 @@
 <div id='c21-app-list-conversations'>
-<!-- tabindex="1100"-->
 
   <div class="c21-header">
     <div *ngIf="checkShowAllConversation()">
         <div class="c21-title">{{g.PREV_CONVERSATIONS}}</div>
 
-        <div *ngIf="g.showAllConversations == true" class="c21-button" (click)="returnOpenAllConversation()">
-          <div style="display:inline-block; line-height: 40px; margin-right: 10px;" (click)="returnOpenAllConversation()">{{g.SHOW_ALL_CONV}} </div>
-          <button tabindex="1101" aria-label=" tutte le conversazioni" class="c21-button-clean">
-            <!-- <svg xmlns="http://www.w3.org/2000/svg" [ngStyle]="{'fill': g.themeColor }" width="18" height="18" viewBox="0 0 24 24">
-              <path fill="none" d="M0 0h24v24H0V0z" />
-              <path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7zm-4 6h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z"/>
-            </svg> -->
-            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
-              <path d="M1.9,15.4h16.2v-1.8H1.9V15.4z M1.9,10.9h16.2V9.1H1.9V10.9z M1.9,4.6v1.8h16.2V4.6H1.9z"/>
-            </svg>
-          </button>
-        </div>
+        <button *ngIf="g.showAllConversations == true"
+            type="button"
+            class="c21-button c21-button-clean"
+            [attr.aria-label]="g.SHOW_ALL_CONV"
+            (click)="returnOpenAllConversation()">
+          <span style="display:inline-block; line-height: 40px; margin-right: 10px;">{{g.SHOW_ALL_CONV}} </span>
+          <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+            <path d="M1.9,15.4h16.2v-1.8H1.9V15.4z M1.9,10.9h16.2V9.1H1.9V10.9z M1.9,4.6v1.8h16.2V4.6H1.9z"/>
+          </svg>
+        </button>
 
     </div>
     <div *ngIf="!checkShowAllConversation()">
       <div class="c21-title">{{g.NO_CONVERSATION}}</div>
-      <div *ngIf="listConversations && listConversations.length > 0" class="c21-button" (click)="returnOpenAllConversation()">
-          <div style="display:inline-block; line-height: 40px; margin-right: 10px;">{{g.SHOW_ALL_CONV}}</div>
-          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
+      <div *ngIf="listConversations && listConversations.length > 0">
+        <button type="button"
+            class="c21-button c21-button-clean"
+            [attr.aria-label]="g.SHOW_ALL_CONV"
+            (click)="returnOpenAllConversation()">
+          <span style="display:inline-block; line-height: 40px; margin-right: 10px;">{{g.SHOW_ALL_CONV}}</span>
+          <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
             <path fill="none" d="M0 0h24v24H0V0z" />
             <path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7zm-4 6h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z"/>
           </svg>
+        </button>
       </div>
     </div>
   </div>
@@ -63,15 +65,18 @@
           <div *ngIf="isImageLoaded(agent)" #avatarImage class="c21-avatar-image" [style.background-image]="'url(' + agent.imageurl + ')'"></div>
         </div>
       </div>
-      <button tabindex="1040" aflistconv #aflistconv class="c21-button-primary" (click)="openNewConversation()" [ngStyle]="{'background-color': g.themeColor, 'border-color': g.themeColor, 'color': g.themeForegroundColor }">
+      <button type="button" aflistconv #aflistconv class="c21-button-primary"
+          [attr.aria-label]="g.LABEL_START_NW_CONV"
+          (click)="openNewConversation()"
+          [ngStyle]="{'background-color': g.themeColor, 'border-color': g.themeColor, 'color': g.themeForegroundColor }">
         <span class="v-align-center">
-            <svg [ngStyle]="{'fill': 'yellow' }" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
+            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
               <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"  [ngStyle]="{'fill': g.themeForegroundColor}"/>
             </svg>
           </span>
           <span class="v-align-center c21-label-button">
             {{g.LABEL_START_NW_CONV}}
-          </span> 
+          </span>
           <div class="clear"></div>
       </button>
     </div>
@@ -88,16 +93,15 @@
         (onConversationLoaded)="onConversationLoadedFN($event)">
       </chat-list-conversations>
 
-      <div class="c21-new-conversation" > 
-        <!--  *ngIf="this.g.supportMode" -->
-        <button tabindex="1040" aflistconv #aflistconv class="c21-button-primary" (click)="openNewConversation()" [ngStyle]="{'background-color': g.themeColor, 'border-color': g.themeColor, 'color': g.themeForegroundColor }">
+      <div class="c21-new-conversation">
+        <button type="button" aflistconv #aflistconv class="c21-button-primary"
+            [attr.aria-label]="g.LABEL_START_NW_CONV"
+            (click)="openNewConversation()"
+            [ngStyle]="{'background-color': g.themeColor, 'border-color': g.themeColor, 'color': g.themeForegroundColor }">
           <span class="v-align-center">
-              <svg [ngStyle]="{'fill': 'yellow' }" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
+              <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
                 <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"  [ngStyle]="{'fill': g.themeForegroundColor}"/>
               </svg>
-              <!-- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20"  width="20" height="20" style="enable-background:new 0 0 20 20;" xml:space="preserve" >
-                <path d="M16.3,10.9h-5.4v5.4H9.1v-5.4H3.7V9.1h5.4V3.7h1.8v5.4h5.4V10.9z" [ngStyle]="{'fill': g.themeForegroundColor}"/>
-              </svg> -->
             </span>
             <span class="v-align-center c21-label-button">
               <!-- {{LABEL_START_NW_CONV}} -->

package/src/app/component/home-conversations/home-conversations.component.scss

@@ -31,6 +31,9 @@
             padding: 0px 5px;
             float: right;
             fill: var(--blue);
+            color: var(--dark-gray);
+            font-weight: 300;
+            align-items: center;
             button {
                 width: 40px;
                 height: 40px;

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();
+    });
+  });
 });