feat: add tab user-event

Author: timdeschryver

projects/testing-library/ng-package.json

@@ -5,5 +5,10 @@
   "lib": {
     "entryFile": "src/public_api.ts"
   },
-  "whitelistedNonPeerDependencies": ["@testing-library/dom", "@phenomnomnominal/tsquery", "tslint"]
+  "whitelistedNonPeerDependencies": [
+    "@testing-library/dom",
+    "@testing-library/user-event",
+    "@phenomnomnominal/tsquery",
+    "tslint"
+  ]
 }

projects/testing-library/ng-package.prod.json

@@ -5,5 +5,10 @@
   "lib": {
     "entryFile": "src/public_api.ts"
   },
-  "whitelistedNonPeerDependencies": ["@testing-library/dom", "@phenomnomnominal/tsquery", "tslint"]
+  "whitelistedNonPeerDependencies": [
+    "@testing-library/dom",
+    "@testing-library/user-event",
+    "@phenomnomnominal/tsquery",
+    "tslint"
+  ]
 }

projects/testing-library/package.json

@@ -30,6 +30,7 @@
   },
   "dependencies": {
     "@testing-library/dom": "^6.12.2",
+    "@testing-library/user-event": "^8.1.0",
     "@phenomnomnominal/tsquery": "^3.0.0",
     "tslint": "^5.16.0"
   },

projects/testing-library/src/lib/testing-library.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, OnInit, Type, NgZone } from '@angular/core';
+import { Component, Type, NgZone } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
@@ -15,7 +15,7 @@ import {
   waitForElementToBeRemoved,
 } from '@testing-library/dom';
 import { RenderComponentOptions, RenderDirectiveOptions, RenderResult } from './models';
-import { createSelectOptions, createType } from './user-events';
+import { createSelectOptions, createType, tab } from './user-events';
 
 @Component({ selector: 'wrapper-component', template: '' })
 class WrapperComponent {}
@@ -170,6 +170,7 @@ export async function render<SutType, WrapperType = SutType>(
     debug: (element = fixture.nativeElement) => console.log(prettyDOM(element)),
     type: createType(eventsWithDetectChanges),
     selectOptions: createSelectOptions(eventsWithDetectChanges),
+    tab,
     waitForDomChange: componentWaitForDomChange,
     waitForElement: componentWaitForElement,
     waitForElementToBeRemoved: componentWaitForElementToBeRemoved,

projects/testing-library/src/lib/user-events/index.ts

@@ -1,6 +1,7 @@
 import { fireEvent } from '@testing-library/dom';
 import { createType } from './type';
 import { createSelectOptions } from './selectOptions';
+import { tab } from './tab';
 
 export interface UserEvents {
   /**
@@ -31,9 +32,22 @@ export interface UserEvents {
    * component.selectOptions(component.getByLabelText('Fruit'), ['Blueberry'. 'Grape'])
    */
   selectOptions: ReturnType<typeof createSelectOptions>;
+
+  /**
+   * @description
+   * Fires a tab event changing the document.activeElement in the same way the browser does.
+   *
+   * @argument
+   * shift: can be set to true to invert tab direction (default false)
+   * focusTrap: a container element to restrict the tabbing within (default document)
+   *
+   * @example
+   * component.tab()
+   */
+  tab: typeof tab;
 }
 
 const type = createType(fireEvent);
 const selectOptions = createSelectOptions(fireEvent);
 
-export { createType, type, createSelectOptions, selectOptions };
+export { createType, type, createSelectOptions, selectOptions, tab };

projects/testing-library/src/lib/user-events/tab.ts

@@ -0,0 +1,10 @@
+import userEvent from '@testing-library/user-event';
+
+export interface ITabUserOptions {
+  shift?: boolean;
+  focusTrap?: Document | Element;
+}
+
+export function tab(options?: ITabUserOptions) {
+  return userEvent.tab(options);
+}

projects/testing-library/tests/user-events/tab.spec.ts

@@ -0,0 +1,38 @@
+import { Component } from '@angular/core';
+import { render } from '../../src/public_api';
+
+test('cycles through elements in document tab order', async () => {
+  @Component({
+    selector: 'fixture',
+    template: `
+      <div>
+        <input data-testid="element" type="checkbox" />
+        <input data-testid="element" type="radio" />
+        <input data-testid="element" type="number" />
+      </div>
+    `,
+  })
+  class FixtureComponent {}
+
+  const component = await render(FixtureComponent);
+  const [checkbox, radio, number] = component.getAllByTestId('element');
+
+  expect(document.body).toHaveFocus();
+
+  component.tab();
+
+  expect(checkbox).toHaveFocus();
+
+  component.tab();
+
+  expect(radio).toHaveFocus();
+
+  component.tab();
+
+  expect(number).toHaveFocus();
+
+  component.tab();
+
+  // cycle goes back to first element
+  expect(checkbox).toHaveFocus();
+});