feat(dom-testing-library): Types for 6.12 (#41951)

* feat(screen): Add debug

* feat(fireEvent): Add popState

* feat(ByRole): Add queryFallbacks

* chore: Bump version

types/testing-library__dom/events.d.ts

@@ -35,6 +35,7 @@ export type EventType =
     | 'mouseOut'
     | 'mouseOver'
     | 'mouseUp'
+    | 'popState'
     | 'select'
     | 'touchCancel'
     | 'touchEnd'

types/testing-library__dom/index.d.ts

@@ -1,4 +1,4 @@
-// Type definitions for @testing-library/dom 6.11
+// Type definitions for @testing-library/dom 6.12
 // Project: https://github.com/testing-library/dom-testing-library
 // Definitions by: Alex Krolick <https://github.com/alexkrolick>
 //                 Kent C Dodds <https://github.com/kentcdodds>

types/testing-library__dom/queries.d.ts

@@ -54,6 +54,11 @@ export interface ByRoleOptions extends MatcherOptions {
      * @default false
      */
     hidden?: boolean;
+    /**
+     * Includes every role used in the `role` attribute
+     * For example *ByRole('progressbar', {queryFallbacks: true})` will find <div role="meter progresbar">`.
+     */
+    queryFallbacks?: boolean;
 }
 
 export type AllByRole = (container: HTMLElement, role: Matcher, options?: ByRoleOptions) => HTMLElement[];

types/testing-library__dom/screen.d.ts

@@ -1,6 +1,17 @@
 import { BoundFunctions, Queries } from './get-queries-for-element';
 import * as queries from './queries';
+import { OptionsReceived } from 'pretty-format';
 
-export type Screen<Q extends Queries = typeof queries> = BoundFunctions<Q>;
+export type Screen<Q extends Queries = typeof queries> = BoundFunctions<Q> & {
+    /**
+     * Convenience function for `pretty-dom` which also allows an array
+     * of elements
+     */
+    debug: (
+        element: Element | HTMLDocument | Array<Element | HTMLDocument>,
+        maxLength?: number,
+        options?: OptionsReceived,
+    ) => void;
+};
 
 export const screen: Screen;

types/testing-library__dom/testing-library__dom-tests.ts

@@ -1,6 +1,6 @@
-import { queries, screen, isInaccessible } from '@testing-library/dom';
+import { fireEvent, queries, screen, isInaccessible } from '@testing-library/dom';
 
-const { getByText, queryByText, findByText, getAllByText, queryAllByText, findAllByText, queryByRole, findByRole } = queries;
+const { getByText, queryByText, findByText, getAllByText, queryAllByText, findAllByText, queryAllByRole, queryByRole, findByRole } = queries;
 
 async function testQueries() {
     // element queries
@@ -19,7 +19,7 @@ async function testQueries() {
     screen.queryByText('foo');
     await screen.findByText('foo');
     await screen.findByText('foo', undefined, { timeout: 10 });
-    screen.getAllByText('bar');
+    screen.debug(screen.getAllByText('bar'));
     screen.queryAllByText('bar');
     await screen.findAllByText('bar');
     await screen.findAllByText('bar', undefined, { timeout: 10 });
@@ -37,9 +37,18 @@ async function testByRole() {
 
     console.assert(await findByRole(element, 'button', undefined, { timeout: 10 }) === null);
     console.assert(await findByRole(element, 'button', { hidden: true }, { timeout: 10 }) !== null);
+
+    console.assert(queryAllByRole(document.body, 'progressbar', {queryFallbacks: true}).length === 1);
 }
 
 function testA11yHelper() {
     const element = document.createElement('svg');
     console.assert(!isInaccessible(element));
 }
+
+function eventTest() {
+    fireEvent.popState(window, {
+        location: 'http://www.example.com/?page=1',
+        state: { page: 1 },
+    });
+}