fix(types): add fourth param to build findAllBy and findBy queries (#574)

Author: mzdunek93

types/__tests__/type-tests.ts

@@ -2,9 +2,12 @@ import {
   fireEvent,
   isInaccessible,
   queries,
+  buildQueries,
+  queryAllByAttribute,
   screen,
   waitFor,
   waitForElementToBeRemoved,
+  MatcherOptions,
 } from '../index'
 
 const {
@@ -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,11 @@ 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'))
 }

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>