@chat21/chat21-web-widget 5.1.34 → 5.2.1

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

@@ -1,33 +1,154 @@
-import { ActionButtonComponent } from './../message/buttons/action-button/action-button.component';
-import { TextButtonComponent } from './../message/buttons/text-button/text-button.component';
-import { LinkButtonComponent } from './../message/buttons/link-button/link-button.component';
-import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
+import { CommonModule } from '@angular/common';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+
+import { MessageModel } from 'src/chat21-core/models/message';
+import { ActionButtonComponent } from '../message/buttons/action-button/action-button.component';
+import { LinkButtonComponent } from '../message/buttons/link-button/link-button.component';
+import { TextButtonComponent } from '../message/buttons/text-button/text-button.component';
 
 import { MessageAttachmentComponent } from './message-attachment.component';
 
+function makeMessageWithAttachment(buttons: any[]): MessageModel {
+  return new MessageModel(
+    'm1',
+    'it',
+    'r1',
+    'Recipient',
+    's1',
+    'Sender',
+    200,
+    {},
+    'testo',
+    Date.now(),
+    'text',
+    {
+      attachment: {
+        type: 'template',
+        buttons,
+      },
+    },
+    'chat',
+    true,
+    false,
+  );
+}
+
 describe('MessageAttachmentComponent', () => {
   let component: MessageAttachmentComponent;
   let fixture: ComponentFixture<MessageAttachmentComponent>;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ 
-        MessageAttachmentComponent, 
-        LinkButtonComponent, 
-        TextButtonComponent, 
-        ActionButtonComponent 
-      ]
-    })
-    .compileComponents();
+      imports: [CommonModule],
+      declarations: [
+        MessageAttachmentComponent,
+        LinkButtonComponent,
+        TextButtonComponent,
+        ActionButtonComponent,
+      ],
+    }).compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(MessageAttachmentComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
+    component.isConversationArchived = false;
+    component.isLastMessage = true;
+    component.fullscreenMode = false;
+    component.limit = 5;
+    component.stylesMap = new Map<string, string>([
+      ['buttonFontSize', '14px'],
+      ['buttonBackgroundColor', '#eee'],
+      ['buttonTextColor', '#111'],
+      ['buttonHoverBackgroundColor', '#ddd'],
+      ['buttonHoverTextColor', '#000'],
+    ]);
   });
 
   it('should create', () => {
+    component.message = makeMessageWithAttachment([]);
+    fixture.detectChanges();
     expect(component).toBeTruthy();
   });
