How to use the @angular/cdk/testing/private.dispatchKeyboardEvent function in @angular/cdk

To help you get started, we’ve selected a few @angular/cdk examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github angular / components / src / material / expansion / accordion.spec.ts View on Github external
it('should move focus to the next header when pressing the up arrow', () => {
    const fixture = TestBed.createComponent(SetOfItems);
    fixture.detectChanges();

    const headerElements = fixture.debugElement.queryAll(By.css('mat-expansion-panel-header'));
    const headers = fixture.componentInstance.headers.toArray();

    focusMonitor.focusVia(headerElements[headerElements.length - 1].nativeElement, 'keyboard');
    headers.forEach(header => spyOn(header, 'focus'));

    // Stop before the first header
    for (let i = headers.length - 1; i > 0; i--) {
      dispatchKeyboardEvent(headerElements[i].nativeElement, 'keydown', UP_ARROW);
      fixture.detectChanges();
      expect(headers[i - 1].focus).toHaveBeenCalledTimes(1);
    }
  });
github angular / components / src / material / datepicker / month-view.spec.ts View on Github external
it('should go down a row on down arrow press', () => {
          dispatchKeyboardEvent(calendarBodyEl, 'keydown', DOWN_ARROW);
          fixture.detectChanges();

          expect(calendarInstance.date).toEqual(new Date(2017, JAN, 12));

          dispatchKeyboardEvent(calendarBodyEl, 'keydown', DOWN_ARROW);
          fixture.detectChanges();

          expect(calendarInstance.date).toEqual(new Date(2017, JAN, 19));
        });
github angular / components / src / material / datepicker / month-view.spec.ts View on Github external
it('should increment date on left arrow press in rtl', () => {
          dir.value = 'rtl';

          dispatchKeyboardEvent(calendarBodyEl, 'keydown', LEFT_ARROW);
          fixture.detectChanges();

          expect(calendarInstance.date).toEqual(new Date(2017, JAN, 6));

          dispatchKeyboardEvent(calendarBodyEl, 'keydown', LEFT_ARROW);
          fixture.detectChanges();

          expect(calendarInstance.date).toEqual(new Date(2017, JAN, 7));
        });
github angular / components / src / cdk / overlay / overlay-directives.spec.ts View on Github external
it('should emit the keydown events from the overlay', () => {
      expect(fixture.componentInstance.keydownHandler).not.toHaveBeenCalled();

      fixture.componentInstance.isOpen = true;
      fixture.detectChanges();

      const event = dispatchKeyboardEvent(document.body, 'keydown', A);
      fixture.detectChanges();

      expect(fixture.componentInstance.keydownHandler).toHaveBeenCalledWith(event);
    });
github angular / components / src / cdk / overlay / overlay-directives.spec.ts View on Github external
it('should close when pressing escape', () => {
    fixture.componentInstance.isOpen = true;
    fixture.detectChanges();

    const event = dispatchKeyboardEvent(document.body, 'keydown', ESCAPE);
    fixture.detectChanges();

    expect(overlayContainerElement.textContent!.trim()).toBe('',
        'Expected overlay to have been detached.');
    expect(event.defaultPrevented).toBe(true);
  });
github angular / components / src / material / datepicker / year-view.spec.ts View on Github external
it('should go to last month of the year on end press', () => {
          calendarInstance.date = new Date(2017, OCT, 31);
          fixture.detectChanges();

          dispatchKeyboardEvent(calendarBodyEl, 'keydown', END);
          fixture.detectChanges();

          expect(calendarInstance.date).toEqual(new Date(2017, DEC, 31));

          dispatchKeyboardEvent(calendarBodyEl, 'keydown', END);
          fixture.detectChanges();

          expect(calendarInstance.date).toEqual(new Date(2017, DEC, 31));
        });
