test: menu harnesses and refacto

Author: mledour

library/src/lib/menu-item-node.component.ts

@@ -19,8 +19,9 @@ import { openCloseAnimation, rotateAnimation } from './menu-item.animations';
     <ul [@openClose]="isOpen">
       <ng-container *ngFor="let childItem of menuItem.children; let last = last">
         <li
+          asm-menu-item
           *ngIf="menuItemRoleService.showItem$(childItem.roles) | async"
-          [asm-menu-item]="childItem"
+          [menuItem]="childItem"
           [level]="level + 1"
           [itemDisabled]="itemDisabled"
           (isItemActive)="isChildItemActive($event, last)"

library/src/lib/menu-item.component.ts

@@ -9,7 +9,7 @@ import { MenuItem } from './sidebar-menu.interface';
 
 @Component({
   // tslint:disable-next-line:component-selector
-  selector: 'li[asm-menu-item]',
+  selector: 'li[asm-menu-item][menuItem]',
   template: `
     <div
       *ngIf="{ disabled: (menuItemRoleService.disableItem$(menuItem.roles) | async) === true } as role"
@@ -34,8 +34,7 @@ import { MenuItem } from './sidebar-menu.interface';
   `,
 })
 export class MenuItemComponent implements OnInit, OnDestroy {
-  // tslint:disable-next-line:no-input-rename
-  @Input('asm-menu-item') menuItem!: MenuItem;
+  @Input() menuItem!: MenuItem;
   @Input() isRootNode = true;
   @Input() level!: number;
   @Input() itemDisabled?: boolean;

library/src/lib/sidebar-menu.component.ts

@@ -11,12 +11,7 @@ import { MenuItemRoleService, Role } from './menu-item-role.service';
   styleUrls: ['sidebar-menu.component.scss'],
   template: `<ul class="asm-menu">
     <ng-container *ngFor="let item of menu">
-      <li
-        class="asm-menu-item"
-        *ngIf="menuItemService.showItem$(item.roles) | async"
-        [asm-menu-item]="item"
-        [level]="0"
-      ></li>
+      <li asm-menu-item *ngIf="menuItemService.showItem$(item.roles) | async" [menuItem]="item" [level]="0"></li>
     </ng-container>
   </ul>`,
 })

library/src/lib/tests/menu.harness.ts renamed to library/src/lib/testing/menu.harness.ts

@@ -1,13 +1,12 @@
-import { ComponentHarness, ContentContainerComponentHarness } from '@angular/cdk/testing';
+import { ComponentHarness } from '@angular/cdk/testing';
 import { BaseHarnessFilters, HarnessPredicate } from '@angular/cdk/testing';
 
 interface MenuItemHarnessFilters extends BaseHarnessFilters {
-  /** Filters based on the text of the menu item. */
   label?: string | RegExp;
 }
 
