fix(dom): Make dom selectors in dom/announce tests scoped

PiperOrigin-RevId: 325805996
material-components · Aug 10, 2020 · fc65fd0 · fc65fd0
1 parent 504af0c
commit fc65fd0
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 11 deletions.
diff --git a/packages/mdc-dom/announce.ts b/packages/mdc-dom/announce.ts
@@ -29,6 +29,11 @@ export enum AnnouncerPriority {
   ASSERTIVE = 'assertive',
 }
 
+/**
+ * Data attribute added to live region element.
+ */
+export const DATA_MDC_DOM_ANNOUNCE = 'data-mdc-dom-announce';
+
 /**
  * Announces the given message with optional priority, defaulting to "polite"
  */
@@ -91,6 +96,7 @@ class Announcer {
     el.style.overflow = 'hidden';
     el.setAttribute('aria-atomic', 'true');
     el.setAttribute('aria-live', priority);
+    el.setAttribute(DATA_MDC_DOM_ANNOUNCE, 'true');
     document.body.appendChild(el);
     return el;
   }

diff --git a/packages/mdc-dom/test/announce.test.ts b/packages/mdc-dom/test/announce.test.ts
@@ -22,13 +22,15 @@
  */
 
 import {setUpMdcTestEnvironment} from '../../../testing/helpers/setup';
-import {announce, AnnouncerPriority} from '../announce';
+import {announce, AnnouncerPriority, DATA_MDC_DOM_ANNOUNCE} from '../announce';
+
+const LIVE_REGION_SELECTOR = `[${DATA_MDC_DOM_ANNOUNCE}="true"]`;
 
 describe('announce', () => {
   setUpMdcTestEnvironment();
 
   afterEach(() => {
-    const liveRegions = document.querySelectorAll('[aria-live]');
+    const liveRegions = document.querySelectorAll(LIVE_REGION_SELECTOR);
     for (let i = 0; i < liveRegions.length; i++) {
       const liveRegion = liveRegions[i];
       if (!liveRegion.parentNode) continue;
@@ -39,20 +41,20 @@ describe('announce', () => {
   it('creates an aria-live="polite" region by default', () => {
     announce('Foo');
     jasmine.clock().tick(1);
-    const liveRegion = document.querySelector('[aria-live="polite"]');
+    const liveRegion = document.querySelector(LIVE_REGION_SELECTOR);
     expect(liveRegion!.textContent).toEqual('Foo');
   });
 
   it('creates an aria-live="assertive" region if specified', () => {
     announce('Bar', AnnouncerPriority.ASSERTIVE);
     jasmine.clock().tick(1);
-    const liveRegion = document.querySelector('[aria-live="assertive"]');
+    const liveRegion = document.querySelector(LIVE_REGION_SELECTOR);
     expect(liveRegion!.textContent).toEqual('Bar');
   });
 
   it('sets live region content after a timeout', () => {
     announce('Baz');
-    const liveRegion = document.querySelector('[aria-live="polite"]');
+    const liveRegion = document.querySelector(LIVE_REGION_SELECTOR);
     expect(liveRegion!.textContent).toEqual('');
     jasmine.clock().tick(1);
     expect(liveRegion!.textContent).toEqual('Baz');
@@ -62,15 +64,15 @@ describe('announce', () => {
     announce('aaa');
     announce('bbb');
     announce('ccc');
-    const liveRegions = document.querySelectorAll('[aria-live="polite"]');
+    const liveRegions = document.querySelectorAll(LIVE_REGION_SELECTOR);
     expect(liveRegions.length).toEqual(1);
   });
 
   it('reuses same assertive live region on successive calls', () => {
     announce('aaa', AnnouncerPriority.ASSERTIVE);
     announce('bbb', AnnouncerPriority.ASSERTIVE);
     announce('ccc', AnnouncerPriority.ASSERTIVE);
-    const liveRegions = document.querySelectorAll('[aria-live="assertive"]');
+    const liveRegions = document.querySelectorAll(LIVE_REGION_SELECTOR);
     expect(liveRegions.length).toEqual(1);
   });
 
@@ -79,14 +81,14 @@ describe('announce', () => {
     announce('2');
     announce('3');
     jasmine.clock().tick(1);
-    const liveRegion = document.querySelector('[aria-live="polite"]');
+    const liveRegion = document.querySelector(LIVE_REGION_SELECTOR);
     expect(liveRegion!.textContent).toEqual('3');
   });
 
   it('clears out the message on click', () => {
     announce('hello');
     jasmine.clock().tick(1);
-    const liveRegion = document.querySelector('[aria-live="polite"]');
+    const liveRegion = document.querySelector(LIVE_REGION_SELECTOR);
     expect(liveRegion!.textContent).toEqual('hello');
     document.documentElement.click();
     expect(liveRegion!.textContent).toEqual('');

diff --git a/packages/mdc-menu-surface/test/component.test.ts b/packages/mdc-menu-surface/test/component.test.ts
@@ -383,11 +383,11 @@ describe('MDCMenuSurface', () => {
        expect((component.getDefaultFoundation() as any)
                   .adapter.getAnchorDimensions()
                   .height)
-           .toEqual(21);
+           .toBeCloseTo(21);
        expect((component.getDefaultFoundation() as any)
                   .adapter.getAnchorDimensions()
                   .width)
-           .toEqual(42);
+           .toBeCloseTo(42);
        document.body.removeChild(anchor);
      });