+
+  it('getAttachmentButton should read type and buttons from message.attributes.attachment', () => {
+    component.message = makeMessageWithAttachment([
+      { type: 'text', value: 'OK' },
+      { type: 'url', value: 'Apri', link: 'https://example.com' },
+    ]);
+    component.ngOnInit();
+    expect(component.type).toBe('template');
+    expect((component.buttons as unknown as any[]).length).toBe(2);
+  });
+
+  it('should render text and url attachment buttons in DOM when isLastMessage is true for text', () => {
+    component.message = makeMessageWithAttachment([
+      { type: 'text', value: 'Conferma' },
+      { type: 'url', value: 'Vai', link: 'https://example.com', target: '_blank' },
+    ]);
+    fixture.detectChanges();
+    const root = fixture.nativeElement.querySelector('#buttons-in-message') as HTMLElement;
+    expect(root).toBeTruthy();
+    expect(fixture.nativeElement.querySelector('chat-text-button-attachment')).toBeTruthy();
+    expect(fixture.nativeElement.querySelector('chat-link-button-attachment')).toBeTruthy();
+    const textBtn = fixture.nativeElement.querySelector('chat-text-button-attachment .text') as HTMLElement;
+    expect(textBtn.textContent?.trim()).toContain('Conferma');
+  });
+
+  it('should respect limit via slice (only first button when limit is 1)', () => {
+    component.limit = 1;
+    component.message = makeMessageWithAttachment([
+      { type: 'text', value: 'A' },
+      { type: 'text', value: 'B' },
+    ]);
+    fixture.detectChanges();
+    const textButtons = fixture.nativeElement.querySelectorAll('chat-text-button-attachment');
+    expect(textButtons.length).toBe(1);
+  });
+
+  it('should hide text and action buttons when isLastMessage is false', () => {
+    component.isLastMessage = false;
+    component.message = makeMessageWithAttachment([
+      { type: 'text', value: 'Nascosto' },
+      { type: 'url', value: 'Visibile', link: 'https://x.com' },
+    ]);
+    fixture.detectChanges();
+    expect(fixture.nativeElement.querySelector('chat-text-button-attachment')).toBeNull();
+    expect(fixture.nativeElement.querySelector('chat-link-button-attachment')).toBeTruthy();
+  });
+
+  it('returnOnAttachmentButtonClicked should emit structured event when target exists', () => {
+    component.message = makeMessageWithAttachment([{ type: 'text', value: 'X' }]);
+    fixture.detectChanges();
+    spyOn(component.onAttachmentButtonClicked, 'emit');
+    const inner = fixture.debugElement.query(By.css('chat-text-button-attachment .text'));
+    inner.triggerEventHandler('click', {});
+    expect(component.onAttachmentButtonClicked.emit).toHaveBeenCalled();
+    const arg = (component.onAttachmentButtonClicked.emit as jasmine.Spy).calls.mostRecent().args[0];
+    expect(arg.message).toBe(component.message);
+    expect(arg.target).toBeTruthy();
+  });
+
+  it('returnOnAttachmentButtonClicked should not emit when event has no target', () => {
+    component.message = makeMessageWithAttachment([{ type: 'text', value: 'X' }]);
+    fixture.detectChanges();
+    spyOn(component.onAttachmentButtonClicked, 'emit');
+    component.returnOnAttachmentButtonClicked({} as any);
+    expect(component.onAttachmentButtonClicked.emit).not.toHaveBeenCalled();
+  });
+
+  it('ngAfterViewInit should emit onElementRendered for attachment', () => {
+    spyOn(component.onElementRendered, 'emit');
+    component.message = makeMessageWithAttachment([{ type: 'url', value: 'L', link: 'https://a' }]);
+    fixture.detectChanges();
+    component.ngAfterViewInit();
+    expect(component.onElementRendered.emit).toHaveBeenCalledWith({ element: 'attachment', status: true });
+  });
+
+  it('should render action button when type is action and isLastMessage', () => {
+    component.message = makeMessageWithAttachment([{ type: 'action', value: 'Azione', action: 'reply' }]);
+    fixture.detectChanges();
+    expect(fixture.nativeElement.querySelector('chat-action-button-attachment')).toBeTruthy();
+  });
 });

package/src/app/component/selection-department/selection-department.component.html

@@ -1,24 +1,25 @@
-<!-- <div id="chat21-modal-content modal-body"></div> -->
-<!-- tabindex="1200"-->
-
-<div id="chat21-selection-department" 
+<div id="chat21-selection-department"
     #afSelectionDepartment
-    tabindex="1200"
+    role="dialog"
     aria-modal="true"
-    onFocus="document.querySelector('[start-focus-chat21-selection-department]').focus()">
+    cdkTrapFocus
+    [cdkTrapFocusAutoCapture]="true"
+    [attr.aria-label]="g.LABEL_SELECT_TOPIC">
 
     <!-- HEADER -->
-    <div class="c21-header" [ngStyle]="{'color': g.themeForegroundColor, 'background-image': g.colorGradient180 }" >
+    <div class="c21-header" [ngStyle]="{'color': g.themeForegroundColor, 'background-image': g.colorGradient180 }">
         <div class="c21-header-container">
 
-            <!-- ICON CLOSE CHAT -->
+            <!-- ICON CLOSE PANEL -->
             <div class="c21-header-button">
-                <div class="c21-close-button c21-small" role="button">
-                    <button tabindex="1210" aria-label=" chiudi pannello" class="c21-close-button-body" (click)="closePage()">
-                        <svg role="img" aria-labelledby="altIconTitle" xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24">
+                <div class="c21-close-button c21-small">
+                    <button type="button"
+                        [attr.aria-label]="g.BUTTON_CLOSE_TO_ICON || 'Close panel'"
+                        class="c21-close-button-body"
+                        (click)="closePage()">
+                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24">
                             <path fill="none" d="M0 0h24v24H0V0z"/>
                             <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"/>
-                            <!-- <title id="altIconTitle">{{BUTTON_CLOSE_CHAT}}</title> -->
                         </svg>
                     </button>
                 </div>