github angular / components / src / material / datepicker / calendar.spec.ts View on Github external
it('should allow entering month view at disabled month', () => {
        let periodButton =
            calendarElement.querySelector('.mat-calendar-period-button') as HTMLElement;
        dispatchMouseEvent(periodButton, 'click');
        fixture.detectChanges();

        (calendarElement.querySelector('.mat-calendar-body-active') as HTMLElement).click();
        fixture.detectChanges();

        calendarInstance.activeDate = new Date(2017, NOV, 1);
        fixture.detectChanges();

        expect(calendarInstance.currentView).toBe('year');

        tableBodyEl = calendarElement.querySelector('.mat-calendar-body') as HTMLElement;
        dispatchKeyboardEvent(tableBodyEl, 'keydown', ENTER);
        fixture.detectChanges();

        expect(calendarInstance.currentView).toBe('month');
        expect(testComponent.selected).toBeUndefined();
      });
    });
github angular / components / src / material / autocomplete / autocomplete.spec.ts View on Github external
expect(() => {
      dispatchKeyboardEvent(fixture.nativeElement.querySelector('input'), 'keydown', SPACE);
      fixture.detectChanges();
    }).not.toThrow();
  });
github angular / components / src / material / stepper / stepper.spec.ts View on Github external
function assertSelectKeyWithModifierInteraction(fixture: ComponentFixture,
                                                stepHeaders: DebugElement[],
                                                orientation: StepperOrientation,
                                                selectionKey: number) {
  const stepperComponent = fixture.debugElement.query(By.directive(MatStepper))!.componentInstance;
  const modifiers = ['altKey', 'shiftKey', 'ctrlKey', 'metaKey'];

  expect(stepperComponent._getFocusIndex()).toBe(0);
  expect(stepperComponent.selectedIndex).toBe(0);

  dispatchKeyboardEvent(stepHeaders[0].nativeElement, 'keydown',
      orientation === 'vertical' ? DOWN_ARROW : RIGHT_ARROW);
  fixture.detectChanges();

  expect(stepperComponent._getFocusIndex())
      .toBe(1, 'Expected index of focused step to increase by 1 after pressing the next key.');
  expect(stepperComponent.selectedIndex)
      .toBe(0, 'Expected index of selected step to remain unchanged after pressing the next key.');

  modifiers.forEach(modifier => {
    const event: KeyboardEvent = createKeyboardEvent('keydown', selectionKey);
    Object.defineProperty(event, modifier, {get: () => true});
    dispatchEvent(stepHeaders[1].nativeElement, event);
    fixture.detectChanges();

    expect(stepperComponent.selectedIndex).toBe(0, `Expected selected index to remain unchanged ` +
        `when pressing the selection key with ${modifier} modifier.`);
github angular / components / src / material / stepper / stepper.spec.ts View on Github external
function assertCorrectKeyboardInteraction(fixture: ComponentFixture,
                                          stepHeaders: DebugElement[],
                                          orientation: StepperOrientation) {
  let stepperComponent = fixture.debugElement.query(By.directive(MatStepper))!.componentInstance;
  let nextKey = orientation === 'vertical' ? DOWN_ARROW : RIGHT_ARROW;
  let prevKey = orientation === 'vertical' ? UP_ARROW : LEFT_ARROW;

  expect(stepperComponent._getFocusIndex()).toBe(0);
  expect(stepperComponent.selectedIndex).toBe(0);

  let stepHeaderEl = stepHeaders[0].nativeElement;
  dispatchKeyboardEvent(stepHeaderEl, 'keydown', nextKey);
  fixture.detectChanges();

  expect(stepperComponent._getFocusIndex())
      .toBe(1, 'Expected index of focused step to increase by 1 after pressing the next key.');
  expect(stepperComponent.selectedIndex)
      .toBe(0, 'Expected index of selected step to remain unchanged after pressing the next key.');

  stepHeaderEl = stepHeaders[1].nativeElement;
  dispatchKeyboardEvent(stepHeaderEl, 'keydown', ENTER);
  fixture.detectChanges();

  expect(stepperComponent._getFocusIndex())
      .toBe(1, 'Expected index of focused step to remain unchanged after ENTER event.');
  expect(stepperComponent.selectedIndex)
      .toBe(1,
          'Expected index of selected step to change to index of focused step after ENTER event.');