Skip to content

Commit

Permalink
test(igx-drop-down): add test for keynav and selection, scroll WIP, #984
Browse files Browse the repository at this point in the history
  • Loading branch information
@ViktorSlavov
ViktorSlavov committed May 3, 2018
1 parent d3f0d18 commit d3ab9d6
Showing 1 changed file with 160 additions and 22 deletions.
182 changes: 160 additions & 22 deletions src/drop-down/drop-down.component.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,36 @@
import { Component, ContentChildren, ViewChild } from "@angular/core";
import { Component, ContentChildren, ViewChild, DebugElement } from "@angular/core";
import { async, TestBed } from "@angular/core/testing";
import { By } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { BrowserAnimationsModule, NoopAnimationsModule } from "@angular/platform-browser/animations";
import { IgxToggleActionDirective, IgxToggleDirective, IgxToggleModule } from "../directives/toggle/toggle.directive";
import { IgxDropDownItemComponent } from "./drop-down-item.component";
import { IgxDropDownComponent, IgxDropDownModule } from "./drop-down.component";

describe("IgxDropDown ", () => {
fdescribe("IgxDropDown ", () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
IgxDropDownTestComponent
IgxDropDownTestComponent,
IgxDropDownTestScrollComponent
],
imports: [IgxDropDownModule, BrowserAnimationsModule, IgxToggleModule]
imports: [IgxDropDownModule, BrowserAnimationsModule, NoopAnimationsModule, IgxToggleModule]
})
.compileComponents();
.compileComponents();
}));

