diff --git a/package.json b/package.json index 0681a4c4..a679be25 100644 --- a/package.json +++ b/package.json @@ -50,6 +50,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__/__snapshots__/get-by-errors.js.snap b/src/__tests__/__snapshots__/get-by-errors.js.snap index 45f4cde1..23d1446a 100644 --- a/src/__tests__/__snapshots__/get-by-errors.js.snap +++ b/src/__tests__/__snapshots__/get-by-errors.js.snap @@ -1,5 +1,31 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`getByLabelText query will print the playground link when enabled in the config 1`] = ` +"Unable to find a label with the text of: TEST QUERY + + +
+ Hello +
+ + +Open this markup in the Testing-Library Playground: +https://testing-playground.com/#markup=DwEwlgbgfAEgpgGwQe2AenNIA" +`; + exports[`getByLabelText query will throw the custom error returned by config.getElementError 1`] = `"My custom error: Unable to find a label with the text of: TEST QUERY"`; +exports[`getByText query will print the playground link when enabled in the config 1`] = ` +"Unable to find an element with the text: TEST QUERY. 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. + + +
+ Hello +
+ + +Open this markup in the Testing-Library Playground: +https://testing-playground.com/#markup=DwEwlgbgfAEgpgGwQe2AenNIA" +`; + exports[`getByText query will throw the custom error returned by config.getElementError 1`] = `"My custom error: Unable to find an element with the text: TEST QUERY. 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."`; diff --git a/src/__tests__/element-queries.js b/src/__tests__/element-queries.js index 3e3ee6de..301e79ba 100644 --- a/src/__tests__/element-queries.js +++ b/src/__tests__/element-queries.js @@ -35,65 +35,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 +352,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 +369,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 +391,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 +431,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 +478,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(`