fix(expect-puppeteer): use the same behaviour on toMatch and toMatchElement

Author: gregberge

packages/expect-puppeteer/README.md

@@ -147,7 +147,7 @@ await expect(page).toFillForm('form[name="myForm"]', {
 Expect a text or a string RegExp to be present in the page or element.
 
 * `instance` <[Page]|[ElementHandle]> Context
-* `matcher` <[string]> A text or a RegExp to match in page
+* `matcher` <[string]|[RegExp]> A text or a RegExp to match in page
 * `options` <[Object]> Optional parameters
   * `polling` <[string]|[number]> An interval at which the `pageFunction` is executed, defaults to `raf`. If `polling` is a number, then it is treated as an interval in milliseconds at which the function would be executed. If `polling` is a string, then it can be one of the following values:
     * `raf` - to constantly execute `pageFunction` in `requestAnimationFrame` callback. This is the tightest polling mode which is suitable to observe styling changes.

packages/expect-puppeteer/src/matchers/toMatch.js

@@ -1,20 +1,38 @@
-import { getContext, enhanceError } from '../utils'
+import { getContext, enhanceError, expandSearchExpr } from '../utils'
 import { defaultOptions } from '../options'
 
 async function toMatch(instance, matcher, options) {
   options = defaultOptions(options)
 
   const { page, handle } = await getContext(instance, () => document.body)
 
+  const { text, regexp } = expandSearchExpr(matcher)
+
   try {
     await page.waitForFunction(
-      (handle, matcher) => {
+      (handle, text, regexp) => {
         if (!handle) return false
-        return handle.textContent.match(new RegExp(matcher)) !== null
+        if (regexp !== null) {
+          const [, pattern, flags] = regexp.match(/\/(.*)\/(.*)?/)
+          return (
+            handle.textContent
+              .replace(/\s+/g, ' ')
+              .trim()
+              .match(new RegExp(pattern, flags)) !== null
+          )
+        }
+        if (text !== null) {
+          return handle.textContent
+            .replace(/\s+/g, ' ')
+            .trim()
+            .includes(text)
+        }
+        return false
       },
       options,
       handle,
-      matcher,
+      text,
+      regexp,
     )
   } catch (error) {
     throw enhanceError(error, `Text not found "${matcher}"`)

packages/expect-puppeteer/src/matchers/toMatch.test.js

@@ -8,6 +8,10 @@ describe('toMatch', () => {
       await expect(page).toMatch('This is home!')
     })
 
+    it('should support RegExp', async () => {
+      await expect(page).toMatch(/THIS.is.home/i)
+    })
+
     it('should return an error if text is not in the page', async () => {
       expect.assertions(3)
 
@@ -26,6 +30,11 @@ describe('toMatch', () => {
       await expect(dialogBtn).toMatch('Open dialog')
     })
 
+    it('should support RegExp', async () => {
+      const dialogBtn = await page.$('#dialog-btn')
+      await expect(dialogBtn).toMatch(/OPEN/i)
+    })
+
     it('should return an error if text is not in the page', async () => {
       expect.assertions(3)
       const dialogBtn = await page.$('#dialog-btn')

packages/expect-puppeteer/src/matchers/toMatchElement.js

@@ -1,15 +1,6 @@
-import { getContext, enhanceError } from '../utils'
+import { getContext, enhanceError, expandSearchExpr } from '../utils'
 import { defaultOptions } from '../options'
 
-const isRegExp = input =>
-  Object.prototype.toString.call(input) === '[object RegExp]'
-
-const expandSearchExpr = expr => {
-  if (isRegExp(expr)) return { text: null, regexp: expr.toString() }
-  if (typeof expr === 'string') return { text: expr, regexp: null }
-  return { text: null, regexp: null }
-}
-
 async function toMatchElement(
   instance,
   selector,

packages/expect-puppeteer/src/utils.js

@@ -36,3 +36,12 @@ export const enhanceError = (error, message) => {
   error.message = `${message}\n${error.message}`
   return error
 }
+
+const isRegExp = input =>
+  Object.prototype.toString.call(input) === '[object RegExp]'
+
+export const expandSearchExpr = expr => {
+  if (isRegExp(expr)) return { text: null, regexp: expr.toString() }
+  if (typeof expr === 'string') return { text: expr, regexp: null }
+  return { text: null, regexp: null }
+}