feature(wysiwyg): adding tests

Author: k-belov

apps/codelab/src/app/multiselect/multiselect-item.directive.ts

@@ -1,4 +1,10 @@
-import { Directive, HostListener, Inject, Input } from '@angular/core';
+import {
+  Directive,
+  ElementRef,
+  HostListener,
+  Inject,
+  Input
+} from '@angular/core';
 import {
   MULTISELECT_LIST,
   MultiselectListDirective
@@ -11,6 +17,7 @@ export class MultiselectItemDirective<T> {
   @Input() msItem: T;
 
   constructor(
+    public element: ElementRef<HTMLElement>,
     @Inject(MULTISELECT_LIST) public parentList: MultiselectListDirective<T>
   ) {}
 

apps/codelab/src/app/multiselect/multiselect.spec.ts

@@ -0,0 +1,154 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {
+  Component,
+  Provider,
+  QueryList,
+  Type,
+  ViewChild,
+  ViewChildren
+} from '@angular/core';
+import { MultiselectModule } from './multiselect.module';
+import { MultiselectModel } from './multiselect-model';
+import { MultiselectListDirective } from './multiselect-list.directive';
+import { MultiselectItemDirective } from './multiselect-item.directive';
+
+@Component({
+  template: `
+    <div [msModel]="selectionModel" multiselectList>
+      <div *ngFor="let item of items" [msItem]="item" multiselectItem>
+        {{ item }}
+      </div>
+    </div>
+  `
+})
+class MultiselectTestComponent {
+  @ViewChild(MultiselectListDirective)
+  multiselectListInstance: MultiselectListDirective<string>;
+  @ViewChildren(MultiselectItemDirective) multiselectItems: QueryList<
+    MultiselectItemDirective<string>
+  >;
+
+  public items = ['a', 'b', 'c', 'd', 'e'];
+
+  public selectionModel: MultiselectModel<string> = new MultiselectModel(
+    this.items
+  );
+}
+
+describe('Multiselect', () => {
+  function createComponent<T>(
+    componentType: Type<T>,
+    providers: Provider[] = [],
+    extraDeclarations: Type<any>[] = []
+  ): ComponentFixture<T> {
+    TestBed.configureTestingModule({
+      imports: [MultiselectModule],
+      declarations: [componentType, ...extraDeclarations],
+      providers: [...providers]
+    });
+
+    return TestBed.createComponent<T>(componentType);
+  }
+
+  it('should select item', () => {
+    const fixture = createComponent(MultiselectTestComponent);
+
+    fixture.detectChanges();
+
+    const itemEls = fixture.componentInstance.multiselectItems.map(
+      item => item.element.nativeElement
+    );
+
+    const itemEl = itemEls[0];
+
+    itemEl.dispatchEvent(new MouseEvent('click'));
+
+    fixture.detectChanges();
+
+    expect(fixture.componentInstance.selectionModel.selected).toEqual(['a']);
+  });
+
+  it('should do not deselect selected if click on same thing', () => {
+    const fixture = createComponent(MultiselectTestComponent);
+
+    fixture.detectChanges();
+
+    const itemEls = fixture.componentInstance.multiselectItems.map(
+      item => item.element.nativeElement
+    );
+
+    const itemEl = itemEls[0];
+
+    itemEl.dispatchEvent(new MouseEvent('click'));
+
+    fixture.detectChanges();
+
+    itemEl.dispatchEvent(new MouseEvent('click'));
+
+    fixture.detectChanges();
+
+    expect(fixture.componentInstance.selectionModel.selected).toEqual(['a']);
+  });
+
+  it('selecting with ctrl', () => {
+    const fixture = createComponent(MultiselectTestComponent);
+
+    fixture.detectChanges();
+
+    const itemEls = fixture.componentInstance.multiselectItems.map(
+      item => item.element.nativeElement
+    );
+
+    const itemFirstEl = itemEls[0];
+    const itemSecondEl = itemEls[1];
+
+    itemFirstEl.dispatchEvent(new MouseEvent('click'));
+
+    fixture.detectChanges();
+
+    itemSecondEl.dispatchEvent(
+      new MouseEvent('click', {
+        ctrlKey: true
+      })
+    );
+
+    fixture.detectChanges();
+
+    expect(fixture.componentInstance.selectionModel.selected).toEqual([
+      'a',
+      'b'
+    ]);
+  });
+
+  it('selecting with shift', () => {
+    const fixture = createComponent(MultiselectTestComponent);
+
+    fixture.detectChanges();
+
+    const itemEls = fixture.componentInstance.multiselectItems.map(
+      item => item.element.nativeElement
+    );
+
+    const itemFirstEl = itemEls[0];
+    const itemSecondEl = itemEls[3];
+
+    itemFirstEl.dispatchEvent(new MouseEvent('click'));
+
+    fixture.detectChanges();
+
+    itemSecondEl.dispatchEvent(
+      new MouseEvent('click', {
+        shiftKey: true
+      })
+    );
+
+    fixture.detectChanges();
+
+    expect(fixture.componentInstance.selectionModel.selected).toEqual([
+      'a',
+      'b',
+      'c',
+      'd'
+    ]);
+  });
+});