From 1f556b18944322cff98ca588909baf5ffa7b2b77 Mon Sep 17 00:00:00 2001 From: Mathias Soeholm Date: Sat, 19 Dec 2020 18:40:01 +0100 Subject: [PATCH] Print a link to the playground when queries fail, resolved: https://github.com/testing-library/dom-testing-library/issues/837 --- package.json | 1 + src/__tests__/element-queries.js | 335 ++++++++++---------- src/__tests__/get-by-errors.js | 27 ++ src/__tests__/role.js | 508 ++++++++++++++++--------------- src/__tests__/suggestions.js | 64 ++-- src/__tests__/wait-for.js | 4 + src/config.ts | 19 +- src/playground-helper.ts | 31 ++ src/screen.js | 29 +- types/config.d.ts | 1 + 10 files changed, 542 insertions(+), 477 deletions(-) create mode 100644 src/playground-helper.ts diff --git a/package.json b/package.json index 27747f6ee..8e7640b53 100644 --- a/package.json +++ b/package.json @@ -49,6 +49,7 @@ }, "devDependencies": { "@testing-library/jest-dom": "^5.11.6", + "@types/lz-string": "^1.3.34", "jest-in-case": "^1.0.2", "jest-serializer-ansi": "^1.0.3", "jest-watch-select-projects": "^2.0.0", diff --git a/src/__tests__/element-queries.js b/src/__tests__/element-queries.js index 3e3ee6ded..44db91ab1 100644 --- a/src/__tests__/element-queries.js +++ b/src/__tests__/element-queries.js @@ -2,6 +2,7 @@ import {configure} from '../config' import {render, renderIntoDocument} from './helpers/test-utils' beforeEach(() => { + configure({printPlaygroundLink: false}) document.defaultView.Cypress = null }) @@ -35,65 +36,65 @@ test('get throws a useful error message', () => { } = render('
') expect(() => getByLabelText('LucyRicardo')) .toThrowErrorMatchingInlineSnapshot(` -"Unable to find a label with the text of: LucyRicardo + "Unable to find a label with the text of: LucyRicardo -
-
-
" -`) +
+
+
" + `) expect(() => getByPlaceholderText('LucyRicardo')) .toThrowErrorMatchingInlineSnapshot(` -"Unable to find an element with the placeholder text of: LucyRicardo + "Unable to find an element with the placeholder text of: LucyRicardo -
-
-
" -`) +
+
+
" + `) expect(() => getByText('LucyRicardo')).toThrowErrorMatchingInlineSnapshot(` -"Unable to find an element with the text: LucyRicardo. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible. + "Unable to find an element with the text: LucyRicardo. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible. -
-
-
" -`) +
+
+
" + `) expect(() => getByTestId('LucyRicardo')).toThrowErrorMatchingInlineSnapshot(` -"Unable to find an element by: [data-testid="LucyRicardo"] + "Unable to find an element by: [data-testid="LucyRicardo"] -
-
-
" -`) +
+
+
" + `) expect(() => getByAltText('LucyRicardo')).toThrowErrorMatchingInlineSnapshot(` -"Unable to find an element with the alt text: LucyRicardo + "Unable to find an element with the alt text: LucyRicardo -
-
-
" -`) +
+
+
" + `) expect(() => getByTitle('LucyRicardo')).toThrowErrorMatchingInlineSnapshot(` -"Unable to find an element with the title: LucyRicardo. + "Unable to find an element with the title: LucyRicardo. -
-
-
" -`) +
+
+
" + `) expect(() => getByDisplayValue('LucyRicardo')) .toThrowErrorMatchingInlineSnapshot(` -"Unable to find an element with the display value: LucyRicardo. + "Unable to find an element with the display value: LucyRicardo. -
-
-
" -`) +
+
+
" + `) expect(() => getByRole('LucyRicardo')).toThrowErrorMatchingInlineSnapshot(` -"Unable to find an accessible element with the role "LucyRicardo" + "Unable to find an accessible element with the role "LucyRicardo" -There are no accessible roles. But there might be some inaccessible roles. If you wish to access them, then set the \`hidden\` option to \`true\`. Learn more about this here: https://testing-library.com/docs/dom-testing-library/api-queries#byrole + There are no accessible roles. But there might be some inaccessible roles. If you wish to access them, then set the \`hidden\` option to \`true\`. Learn more about this here: https://testing-library.com/docs/dom-testing-library/api-queries#byrole -
-
-
" -`) +
+
+
" + `) }) test('can get elements by matching their text content', () => { @@ -352,14 +353,14 @@ test('label with no form control', () => { const {getByLabelText, queryByLabelText} = render(``) expect(queryByLabelText(/alone/)).toBeNull() expect(() => getByLabelText(/alone/)).toThrowErrorMatchingInlineSnapshot(` -"Found a label with the text of: /alone/, however no form control was found associated to that label. Make sure you're using the "for" attribute or "aria-labelledby" attribute correctly. + "Found a label with the text of: /alone/, however no form control was found associated to that label. Make sure you're using the "for" attribute or "aria-labelledby" attribute correctly. -
- -
" -`) +
+ +
" + `) }) test('label with "for" attribute but no form control and fuzzy matcher', () => { @@ -369,16 +370,16 @@ test('label with "for" attribute but no form control and fuzzy matcher', () => { expect(queryByLabelText('alone', {exact: false})).toBeNull() expect(() => getByLabelText('alone', {exact: false})) .toThrowErrorMatchingInlineSnapshot(` -"Found a label with the text of: alone, however no form control was found associated to that label. Make sure you're using the "for" attribute or "aria-labelledby" attribute correctly. - -
- -
" -`) + "Found a label with the text of: alone, however no form control was found associated to that label. Make sure you're using the "for" attribute or "aria-labelledby" attribute correctly. + +
+ +
" + `) }) test('label with children with no form control', () => { @@ -391,32 +392,32 @@ test('label with children with no form control', () => { expect(queryByLabelText(/alone/, {selector: 'input'})).toBeNull() expect(() => getByLabelText(/alone/, {selector: 'input'})) .toThrowErrorMatchingInlineSnapshot(` -"Found a label with the text of: /alone/, however no form control was found associated to that label. Make sure you're using the "for" attribute or "aria-labelledby" attribute correctly. + "Found a label with the text of: /alone/, however no form control was found associated to that label. Make sure you're using the "for" attribute or "aria-labelledby" attribute correctly. -
- - - -
" -`) +
+ + + +
" + `) }) test('label with non-labellable element', () => { @@ -431,35 +432,35 @@ test('label with non-labellable element', () => { expect(queryByLabelText(/Label/)).toBeNull() expect(() => getByLabelText(/Label/)).toThrowErrorMatchingInlineSnapshot(` -"Found a label with the text of: /Label/, however the element associated with this label (
) is non-labellable [https://html.spec.whatwg.org/multipage/forms.html#category-label]. If you really need to label a
, you can use aria-label or aria-labelledby instead. + "Found a label with the text of: /Label/, however the element associated with this label (
) is non-labellable [https://html.spec.whatwg.org/multipage/forms.html#category-label]. If you really need to label a
, you can use aria-label or aria-labelledby instead. -
- - -
- - - - - -
+
- Hello - -
- - -
- - -
" -`) + +
+ + + + + +
+ + Hello + +
+ + +
+ + +
" + `) }) test('multiple labels with non-labellable elements', () => { @@ -478,65 +479,65 @@ test('multiple labels with non-labellable elements', () => { expect(queryAllByLabelText(/Label/)).toEqual([]) expect(() => getAllByLabelText(/Label/)).toThrowErrorMatchingInlineSnapshot(` -"Found a label with the text of: /Label/, however the element associated with this label () is non-labellable [https://html.spec.whatwg.org/multipage/forms.html#category-label]. If you really need to label a , you can use aria-label or aria-labelledby instead. + "Found a label with the text of: /Label/, however the element associated with this label () is non-labellable [https://html.spec.whatwg.org/multipage/forms.html#category-label]. If you really need to label a , you can use aria-label or aria-labelledby instead. -Found a label with the text of: /Label/, however the element associated with this label (

) is non-labellable [https://html.spec.whatwg.org/multipage/forms.html#category-label]. If you really need to label a

, you can use aria-label or aria-labelledby instead. + Found a label with the text of: /Label/, however the element associated with this label (

) is non-labellable [https://html.spec.whatwg.org/multipage/forms.html#category-label]. If you really need to label a

, you can use aria-label or aria-labelledby instead. -

- - -
- - - - - - +
- Hello - - - - - - - -

- World - -

- - -
- - -
" -`) +
+ + + + + + + + Hello + + + + + + + +

+ + World + +

+ + +
+ + +
" + `) }) test('totally empty label', () => { const {getByLabelText, queryByLabelText} = render(`