-class MenuItemHarness extends ContentContainerComponentHarness {
-  static hostSelector = '.asm-menu-item';
+class MenuItemHarness extends ComponentHarness {
+  static hostSelector = '[asm-menu-item]';
 
   getLabelElement = this.locatorFor('.asm-menu__item__label, .asm-menu__item__header');
   getAnchorElement = this.locatorFor('.asm-menu__item__anchor');
@@ -33,10 +32,22 @@ export class MenuHarness extends ComponentHarness {
   getItemsWithIcons = this.locatorForAll('.asm-menu__item__icon');
   getItemsWithBadges = this.locatorForAll('.asm-badges');
   getActivatedAnchors = this.locatorForAll('.asm-menu__item__anchor--active');
-  getActivatedAnchorLabel = this.locatorFor('.asm-menu__item__anchor--active .asm-menu__item__label');
+  getActivatedAnchorsLabels = this.locatorForAll('.asm-menu__item__anchor--active .asm-menu__item__label');
+  getOpenedNodes = this.locatorForAll('.asm-menu__item__node--open');
+  getOpenedNodesLabels = this.locatorForAll('.asm-menu__item__node--open > asm-menu-anchor .asm-menu__item__label');
 
   async getItemsWith(filters: MenuItemHarnessFilters = {}): Promise<MenuItemHarness[]> {
     const getFilteredItems = this.locatorForAll(MenuItemHarness.with(filters));
     return getFilteredItems();
   }
+
+  async getItemWith(filters: MenuItemHarnessFilters = {}): Promise<MenuItemHarness> {
+    const getFilteredItem = this.locatorFor(MenuItemHarness.with(filters));
+    return getFilteredItem();
+  }
+
+  async clickItemWith(filters: MenuItemHarnessFilters = {}): Promise<void> {
+    const item = await this.getItemWith(filters);
+    return (await item.getAnchorElement()).click();
+  }
 }

library/src/lib/tests/css-selectors.spec.ts

@@ -2,7 +2,5 @@
 declare namespace jasmine {
   interface Matchers<T> {
     toHaveClasses(expected?: string, expectationFailOutput?: any): boolean;
-    toHaveClassesHarness(expected?: string, expectationFailOutput?: any): boolean;
-    toHaveText(expected?: string, expectationFailOutput?: any): boolean;
   }
 }

library/src/lib/tests/matcher-types.d.ts renamed to library/src/lib/tests/custom-matcher-types.d.ts

@@ -1,39 +1,14 @@
-import { DebugElement } from '@angular/core';
 import { TestElement } from '@angular/cdk/testing';
 
 export const customMatchers: jasmine.CustomMatcherFactories = {
   toHaveClasses(
     util: jasmine.MatchersUtil,
     customEqualityTesters: ReadonlyArray<jasmine.CustomEqualityTester>
-  ): jasmine.CustomMatcher {
-    return {
-      compare(actual: DebugElement, expected?: string): jasmine.CustomMatcherResult {
-        if (!(actual.nativeElement.classList.contains instanceof Function)) {
-          throw new Error(util.pp(actual) + ' is not a Debug element');
-        }
-
-        const expectedClasses = (expected && expected.split(' ').filter((v) => v.length)) || [];
-
-        if (!expectedClasses.length) {
-          throw new Error('expected value do not contain css classes');
-        }
-
-        return {
-          pass: !expectedClasses.find((cssClass) => !actual.nativeElement.classList.contains(cssClass)),
-          message: `Expected '${actual.nativeElement.classList}' to have classes '${expected}'`,
-        };
-      },
-    };
-  },
-
-  toHaveClassesHarness(
-    util: jasmine.MatchersUtil,
-    customEqualityTesters: ReadonlyArray<jasmine.CustomEqualityTester>
   ): jasmine.CustomMatcher {
     return {
       compare(actual: TestElement, expected?: string): jasmine.CustomMatcherResult {
         if (!(actual.hasClass instanceof Function)) {
-          throw new Error(util.pp(actual) + ' is not a Debug element');
+          throw new Error(util.pp(actual) + ' is not a TestElement');
         }
 
         const expectedClasses = (expected && expected.split(' ').filter((v) => v.length)) || [];
@@ -49,22 +24,4 @@ export const customMatchers: jasmine.CustomMatcherFactories = {
       },
     };
   },
-
-  toHaveText(
-    util: jasmine.MatchersUtil,
-    customEqualityTesters: ReadonlyArray<jasmine.CustomEqualityTester>
-  ): jasmine.CustomMatcher {
-    return {
-      compare(actual: DebugElement, expected?: string): jasmine.CustomMatcherResult {
-        if (!actual.nativeElement.textContent) {
-          throw new Error(util.pp(actual) + ' is not a Debug element');
-        }
-
-        return {
-          pass: actual.nativeElement.textContent === expected,
-          message: `Expected '${actual.nativeElement.textContent}' to have text '${expected}'`,
-        };
-      },
-    };
-  },
 };

library/src/lib/tests/custom.matchers.spec.ts

@@ -0,0 +1,41 @@
+import { Component } from '@angular/core';
+import { Route } from '@angular/router';
+
+import { Menu } from '../sidebar-menu.interface';
+import { SidebarMenuComponent } from '../sidebar-menu.component';
+import { MenuItemComponent } from '../menu-item.component';
+import { MenuItemNodeComponent } from '../menu-item-node.component';
+import { MenuItemAnchorComponent } from '../menu-item-anchor.component';
+import { MenuItemNodeService } from '../menu-item-node.service';
+import { MenuItemAnchorService } from '../menu-item-anchor.service';
+import { MenuItemRoleService } from '../menu-item-role.service';
+import { RouterTestingModule } from '@angular/router/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { TestModuleMetadata } from '@angular/core/testing';
+
+@Component({})
+class RoutedStubComponent {}
+
+export const routes: Route[] = [
+  {
+    path: '**',
+    component: RoutedStubComponent,
+  },
+];
+
+@Component({ template: '<asm-angular-sidebar-menu [menu]="menu"></asm-angular-sidebar-menu>' })
+export class WrapperStubComponent {
+  menu?: Menu;
+}
+
+export const sharedTestingModuleFactory = (): TestModuleMetadata => ({
+  declarations: [
+    WrapperStubComponent,
+    SidebarMenuComponent,
+    MenuItemComponent,
+    MenuItemNodeComponent,
+    MenuItemAnchorComponent,
+  ],
+  providers: [MenuItemNodeService, MenuItemAnchorService, MenuItemRoleService],
+  imports: [RouterTestingModule.withRoutes(routes), NoopAnimationsModule],
+});

library/src/lib/tests/shared.spec.ts

@@ -1,38 +1,13 @@
 import { TestBed } from '@angular/core/testing';
+import { Router } from '@angular/router';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
-import { SidebarMenuComponent } from '../sidebar-menu.component';
-
-import { MenuHarness } from './menu.harness';
-import { MenuItemComponent } from '../menu-item.component';
-import { MenuItemNodeComponent } from '../menu-item-node.component';
-import { MenuItemAnchorComponent } from '../menu-item-anchor.component';
-import { MenuItemNodeService } from '../menu-item-node.service';
-import { MenuItemAnchorService } from '../menu-item-anchor.service';
-import { MenuItemRoleService } from '../menu-item-role.service';
-import { RouterTestingModule } from '@angular/router/testing';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { Component } from '@angular/core';
-import { Menu, MenuItemBadge, MenuItemLeafRoute } from '../sidebar-menu.interface';
-import { Route, Router } from '@angular/router';
-import { customMatchers } from './custom.matchers.spec';
 
-@Component({})
-class RoutedStubComponent {}
+import { MenuHarness } from '../testing/menu.harness';
 
-const routes: Route[] = [
-  {
-    path: '',
-    component: RoutedStubComponent,
-  },
-  {
-    path: 'second',
-    component: RoutedStubComponent,
-  },
-  {
-    path: 'third',
-    component: RoutedStubComponent,
-  },
-];
+import { Menu, MenuItemBadge, MenuItemHeader, MenuItemLeafRoute } from '../sidebar-menu.interface';
+
+import { customMatchers } from './custom.matchers.spec';
+import { sharedTestingModuleFactory, WrapperStubComponent } from './shared.spec';
 
 const menu: Menu = [
   {
@@ -63,35 +38,21 @@ const menu: Menu = [
   },
 ];
 
-@Component({ template: '<asm-angular-sidebar-menu [menu]="menu"></asm-angular-sidebar-menu>' })
-class WrapperStubComponent {
-  menu: Menu = menu;
-}
-
-describe('menu role', () => {
+describe('first level', () => {
   let harness: MenuHarness;
   let router: Router;
 
   beforeEach(async () => {
     jasmine.addMatchers(customMatchers);
 
-    await TestBed.configureTestingModule({
-      declarations: [
-        WrapperStubComponent,
-        SidebarMenuComponent,
-        MenuItemComponent,
-        MenuItemNodeComponent,
-        MenuItemAnchorComponent,
-      ],
-      providers: [MenuItemNodeService, MenuItemAnchorService, MenuItemRoleService],
-      imports: [RouterTestingModule.withRoutes(routes), NoopAnimationsModule],
-    }).compileComponents();
+    await TestBed.configureTestingModule(sharedTestingModuleFactory()).compileComponents();
 
     const fixture = TestBed.createComponent(WrapperStubComponent);
     const loader = TestbedHarnessEnvironment.loader(fixture);
     harness = await loader.getHarness(MenuHarness);
     router = TestBed.inject(Router);
 
+    fixture.componentInstance.menu = menu;
     router.initialNavigation();
     fixture.detectChanges();
   });
@@ -110,55 +71,62 @@ describe('menu role', () => {
   });
 
   it('should activate second menu item on navigation', async () => {
-    await router.navigateByUrl((menu[1] as MenuItemLeafRoute).route);
+    const itemConf = menu[1] as MenuItemLeafRoute;
+    await router.navigateByUrl(itemConf.route);
 
     const items = await harness.getActivatedAnchors();
     expect(items.length).toEqual(1);
 
-    const label = await harness.getActivatedAnchorLabel();
-    expect(await label.text()).toEqual(menu[1].label as string);
+    const label = await harness.getActivatedAnchorsLabels();
+    expect(label.length).toEqual(1);
+    expect(await label[0].text()).toEqual(itemConf.label);
   });
 
   it('should navigate to item route on menu item click', async () => {
-    const item = await harness.getItemsWith({ label: menu[2].label });
+    const itemConf = menu[2] as MenuItemLeafRoute;
+    const item = await harness.getItemsWith({ label: itemConf.label });
     const link = await item[0].getAnchorElement();
 
     await link.click();
 
     const items = await harness.getActivatedAnchors();
     expect(items.length).toEqual(1);
 
-    const label = await harness.getActivatedAnchorLabel();
-    expect(await label.text()).toEqual(menu[2].label as string);
+    const label = await harness.getActivatedAnchorsLabels();
+    expect(label.length).toEqual(1);
+    expect(await label[0].text()).toEqual(itemConf.label);
 
-    expect(router.url).toEqual((menu[2] as MenuItemLeafRoute).route);
+    expect(router.url).toEqual(itemConf.route);
   });
 
   it('should have one element with icon and two icon classes', async () => {
+    const itemConf = menu[2] as MenuItemLeafRoute;
     const elements = await harness.getItemsWithIcons();
 
     expect(elements.length).toEqual(1);
-    expect(elements[0]).toHaveClassesHarness(menu[2].iconClasses);
+    expect(elements[0]).toHaveClasses(itemConf.iconClasses);
   });
 
   it('should have one element with two badges', async () => {
+    const itemConf = menu[1] as MenuItemLeafRoute;
     const badgesConf = menu[1].badges as MenuItemBadge[];
-    const elements = await harness.getItemsWith({ label: menu[1].label });
+    const elements = await harness.getItemsWith({ label: itemConf.label });
     const badges = await elements[0].getBadgesElement();
 
     expect(elements.length).toEqual(1);
 
     expect(badges.length).toEqual(2);
     expect(await badges[0].text()).toEqual(badgesConf[0].label);
     expect(await badges[1].text()).toEqual(badgesConf[1].label);
-    expect(badges[0]).toHaveClassesHarness(badgesConf[0].classes);
-    expect(badges[1]).toHaveClassesHarness(badgesConf[1].classes);
+    expect(badges[0]).toHaveClasses(badgesConf[0].classes);
+    expect(badges[1]).toHaveClasses(badgesConf[1].classes);
   });
 
   it('should create 1 header', async () => {
+    const itemConf = menu[3] as MenuItemHeader;
     const elements = await harness.getItemsHeaders();
 
     expect(elements.length).toEqual(1);
-    expect(await elements[0].text()).toEqual(menu[3].header as string);
+    expect(await elements[0].text()).toEqual(itemConf.header);
   });
 });