feat: Support .get() alias

Author: mskelton

README.md

@@ -67,6 +67,15 @@ under the hood.
 page.input()
 ```
 
+You can also use the `.get()` method as an alias for calling the method
+directly. This helps with readability when using dynamic methods which are
+described later.
+
+```javascript
+page.input.get()
+page.button("name").get()
+```
+
 If you want to use the `queryBy*` method (useful for testing element's do not
 exist), you can use `.query()`.
 

src/Collection.test.tsx

@@ -1,7 +1,8 @@
-import { describe, it, expect, beforeEach } from "vitest"
-import { Collection } from "./Collection.js"
+/* eslint-disable vitest/no-conditional-tests, vitest/no-conditional-in-test */
 import { cleanup, render } from "@testing-library/react"
-import { useState, useEffect } from "react"
+import { useEffect, useState } from "react"
+import { beforeEach, describe, expect, it } from "vitest"
+import { Collection } from "./Collection.js"
 
 class Page extends Collection {
   wrapper = this.byTestId("wrapper")
@@ -10,7 +11,7 @@ class Page extends Collection {
 
 const page = new Page()
 
-describe("Collection", () => {
+describe("collection", () => {
   beforeEach(() => cleanup())
 
   it("should support dynamic methods", () => {
@@ -24,6 +25,17 @@ describe("Collection", () => {
     expect(page.name()).toHaveValue("foo")
   })
 
+  it("should support get as an alias for calling directly", () => {
+    render(
+      <div data-testid="wrapper">
+        <input aria-label="Name" value="foo" onChange={() => {}} />
+      </div>,
+    )
+
+    expect(page.wrapper.get()).toBeInTheDocument()
+    expect(page.name.get()).toHaveValue("foo")
+  })
+
   it("should support query", () => {
     render(<div data-testid="wrapper"></div>)
 
@@ -51,7 +63,7 @@ describe("Collection", () => {
     render(<Component />)
     expect(page.wrapper()).toBeInTheDocument()
     expect(page.name.query()).not.toBeInTheDocument()
-    expect(await page.name.find()).toBeInTheDocument()
+    await expect(page.name.find()).resolves.toBeInTheDocument()
   })
 
   it("should support all", async () => {
@@ -82,7 +94,7 @@ describe("Collection", () => {
     expect(page.wrapper.all()).toHaveLength(2)
     expect(page.wrapper.query.all()).toHaveLength(2)
     expect(page.name.query.all()).toHaveLength(0)
-    expect(await page.name.find.all()).toHaveLength(3)
+    await expect(page.name.find.all()).resolves.toHaveLength(3)
   })
 
   it("should support dynamic methods", () => {

src/Collection.ts

@@ -16,6 +16,9 @@ type EnhancedQuery<T extends Query> = (
   find: (() => ReturnType<Screen[`find${T}`]>) & {
     all: () => ReturnType<Screen[`findAll${T}`]>
   }
+  get: (() => ReturnType<Screen[`get${T}`]>) & {
+    all: () => ReturnType<Screen[`getAll${T}`]>
+  }
   query: (() => ReturnType<Screen[`query${T}`]>) & {
     all: () => ReturnType<Screen[`queryAll${T}`]>
   }
@@ -57,6 +60,10 @@ export class Collection {
       const enhanced: any = () => this.#screen(enhanced, `get${query}`, args)
       enhanced.all = () => this.#screen(enhanced.all, `getAll${query}`, args)
 
+      enhanced.get = () => this.#screen(enhanced.get, `get${query}`, args)
+      enhanced.get.all = () =>
+        this.#screen(enhanced.get.all, `getAll${query}`, args)
+
       enhanced.query = () => this.#screen(enhanced.find, `query${query}`, args)
       enhanced.query.all = () =>
         this.#screen(enhanced.query.all, `queryAll${query}`, args)