@@ -26,9 +27,7 @@
 
             <!-- CONTENT HEADER -->
             <div class="c21-header-content">
-                <!-- TITLE HEADER -->
                 <div class="c21-title" [ngStyle]="{'color': g.themeForegroundColor}">
-                    <!-- <span>{{g.LABEL_SELECT_TOPIC}}</span> -->
                 </div>
             </div>
 
@@ -40,15 +39,17 @@
         <div class="c21-body-container">
 
             <div class="c21-body-header">
-                <div start-focus-chat21-selection-department tabindex="1201" class="c21-message-field">{{g.LABEL_SELECT_TOPIC}}</div>
+                <h2 start-focus-chat21-selection-department class="c21-message-field">{{g.LABEL_SELECT_TOPIC}}</h2>
             </div>
 
-            <div class="c21-body-content" tabindex="211" onFocus="document.querySelector('[start-focus]').focus()">
+            <div class="c21-body-content">
                 <ul class="chat21-content-modal-select">
                     <li *ngFor="let department of departments; let i = index">
-                        <button tabindex="1202" class="c21-button-department c21-button-clean" (click)="onSelectDepartment(department)">
-                            <span  class="chat21-badge">{{i+1}}</span>
-                            <span class="chat21-name-list" >{{department?.name}}</span>
+                        <button type="button"
+                            class="c21-button-department c21-button-clean"
+                            (click)="onSelectDepartment(department)">
+                            <span class="chat21-badge" aria-hidden="true">{{i+1}}</span>
+                            <span class="chat21-name-list">{{department?.name}}</span>
                         </button>
                     </li>
                 </ul>
@@ -56,7 +57,4 @@
 
         </div>
     </div>
-    
-    <span style="height:0px" tabindex="1299" onFocus="document.querySelector('[start-focus-chat21-selection-department]').focus()"></span> 
-</div> 
-   
+</div>

package/src/app/component/selection-department/selection-department.component.spec.ts

@@ -1,34 +1,179 @@
-import { ElementRef } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { A11yModule } from '@angular/cdk/a11y';
+import { Injectable } from '@angular/core';
+import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { NGXLogger } from 'ngx-logger';
+
 import { AppStorageService } from '../../../chat21-core/providers/abstract/app-storage.service';
+import { CustomLogger } from '../../../chat21-core/providers/logger/customLogger';
+import { LoggerInstance } from '../../../chat21-core/providers/logger/loggerInstance';
 import { Globals } from '../../utils/globals';
 
 import { SelectionDepartmentComponent } from './selection-department.component';
 
