diff --git a/src/__tests__/element-queries.js b/src/__tests__/element-queries.js index 6a6df03b..61a88acf 100644 --- a/src/__tests__/element-queries.js +++ b/src/__tests__/element-queries.js @@ -352,9 +352,9 @@ test('label with no form control', () => { `) }) -test('label with no form control and fuzzy matcher', () => { +test('label with "for" attribute but no form control and fuzzy matcher', () => { const {getByLabelText, queryByLabelText} = render( - ``, + ``, ) expect(queryByLabelText('alone', {exact: false})).toBeNull() expect(() => getByLabelText('alone', {exact: false})) @@ -362,7 +362,9 @@ test('label with no form control and fuzzy matcher', () => { "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.
-
" @@ -407,6 +409,114 @@ test('label with children with no form control', () => { `) }) +test('label with non-labellable element', () => { + const {getByLabelText, queryByLabelText} = render(` +
+ +
+ Hello +
+
+ `) + + 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. + +
+ + +
+ + + + + +
+ + Hello + +
+ + +
+ + +
" +`) +}) + +test('multiple labels with non-labellable elements', () => { + const {getAllByLabelText, queryAllByLabelText} = render(` +
+ + + Hello + + +

+ World +

+
+ `) + + 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. + +

+ + +
+ + + + + + + + Hello + + + + + + + +

+ + World + +

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