🤖 Merge PR #44385 [@testing-library/jest-dom] Add types for toHaveDis…

…playValue by @berickson1 * [@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>
DefinitelyTyped · May 18, 2020 · 11fabf5 · 11fabf5
1 parent 10eb583
commit 11fabf5
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 1 deletion.
diff --git 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
@@ -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');