WIP: Add unit tests for announce()

Author: acdvorak

packages/mdc-snackbar/index.js

@@ -24,7 +24,7 @@
 import {MDCComponent} from '@material/base/index';
 import MDCSnackbarFoundation from './foundation';
 import {strings} from './constants';
-import {announce} from './util';
+import * as util from './util';
 import * as ponyfill from '@material/dom/ponyfill';
 
 const {
@@ -49,13 +49,23 @@ class MDCSnackbar extends MDCComponent {
     /** @type {!HTMLElement} */
     this.actionButtonEl_;
 
+    /** @type {function(!HTMLElement, !HTMLElement=): void} */
+    this.announce_;
+
     /** @private {!Function} */
     this.handleKeyDown_;
 
     /** @private {!Function} */
     this.handleSurfaceClick_;
   }
 
+  /**
+   * @param {function(): function(!HTMLElement, !HTMLElement=):void} announceFactory
+   */
+  initialize(announceFactory = () => util.announce) {
+    this.announce_ = announceFactory();
+  }
+
   initialSyncWithDOM() {
     this.surfaceEl_ = /** @type {!HTMLElement} */ (this.root_.querySelector(SURFACE_SELECTOR));
     this.labelEl_ = /** @type {!HTMLElement} */ (this.root_.querySelector(LABEL_SELECTOR));
@@ -101,7 +111,7 @@ class MDCSnackbar extends MDCComponent {
     return new MDCSnackbarFoundation({
       addClass: (className) => this.root_.classList.add(className),
       removeClass: (className) => this.root_.classList.remove(className),
-      announce: () => announce(this.labelEl_),
+      announce: () => this.announce_(this.labelEl_),
       notifyOpening: () => this.emit(OPENING_EVENT, {}),
       notifyOpened: () => this.emit(OPENED_EVENT, {}),
       notifyClosing: (reason) => this.emit(CLOSING_EVENT, reason ? {reason} : {}),

test/unit/mdc-snackbar/foundation.test.js

@@ -92,6 +92,13 @@ test('#destroy cancels all timers', () => {
   td.verify(foundation.close(strings.REASON_DISMISS), {times: 0});
 });
 
+test('#open announces text to screen readers', () => {
+  const {foundation, mockAdapter} = setupTest();
+
+  foundation.open();
+  td.verify(mockAdapter.announce(), {times: 1});
+});
+
 test('#open adds CSS classes after rAF', () => {
   const {foundation, mockAdapter} = setupTest();
   const clock = installClock();

test/unit/mdc-snackbar/mdc-snackbar.test.js

@@ -66,8 +66,9 @@ function setupTest(fixture = getFixture()) {
   const actions = fixture.querySelector('.mdc-snackbar__actions');
   const actionButton = fixture.querySelector('.mdc-snackbar__action-button');
   const actionIcon = fixture.querySelector('.mdc-snackbar__action-icon');
-  const component = new MDCSnackbar(root);
-  return {component, root, surface, label, actions, actionButton, actionIcon};
+  const announce = td.func('announce');
+  const component = new MDCSnackbar(root, undefined, () => announce);
+  return {component, announce, root, surface, label, actions, actionButton, actionIcon};
 }
 
 /**
@@ -91,10 +92,12 @@ function setupTestWithMocks(fixture = getFixture()) {
   /** @type {!MDCSnackbarFoundation} */
   const mockFoundation = new MockFoundationCtor();
 
+  const announce = td.func('announce');
+
   /** @type {!MDCSnackbar} */
-  const component = new MDCSnackbar(root, mockFoundation);
+  const component = new MDCSnackbar(root, mockFoundation, () => announce);
 
-  return {component, mockFoundation, root, surface, label, actions, actionButton, actionIcon};
+  return {component, mockFoundation, announce, root, surface, label, actions, actionButton, actionIcon};
 }
 
 suite('MDCSnackbar');
@@ -149,6 +152,13 @@ test('clicking on surface does nothing', () => {
   component.destroy();
 });
 
+test('#open announces to screen readers', () => {
+  const {component, announce, label} = setupTest();
+
+  component.open();
+  td.verify(announce(label), {times: 1});
+});
+
 test('#open forwards to MDCSnackbarFoundation#open', () => {
   const {component, mockFoundation} = setupTestWithMocks();
 

test/unit/mdc-snackbar/util.test.js

@@ -0,0 +1,128 @@
+/**
+ * @license
+ * Copyright 2017 Google Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+import bel from 'bel';
+import {assert} from 'chai';
+import {install as installClock} from '../helpers/clock';
+import * as util from '../../../packages/mdc-snackbar/util';
+import {strings, numbers} from '../../../packages/mdc-snackbar/constants';
+
+const {ARIA_LIVE_DELAY_MS} = numbers;
+const {ARIA_LIVE_LABEL_TEXT_ATTR} = strings;
+
+suite('MDCSnackbar - util');
+
+test('#announce temporarily disables ARIA attributes and then restores them', () => {
+  const fixture = bel`
+<div>
+  <div class="aria" role="status" aria-live="polite">
+    <div class="label"></div>
+  </div>
+</div>`;
+  const clock = installClock();
+
+  const ariaEl = fixture.querySelector('.aria');
+  const labelEl = fixture.querySelector('.label');
+
+  const labelText = 'Foo';
+  labelEl.textContent = labelText;
+
+  util.announce(ariaEl, labelEl);
+
+  // Trim to remove `&nbsp;` (see comment in util.js)
+  assert.equal(labelEl.textContent.trim(), '');
+  assert.equal(ariaEl.getAttribute('aria-live'), 'off');
+
+  clock.tick(ARIA_LIVE_DELAY_MS);
+
+  assert.equal(labelEl.textContent, labelText);
+  assert.equal(ariaEl.getAttribute('aria-live'), 'polite');
+});
+
+test('#announce prevents flicker by displaying label text on ::before pseudo-element and then removing it', () => {
+  const fixture = bel`
+<div>
+  <div class="aria" role="status" aria-live="polite">
+    <div class="label"></div>
+  </div>
+</div>`;
+  const clock = installClock();
+
+  const ariaEl = fixture.querySelector('.aria');
+  const labelEl = fixture.querySelector('.label');
+
+  const labelText = 'Foo';
+  labelEl.textContent = labelText;
+
+  util.announce(ariaEl, labelEl);
+
+  assert.equal(labelEl.getAttribute(ARIA_LIVE_LABEL_TEXT_ATTR), labelText);
+
+  clock.tick(ARIA_LIVE_DELAY_MS);
+
+  assert.equal(labelEl.getAttribute(ARIA_LIVE_LABEL_TEXT_ATTR), null);
+});
+
+test('#announce second argument is optional', () => {
+  const fixture = bel`
+<div>
+  <div class="aria label" role="status" aria-live="polite"></div>
+</div>`;
+  const clock = installClock();
+
+  const ariaEl = fixture.querySelector('.aria');
+
+  const labelText = 'Foo';
+  ariaEl.textContent = labelText;
+
+  util.announce(ariaEl);
+
+  // Trim to remove `&nbsp;` (see comment in util.js)
+  assert.equal(ariaEl.textContent.trim(), '');
+  assert.equal(ariaEl.getAttribute(ARIA_LIVE_LABEL_TEXT_ATTR), labelText);
+  assert.equal(ariaEl.getAttribute('aria-live'), 'off');
+
+  clock.tick(ARIA_LIVE_DELAY_MS);
+
+  assert.equal(ariaEl.textContent, labelText);
+  assert.equal(ariaEl.getAttribute(ARIA_LIVE_LABEL_TEXT_ATTR), null);
+  assert.equal(ariaEl.getAttribute('aria-live'), 'polite');
+});
+
+test('#announce does nothing if textContent is empty', () => {
+  const fixture = bel`
+<div>
+  <div class="aria" role="status" aria-live="polite">
+    <div class="label"></div>
+  </div>
+</div>`;
+
+  const ariaEl = fixture.querySelector('.aria');
+  const labelEl = fixture.querySelector('.label');
+
+  util.announce(ariaEl, labelEl);
+
+  assert.equal(labelEl.textContent.trim(), '');
+  assert.equal(labelEl.getAttribute(ARIA_LIVE_LABEL_TEXT_ATTR), null);
+  assert.equal(ariaEl.getAttribute('aria-live'), 'polite');
+});