From e057e9cf65a870670cf81b319f5c3b48a73b44aa Mon Sep 17 00:00:00 2001
From: Connor Meredith <4907463+connormeredith@users.noreply.github.com>
Date: Tue, 19 Nov 2019 08:35:38 +0000
Subject: [PATCH] Added jest matcher support for .toHaveValue()

---
 README.md                      | 17 +++++++-----
 extend-expect.d.ts             |  2 +-
 src/__tests__/to-have-value.js | 48 ++++++++++++++++++++++++++++++----
 src/to-have-value.js           | 10 ++-----
 4 files changed, 56 insertions(+), 21 deletions(-)

diff --git a/README.md b/README.md
index 166bfa4c..6f4fc9f6 100644
--- a/README.md
+++ b/README.md
@@ -46,6 +46,7 @@ clear to read and to maintain.
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 
+
 - [Installation](#installation)
 - [Usage](#usage)
 - [Custom matchers](#custom-matchers)
@@ -86,9 +87,10 @@ should be installed as one of your project's `devDependencies`:
 npm install --save-dev @testing-library/jest-dom
 ```
 
-> Note: We also recommend installing the jest-dom eslint plugin which provides auto-fixable lint rules 
-> that prevent false positive tests and improve test readability by ensuring you are using the right
-> matchers in your tests.  More details can be found at
+> Note: We also recommend installing the jest-dom eslint plugin which provides
+> auto-fixable lint rules that prevent false positive tests and improve test
+> readability by ensuring you are using the right matchers in your tests. More
+> details can be found at
 > [eslint-plugin-jest-dom](https://github.com/testing-library/eslint-plugin-jest-dom).
 
 ## Usage
@@ -610,7 +612,7 @@ toHaveAttribute(attr: string, value?: any)
 This allows you to check whether the given element has an attribute or not. You
 can also optionally check that the attribute has a specific expected value or
 partial match using
-[expect.stringContaining](https://jestjs.io/docs/en/expect.html#expectnotstringcontainingstring)/[expect.stringMatching](https://jestjs.io/docs/en/expect.html#expectstringmatchingstring-regexp)
+[expect.stringContaining](https://jestjs.io/docs/en/expect.html#expectstringcontainingstring)/[expect.stringMatching](https://jestjs.io/docs/en/expect.html#expectstringmatchingstring-regexp).
 
 #### Examples
 
@@ -922,10 +924,12 @@ expect(element).not.toHaveTextContent('content')
 ### `toHaveValue`
 
 ```typescript
-toHaveValue(value: string | string[] | number)
+toHaveValue(value?: any)
 ```
 
-This allows you to check whether the given form element has the specified value.
+This allows you to check whether the given form element has the specified value
+or partial value using
+[expect.stringContaining](https://jestjs.io/docs/en/expect.html#expectstringcontainingstring)/[expect.stringMatching](https://jestjs.io/docs/en/expect.html#expectstringmatchingstring-regexp).
 It accepts `<input>`, `<select>` and `<textarea>` elements with the exception of
 of `<input type="checkbox">` and `<input type="radio">`, which can be
 meaningfully matched only using [`toBeChecked`](#tobechecked) or
@@ -1103,7 +1107,6 @@ expect(document.querySelector('.cancel-button')).toBeTruthy()
 > replacing `toBeInTheDOM` to read through the documentation of the proposed
 > alternatives to see which use case works better for your needs.
 
-
 ## Inspiration
 
 This whole library was extracted out of Kent C. Dodds' [DOM Testing
diff --git a/extend-expect.d.ts b/extend-expect.d.ts
index 98bbf5af..e6c89b91 100644
--- a/extend-expect.d.ts
+++ b/extend-expect.d.ts
@@ -23,7 +23,7 @@ declare namespace jest {
       text: string | RegExp,
       options?: {normalizeWhitespace: boolean},
     ): R
-    toHaveValue(value?: string | string[] | number): R
+    toHaveValue(value?: any): R
     toBeChecked(): R
   }
 }
diff --git a/src/__tests__/to-have-value.js b/src/__tests__/to-have-value.js
index 91621d4f..5b6b488a 100644
--- a/src/__tests__/to-have-value.js
+++ b/src/__tests__/to-have-value.js
@@ -10,16 +10,36 @@ describe('.toHaveValue', () => {
 
     expect(queryByTestId('value')).toHaveValue('foo')
     expect(queryByTestId('value')).toHaveValue()
+    expect(queryByTestId('value')).toHaveValue(expect.stringContaining('fo'))
+    expect(queryByTestId('value')).toHaveValue(expect.stringMatching(/^f.*/))
     expect(queryByTestId('value')).not.toHaveValue('bar')
     expect(queryByTestId('value')).not.toHaveValue('')
+    expect(queryByTestId('value')).not.toHaveValue(
+      expect.stringContaining('bar'),
+    )
+    expect(queryByTestId('value')).not.toHaveValue(expect.stringMatching(/bar/))
 
     expect(queryByTestId('empty')).toHaveValue('')
+    expect(queryByTestId('empty')).toHaveValue(expect.stringContaining(''))
+    expect(queryByTestId('empty')).toHaveValue(expect.stringMatching(/^$/))
     expect(queryByTestId('empty')).not.toHaveValue()
     expect(queryByTestId('empty')).not.toHaveValue('foo')
+    expect(queryByTestId('empty')).not.toHaveValue(
+      expect.stringContaining('foo'),
+    )
+    expect(queryByTestId('empty')).not.toHaveValue(expect.stringMatching(/foo/))
 
     expect(queryByTestId('without')).toHaveValue('')
+    expect(queryByTestId('without')).toHaveValue(expect.stringContaining(''))
+    expect(queryByTestId('without')).toHaveValue(expect.stringMatching(/^$/))
     expect(queryByTestId('without')).not.toHaveValue()
     expect(queryByTestId('without')).not.toHaveValue('foo')
+    expect(queryByTestId('without')).not.toHaveValue(
+      expect.stringContaining('foo'),
+    )
+    expect(queryByTestId('without')).not.toHaveValue(
+      expect.stringMatching(/foo/),
+    )
     queryByTestId('without').value = 'bar'
     expect(queryByTestId('without')).toHaveValue('bar')
   })
@@ -35,14 +55,21 @@ describe('.toHaveValue', () => {
     expect(queryByTestId('number')).toHaveValue()
     expect(queryByTestId('number')).not.toHaveValue(4)
     expect(queryByTestId('number')).not.toHaveValue('5')
+    expect(queryByTestId('number')).not.toHaveValue(
+      expect.stringContaining('5'),
+    )
 
     expect(queryByTestId('empty')).toHaveValue(null)
     expect(queryByTestId('empty')).not.toHaveValue()
     expect(queryByTestId('empty')).not.toHaveValue('5')
+    expect(queryByTestId('empty')).not.toHaveValue(expect.stringContaining('5'))
 
     expect(queryByTestId('without')).toHaveValue(null)
     expect(queryByTestId('without')).not.toHaveValue()
     expect(queryByTestId('without')).not.toHaveValue('10')
+    expect(queryByTestId('without')).not.toHaveValue(
+      expect.stringContaining('10'),
+    )
     queryByTestId('without').value = 10
     expect(queryByTestId('without')).toHaveValue(10)
   })
@@ -50,29 +77,34 @@ describe('.toHaveValue', () => {
   test('handles value of select element', () => {
     const {queryByTestId} = render(`
       <select data-testid="single">
-        <option value="first">First Value</option> 
+        <option value="first">First Value</option>
         <option value="second" selected>Second Value</option>
         <option value="third">Third Value</option>
       </select>
-      
+
       <select data-testid="multiple" multiple>
-        <option value="first">First Value</option> 
+        <option value="first">First Value</option>
         <option value="second" selected>Second Value</option>
         <option value="third" selected>Third Value</option>
       </select>
-      
+
       <select data-testid="not-selected" >
         <option value="" disabled selected>- Select some value - </option>
-        <option value="first">First Value</option> 
+        <option value="first">First Value</option>
         <option value="second">Second Value</option>
         <option value="third">Third Value</option>
       </select>
     `)
 
     expect(queryByTestId('single')).toHaveValue('second')
+    expect(queryByTestId('single')).toHaveValue(expect.stringContaining('sec'))
+    expect(queryByTestId('single')).toHaveValue(expect.stringMatching(/^sec/))
     expect(queryByTestId('single')).toHaveValue()
 
     expect(queryByTestId('multiple')).toHaveValue(['second', 'third'])
+    expect(queryByTestId('multiple')).toHaveValue(
+      expect.arrayContaining(['second', 'third']),
+    )
     expect(queryByTestId('multiple')).toHaveValue()
 
     expect(queryByTestId('not-selected')).not.toHaveValue()
@@ -87,6 +119,12 @@ describe('.toHaveValue', () => {
       <textarea data-testid="textarea">text value</textarea>
     `)
     expect(queryByTestId('textarea')).toHaveValue('text value')
+    expect(queryByTestId('textarea')).toHaveValue(
+      expect.stringContaining('text'),
+    )
+    expect(queryByTestId('textarea')).toHaveValue(
+      expect.stringMatching(/^text/),
+    )
   })
 
   test('throws when passed checkbox or radio', () => {
diff --git a/src/to-have-value.js b/src/to-have-value.js
index d7e41d98..bc91339a 100644
--- a/src/to-have-value.js
+++ b/src/to-have-value.js
@@ -1,11 +1,5 @@
 import {matcherHint} from 'jest-matcher-utils'
-import isEqualWith from 'lodash/isEqualWith'
-import {
-  checkHtmlElement,
-  compareArraysAsSet,
-  getMessage,
-  getSingleElementValue,
-} from './utils'
+import {checkHtmlElement, getMessage, getSingleElementValue} from './utils'
 
 export function toHaveValue(htmlElement, expectedValue) {
   checkHtmlElement(htmlElement, toHaveValue, this)
@@ -23,7 +17,7 @@ export function toHaveValue(htmlElement, expectedValue) {
   const expectsValue = expectedValue !== undefined
   return {
     pass: expectsValue
-      ? isEqualWith(receivedValue, expectedValue, compareArraysAsSet)
+      ? this.equals(receivedValue, expectedValue)
       : Boolean(receivedValue),
     message: () => {
       const to = this.isNot ? 'not to' : 'to'