fix: correctly type testcafe bound queries (#249)

* fix(typings): Correctly type function MatcherOptions

* Remove unused import

* no need for default value

Author: Meemaw

Diff for: src/index.ts

@@ -1,6 +1,11 @@
 import { ClientFunction, Selector } from "testcafe";
-import { queries } from "@testing-library/dom";
-import type { Options, QueryName, WithinSelectors } from "./types";
+import { Matcher, queries } from "@testing-library/dom";
+import type {
+  Options,
+  QueryName,
+  QueryOptions,
+  WithinSelectors,
+} from "./types";
 
 declare global {
   interface Window {
@@ -68,18 +73,19 @@ function isSelector(sel: any): sel is Selector {
 
 const bindFunction = <T extends QueryName>(queryName: T) => {
   const query = queryName.replace("find", "query") as T;
-  return Selector(
-    (matcher, ...options) => {
-      return window.TestingLibraryDom[query](
-        document.body,
-        matcher,
-        ...options
-      ) as Node | Node[] | NodeList | HTMLCollection;
-    },
-    {
-      dependencies: { query },
-    }
-  );
+  return (matcher: Matcher, options?: QueryOptions) => {
+    return Selector(
+      () =>
+        window.TestingLibraryDom[query](document.body, matcher, options) as
+          | Node
+          | Node[]
+          | NodeList
+          | HTMLCollection,
+      {
+        dependencies: { query, matcher, options },
+      }
+    );
+  };
 };
 
 export const getByLabelText = bindFunction("getByLabelText");

Diff for: src/types.ts

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

Diff for: test-app/index.html

@@ -107,6 +107,12 @@ <h2>navigate</h2>
       document
         .querySelector('[data-testid="image-with-random-alt-tag"]')
         .setAttribute("alt", "Image Random Alt Text " + Math.random());
+
+      setTimeout(() => {
+        document
+          .querySelector("body")
+          .appendChild(document.createTextNode("Late content!"));
+      }, 15000);
     </script>
   </body>
 </html>

Diff for: tests/testcafe/selectors.ts

@@ -5,6 +5,7 @@ import {
   getByAltText,
   getByTestId,
   getAllByText,
+  queryByText,
   queryAllByText,
   findByText,
 } from "../../src/";
@@ -22,6 +23,10 @@ test("getByText", async (t) => {
   await t.click(getByText("getByText"));
 });
 
+test("queryByText with timeout as property", async (t) => {
+  await t.click(queryByText("Late content!").with({ timeout: 20000 }));
+});
+
 test("getByLabelText", async (t) => {
   await t.typeText(
     getByLabelText("Label For Input Labelled By Id"),
@@ -54,7 +59,6 @@ test("queryAllByText", async (t) => {
 
 test("findByText async", async (t) => {
   await t.click(getByText("delayed"));
-
   await t.expect(findByText("updated button async")).ok();
 });
 

Diff for: tests/testcafe/within.ts

@@ -43,6 +43,7 @@ test("works with nested selectors", async (t) => {
 test('works with nested selector from "All" query with index - regex', async (t) => {
   const nestedDivs = getAllByTestId(/nested/);
   await t.expect(nestedDivs.count).eql(2);
+
   const nested = within(nestedDivs.nth(1));
 
   await t
@@ -61,8 +62,8 @@ test('works with nested selector from "All" query with index - exact:false', asy
 });
 
 test('works with nested selector from "All" query with index - function', async (t) => {
-  const nestedDivs = getAllByTestId((_content: any, element: any) =>
-    element.getAttribute("data-testid").startsWith("nested")
+  const nestedDivs = getAllByTestId((_content, element) =>
+    element.getAttribute("data-testid")!.startsWith("nested")
   );
   await t.expect(nestedDivs.count).eql(2);
   const nested = await within(nestedDivs.nth(0));