Merge branch 'master' into feat/waitfor-perf

Author: kentcdodds

.all-contributorsrc

@@ -917,6 +917,53 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "mzdunek93",
+      "name": "Michał Zdunek",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/10826511?v=4",
+      "profile": "https://github.com/mzdunek93",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "Lagily",
+      "name": "Ali Nasserzadeh",
+      "avatar_url": "https://avatars2.githubusercontent.com/u/42535205?v=4",
+      "profile": "https://github.com/Lagily",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "darekkay",
+      "name": "Darek Kay",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/3101914?v=4",
+      "profile": "https://darekkay.com",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "Lukas-Kullmann",
+      "name": "Lukas",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/387547?v=4",
+      "profile": "https://github.com/Lukas-Kullmann",
+      "contributions": [
+        "code",
+        "test"
+      ]
+    },
+    {
+      "login": "pelotom",
+      "name": "Tom Crockett",
+      "avatar_url": "https://avatars2.githubusercontent.com/u/128019?v=4",
+      "profile": "https://twitter.com/pelotom",
+      "contributions": [
+        "code",
+        "test"
+      ]
     }
   ],
   "repoHost": "https://github.com"

README.md

@@ -251,6 +251,11 @@ Thanks goes to these people ([emoji key][emojis]):
   <tr>
     <td align="center"><a href="https://github.com/nstepien"><img src="https://avatars0.githubusercontent.com/u/567105?v=4" width="100px;" alt=""/><br /><sub><b>Nicolas Stepien</b></sub></a><br /><a href="https://github.com/testing-library/dom-testing-library/commits?author=nstepien" title="Code">💻</a></td>
     <td align="center"><a href="https://knpw.rs"><img src="https://avatars0.githubusercontent.com/u/174864?v=4" width="100px;" alt=""/><br /><sub><b>Ken Powers</b></sub></a><br /><a href="https://github.com/testing-library/dom-testing-library/commits?author=knpwrs" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/mzdunek93"><img src="https://avatars0.githubusercontent.com/u/10826511?v=4" width="100px;" alt=""/><br /><sub><b>Michał Zdunek</b></sub></a><br /><a href="https://github.com/testing-library/dom-testing-library/commits?author=mzdunek93" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/Lagily"><img src="https://avatars2.githubusercontent.com/u/42535205?v=4" width="100px;" alt=""/><br /><sub><b>Ali Nasserzadeh</b></sub></a><br /><a href="https://github.com/testing-library/dom-testing-library/commits?author=Lagily" title="Code">💻</a></td>
+    <td align="center"><a href="https://darekkay.com"><img src="https://avatars0.githubusercontent.com/u/3101914?v=4" width="100px;" alt=""/><br /><sub><b>Darek Kay</b></sub></a><br /><a href="https://github.com/testing-library/dom-testing-library/commits?author=darekkay" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/Lukas-Kullmann"><img src="https://avatars0.githubusercontent.com/u/387547?v=4" width="100px;" alt=""/><br /><sub><b>Lukas</b></sub></a><br /><a href="https://github.com/testing-library/dom-testing-library/commits?author=Lukas-Kullmann" title="Code">💻</a> <a href="https://github.com/testing-library/dom-testing-library/commits?author=Lukas-Kullmann" title="Tests">⚠️</a></td>
+    <td align="center"><a href="https://twitter.com/pelotom"><img src="https://avatars2.githubusercontent.com/u/128019?v=4" width="100px;" alt=""/><br /><sub><b>Tom Crockett</b></sub></a><br /><a href="https://github.com/testing-library/dom-testing-library/commits?author=pelotom" title="Code">💻</a> <a href="https://github.com/testing-library/dom-testing-library/commits?author=pelotom" title="Tests">⚠️</a></td>
   </tr>
 </table>
 

package.json

