fix(within): alias findBy queries for within (#261)

Author: benmonro

.gitignore

@@ -83,4 +83,5 @@ dist
 ignorethis.txt
 
 # OSX
-.DS_Store
+.DS_Store
+yarn.lock

src/index.ts

@@ -21,7 +21,10 @@ const withinSelectors = queryNames.reduce((acc, withinQueryName) => {
     }
     const el = els[0];
     const args = Array.from(arguments).slice(1);
-    return window.TestingLibraryDom.within(el).${withinQueryName}.apply(null, args);
+    return window.TestingLibraryDom.within(el).${withinQueryName.replace(
+      "find",
+      "query"
+    )}.apply(null, args);
   `),
   };
 }, {} as Record<QueryName, (node: Element, ...methodParams: any[]) => any>);

test-app/index.html

@@ -100,7 +100,17 @@ <h2>getAllByText</h2>
       <h2>navigate</h2>
       <a href="page2.html">Go to Page 2</a>
     </section>
-
+    <section>
+      <div className="App">
+        <div role="group" aria-labelledby="group-title" id="group-1">
+          <div id="group-title">My Group</div>
+          <button onclick="count.innerText = Number(count.innerText)+1">
+            Increase B
+          </button>
+          <div id="count">0</div>
+        </div>
+      </div>
+    </section>
     <!-- Prettier
       unindents the script tag below -->
     <script>

tests/testcafe/selectors.ts

@@ -59,7 +59,7 @@ test("queryAllByText", async (t) => {
 
 test("findByText async", async (t) => {
   await t.click(getByText("delayed"));
-  await t.expect(findByText("updated button async")).ok();
+  await t.expect(findByText("updated button async").exists).ok();
 });
 
 test("still works after browser page load", async (t) => {

tests/testcafe/within.ts

@@ -1,5 +1,5 @@
 import { Selector } from "testcafe";
-import { within, getAllByTestId, getByTestId } from "../../src";
+import { within, screen } from "../../src";
 
 fixture`within`.page`../../test-app/index.html`;
 
@@ -30,18 +30,20 @@ test("still works after browser page reload", async (t) => {
   const nested = await within("#nested");
   await t.expect(nested.getByText("Button Text").exists).ok();
 
-  await t.eval(() => location.reload(true));
+  await t.eval(() => location.reload());
   await t.expect(nested.getByText("Button Text").exists).ok();
 });
 
 test("works with nested selectors", async (t) => {
   await t
-    .expect(within(getByTestId("nested")).getByText("Button Text").exists)
+    .expect(
+      within(screen.getByTestId("nested")).getByText("Button Text").exists
+    )
     .ok();
 });
 
 test('works with nested selector from "All" query with index - regex', async (t) => {
-  const nestedDivs = getAllByTestId(/nested/);
+  const nestedDivs = screen.getAllByTestId(/nested/);
   await t.expect(nestedDivs.count).eql(2);
 
   const nested = within(nestedDivs.nth(1));
@@ -54,15 +56,15 @@ test('works with nested selector from "All" query with index - regex', async (t)
 });
 
 test('works with nested selector from "All" query with index - exact:false', async (t) => {
-  const nestedDivs = getAllByTestId("nested", { exact: false });
+  const nestedDivs = screen.getAllByTestId("nested", { exact: false });
   await t.expect(nestedDivs.count).eql(2);
   const nested = await within(nestedDivs.nth(0));
 
   await t.expect(nested.getByText("Button Text").exists).ok();
 });
 
 test('works with nested selector from "All" query with index - function', async (t) => {
-  const nestedDivs = getAllByTestId((_content, element) =>
+  const nestedDivs = screen.getAllByTestId((_content, element) =>
     element.getAttribute("data-testid")!.startsWith("nested")
   );
   await t.expect(nestedDivs.count).eql(2);
@@ -89,14 +91,23 @@ test("should throw if invalid param", async (t) => {
 });
 
 test("should throw error if count > 1", async (t) => {
-  const nestedDivs = getAllByTestId(/nested/);
+  const nestedDivs = screen.getAllByTestId(/nested/);
 
   await t.expect(nestedDivs.count).eql(2);
   let didThrow = false;
   try {
-    await t.expect(within(nestedDivs).getByText("blah"));
+    await t.expect(within(nestedDivs).getByText("blah").exists);
   } catch (e) {
     didThrow = true;
   }
   await t.expect(didThrow).ok();
 });
+
+test("works with findBy queries", async (t) => {
+  const group = screen.findByRole("group", { name: "My Group" });
+
+  await t
+    .click(within(group).findByRole("button", { name: "Increase B" }))
+    .expect(within(group).findByText("1").exists)
+    .ok();
+});