diff --git a/package.json b/package.json index a1df7345..d43b3236 100644 --- a/package.json +++ b/package.json @@ -54,7 +54,7 @@ "jest-serializer-ansi": "^1.0.3", "jest-watch-select-projects": "^2.0.0", "jsdom": "^16.4.0", - "kcd-scripts": "^7.5.3", + "kcd-scripts": "^11.0.0", "typescript": "^4.1.2" }, "eslintConfig": { diff --git a/src/__node_tests__/index.js b/src/__node_tests__/index.js index 0f88c323..6c663360 100644 --- a/src/__node_tests__/index.js +++ b/src/__node_tests__/index.js @@ -66,13 +66,13 @@ test('works without a browser context on a dom node (JSDOM Fragment)', () => { expect(dtl.getByLabelText(container, /username/i)).toMatchInlineSnapshot(` `) expect(dtl.getByLabelText(container, /password/i)).toMatchInlineSnapshot(` `) }) diff --git a/src/__node_tests__/screen.js b/src/__node_tests__/screen.js index 896393d0..6dba2399 100644 --- a/src/__node_tests__/screen.js +++ b/src/__node_tests__/screen.js @@ -4,6 +4,6 @@ test('the screen export throws a helpful error message when no global document i expect(() => screen.getByText(/hello world/i), ).toThrowErrorMatchingInlineSnapshot( - `"For queries bound to document.body a global document has to be available... Learn more: https://testing-library.com/s/screen-global-error"`, + `For queries bound to document.body a global document has to be available... Learn more: https://testing-library.com/s/screen-global-error`, ) }) diff --git a/src/__tests__/__snapshots__/get-by-errors.js.snap b/src/__tests__/__snapshots__/get-by-errors.js.snap index 45f4cde1..42bc84ae 100644 --- a/src/__tests__/__snapshots__/get-by-errors.js.snap +++ b/src/__tests__/__snapshots__/get-by-errors.js.snap @@ -1,5 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -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[`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 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."`; +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__/ariaAttributes.js b/src/__tests__/ariaAttributes.js index 84334230..2f0b76de 100644 --- a/src/__tests__/ariaAttributes.js +++ b/src/__tests__/ariaAttributes.js @@ -5,7 +5,7 @@ test('`selected` throws on unsupported roles', () => { expect(() => getByRole('textbox', {selected: true}), ).toThrowErrorMatchingInlineSnapshot( - `"\\"aria-selected\\" is not supported on role \\"textbox\\"."`, + `"aria-selected" is not supported on role "textbox".`, ) }) @@ -14,7 +14,7 @@ test('`pressed` throws on unsupported roles', () => { expect(() => getByRole('textbox', {pressed: true}), ).toThrowErrorMatchingInlineSnapshot( - `"\\"aria-pressed\\" is not supported on role \\"textbox\\"."`, + `"aria-pressed" is not supported on role "textbox".`, ) }) @@ -23,7 +23,7 @@ test('`checked` throws on unsupported roles', () => { expect(() => getByRole('textbox', {checked: true}), ).toThrowErrorMatchingInlineSnapshot( - `"\\"aria-checked\\" is not supported on role \\"textbox\\"."`, + `"aria-checked" is not supported on role "textbox".`, ) }) @@ -32,7 +32,7 @@ test('`expanded` throws on unsupported roles', () => { expect(() => getByRole('heading', {expanded: true}), ).toThrowErrorMatchingInlineSnapshot( - `"\\"aria-expanded\\" is not supported on role \\"heading\\"."`, + `"aria-expanded" is not supported on role "heading".`, ) }) @@ -142,9 +142,9 @@ test('`selected: true` matches `aria-selected="true"` on supported roles', () => 'selected-listbox-option', ]) - expect( - getAllByRole('rowheader', {selected: true}).map(({id}) => id), - ).toEqual(['selected-rowheader', 'selected-native-rowheader']) + expect(getAllByRole('rowheader', {selected: true}).map(({id}) => id)).toEqual( + ['selected-rowheader', 'selected-native-rowheader'], + ) expect(getAllByRole('treeitem', {selected: true}).map(({id}) => id)).toEqual([ 'selected-treeitem', @@ -208,7 +208,7 @@ test('`level` throws on unsupported roles', () => { expect(() => getByRole('button', {level: 3}), ).toThrowErrorMatchingInlineSnapshot( - `"Role \\"button\\" cannot have \\"level\\" property."`, + `Role "button" cannot have "level" property.`, ) }) diff --git a/src/__tests__/base-queries-warn-on-invalid-container.js b/src/__tests__/base-queries-warn-on-invalid-container.js index c4684005..6796a874 100644 --- a/src/__tests__/base-queries-warn-on-invalid-container.js +++ b/src/__tests__/base-queries-warn-on-invalid-container.js @@ -86,8 +86,8 @@ describe('synchronous queries throw on invalid container type', () => { ])('%s', (_queryName, query) => { expect(() => query('invalid type for container', 'irrelevant text'), - ).toThrowErrorMatchingInlineSnapshot( - `"Expected container to be an Element, a Document or a DocumentFragment but got string."`, + ).toThrowError( + `Expected container to be an Element, a Document or a DocumentFragment but got string.`, ) }) }) @@ -120,8 +120,8 @@ describe('asynchronous queries throw on invalid container type', () => { queryOptions, waitOptions, ), - ).rejects.toThrowErrorMatchingInlineSnapshot( - `"Expected container to be an Element, a Document or a DocumentFragment but got string."`, + ).rejects.toThrowError( + `Expected container to be an Element, a Document or a DocumentFragment but got string.`, ) }) }) diff --git a/src/__tests__/element-queries.js b/src/__tests__/element-queries.js index 3e3ee6de..bb9d2fbf 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(`