Migrate the rest of src (not stable yet)

Author: ghostd

src/get-queries-for-element.js

@@ -1,4 +1,4 @@
-import * as queries from './queries'
+import * as defaultQueries from './queries'
 
 export type BoundFunction<T> = T extends (
   attribute: string,
@@ -34,7 +34,22 @@ export interface Queries {
   [T: string]: Query
 }
 
-export function getQueriesForElement<T extends Queries = typeof queries>(
+/**
+ * @param {HTMLElement} element container
+ * @param {FuncMap} queries object of functions
+ * @param {Object} initialValue for reducer
+ * @returns {FuncMap} returns object of functions bound to container
+ */
+function getQueriesForElement<T extends Queries>(
   element: HTMLElement,
-  queriesToBind?: T,
-): BoundFunctions<T>
+  queries: Queries = defaultQueries,
+  initialValue = {},
+): BoundFunctions<T> {
+  return Object.keys(queries).reduce((helpers, key) => {
+    const fn: Query = queries[key]
+    helpers[key] = fn.bind(null, element)
+    return helpers
+  }, initialValue) as BoundFunctions<T>
+}
+
+export {getQueriesForElement}

types/get-queries-for-element.d.ts renamed to src/get-queries-for-element.ts

@@ -36,7 +36,7 @@ function fuzzyMatches(
 }
 
 function matches(
-  textToMatch: string,
+  textToMatch: string | undefined,
   node: HTMLElement | null,
   matcher: Matcher,
   normalizer: NormalizerFn,

src/index.js renamed to src/index.ts

@@ -1,18 +1,27 @@
 import {wrapAllByQueryWithSuggestion} from '../query-helpers'
 import {checkContainerType} from '../helpers'
-import {matches, fuzzyMatches, makeNormalizer, buildQueries} from './all-utils'
+import {
+  matches,
+  fuzzyMatches,
+  makeNormalizer,
+  buildQueries,
+  MatcherOptions,
+  Matcher,
+} from './all-utils'
 
 function queryAllByAltText(
-  container,
-  alt,
-  {exact = true, collapseWhitespace, trim, normalizer} = {},
+  container: HTMLElement,
+  alt: Matcher,
+  {exact = true, collapseWhitespace, trim, normalizer}: MatcherOptions = {},
 ) {
   checkContainerType(container)
   const matcher = exact ? matches : fuzzyMatches
   const matchNormalizer = makeNormalizer({collapseWhitespace, trim, normalizer})
-  return Array.from(container.querySelectorAll('img,input,area')).filter(node =>
+  return Array.from(
+    container.querySelectorAll('img,input,area'),
+  ).filter((node: HTMLElement) =>
     matcher(node.getAttribute('alt'), node, alt, matchNormalizer),
-  )
+  ) as HTMLElement[]
 }
 
 const getMultipleError = (c, alt) =>

src/matches.ts

@@ -6,30 +6,37 @@ import {
   fuzzyMatches,
   makeNormalizer,
   buildQueries,
+  Matcher,
+  MatcherOptions,
 } from './all-utils'
 
+function getElementValue(element: Element): string | undefined {
+  return (element as any).value
+}
+
 function queryAllByDisplayValue(
-  container,
-  value,
-  {exact = true, collapseWhitespace, trim, normalizer} = {},
+  container: HTMLElement,
+  value: Matcher,
+  {exact = true, collapseWhitespace, trim, normalizer}: MatcherOptions = {},
 ) {
   checkContainerType(container)
   const matcher = exact ? matches : fuzzyMatches
   const matchNormalizer = makeNormalizer({collapseWhitespace, trim, normalizer})
   return Array.from(container.querySelectorAll(`input,textarea,select`)).filter(
-    node => {
+    (node: HTMLElement) => {
       if (node.tagName === 'SELECT') {
-        const selectedOptions = Array.from(node.options).filter(
+        const selectElement = node as HTMLSelectElement
+        const selectedOptions = Array.from(selectElement.options).filter(
           option => option.selected,
         )
         return selectedOptions.some(optionNode =>
           matcher(getNodeText(optionNode), optionNode, value, matchNormalizer),
         )
       } else {
-        return matcher(node.value, node, value, matchNormalizer)
+        return matcher(getElementValue(node), node, value, matchNormalizer)
       }
     },
-  )
+  ) as HTMLElement[]
 }
 
 const getMultipleError = (c, value) =>

src/queries/all-utils.js renamed to src/queries/all-utils.ts

@@ -9,13 +9,16 @@ import {
   makeSingleQuery,
   wrapAllByQueryWithSuggestion,
   wrapSingleQueryWithSuggestion,
+  Matcher,
+  MatcherOptions,
+  SelectorMatcherOptions,
 } from './all-utils'
 import {queryAllByText} from './text'
 
 function queryAllLabelsByText(
-  container,
-  text,
-  {exact = true, trim, collapseWhitespace, normalizer} = {},
+  container: HTMLElement,
+  text: Matcher,
+  {exact = true, trim, collapseWhitespace, normalizer}: MatcherOptions = {},
 ) {
   const matcher = exact ? matches : fuzzyMatches
   const matchNormalizer = makeNormalizer({collapseWhitespace, trim, normalizer})
@@ -35,13 +38,19 @@ function queryAllLabelsByText(
     })
 
     return matcher(textToMatch, label, text, matchNormalizer)
-  })
+  }) as HTMLElement[]
 }
 
 function queryAllByLabelText(
-  container,
-  text,
-  {selector = '*', exact = true, collapseWhitespace, trim, normalizer} = {},
+  container: HTMLElement,
+  text: Matcher,
+  {
+    selector = '*',
+    exact = true,
+    collapseWhitespace,
+    trim,
+    normalizer,
+  }: SelectorMatcherOptions = {},
 ) {
   checkContainerType(container)
 
@@ -51,7 +60,7 @@ function queryAllByLabelText(
     normalizer: matchNormalizer,
   })
   const labelledElements = labels
