fix: handle ignores for ByText in suggestions (#597)

* fix: don't suggest for script,style tags

* respect custom ignores

* Update src/__tests__/suggestions.js

* don't suggest on nested ignore tags

* remove comment

* move default tags to ignore to config

* remove eslint disable

Author: benmonro

src/__tests__/suggestions.js

@@ -10,6 +10,31 @@ afterAll(() => {
   configure({throwSuggestions: false})
 })
 
+test('does not suggest for nested inline style', () => {
+  renderIntoDocument(
+    `<div data-testid="style"><style>.hsuHs{margin:auto}.wFncld{margin-top:3px;color:#9AA0A6;height:20px;width:20px}</style></div>`,
+  )
+
+  expect(() => screen.getByTestId('style')).not.toThrow()
+})
+
+test('does not suggest for inline script, style', () => {
+  renderIntoDocument(
+    `<script data-testid="script">alert('hello')</script><style data-testid="style">.hsuHs{margin:auto}.wFncld{margin-top:3px;color:#9AA0A6;height:20px;width:20px}</style>`,
+  )
+
+  expect(() => screen.getByTestId('script')).not.toThrow()
+  expect(() => screen.getByTestId('style')).not.toThrow()
+})
+
+test('respects ignores', () => {
+  renderIntoDocument(`<my-thing>foo</my-thing>`)
+
+  expect(() =>
+    screen.queryByText('foo', {ignore: 'my-thing'}),
+  ).not.toThrowError()
+})
+
 test('does not suggest when using getByRole', () => {
   renderIntoDocument(`<button data-testid="foo">submit</button>`)
 

src/config.js

@@ -33,6 +33,7 @@ let config = {
   _disableExpensiveErrorDiagnostics: false,
 }
 
+export const DEFAULT_IGNORE_TAGS = 'script, style'
 export function runWithExpensiveErrorDiagnosticsDisabled(callback) {
   try {
     config._disableExpensiveErrorDiagnostics = true

src/queries/text.js

@@ -1,11 +1,12 @@
+import {wrapAllByQueryWithSuggestion} from '../query-helpers'
+import {DEFAULT_IGNORE_TAGS} from '../config'
 import {
   fuzzyMatches,
   matches,
   makeNormalizer,
   getNodeText,
   buildQueries,
 } from './all-utils'
-import {wrapAllByQueryWithSuggestion} from '../query-helpers'
 
 function queryAllByText(
   container,
@@ -15,7 +16,7 @@ function queryAllByText(
     exact = true,
     collapseWhitespace,
     trim,
-    ignore = 'script, style',
+    ignore = DEFAULT_IGNORE_TAGS,
     normalizer,
   } = {},
 ) {

src/query-helpers.js

@@ -94,7 +94,7 @@ const wrapSingleQueryWithSuggestion = (query, queryAllByName, variant) => (
 ) => {
   const element = query(container, ...args)
   const [{suggest = getConfig().throwSuggestions} = {}] = args.slice(-1)
-  if (suggest) {
+  if (element && suggest) {
     const suggestion = getSuggestedQuery(element, variant)
     if (suggestion && !queryAllByName.endsWith(suggestion.queryName)) {
       throw getSuggestionError(suggestion.toString(), container)
@@ -111,7 +111,7 @@ const wrapAllByQueryWithSuggestion = (query, queryAllByName, variant) => (
   const els = query(container, ...args)
 
   const [{suggest = getConfig().throwSuggestions} = {}] = args.slice(-1)
-  if (suggest) {
+  if (els.length && suggest) {
     // get a unique list of all suggestion messages.  We are only going to make a suggestion if
     // all the suggestions are the same
     const uniqueSuggestionMessages = [

src/suggestions.js

@@ -1,6 +1,8 @@
 import {computeAccessibleName} from 'dom-accessibility-api'
 import {getRoles} from './role-helpers'
 import {getDefaultNormalizer} from './matches'
+import {getNodeText} from './get-node-text'
+import {DEFAULT_IGNORE_TAGS} from './config'
 
 const normalize = getDefaultNormalizer()
 
@@ -57,8 +59,8 @@ export function getSuggestedQuery(element, variant) {
     return makeSuggestion('PlaceholderText', placeholderText, {variant})
   }
 
-  const textContent = normalize(element.textContent)
-  if (textContent) {
+  const textContent = normalize(getNodeText(element))
+  if (textContent && !element.matches(DEFAULT_IGNORE_TAGS)) {
     return makeSuggestion('Text', textContent, {variant})
   }