it("should initialize igx-drop-down", () => {
xit("should initialize igx-drop-down", () => {
const fixture = TestBed.createComponent(IgxDropDownTestComponent);
const list = fixture.componentInstance.items;
expect(list).toBeDefined();
expect(list.length).toEqual(4);
});

fit("should select item by click", () => {
it("should select item by click", async(() => {
const fixture = TestBed.createComponent(IgxDropDownTestComponent);
fixture.detectChanges();
const button = fixture.debugElement.query(By.css("button")).nativeElement;
const list = fixture.componentInstance.dropdown.items;
const item = list[0] as IgxDropDownItemComponent;
const item = list.first as IgxDropDownItemComponent;
expect(list).toBeDefined();
expect(list.length).toEqual(4);
// tslint:disable-next-line:no-debugger
Expand All @@ -39,7 +40,7 @@ describe("IgxDropDown ", () => {
fixture.detectChanges();
expect(item.isFocused).toBe(true);
});
});
}));

xit("should select item by SPACE/ENTER", () => {
//To DO
Expand All @@ -49,21 +50,120 @@ describe("IgxDropDown ", () => {
//To DO
});

xit("Should persist selection through scrolling", () => {
//To DO
});

xit("Should navigate through the items using Up/Down/Home/End keys", () => {
//To DO
it("Should navigate through the items using Up/Down/Home/End keys", () => {
const fixture = TestBed.createComponent(IgxDropDownTestComponent);
fixture.detectChanges();
const button = fixture.debugElement.query(By.css("button")).nativeElement;
const list = fixture.componentInstance.dropdown;
const listItems = list.items.toArray();
let currentItem: DebugElement;
expect(list).toBeDefined();
expect(list.items.length).toEqual(4);
button.click();
fixture.whenStable().then(() => {
fixture.detectChanges();
expect(list.selectedItem).toEqual(list.items.first);
currentItem = fixture.debugElement.query(By.css(".igx-drop-down__item--focused"));
expect(currentItem.componentInstance.index).toEqual(0);
currentItem.triggerEventHandler("keydown.ArrowDown", {});
return fixture.whenStable();
}).then(() => {
fixture.detectChanges();
currentItem = fixture.debugElement.query(By.css(".igx-drop-down__item--focused"));
expect(currentItem).toBeDefined();
expect(currentItem.componentInstance.index).toEqual(1);
currentItem.triggerEventHandler("keydown.End", {});
return fixture.whenStable();
}).then(() => {
fixture.detectChanges();
// expect(1).toEqual(2);
currentItem = fixture.debugElement.query(By.css(".igx-drop-down__item--focused"));
expect(currentItem).toBeDefined();
expect(currentItem.componentInstance.index).toEqual(3);
currentItem.triggerEventHandler("keydown.ArrowUp", {});
return fixture.whenStable();
// const currentItem = list.selectedItem.element as DebugElement;
}).then(() => {
fixture.detectChanges();
currentItem = fixture.debugElement.query(By.css(".igx-drop-down__item--focused"));
expect(currentItem).toBeDefined();
expect(currentItem.componentInstance.index).toEqual(2);
currentItem.triggerEventHandler("keydown.Home", {});
return fixture.whenStable();
}).then(() => {
fixture.detectChanges();
expect(list.selectedItem).toEqual(list.items.first);
currentItem = fixture.debugElement.query(By.css(".igx-drop-down__item--focused"));
expect(currentItem).toBeDefined();
expect(currentItem.componentInstance.index).toEqual(0);
});
});

xit("Should support disabled items and headers", () => {
//To DO
});

xit("Should notify when selection has changed", () => {
//To DO
});
it("Should notify when selection has changed", async(() => {
const fixture = TestBed.createComponent(IgxDropDownTestComponent);
fixture.detectChanges();
const button = fixture.debugElement.query(By.css("button")).nativeElement;
const list = fixture.componentInstance.dropdown;
const mockObj = { stopPropagation : () => null };
spyOn(list.onSelection, "emit").and.callThrough();
spyOn(fixture.componentInstance, "onSelection");
expect(list).toBeDefined();
expect(list.items.length).toEqual(4);
button.click(mockObj);
// tslint:disable-next-line:no-debugger
debugger;
fixture.whenStable().then(() => {
fixture.detectChanges();
expect(list.selectedItem).toEqual(list.items.first);
expect(list.onSelection.emit).toHaveBeenCalledTimes(1);
expect(fixture.componentInstance.onSelection).toHaveBeenCalledTimes(1);
const lastListItem = list.items.last.element.nativeElement;
lastListItem.click({});
return fixture.whenStable();
}).then(() => {
fixture.detectChanges();
expect(list.selectedItem).toEqual(list.items.last);
expect(list.onSelection.emit).toHaveBeenCalledTimes(2);
expect(fixture.componentInstance.onSelection).toHaveBeenCalledTimes(2);
});
}));

xit("Should persist selection through scrolling", async(() => {
const fixture = TestBed.createComponent(IgxDropDownTestScrollComponent);
fixture.detectChanges();
const button = fixture.debugElement.query(By.css("button")).nativeElement;
const list = fixture.componentInstance.dropdownScroll;
const listItems = list.items.toArray();
let currentItem: DebugElement;
expect(list).toBeDefined();
expect(list.items.length).toEqual(15);
button.click();
fixture.whenStable().then(() => {
fixture.detectChanges();
expect(list.selectedItem).toEqual(list.items.first);
currentItem = fixture.debugElement.query(By.css(".igx-drop-down__item--focused"));
expect(currentItem.componentInstance.index).toEqual(0);
const scrollElement = list.toggle.element as HTMLElement;
console.log("LOGGING: 1 ", scrollElement.scrollTop);
// tslint:disable-next-line:no-debugger
debugger;
scrollElement.scrollTop = 150;
console.log("LOGGING: 2 ", scrollElement.scrollTop);
fixture.detectChanges();
console.log("LOGGING: 3 ", scrollElement.scrollTop);

currentItem = fixture.debugElement.query(By.css(".igx-drop-down__item--focused"));
expect(currentItem).toBeUndefined();
scrollElement.scrollTop = 0;
currentItem = fixture.debugElement.query(By.css(".igx-drop-down__item--focused"));
expect(currentItem).toBeDefined();
expect(currentItem.componentInstance.index).toEqual(0);
});
}));

xit("Should be able to implement to any kind of anchor", () => {
//To DO
Expand All @@ -80,9 +180,9 @@ describe("IgxDropDown ", () => {
</igx-drop-down>
<div style="position: fixed; width: 100px; height: 100px; background-color: red; top: 50px; left: 300px; z-index: 9000;"></div>`
})
class IgxDropDownTestComponent {
class IgxDropDownTestComponent {

@ViewChild(IgxDropDownComponent, {read: IgxDropDownComponent})
@ViewChild(IgxDropDownComponent, { read: IgxDropDownComponent })
public dropdown: IgxDropDownComponent;

public items: any[] = [
Expand All @@ -97,6 +197,44 @@ describe("IgxDropDown ", () => {
}

public onSelection(ev) {
console.log(ev);
// console.log(ev);
}
}

@Component({
template: `
<button (click)="toggleDropDown()">Show</button>
<igx-drop-down #scrollDropDown>
<igx-drop-down-item *ngFor="let item of items">
{{ item.field }}
</igx-drop-down-item>
</igx-drop-down>
`
})
class IgxDropDownTestScrollComponent {

@ViewChild("scrollDropDown", { read: IgxDropDownComponent })
public dropdownScroll: IgxDropDownComponent;

public items: any[] = [
{ field: "Item 1" },
{ field: "Item 2" },
{ field: "Item 3" },
{ field: "Item 4" },
{ field: "Item 5" },
{ field: "Item 6" },
{ field: "Item 7" },
{ field: "Item 8" },
{ field: "Item 9" },
{ field: "Item 10" },
{ field: "Item 11" },
{ field: "Item 12" },
{ field: "Item 13" },
{ field: "Item 14" },
{ field: "Item 15" }
];

public toggleDropDown() {
this.dropdownScroll.toggleDropDown();
}
}

0 comments on commit d3ab9d6

Please sign in to comment.