From 3341dd102c8a9be185f806bb19256220c734ffd7 Mon Sep 17 00:00:00 2001 From: Christopher Martin Date: Mon, 11 Nov 2019 22:33:29 +0000 Subject: [PATCH 1/4] Adds the tab function --- typings/index.d.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/typings/index.d.ts b/typings/index.d.ts index f8ffea14..db96f178 100644 --- a/typings/index.d.ts +++ b/typings/index.d.ts @@ -15,6 +15,7 @@ declare const userEvent: { text: string, userOpts?: IUserOptions ) => Promise; + tab: (userOpts?: { shift: boolean }) = void; }; export default userEvent; From d38f9d2cc1ae78cc675f42eab4181028d3d015b0 Mon Sep 17 00:00:00 2001 From: Christopher Martin Date: Mon, 11 Nov 2019 22:40:19 +0000 Subject: [PATCH 2/4] Adds the tab function --- README.md | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/README.md b/README.md index 69268ea9..baac7a8a 100644 --- a/README.md +++ b/README.md @@ -167,6 +167,30 @@ expect(getByTestId("val3").selected).toBe(true); The `values` parameter can be either an array of values or a singular scalar value. +### `tab([options])` + +Focuses elements in the correct tab order. + +```jsx +import React from "react"; +import { render } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; + +test("tab", () => { + const { getByText, getByTestId } = render( +
+ + +
+ ); + + userEvent.tab(); + expect(getByTestId("checkbox")).toBe(document.activeElement); +}); +``` + +If `options.shift` is `true`, `tab` will cycle backwards through the tab order. + ## Contributors Thanks goes to these wonderful people From 726e8aeab6916fac760a695bf2a4b7346968721f Mon Sep 17 00:00:00 2001 From: Christopher Martin Date: Mon, 11 Nov 2019 22:43:33 +0000 Subject: [PATCH 3/4] Fixes typo --- typings/index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/typings/index.d.ts b/typings/index.d.ts index db96f178..47020552 100644 --- a/typings/index.d.ts +++ b/typings/index.d.ts @@ -15,7 +15,7 @@ declare const userEvent: { text: string, userOpts?: IUserOptions ) => Promise; - tab: (userOpts?: { shift: boolean }) = void; + tab: (userOpts?: { shift: boolean }) => void; }; export default userEvent; From 28bc4a0f64f0634d36998f5d0042842f84bc8c0c Mon Sep 17 00:00:00 2001 From: Christopher Martin Date: Tue, 17 Dec 2019 21:39:17 +0000 Subject: [PATCH 4/4] Adds focusTrap user option --- typings/index.d.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/typings/index.d.ts b/typings/index.d.ts index 47020552..8fef3d9e 100644 --- a/typings/index.d.ts +++ b/typings/index.d.ts @@ -4,6 +4,11 @@ export interface IUserOptions { delay?: number; } +interface ITabUserOptions { + shift?: boolean; + focusTrap?: Document | Element; +} + type TargetElement = Element | Window; declare const userEvent: { @@ -15,7 +20,7 @@ declare const userEvent: { text: string, userOpts?: IUserOptions ) => Promise; - tab: (userOpts?: { shift: boolean }) => void; + tab: (userOpts?: ITabUserOptions) => void; }; export default userEvent;