From 50c76f21e70c2d8a480d586278ce01bd348fcf28 Mon Sep 17 00:00:00 2001
From: Denys Vuika <denys.vuika@alfresco.com>
Date: Tue, 6 Oct 2020 16:14:20 +0100
Subject: [PATCH] add "create menu" unit tests (#1720)

* add "create menu" unit tests

* submenu tests
---
 .../toolbar-menu-item.component.html          |  24 ++---
 .../create-menu/create-menu.component.spec.ts | 102 +++++++++++++++++-
 2 files changed, 106 insertions(+), 20 deletions(-)

diff --git a/projects/aca-shared/src/lib/components/tool-bar/toolbar-menu-item/toolbar-menu-item.component.html b/projects/aca-shared/src/lib/components/tool-bar/toolbar-menu-item/toolbar-menu-item.component.html
index 0deda943a..0d2210be0 100644
--- a/projects/aca-shared/src/lib/components/tool-bar/toolbar-menu-item/toolbar-menu-item.component.html
+++ b/projects/aca-shared/src/lib/components/tool-bar/toolbar-menu-item/toolbar-menu-item.component.html
@@ -1,19 +1,12 @@
 <ng-container [ngSwitch]="actionRef.type">
   <ng-container *ngSwitchCase="'menu'">
-    <button
-      mat-menu-item
-      role="menuitem"
-      [disabled]="actionRef.disabled"
-      [matMenuTriggerFor]="childMenu"
-    >
+    <button [id]="actionRef.id" mat-menu-item role="menuitem" [disabled]="actionRef.disabled" [matMenuTriggerFor]="childMenu">
       <adf-icon [value]="actionRef.icon"></adf-icon>
-      <span>{{ actionRef.title | translate }}</span>
+      <span data-automation-id="menu-item-title">{{ actionRef.title | translate }}</span>
     </button>
 
     <mat-menu #childMenu="matMenu" class="app-create-menu__sub-menu">
-      <ng-container
-        *ngFor="let child of actionRef.children; trackBy: trackById"
-      >
+      <ng-container *ngFor="let child of actionRef.children; trackBy: trackById">
         <app-toolbar-menu-item [actionRef]="child"></app-toolbar-menu-item>
       </ng-container>
     </mat-menu>
@@ -32,18 +25,13 @@
       [id]="actionRef.id"
       role="menuItem"
       mat-menu-item
-      [role]="'menuItem'"
-      color="primary"
+      [role]="'menuitem'"
       [disabled]="actionRef.disabled"
-      [attr.title]="
-        (actionRef.disabled
-          ? actionRef['description-disabled']
-          : actionRef.description || actionRef.title) | translate
-      "
+      [attr.title]="(actionRef.disabled ? actionRef['description-disabled'] : actionRef.description || actionRef.title) | translate"
       (click)="runAction()"
     >
       <adf-icon [value]="actionRef.icon"></adf-icon>
-      <span>{{ actionRef.title | translate }}</span>
+      <span data-automation-id="menu-item-title">{{ actionRef.title | translate }}</span>
     </button>
   </ng-container>
 </ng-container>
diff --git a/src/app/components/create-menu/create-menu.component.spec.ts b/src/app/components/create-menu/create-menu.component.spec.ts
index f3a542f3e..88b6fc52d 100644
--- a/src/app/components/create-menu/create-menu.component.spec.ts
+++ b/src/app/components/create-menu/create-menu.component.spec.ts
@@ -24,9 +24,107 @@
  */
 
 import { CreateMenuComponent } from './create-menu.component';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CoreModule } from '@alfresco/adf-core';
+import { AppCreateMenuModule } from './create-menu.module';
+import { OverlayContainer, OverlayModule } from '@angular/cdk/overlay';
+import { AppExtensionService } from '@alfresco/aca-shared';
+import { ContentActionType } from '@alfresco/adf-extensions';
+import { By } from '@angular/platform-browser';
+import { AppTestingModule } from '../../testing/app-testing.module';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatButtonModule } from '@angular/material/button';
 
 describe('CreateMenuComponent', () => {
-  it('should be defined', () => {
-    expect(CreateMenuComponent).toBeDefined();
+  let fixture: ComponentFixture<CreateMenuComponent>;
+  let extensionService: AppExtensionService;
+  let getCreateActionsSpy: jasmine.Spy;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [AppTestingModule, CoreModule.forRoot(), AppCreateMenuModule, OverlayModule, MatMenuModule, MatButtonModule]
+    });
+
+    extensionService = TestBed.inject(AppExtensionService);
+    getCreateActionsSpy = spyOn(extensionService, 'getCreateActions');
+    getCreateActionsSpy.and.returnValue([
+      {
+        id: 'action1',
+        type: ContentActionType.button,
+        title: 'action one'
+      }
+    ]);
+
+    fixture = TestBed.createComponent(CreateMenuComponent);
+  });
+
+  async function clickMenu() {
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    const button: HTMLButtonElement = fixture.debugElement.query(By.css('[data-automation-id="create-button"]')).nativeElement;
+    button.click();
+
+    fixture.detectChanges();
+    await fixture.whenStable();
+  }
+
+  it('should render collapsed button', async () => {
+    fixture.componentInstance.expanded = false;
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    const button: HTMLButtonElement = fixture.debugElement.query(By.css('[data-automation-id="create-button"]')).nativeElement;
+    const isCollapsed = button.classList.contains('app-create-menu--collapsed');
+
+    expect(isCollapsed).toBe(true);
+  });
+
+  it('should render expanded button', async () => {
+    fixture.componentInstance.expanded = true;
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    const button: HTMLButtonElement = fixture.debugElement.query(By.css('[data-automation-id="create-button"]')).nativeElement;
+    const isCollapsed = button.classList.contains('app-create-menu--collapsed');
+
+    expect(isCollapsed).toBe(false);
+  });
+
+  it('should render custom actions', async () => {
+    await clickMenu();
+
+    const menuItems = fixture.debugElement.queryAll(By.css('.app-toolbar-menu-item'));
+    expect(menuItems.length).toBe(1);
+
+    const label: HTMLSpanElement = (menuItems[0].nativeElement as HTMLButtonElement).querySelector('[data-automation-id="menu-item-title"]');
+    expect(label.innerText).toBe('action one');
+  });
+
+  it('should render sub-menus', async () => {
+    getCreateActionsSpy.and.returnValue([
+      {
+        id: 'level1',
+        type: ContentActionType.menu,
+        title: 'level one',
+        children: [
+          {
+            id: 'level2',
+            type: ContentActionType.button,
+            title: 'level two'
+          }
+        ]
+      }
+    ]);
+
+    await clickMenu();
+
+    const level1 = fixture.debugElement.query(By.css('#level1')).nativeElement as HTMLButtonElement;
+    level1.click();
+
+    const overlayContainer = TestBed.inject(OverlayContainer);
+    const level2 = overlayContainer.getContainerElement().querySelector('#level2');
+
+    expect(level2).not.toBeNull();
   });
 });