fix: toHaveSelector when ElementHandle is passed (#118)

Co-authored-by: Mark Skelton <mdskelton99@gmail.com>

Author: mxschmitt

src/matchers/toHaveSelector/index.test.ts

@@ -8,6 +8,12 @@ describe("toHaveSelector", () => {
     await page.setContent(`<div id="foobar">Bar</div>`)
     await expect(page).toHaveSelector("#foobar")
   })
+  it("positive with an element handle", async () => {
+    await page.setContent(`<div id="foo"><div id="bar">Baz</div></div>`)
+    const handle = await page.$("#foo")
+    expect(handle).toBeTruthy()
+    await expect(handle).toHaveSelector("#bar")
+  })
   it("positive in frame", async () => {
     await page.setContent(`<iframe src="http://localhost:8080"></iframe>`)
     const handle = page.$("iframe")

src/matchers/toHaveSelector/index.ts

@@ -1,18 +1,23 @@
 import { SyncExpectationResult } from "expect/build/types"
 import { PageWaitForSelectorOptions } from "../../../global"
-import { ExpectInputType, getFrame } from "../utils"
+import { ExpectInputType, getElementHandle } from "../utils"
 
 const toHaveSelector: jest.CustomMatcher = async function (
   arg: ExpectInputType,
   selector: string,
   options: PageWaitForSelectorOptions = {}
 ): Promise<SyncExpectationResult> {
-  const frame = await getFrame(arg)
-  const pass = await frame!
-    .waitForSelector(selector, {
-      state: this.isNot ? "hidden" : "visible",
-      ...options,
-    })
+  const pass = await getElementHandle(
+    [
+      arg,
+      selector,
+      {
+        state: this.isNot ? "hidden" : "visible",
+        ...options,
+      },
+    ],
+    0
+  )
     .then(() => !this.isNot)
     .catch(() => this.isNot)
 

src/matchers/toHaveSelectorCount/index.test.ts

@@ -11,6 +11,19 @@ describe("toHaveSelectorCount", () => {
       )
       await expect(page).toHaveSelectorCount(".foobar", 2)
     })
+    it("positive with an element handle", async () => {
+      await page.setContent(`
+        <div id="parent">
+          <div class="foobar">Bar</div>
+          <div class="foobar">Bar</div>
+          <div class="foobar">Bar</div>
+          <div class="foobar">Bar</div>
+        </div>
+      `)
+      const handle = await page.$("#parent")
+      expect(handle).toBeTruthy()
+      await expect(handle).toHaveSelectorCount(".foobar", 4)
+    })
     it("positive in frame", async () => {
       await page.setContent(`<iframe src="http://localhost:8080"></iframe>`)
       const handle = page.$("iframe")

src/matchers/toHaveSelectorCount/index.ts

@@ -1,6 +1,6 @@
 import { SyncExpectationResult } from "expect/build/types"
 import { PageWaitForSelectorOptions } from "../../../global"
-import { ExpectInputType, getFrame, getMessage, quote } from "../utils"
+import { ExpectInputType, getElementHandle, getMessage, quote } from "../utils"
 
 const toHaveSelectorCount: jest.CustomMatcher = async function (
   arg: ExpectInputType,
@@ -9,10 +9,13 @@ const toHaveSelectorCount: jest.CustomMatcher = async function (
   options: PageWaitForSelectorOptions = {}
 ): Promise<SyncExpectationResult> {
   try {
-    const frame = (await getFrame(arg))!
-    await frame.waitForSelector(selector, { state: "attached", ...options })
+    const [elementHandle] = await getElementHandle([arg, selector, options], 1)
+    await elementHandle.waitForSelector(selector, {
+      state: "attached",
+      ...options,
+    })
     /* istanbul ignore next */
-    const actualCount = await frame.$$eval(selector, (el) => el.length)
+    const actualCount = await elementHandle.$$eval(selector, (el) => el.length)
 
     return {
       pass: actualCount === expectedValue,