-    .reduce((matchedElements, label) => {
+    .reduce((matchedElements, label: HTMLLabelElement) => {
       const elementsForLabel = []
       if (label.control) {
         elementsForLabel.push(label.control)
@@ -112,7 +121,7 @@ function queryAllByLabelText(
 
   return Array.from(
     new Set([...labelledElements, ...ariaLabelledElements]),
-  ).filter(element => element.matches(selector))
+  ).filter(element => element.matches(selector)) as HTMLElement[]
 }
 
 // the getAll* query would normally look like this:

src/queries/alt-text.js renamed to src/queries/alt-text.ts

@@ -1,10 +1,19 @@
 import {wrapAllByQueryWithSuggestion} from '../query-helpers'
 import {checkContainerType} from '../helpers'
-import {queryAllByAttribute, buildQueries} from './all-utils'
+import {
+  queryAllByAttribute,
+  buildQueries,
+  Matcher,
+  MatcherOptions,
+} from './all-utils'
 
-function queryAllByPlaceholderText(...args) {
-  checkContainerType(...args)
-  return queryAllByAttribute('placeholder', ...args)
+function queryAllByPlaceholderText(
+  container: HTMLElement,
+  placeholder: Matcher,
+  options?: MatcherOptions,
+) {
+  checkContainerType(container)
+  return queryAllByAttribute('placeholder', container, placeholder, options)
 }
 const getMultipleError = (c, text) =>
   `Found multiple elements with the placeholder text of: ${text}`

src/queries/display-value.js renamed to src/queries/display-value.ts

@@ -14,12 +14,40 @@ import {
   fuzzyMatches,
   getConfig,
   makeNormalizer,
+  Matcher,
+  MatcherOptions,
   matches,
 } from './all-utils'
 
+export interface ByRoleOptions extends MatcherOptions {
+  /**
+   * If true includes elements in the query set that are usually excluded from
+   * the accessibility tree. `role="none"` or `role="presentation"` are included
+   * in either case.
+   */
+  hidden?: boolean
+  /**
+   * If true only includes elements in the query set that are marked as
+   * selected in the accessibility tree, i.e., `aria-selected="true"`
+   */
+  selected?: boolean
+  /**
+   * Includes every role used in the `role` attribute
+   * For example *ByRole('progressbar', {queryFallbacks: true})` will find <div role="meter progressbar">`.
+   */
+  queryFallbacks?: boolean
+  /**
+   * Only considers  elements with the specified accessible name.
+   */
+  name?:
+    | string
+    | RegExp
+    | ((accessibleName: string, element: Element) => boolean)
+}
+
 function queryAllByRole(
-  container,
-  role,
+  container: HTMLElement,
+  role: Matcher,
   {
     exact = true,
     collapseWhitespace,
@@ -29,7 +57,7 @@ function queryAllByRole(
     normalizer,
     queryFallbacks = false,
     selected,
-  } = {},
+  }: ByRoleOptions = {},
 ) {
   checkContainerType(container)
   const matcher = exact ? matches : fuzzyMatches
@@ -52,7 +80,7 @@ function queryAllByRole(
   }
 
   return Array.from(container.querySelectorAll('*'))
-    .filter(node => {
+    .filter((node: HTMLElement) => {
       const isRoleSpecifiedExplicitly = node.hasAttribute('role')
 
       if (isRoleSpecifiedExplicitly) {
@@ -85,14 +113,14 @@ function queryAllByRole(
       // don't care if aria attributes are unspecified
       return true
     })
-    .filter(element => {
+    .filter((element: HTMLElement) => {
       return hidden === false
         ? isInaccessible(element, {
             isSubtreeInaccessible: cachedIsSubtreeInaccessible,
           }) === false
         : true
     })
-    .filter(element => {
+    .filter((element: HTMLElement) => {
       if (name === undefined) {
         // Don't care
         return true
@@ -104,7 +132,7 @@ function queryAllByRole(
         name,
         text => text,
       )
-    })
+    }) as HTMLElement[]
 }
 
 const getMultipleError = (c, role) =>
@@ -113,16 +141,17 @@ const getMultipleError = (c, role) =>
 const getMissingError = (
   container,
   role,
-  {hidden = getConfig().defaultHidden, name} = {},
+  {hidden = getConfig().defaultHidden, name}: ByRoleOptions = {},
 ) => {
   if (getConfig()._disableExpensiveErrorDiagnostics) {
     return `Unable to find role="${role}"`
   }
 
   let roles = ''
-  Array.from(container.children).forEach(childElement => {
+  Array.from(container.children).forEach((childElement: HTMLElement) => {
     roles += prettyRoles(childElement, {
       hidden,
+      // @ts-ignore FIXME remove this code? prettyRoles does not seem handle 'includeName'
       includeName: name !== undefined,
     })
   })

src/queries/index.js renamed to src/queries/index.ts

@@ -1,12 +1,22 @@
 import {checkContainerType} from '../helpers'
 import {wrapAllByQueryWithSuggestion} from '../query-helpers'
-import {queryAllByAttribute, getConfig, buildQueries} from './all-utils'
+import {
+  queryAllByAttribute,
+  getConfig,
+  buildQueries,
+  Matcher,
+  MatcherOptions,
+} from './all-utils'
 
 const getTestIdAttribute = () => getConfig().testIdAttribute
 
-function queryAllByTestId(...args) {
-  checkContainerType(...args)
-  return queryAllByAttribute(getTestIdAttribute(), ...args)
+function queryAllByTestId(
+  container: HTMLElement,
+  testId: Matcher,
+  options?: MatcherOptions,
+) {
+  checkContainerType(container)
+  return queryAllByAttribute(getTestIdAttribute(), container, testId, options)
 }
 
 const getMultipleError = (c, id) =>