Merge pull request #89 from Workiva/r18-workaround-css-escape-id

FED-3909 [hasDescription matcher] escape special characters in ids

Author: btr-rmconsole-7[bot]

CHANGELOG.md

@@ -1,5 +1,8 @@
 # React Testing Library Changelog
 
+## 3.1.1
+* [#89](https://github.com/Workiva/react_testing_library/pull/89) Escape special characters in ids in `hasDescription` matcher
+
 ## 3.1.0
 * [#86](https://github.com/Workiva/react_testing_library/pull/86) Add Dart bindings for React `act`
 

lib/src/matchers/jest_dom/has_description.dart

@@ -141,7 +141,7 @@ class _HasDescription extends CustomMatcher with ElementTextContentMatcherMixin
 
     final elementsWithDescriptions = <Element>[];
     _idsOfElementsThatDescribe(item)?.forEach((id) {
-      final elWithDesc = querySelector('#$id');
+      final elWithDesc = querySelector('#${Css.escape(id)}');
       if (elWithDesc != null) {
         elementsWithDescriptions.add(elWithDesc);
       }

test/unit/dom/matchers/has_description_test.dart

@@ -31,15 +31,16 @@ void main() {
         {},
         react.button({
           'aria-label': 'Close',
-          'aria-describedby': 'description-close',
+          // Use a special character to verify that it is escaped correctly in hasDescription.
+          'aria-describedby': 'r:description-close',
         }, 'X'),
         react.button({
           'aria-label': 'Has Multiple Descriptions',
-          'aria-describedby': 'description-close some-other-description',
+          'aria-describedby': 'r:description-close some-other-description',
         }, 'X'),
         react.button({}, 'Delete'),
         react.button({'aria-describedby': 'not-found'}, 'Has id not found'),
-        react.div({'id': 'description-close'}, 'Closing will discard   any changes'),
+        react.div({'id': 'r:description-close'}, 'Closing will discard   any changes'),
         react.div({'id': 'some-other-description'}, 'Some other  description'),
       ));
     });