Skip to content

fix(list): Некорректное выделение в McList (#176613) #130

Merged
merged 3 commits into from
Jun 3, 2019
Merged

fix(list): Некорректное выделение в McList (#176613) #130

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
51e8a11
fix(list): Некорректное выделение в McList (#176613)
May 28, 2019
bc23aed
removed console.log
May 28, 2019
b16bb06
fixed tests and some logic
May 29, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 30 additions & 26 deletions packages/mosaic/list/list-selection.component.spec.ts
View file
Open in desktop
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