@@ -40,8 +40,8 @@
   "dependencies": {
     "@babel/runtime": "^7.9.6",
     "aria-query": "^4.0.2",
-    "dom-accessibility-api": "^0.4.3",
-    "pretty-format": "^26.0.1"
+    "dom-accessibility-api": "^0.4.4",
+    "pretty-format": "^25.5.0"
   },
   "devDependencies": {
     "dtslint": "^3.4.2",
@@ -50,7 +50,7 @@
     "jest-serializer-ansi": "^1.0.3",
     "jest-watch-select-projects": "^2.0.0",
     "jsdom": "^16.2.2",
-    "kcd-scripts": "^6.0.0"
+    "kcd-scripts": "^6.2.0"
   },
   "eslintConfig": {
     "extends": "./node_modules/kcd-scripts/eslint.js",

src/__tests__/role.js

@@ -349,6 +349,35 @@ test('has no useful error message in findBy', async () => {
   await expect(findByRole('option', {timeout: 1})).rejects.toThrow('Unable to find role="option"')
 })
 
+test('explicit role is most specific', () => {
+  const {getByRole} = renderIntoDocument(
+    `<button role="tab" aria-label="my-tab" />`,
+  )
+
+  expect(() => getByRole('button')).toThrowErrorMatchingInlineSnapshot(`
+"Unable to find an accessible element with the role "button"
+
+Here are the accessible roles:
+
+  tab:
+
+  Name "my-tab":
+  <button
+    aria-label="my-tab"
+    role="tab"
+  />
+
+  --------------------------------------------------
+
+<body>
+  <button
+    aria-label="my-tab"
+    role="tab"
+  />
+</body>"
+`)
+})
+
 describe('configuration', () => {
   let originalConfig
   beforeEach(() => {

src/__tests__/wait-for-element.js

@@ -22,7 +22,7 @@ test('waits for element to appear in the document', async () => {
   expect(console.warn.mock.calls).toMatchInlineSnapshot(`
     Array [
       Array [
-        "\`waitForElement\` has been deprecated. Use a \`find*\` query (preferred: https://testing-library.com/docs/dom-testing-library/api-queries#findby) or use \`waitFor\` instead (it's the same API, so you can find/replace): https://testing-library.com/docs/dom-testing-library/api-async#waitfor",
+        "\`waitForElement\` has been deprecated. Use a \`find*\` query (preferred: https://testing-library.com/docs/dom-testing-library/api-queries#findby) or use \`waitFor\` instead: https://testing-library.com/docs/dom-testing-library/api-async#waitfor",
       ],
     ]
   `)

src/role-helpers.js

@@ -134,7 +134,13 @@ function getRoles(container, {hidden = false} = {}) {
       return hidden === false ? isInaccessible(element) === false : true
     })
     .reduce((acc, node) => {
-      const roles = getImplicitAriaRoles(node)
+      let roles = []
+      // TODO: This violates html-aria which does not allow any role on every element
+      if (node.hasAttribute('role')) {
+        roles = node.getAttribute('role').split(' ').slice(0, 1)
+      } else {
+        roles = getImplicitAriaRoles(node)
+      }
 
       return roles.reduce(
         (rolesAcc, role) =>

src/wait-for-element.js

@@ -9,7 +9,7 @@ async function waitForElement(callback, options) {
   if (!hasWarned) {
     hasWarned = true
     console.warn(
-      `\`waitForElement\` has been deprecated. Use a \`find*\` query (preferred: https://testing-library.com/docs/dom-testing-library/api-queries#findby) or use \`waitFor\` instead (it's the same API, so you can find/replace): https://testing-library.com/docs/dom-testing-library/api-async#waitfor`,
+      `\`waitForElement\` has been deprecated. Use a \`find*\` query (preferred: https://testing-library.com/docs/dom-testing-library/api-queries#findby) or use \`waitFor\` instead: https://testing-library.com/docs/dom-testing-library/api-async#waitfor`,
     )
   }
   if (!callback) {

types/__tests__/type-tests.ts

@@ -2,10 +2,13 @@ import {
   fireEvent,
   isInaccessible,
   queries,
+  buildQueries,
+  queryAllByAttribute,
   screen,
   waitFor,
   waitForElementToBeRemoved,
-} from '../index'
+  MatcherOptions,
+} from '@testing-library/dom'
 
 const {
   getByText,
@@ -42,6 +45,42 @@ async function testQueries() {
   await screen.findAllByText('bar', undefined, {timeout: 10})
 }
 
+async function testQueryHelpers() {
+  const element = document.createElement('div')
+  const includesAutomationId = (content: string, automationId: string) =>
+    content.split(/\s+/).some(id => id === automationId)
+  const queryAllByAutomationId = (
+    container: HTMLElement,
+    automationId: string | string[],
+    options?: MatcherOptions,
+  ) =>
+    queryAllByAttribute(
+      'testId',
+      container,
+      content =>
+        Array.isArray(automationId)
+          ? automationId.every(id => includesAutomationId(content, id))
+          : includesAutomationId(content, automationId),
+      options,
+    )
+  const [
+    queryByAutomationId,
+    getAllByAutomationId,
+    getByAutomationId,
+    findAllByAutomationId,
+    findByAutomationId,
+  ] = buildQueries(
+    queryAllByAutomationId,
+    () => 'Multiple Error',
+    () => 'Missing Error',
+  )
+  queryByAutomationId(element, 'id')
+  getAllByAutomationId(element, 'id')
+  getByAutomationId(element, ['id', 'automationId'])
+  findAllByAutomationId(element, 'id', {}, {timeout: 1000})
+  findByAutomationId(element, 'id', {}, {timeout: 1000})
+}
+
 async function testByRole() {
   const element = document.createElement('button')
   element.setAttribute('aria-hidden', 'true')
@@ -116,7 +155,14 @@ async function testWaitFors() {
 
   element.innerHTML = '<span>apple</span>'
 
-  await waitForElementToBeRemoved(() => getByText(element, 'apple'), {interval: 3000, container: element, timeout: 5000})
+  await waitForElementToBeRemoved(() => getByText(element, 'apple'), {
+    interval: 3000,
+    container: element,
+    timeout: 5000,
+  })
   await waitForElementToBeRemoved(getByText(element, 'apple'))
   await waitForElementToBeRemoved(getAllByText(element, 'apple'))
+
+  // $ExpectError
+  await waitFor(async () => {})
 }

types/queries.d.ts

@@ -60,7 +60,7 @@ export interface ByRoleOptions extends MatcherOptions {
     selected?: boolean;
     /**
      * Includes every role used in the `role` attribute
-     * For example *ByRole('progressbar', {queryFallbacks: true})` will find <div role="meter progresbar">`.
+     * For example *ByRole('progressbar', {queryFallbacks: true})` will find <div role="meter progressbar">`.
      */
     queryFallbacks?: boolean;
     /**

types/query-helpers.d.ts

@@ -1,46 +1,62 @@
-import { Matcher, MatcherOptions } from './matches';
+import { Matcher, MatcherOptions } from './matches'
+import { waitForOptions } from './wait-for'
 
 export interface SelectorMatcherOptions extends MatcherOptions {
-    selector?: string;
+  selector?: string
 }
 
 export type QueryByAttribute = (
-    attribute: string,
-    container: HTMLElement,
-    id: Matcher,
-    options?: MatcherOptions,
-) => HTMLElement | null;
+  attribute: string,
+  container: HTMLElement,
+  id: Matcher,
+  options?: MatcherOptions,
+) => HTMLElement | null
 
 export type AllByAttribute = (
-    attribute: string,
-    container: HTMLElement,
-    id: Matcher,
-    options?: MatcherOptions,
-) => HTMLElement[];
+  attribute: string,
+  container: HTMLElement,
+  id: Matcher,
+  options?: MatcherOptions,
+) => HTMLElement[]
 
-export const queryByAttribute: QueryByAttribute;
-export const queryAllByAttribute: AllByAttribute;
-export function getElementError(message: string, container: HTMLElement): Error;
+export const queryByAttribute: QueryByAttribute
+export const queryAllByAttribute: AllByAttribute
+export function getElementError(message: string, container: HTMLElement): Error
 
 /**
  * query methods have a common call signature. Only the return type differs.
  */
-export type QueryMethod<Arguments extends any[], Return> = (container: HTMLElement, ...args: Arguments) => Return;
-export type QueryBy<Arguments extends any[]> = QueryMethod<Arguments, HTMLElement | null>;
-export type GetAllBy<Arguments extends any[]> = QueryMethod<Arguments, HTMLElement[]>;
-export type FindAllBy<Arguments extends any[]> = QueryMethod<Arguments, Promise<HTMLElement[]>>;
-export type GetBy<Arguments extends any[]> = QueryMethod<Arguments, HTMLElement>;
-export type FindBy<Arguments extends any[]> = QueryMethod<Arguments, Promise<HTMLElement>>;
+export type QueryMethod<Arguments extends any[], Return> = (
+  container: HTMLElement,
+  ...args: Arguments
+) => Return
+export type QueryBy<Arguments extends any[]> = QueryMethod<
+  Arguments,
+  HTMLElement | null
+>
+export type GetAllBy<Arguments extends any[]> = QueryMethod<
+  Arguments,
+  HTMLElement[]
+>
+export type FindAllBy<Arguments extends any[]> = QueryMethod<
+  [Arguments[0], Arguments[1], waitForOptions],
+  Promise<HTMLElement[]>
+>
+export type GetBy<Arguments extends any[]> = QueryMethod<Arguments, HTMLElement>
+export type FindBy<Arguments extends any[]> = QueryMethod<
+  [Arguments[0], Arguments[1], waitForOptions],
+  Promise<HTMLElement>
+>
 
 export type BuiltQueryMethods<Arguments extends any[]> = [
-    QueryBy<Arguments>,
-    GetAllBy<Arguments>,
-    GetBy<Arguments>,
-    FindAllBy<Arguments>,
-    FindBy<Arguments>
-];
+  QueryBy<Arguments>,
+  GetAllBy<Arguments>,
+  GetBy<Arguments>,
+  FindAllBy<Arguments>,
+  FindBy<Arguments>,
+]
 export function buildQueries<Arguments extends any[]>(
-    queryByAll: GetAllBy<Arguments>,
-    getMultipleError: (container: HTMLElement, ...args: Arguments) => string,
-    getMissingError: (container: HTMLElement, ...args: Arguments) => string,
-): BuiltQueryMethods<Arguments>;
+  queryByAll: GetAllBy<Arguments>,
+  getMultipleError: (container: HTMLElement, ...args: Arguments) => string,
+  getMissingError: (container: HTMLElement, ...args: Arguments) => string,
+): BuiltQueryMethods<Arguments>

types/screen.d.ts

@@ -8,7 +8,7 @@ export type Screen<Q extends Queries = typeof queries> = BoundFunctions<Q> & {
      * of elements
      */
     debug: (
-        element: Element | HTMLDocument | Array<Element | HTMLDocument>,
+        element?: Element | HTMLDocument | Array<Element | HTMLDocument>,
         maxLength?: number,
         options?: OptionsReceived,
     ) => void;

types/tsconfig.json

@@ -9,9 +9,7 @@
     "strictNullChecks": true,
     "strictFunctionTypes": true,
     "noEmit": true,
-
-    // If the library is an external module (uses `export`), this allows your test file to import "mylib" instead of "./index".
-    // If the library is global (cannot be imported via `import` or `require`), leave this out.
-    "baseUrl": "."
+    "baseUrl": ".",
+    "paths": {"@testing-library/dom": ["."]}
   }
 }

types/wait-for.d.ts

@@ -1,11 +1,11 @@
 export interface waitForOptions {
-    container?: HTMLElement;
-    timeout?: number;
-    interval?: number;
-    mutationObserverOptions?: MutationObserverInit;
+  container?: HTMLElement
+  timeout?: number
+  interval?: number
+  mutationObserverOptions?: MutationObserverInit
 }
 
 export function waitFor<T>(
-    callback: () => T,
-    options?: waitForOptions,
-): Promise<T>;
+  callback: () => T extends Promise<any> ? never : T,
+  options?: waitForOptions,
+): Promise<T>