From a4c806993cbb6e8ddfacb6bf0fa887e728047ea8 Mon Sep 17 00:00:00 2001
From: Brent Erickson <berickson1@users.noreply.github.com>
Date: Sun, 17 May 2020 21:54:55 -0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=A4=96=20Merge=20PR=20#44385=20[@testing-?=
 =?UTF-8?q?library/jest-dom]=20Add=20types=20for=20toHaveDisplayValue=20by?=
 =?UTF-8?q?=20@berickson1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* [@testing-library/jest-dom] Add types for toHaveDisplayValue

* Update as per PR comments

* Update incorrect comment

* Auto-commit github suggestion

Co-authored-by: Ernesto García <gnapse@gmail.com>

* Add tests from PR suggestions

* Fix compiler errors from 3df262

Co-authored-by: Ernesto García <gnapse@gmail.com>
---
 types/testing-library__jest-dom/index.d.ts    | 44 ++++++++++++++++++-
 .../testing-library__jest-dom-global-tests.ts |  8 ++++
 2 files changed, 51 insertions(+), 1 deletion(-)

diff --git a/types/testing-library__jest-dom/index.d.ts b/types/testing-library__jest-dom/index.d.ts
index ba09a068368632a..406563f59925176 100644
--- a/types/testing-library__jest-dom/index.d.ts
+++ b/types/testing-library__jest-dom/index.d.ts
@@ -1,4 +1,4 @@
-// Type definitions for @testing-library/jest-dom 5.6
+// Type definitions for @testing-library/jest-dom 5.7
 // Project: https://github.com/testing-library/jest-dom
 // Definitions by: Ernesto García <https://github.com/gnapse>
 //                 John Gozde <https://github.com/jgoz>
@@ -251,6 +251,48 @@ declare namespace jest {
          * [testing-library/jest-dom#tohaveclass](https:github.com/testing-library/jest-dom#tohaveclass)
          */
         toHaveClass(...classNames: string[]): R;
+        /**
+         * @description
+         * This allows you to check whether the given form element has the specified displayed value (the one the
+         * end user will see). It accepts <input>, <select> and <textarea> elements with the exception of <input type="checkbox">
+         * and <input type="radio">, which can be meaningfully matched only using toBeChecked or toHaveFormValues.
+         * @example
+         * <label for="input-example">First name</label>
+         * <input type="text" id="input-example" value="Luca" />
+         *
+         * <label for="textarea-example">Description</label>
+         * <textarea id="textarea-example">An example description here.</textarea>
+         *
+         * <label for="single-select-example">Fruit</label>
+         * <select id="single-select-example">
+         *   <option value="">Select a fruit...</option>
+         *   <option value="banana">Banana</option>
+         *   <option value="ananas">Ananas</option>
+         *   <option value="avocado">Avocado</option>
+         * </select>
+         *
+         * <label for="mutiple-select-example">Fruits</label>
+         * <select id="multiple-select-example" multiple>
+         *   <option value="">Select a fruit...</option>
+         *   <option value="banana" selected>Banana</option>
+         *   <option value="ananas">Ananas</option>
+         *   <option value="avocado" selected>Avocado</option>
+         * </select>
+         *
+         * const input = screen.getByLabelText('First name')
+         * const textarea = screen.getByLabelText('Description')
+         * const selectSingle = screen.getByLabelText('Fruit')
+         * const selectMultiple = screen.getByLabelText('Fruits')
+         *
+         * expect(input).toHaveDisplayValue('Luca')
+         * expect(textarea).toHaveDisplayValue('An example description here.')
+         * expect(selectSingle).toHaveDisplayValue('Select a fruit...')
+         * expect(selectMultiple).toHaveDisplayValue(['Banana', 'Avocado'])
+         *
+         * @see
+         * [testing-library/jest-dom#tohavedisplayvalue](https:github.com/testing-library/jest-dom#tohavedisplayvalue)
+         */
+        toHaveDisplayValue(value: string | RegExp | Array<string | RegExp>): R;
         /**
          * @description
          * Assert whether an element has focus or not.
diff --git a/types/testing-library__jest-dom/test/testing-library__jest-dom-global-tests.ts b/types/testing-library__jest-dom/test/testing-library__jest-dom-global-tests.ts
index 5aa585ed91a17b6..0835e85c566dfd2 100644
--- a/types/testing-library__jest-dom/test/testing-library__jest-dom-global-tests.ts
+++ b/types/testing-library__jest-dom/test/testing-library__jest-dom-global-tests.ts
@@ -19,6 +19,10 @@ expect(element).toHaveAttribute('attr', 'yes');
 expect(element).toHaveClass();
 expect(element).toHaveClass('cls1');
 expect(element).toHaveClass('cls1', 'cls2', 'cls3', 'cls4');
+expect(element).toHaveDisplayValue('str');
+expect(element).toHaveDisplayValue(['str1', 'str2']);
+expect(element).toHaveDisplayValue(/str/);
+expect(element).toHaveDisplayValue([/str1/, 'str2']);
 expect(element).toHaveFocus();
 expect(element).toHaveFormValues({ foo: 'bar', baz: 1 });
 expect(element).toHaveStyle('display: block');
@@ -57,6 +61,10 @@ expect(element).not.toHaveAttribute('attr', 'yes');
 expect(element).not.toHaveClass();
 expect(element).not.toHaveClass('cls1');
 expect(element).not.toHaveClass('cls1', 'cls2', 'cls3', 'cls4');
+expect(element).not.toHaveDisplayValue('str');
+expect(element).not.toHaveDisplayValue(['str1', 'str2']);
+expect(element).not.toHaveDisplayValue(/str/);
+expect(element).not.toHaveDisplayValue([/str1/, 'str2']);
 expect(element).not.toHaveFocus();
 expect(element).not.toHaveFormValues({ foo: 'bar', baz: 1 });
 expect(element).not.toHaveStyle('display: block');