Skip to content

Commit

Permalink
fix(list): selection in McList (#176613) (#130)
Browse files Browse the repository at this point in the history 
* removed console.log
* fixed tests and some logic
  • Loading branch information
@lskramarov @pimenovoleg
lskramarov authored and pimenovoleg committed Jun 3, 2019
1 parent c9036a1 commit 503f9ed
Show file tree
Hide file tree
Showing 5 changed files with 156 additions and 150 deletions.
56 changes: 30 additions & 26 deletions packages/mosaic/list/list-selection.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import {
createKeyboardEvent,
dispatchFakeEvent,
dispatchEvent,
dispatchKeyboardEvent
dispatchKeyboardEvent, createMouseEvent
} from '@ptsecurity/cdk/testing';

import {
Expand Down Expand Up @@ -151,21 +151,23 @@ describe('McListSelection without forms', () => {

expect(selectList.selected.length).toBe(0);

testListItem._handleClick();
const event = createMouseEvent('click');

testListItem.handleClick(event);
fixture.detectChanges();

expect(selectList.selected.length).toBe(0);
});

it('should be able to use keyboard select with SPACE', () => {
const manager = selectionList.componentInstance._keyManager;
const manager = selectionList.componentInstance.keyManager;
const SPACE_EVENT: KeyboardEvent = createKeyboardEvent('keydown', SPACE);
const selectList =
selectionList.injector.get<McListSelection>(McListSelection).selectedOptions;
expect(selectList.selected.length).toBe(0);

manager.updateActiveItem(1);
selectionList.componentInstance._onKeyDown(SPACE_EVENT);
selectionList.componentInstance.onKeyDown(SPACE_EVENT);

fixture.detectChanges();

Expand All @@ -174,14 +176,14 @@ describe('McListSelection without forms', () => {
});

it('should be able to select an item using ENTER', () => {
const manager = selectionList.componentInstance._keyManager;
const manager = selectionList.componentInstance.keyManager;
const testListItem: HTMLElement = listOptions[1].nativeElement;
const ENTER_EVENT: KeyboardEvent = createKeyboardEvent('keydown', ENTER, testListItem);
const selectList = selectionList.injector.get<McListSelection>(McListSelection).selectedOptions;
expect(selectList.selected.length).toBe(0);

manager.updateActiveItem(1);
selectionList.componentInstance._onKeyDown(ENTER_EVENT);
selectionList.componentInstance.onKeyDown(ENTER_EVENT);

fixture.detectChanges();

Expand All @@ -191,7 +193,7 @@ describe('McListSelection without forms', () => {

// todo restore this TC
xit('should restore focus if active option is destroyed', () => {
const manager = selectionList.componentInstance._keyManager;
const manager = selectionList.componentInstance.keyManager;

listOptions[3].componentInstance.focus();

Expand All @@ -207,80 +209,80 @@ describe('McListSelection without forms', () => {
const testListItem = listOptions[2].nativeElement as HTMLElement;
const UP_EVENT: KeyboardEvent =
createKeyboardEvent('keydown', UP_ARROW, testListItem);
const manager = selectionList.componentInstance._keyManager;
const manager = selectionList.componentInstance.keyManager;

listOptions[2].componentInstance.focus();
manager.setActiveItem(2);
expect(manager.activeItemIndex).toEqual(2);

selectionList.componentInstance._onKeyDown(UP_EVENT);
selectionList.componentInstance.onKeyDown(UP_EVENT);

fixture.detectChanges();

expect(manager.activeItemIndex).toEqual(1);
});

it('should focus and toggle the next item when pressing SHIFT + UP_ARROW', () => {
const manager = selectionList.componentInstance._keyManager;
const manager = selectionList.componentInstance.keyManager;
const upKeyEvent = createKeyboardEvent('keydown', UP_ARROW);
Object.defineProperty(upKeyEvent, 'shiftKey', { get: () => true });

listOptions[3].componentInstance.focus();
manager.setActiveItem(3);
expect(manager.activeItemIndex).toBe(3);

expect(listOptions[1].componentInstance.selected).toBe(false);
expect(listOptions[2].componentInstance.selected).toBe(false);

selectionList.componentInstance._onKeyDown(upKeyEvent);
selectionList.componentInstance.onKeyDown(upKeyEvent);
fixture.detectChanges();

expect(listOptions[1].componentInstance.selected).toBe(false);
expect(listOptions[2].componentInstance.selected).toBe(true);

selectionList.componentInstance._onKeyDown(upKeyEvent);
selectionList.componentInstance.onKeyDown(upKeyEvent);
fixture.detectChanges();

expect(listOptions[1].componentInstance.selected).toBe(true);
expect(listOptions[2].componentInstance.selected).toBe(true);
});

it('should focus next item when press DOWN ARROW', () => {
const manager = selectionList.componentInstance._keyManager;
const manager = selectionList.componentInstance.keyManager;

listOptions[2].componentInstance.focus();
manager.setActiveItem(2);
expect(manager.activeItemIndex).toEqual(2);

selectionList.componentInstance._onKeyDown(createKeyboardEvent('keydown', DOWN_ARROW));
selectionList.componentInstance.onKeyDown(createKeyboardEvent('keydown', DOWN_ARROW));
fixture.detectChanges();

expect(manager.activeItemIndex).toEqual(3);
});

it('should focus and toggle the next item when pressing SHIFT + DOWN_ARROW', () => {
const manager = selectionList.componentInstance._keyManager;
const manager = selectionList.componentInstance.keyManager;
const downKeyEvent = createKeyboardEvent('keydown', DOWN_ARROW);
Object.defineProperty(downKeyEvent, 'shiftKey', { get: () => true });

listOptions[1].componentInstance.focus();
manager.setActiveItem(1);
expect(manager.activeItemIndex).toBe(1);

expect(listOptions[2].componentInstance.selected).toBe(false);
expect(listOptions[3].componentInstance.selected).toBe(false);

selectionList.componentInstance._onKeyDown(downKeyEvent);
selectionList.componentInstance.onKeyDown(downKeyEvent);
fixture.detectChanges();

expect(listOptions[2].componentInstance.selected).toBe(true);
expect(listOptions[3].componentInstance.selected).toBe(false);

selectionList.componentInstance._onKeyDown(downKeyEvent);
selectionList.componentInstance.onKeyDown(downKeyEvent);
fixture.detectChanges();

expect(listOptions[2].componentInstance.selected).toBe(true);
expect(listOptions[3].componentInstance.selected).toBe(true);
});

it('should be able to focus the first item when pressing HOME', () => {
const manager = selectionList.componentInstance._keyManager;
const manager = selectionList.componentInstance.keyManager;
expect(manager.activeItemIndex).toBe(-1);

const event = dispatchKeyboardEvent(selectionList.nativeElement, 'keydown', HOME);
Expand All @@ -291,7 +293,7 @@ describe('McListSelection without forms', () => {
});

it('should focus the last item when pressing END', () => {
const manager = selectionList.componentInstance._keyManager;
const manager = selectionList.componentInstance.keyManager;
expect(manager.activeItemIndex).toBe(-1);

const event = dispatchKeyboardEvent(selectionList.nativeElement, 'keydown', END);
Expand All @@ -303,7 +305,7 @@ describe('McListSelection without forms', () => {

xit('should be able to jump focus down to an item by typing', fakeAsync(() => {
const listEl = selectionList.nativeElement;
const manager = selectionList.componentInstance._keyManager;
const manager = selectionList.componentInstance.keyManager;

expect(manager.activeItemIndex).toBe(-1);

Expand Down Expand Up @@ -541,7 +543,9 @@ describe('McListSelection without forms', () => {

expect(selectList.selected.length).toBe(0);

testListItem._handleClick();
const event = createMouseEvent('click');

testListItem.handleClick(event);
fixture.detectChanges();

expect(selectList.selected.length).toBe(0);
Expand Down Expand Up @@ -627,7 +631,7 @@ xdescribe('McListSelection with forms', () => {
expect(fixture.componentInstance.selectedOptions.length)
.toBe(0, 'Expected no options to be selected by default');

dispatchFakeEvent(listOptions[0]._getHostElement(), 'click');
dispatchFakeEvent(listOptions[0].getHostElement(), 'click');
fixture.detectChanges();

tick();
Expand Down
Loading

0 comments on commit 503f9ed

Please sign in to comment.