fix: make sure options types match the of @testing-library/dom (#252)

Co-authored-by: Tim Pinington <[email protected]>

Author: timmak

src/index.ts

@@ -1,11 +1,6 @@
 import { ClientFunction, Selector } from "testcafe";
 import { Matcher, queries } from "@testing-library/dom";
-import type {
-  Options,
-  QueryName,
-  QueryOptions,
-  WithinSelectors,
-} from "./types";
+import type { Options, QueryName, WithinSelectors } from "./types";
 
 declare global {
   interface Window {
@@ -71,9 +66,14 @@ function isSelector(sel: any): sel is Selector {
   return sel.constructor.name === SELECTOR_TYPE;
 }
 
-const bindFunction = <T extends QueryName>(queryName: T) => {
+const bindFunction = <
+  T extends QueryName,
+  Options = Parameters<typeof queries[T]>[2]
+>(
+  queryName: T
+) => {
   const query = queryName.replace("find", "query") as T;
-  return (matcher: Matcher, options?: QueryOptions) => {
+  return (matcher: Matcher, options?: Options) => {
     return Selector(
       () =>
         window.TestingLibraryDom[query](document.body, matcher, options) as

src/types.ts

@@ -1,10 +1,4 @@
-import {
-  Config,
-  BoundFunction,
-  queries,
-  Matcher,
-  MatcherOptions,
-} from "@testing-library/dom";
+import { Config, BoundFunction, queries } from "@testing-library/dom";
 
 export type Options = Pick<Config, "testIdAttribute">;
 
@@ -17,7 +11,4 @@ export type TestcafeBoundFunctions<T> = {
 };
 
 export type QueryName = keyof typeof queries;
-
-export type QueryOptions = MatcherOptions;
-
 export type WithinSelectors = TestcafeBoundFunctions<typeof queries>;

tests/testcafe/screen.ts

@@ -19,3 +19,9 @@ test("getByLabelText", async (t) => {
     "Hello Input Labelled By Id"
   );
 });
+
+test("getByRole", async (t) => {
+  await t.click(
+    screen.getByRole("textbox", { name: "Label For Input Labelled By Id" })
+  );
+});