+@Injectable()
+class AppStorageServiceStub extends AppStorageService {
+  lastAttributesJson: string | null = null;
+  setItem = jasmine.createSpy('setItem').and.callFake((key: string, value: any) => {
+    if (key === 'attributes') {
+      this.lastAttributesJson = value as string;
+    }
+  });
+  getItem(): any {
+    return null;
+  }
+  getItemWithoutProjectID(): any {
+    return null;
+  }
+  setItemWithoutProjectID(): void {}
+  removeItem(): void {}
+  clear(): void {}
+  initialize(): void {}
+}
+
 describe('SelectionDepartmentComponent', () => {
   let component: SelectionDepartmentComponent;
   let fixture: ComponentFixture<SelectionDepartmentComponent>;
-  class MockElementRef {}
-  
-  beforeEach(async(() => {
+  let globals: Globals;
+  let storage: AppStorageServiceStub;
+
+  beforeEach(waitForAsync(() => {
+    const ngxlogger = jasmine.createSpyObj('NGXLogger', ['log', 'trace', 'debug', 'warn', 'error', 'info']);
+    LoggerInstance.setInstance(new CustomLogger(ngxlogger));
     TestBed.configureTestingModule({
-      declarations: [ SelectionDepartmentComponent ],
-      providers: [ 
-        Globals, 
-        { provide: ElementRef, useClass: MockElementRef },
-        AppStorageService
-      ]
-    })
-    .compileComponents();
+      imports: [A11yModule],
+      declarations: [SelectionDepartmentComponent],
+      providers: [
+        Globals,
+        { provide: AppStorageService, useClass: AppStorageServiceStub },
+        { provide: NGXLogger, useValue: ngxlogger },
+      ],
+    }).compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(SelectionDepartmentComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
+    globals = TestBed.inject(Globals);
+    storage = TestBed.inject(AppStorageService) as unknown as AppStorageServiceStub;
+    globals.initDefafultParameters();
+    globals.themeColor = '#112233';
+    globals.themeForegroundColor = '#ddeeff';
+    globals.colorGradient180 = 'linear-gradient(#000,#fff)';
+    globals.LABEL_SELECT_TOPIC = 'Scegli un argomento';
+    globals.BUTTON_CLOSE_TO_ICON = 'Chiudi';
+    globals.departments = [
+      { _id: 'dep-a', name: 'Vendite' } as any,
+      { _id: 'dep-b', name: 'Supporto' } as any,
+    ];
+    globals.attributes = { userFullname: 'Ada', userEmail: 'ada@example.com' } as any;
+    globals.windowContext = {} as any;
   });
 
   it('should create', () => {
+    fixture.detectChanges();
     expect(component).toBeTruthy();
   });
+
+  it('should render dialog with topic label and one list row per department', () => {
+    fixture.detectChanges();
+    const dialog = fixture.nativeElement.querySelector('#chat21-selection-department') as HTMLElement;
+    expect(dialog.getAttribute('role')).toBe('dialog');
+    expect(dialog.getAttribute('aria-modal')).toBe('true');
+    expect(dialog.getAttribute('aria-label')).toBe('Scegli un argomento');
+    const heading = fixture.nativeElement.querySelector('h2.c21-message-field') as HTMLElement;
+    expect(heading.textContent?.trim()).toBe('Scegli un argomento');
+    const buttons = fixture.nativeElement.querySelectorAll('.c21-button-department');
+    expect(buttons.length).toBe(2);
+    expect(buttons[0].textContent).toContain('Vendite');
+    expect(buttons[1].textContent).toContain('Supporto');
+  });
+
+  it('onSelectDepartment should set globals, attributes and persist JSON in storage', () => {
+    fixture.detectChanges();
+    spyOn(component.onDepartmentSelected, 'emit');
+    const dept = { _id: 'dep-b', name: 'Supporto' };
+    component.onSelectDepartment(dept);
+    expect(globals.departmentSelected).toEqual(dept as any);
+    expect(globals.attributes.departmentId).toBe('dep-b');
+    expect(globals.attributes.departmentName).toBe('Supporto');
+    expect(storage.setItem).toHaveBeenCalledWith('attributes', jasmine.any(String));
+    const parsed = JSON.parse(storage.lastAttributesJson!);
+    expect(parsed.departmentId).toBe('dep-b');
+    expect(parsed.departmentName).toBe('Supporto');
+    expect(parsed.userEmail).toBe('ada@example.com');
+    expect(component.onDepartmentSelected.emit).toHaveBeenCalledWith(dept);
+  });
+
+  it('click on department button should trigger selection flow', () => {
+    fixture.detectChanges();
+    spyOn(component, 'onSelectDepartment').and.callThrough();
+    const second = fixture.debugElement.queryAll(By.css('.c21-button-department'))[1];
+    second.nativeElement.click();
+    expect(component.onSelectDepartment).toHaveBeenCalledWith(jasmine.objectContaining({ _id: 'dep-b' }));
+  });
+
+  it('closePage should emit onClose', () => {
+    fixture.detectChanges();
+    spyOn(component.onClose, 'emit');
+    component.closePage();
+    expect(component.onClose.emit).toHaveBeenCalled();
+  });
+
+  it('openPage should emit onOpen', () => {
+    fixture.detectChanges();
+    spyOn(component.onOpen, 'emit');
+    component.openPage();
+    expect(component.onOpen.emit).toHaveBeenCalled();
+  });
+
+  it('cancelPage should reset newConversationStart and emit onClose', () => {
+    fixture.detectChanges();
+    globals.newConversationStart = true;
+    spyOn(component.onClose, 'emit');
+    component.cancelPage();
+    expect(globals.newConversationStart).toBe(false);
+    expect(component.onClose.emit).toHaveBeenCalled();
+  });
+
+  it('should invoke beforeDepartmentsFormRender hook when present on windowContext.tiledesk', () => {
+    const hook = jasmine.createSpy('beforeDepartmentsFormRender').and.returnValue([{ _id: 'x', name: 'Filtered' }]);
+    globals.windowContext = { tiledesk: { beforeDepartmentsFormRender: hook } } as any;
+    const f2 = TestBed.createComponent(SelectionDepartmentComponent);
+    const c2 = f2.componentInstance;
+    f2.detectChanges();
+    expect(hook).toHaveBeenCalledWith(globals.departments);
+    expect(c2.departments.length).toBe(1);
+    expect(c2.departments[0].name).toBe('Filtered');
+    f2.destroy();
+  });
+
+  it('should emit onBeforeDepartmentsFormRender when hook is absent', () => {
+    spyOn(component.onBeforeDepartmentsFormRender, 'emit');
+    fixture.detectChanges();
+    expect(component.onBeforeDepartmentsFormRender.emit).toHaveBeenCalledWith(
+      jasmine.arrayContaining([jasmine.objectContaining({ name: 'Vendite' })]),
+    );
+  });
+
+  it('Escape host listener should call closePage', () => {
+    fixture.detectChanges();
+    spyOn(component, 'closePage');
+    const ev = new KeyboardEvent('keydown', { key: 'Escape' });
+    spyOn(ev, 'preventDefault');
+    spyOn(ev, 'stopPropagation');
+    component.onEscape(ev);
+    expect(ev.preventDefault).toHaveBeenCalled();
+    expect(ev.stopPropagation).toHaveBeenCalled();
+    expect(component.closePage).toHaveBeenCalled();
+  });
+
+  it('should focus afSelectionDepartment after delay in ngAfterViewInit', fakeAsync(() => {
+    fixture.detectChanges();
+    const dialog = fixture.nativeElement.querySelector('#chat21-selection-department') as HTMLElement;
+    spyOn(dialog, 'focus');
+    component.ngAfterViewInit();
+    tick(1000);
+    expect(dialog.focus).toHaveBeenCalled();
+  }));
 });

package/src/app/component/selection-department/selection-department.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, ElementRef, EventEmitter, OnInit, Output, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, EventEmitter, HostListener, OnInit, Output, ViewChild } from '@angular/core';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 import { Globals } from '../../utils/globals';
 
@@ -172,6 +172,13 @@ export class SelectionDepartmentComponent implements OnInit, AfterViewInit {
         this.onClose.emit();
     }
 
+    @HostListener('keydown.escape', ['$event'])
+    onEscape(event: KeyboardEvent){
+        event.preventDefault();
+        event.stopPropagation();
+        this.closePage();
+    }
+
     cancelPage() {
         this.logger.debug('[SELECT-DEP] cancelPage');
         this.g.newConversationStart = false;

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

@@ -1,21 +1,13 @@
-<!-- tabindex="000"-->
-
-<button aflauncherbutton #aflauncherbutton id="c21-launcher-button" class="c21-button-clean scale-in-center c21-align-right" 
-    *ngIf="g.isLogged == true" 
+<button aflauncherbutton #aflauncherbutton type="button" id="c21-launcher-button" class="c21-button-clean scale-in-center c21-align-right"
+    *ngIf="g.isLogged == true"
     [style]="{ 'background-color': 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)="onSendPressed($event)"
-    tabindex="1000" 
-    aria-label="    apri chat"
-    >
+    [attr.aria-label]="g.LABEL_SEND_NEW_MESSAGE || 'Send new message'">
 
     <!-- SEND ICON -->
-    <!-- [@enterBubbleAnimation] -->
-    <div class="launcher-button rotate-center" >
-        <!-- <img *ngIf="g.baloonImage !== '' " [src]="g.baloonImage" [ngStyle]="{'width': '100%', 'height': '100%', 'margin': 'auto'}"> -->
-        <svg role="img" [style]="{'fill': g.themeForegroundColor, 'display': (g.baloonImage==='')?'':'none' }" xmlns="http://www.w3.org/2000/svg" width="100%"
+    <div class="launcher-button rotate-center">
+        <svg aria-hidden="true" focusable="false" [style]="{'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" /> -->
             <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" />
         </svg>
     </div>

package/src/app/component/send-button/send-button.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { SendButtonComponent } from './send-button.component';
 
@@ -6,7 +6,7 @@ describe('SendButtonComponent', () => {
   let component: SendButtonComponent;
   let fixture: ComponentFixture<SendButtonComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ SendButtonComponent ]
     })