feat: add getNodeText method

Author: patrickhulce

lib/extend.ts

@@ -21,6 +21,7 @@ declare module 'puppeteer' {
   }
 
   interface ElementHandle {
+    getNodeText(): Promise<string>
     queryByPlaceholderText(m: Matcher, opts?: MatcherOptions): Promise<ElementHandle | null>
     queryAllByPlaceholderText(m: Matcher, opts?: MatcherOptions): Promise<ElementHandle[]>
     getByPlaceholderText(m: Matcher, opts?: MatcherOptions): Promise<ElementHandle>

lib/index.ts

@@ -2,7 +2,7 @@ import {readFileSync} from 'fs'
 import * as path from 'path'
 import {ElementHandle, EvaluateFn, JSHandle, Page} from 'puppeteer'
 import waitForExpect from 'wait-for-expect'
-import {ITestUtils} from './typedefs'
+import {IQueryUtils} from './typedefs'
 
 const domLibraryAsString = readFileSync(
   path.join(__dirname, '../dom-testing-library.js'),
@@ -53,33 +53,53 @@ async function covertToElementHandle(handle: JSHandle, asArray: boolean): Promis
   return asArray ? createElementHandleArray(handle) : createElementHandle(handle)
 }
 
-function createDelegateFor(
-  fnName: keyof ITestUtils,
+function processNodeText(handles: IHandleSet): Promise<string> {
+  return handles.containerHandle
+    .executionContext()
+    .evaluate(handles.evaluateFn, handles.containerHandle, 'getNodeText')
+}
+
+async function processQuery(handles: IHandleSet): Promise<DOMReturnType> {
+  const {containerHandle, evaluateFn, fnName, argsToForward} = handles
+
+  const handle = await containerHandle
+    .executionContext()
+    .evaluateHandle(evaluateFn, containerHandle, fnName, ...argsToForward)
+  return covertToElementHandle(handle, fnName.includes('All'))
+}
+
+interface IHandleSet {
+  containerHandle: ElementHandle
+  evaluateFn: EvaluateFn
+  fnName: string
+  argsToForward: any[]
+}
+
+function createDelegateFor<T = DOMReturnType>(
+  fnName: keyof IQueryUtils,
   contextFn?: ContextFn,
-): (...args: any[]) => Promise<DOMReturnType> {
-  return async function(...args: any[]): Promise<DOMReturnType> {
+  processHandleFn?: (handles: IHandleSet) => Promise<T>,
+): (...args: any[]) => Promise<T> {
+  // @ts-ignore
+  processHandleFn = processHandleFn || processQuery
+
+  return async function(...args: any[]): Promise<T> {
     // @ts-ignore
     const containerHandle: ElementHandle = contextFn ? contextFn.apply(this, args) : this
     // @ts-ignore
     const evaluateFn: EvaluateFn = {toString: () => delegateFnToExecuteInPage}
 
     // Convert RegExp to a special format since they don't serialize well
     let argsToForward = args.map(arg => (arg instanceof RegExp ? {regex: arg.source} : arg))
+    // Remove the container from the argsToForward since it's always the first argument
     if (containerHandle === args[0]) {
       argsToForward = args.slice(1)
     }
 
-    const handle = await containerHandle
-      .executionContext()
-      .evaluateHandle(evaluateFn, containerHandle, fnName, ...argsToForward)
-    return covertToElementHandle(handle, fnName.includes('All'))
+    return processHandleFn!({fnName, containerHandle, evaluateFn, argsToForward})
   }
 }
 
-export function wait(callback = () => {}, {timeout = 4500, interval = 50} = {}): Promise<{}> {
-  return waitForExpect(callback, timeout, interval)
-}
-
 export async function getDocument(_page?: Page): Promise<ElementHandle> {
   // @ts-ignore
   const page: Page = _page || this
@@ -89,7 +109,11 @@ export async function getDocument(_page?: Page): Promise<ElementHandle> {
   return document
 }
 
-export function getQueriesForElement<T>(object: T, contextFn?: ContextFn): T & ITestUtils {
+export function wait(callback = () => {}, {timeout = 4500, interval = 50} = {}): Promise<{}> {
+  return waitForExpect(callback, timeout, interval)
+}
+
+export function getQueriesForElement<T>(object: T, contextFn?: ContextFn): T & IQueryUtils {
   const o = object as any
   o.queryByPlaceholderText = createDelegateFor('queryByPlaceholderText', contextFn)
   o.queryAllByPlaceholderText = createDelegateFor('queryAllByPlaceholderText', contextFn)
@@ -115,11 +139,12 @@ export function getQueriesForElement<T>(object: T, contextFn?: ContextFn): T & I
   o.queryAllByTitle = createDelegateFor('queryAllByTitle', contextFn)
   o.getByTitle = createDelegateFor('getByTitle', contextFn)
   o.getAllByTitle = createDelegateFor('getAllByTitle', contextFn)
+  o.getNodeText = createDelegateFor<string>('getNodeText', contextFn, processNodeText)
   return o
 }
 
 export const within = getQueriesForElement
 
 // @ts-ignore
-export const queries: ITestUtils = {}
+export const queries: IQueryUtils = {}
 getQueriesForElement(queries, el => el)

lib/typedefs.ts

@@ -3,7 +3,8 @@ import {ElementHandle} from 'puppeteer'
 
 type Element = ElementHandle
 
-export interface ITestUtils {
+export interface IQueryUtils {
+  getNodeText(el: Element): Promise<string>
   queryByPlaceholderText(el: Element, m: Matcher, opts?: MatcherOptions): Promise<Element | null>
   queryAllByPlaceholderText(el: Element, m: Matcher, opts?: MatcherOptions): Promise<Element[]>
   getByPlaceholderText(el: Element, m: Matcher, opts?: MatcherOptions): Promise<Element>

package.json

@@ -11,7 +11,7 @@
     "clean": "rm -fR dist/",
     "rebuild": "npm run clean && npm run build",
     "prepublishOnly": "npm run rebuild && generate-export-aliases",
-    "build": "npm run build:ts",
+    "build": "npm run build:ts && npm run build:rollup",
     "build:ts": "tsc",
     "build:rollup": "rollup -c rollup.config.js"
   },

rollup.config.js

@@ -1,7 +1,7 @@
 const path = require('path')
 
 module.exports = {
-  input: path.join(__dirname, 'node_modules/dom-testing-library/dist/queries.js'),
+  input: path.join(__dirname, 'rollup.input.js'),
   output: {
     file: 'dom-testing-library.js',
     format: 'iife',

rollup.input.js

@@ -0,0 +1,2 @@
+export * from 'dom-testing-library/dist/queries'
+export {getNodeText} from 'dom-testing-library/dist/get-node-text'

test/__snapshots__/extend.test.ts.snap

@@ -20,7 +20,7 @@ exports[`lib/extend.ts should handle the get* method failures 1`] = `
     at getAllByTitle (<anonymous>:2827:12)
     at firstResultOrNull (<anonymous>:2638:31)
     at Object.getByTitle (<anonymous>:2837:29)
-    at evaluateInPage (<anonymous>:3047:41)]
+    at evaluateInPage (<anonymous>:3048:41)]
 `;
 
 exports[`lib/extend.ts should handle the get* methods 1`] = `"<input type=\\"text\\" data-testid=\\"testid-text-input\\">"`;

test/extend.test.ts

@@ -71,6 +71,11 @@ describe('lib/extend.ts', () => {
     expect(await page.evaluate(el => el.textContent, element)).toEqual('Hello h3')
   })
 
+  it('should get text content', async () => {
+    const $h3 = await document.$('#scoped h3')
+    expect(await $h3.getNodeText()).toEqual('Hello h3')
+  })
+
   afterAll(async () => {
     await browser.close()
   })