<!doctype html> <!-- @license Copyright (c) 2015 The Polymer Project Authors. All rights reserved. This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as part of the polymer project is also subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt --> <html> <head> <title>paper-dialog-behavior tests</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"> <script src="../../webcomponentsjs/webcomponents-lite.js"></script> <script src="../../web-component-tester/browser.js"></script> <script src="../../test-fixture/test-fixture-mocha.js"></script> <link rel="import" href="../../test-fixture/test-fixture.html"> <link rel="import" href="test-dialog.html"> </head> <body> <test-fixture id="basic"> <template> <test-dialog> <p>Dialog</p> <div class="buttons"> <button extra>extra</button> <button dialog-dismiss>dismiss</button> <button dialog-confirm>confirm</button> </div> </test-dialog> </template> </test-fixture> <test-fixture id="modal"> <template> <test-dialog modal> <p>Dialog</p> <div class="buttons"> <button dialog-dismiss>dismiss</button> <button dialog-confirm autofocus>confirm</button> </div> </test-dialog> </template> </test-fixture> <test-fixture id="backdrop"> <template> <test-dialog with-backdrop> <p>Dialog</p> <div class="buttons"> <button dialog-dismiss>dismiss</button> <button dialog-confirm autofocus>confirm</button> </div> </test-dialog> </template> </test-fixture> <test-fixture id="header"> <template> <test-dialog> <h2>Dialog</h2> <div class="buttons"> <button dialog-dismiss>dismiss</button> <button dialog-confirm autofocus>confirm</button> </div> </test-dialog> </template> </test-fixture> <test-fixture id="header-with-id"> <template> <test-dialog> <h2 id="header">Dialog</h2> <div class="buttons"> <button dialog-dismiss>dismiss</button> <button dialog-confirm autofocus>confirm</button> </div> </test-dialog> </template> </test-fixture> <script> function runAfterOpen(dialog, cb) { dialog.addEventListener('iron-overlay-opened', function() { cb(); }); dialog.open(); } suite('basic', function() { test('clicking dialog does not cancel the dialog', function(done) { var dialog = fixture('basic'); runAfterOpen(dialog, function() { dialog.addEventListener('iron-overlay-closed', function() { assert('dialog should not close'); }); dialog.click(); setTimeout(function() { done(); }, 100); }); }); test('clicking dialog-dismiss button closes the dialog without confirmation', function(done) { var dialog = fixture('basic'); runAfterOpen(dialog, function() { dialog.addEventListener('iron-overlay-closed', function(event) { assert.isFalse(event.detail.canceled, 'dialog is not canceled'); assert.isFalse(event.detail.confirmed, 'dialog is not confirmed'); done(); }); Polymer.dom(dialog).querySelector('[dialog-dismiss]').click(); }); }); test('clicking dialog-confirm button closes the dialog with confirmation', function(done) { var dialog = fixture('basic'); runAfterOpen(dialog, function() { dialog.addEventListener('iron-overlay-closed', function(event) { assert.isFalse(event.detail.canceled, 'dialog is not canceled'); assert.isTrue(event.detail.confirmed, 'dialog is confirmed'); done(); }); Polymer.dom(dialog).querySelector('[dialog-confirm]').click(); }); }); test('with-backdrop works', function() { var dialog = fixture('backdrop'); runAfterOpen(dialog, function() { assert.isTrue(dialog.backdropElement.opened, 'backdrop is open'); }); }); test('modal dialog has backdrop', function() { var dialog = fixture('modal'); assert.isTrue(dialog.withBackdrop, 'withBackdrop is true'); }); test('modal dialog has no-cancel-on-outside-click', function() { var dialog = fixture('modal'); assert.isTrue(dialog.noCancelOnOutsideClick, 'noCancelOnOutsideClick is true'); }); test('clicking outside a modal dialog does not move focus from dialog', function(done) { var dialog = fixture('modal'); runAfterOpen(dialog, function() { dialog.backdropElement.click(); setTimeout(function() { assert.equal(document.activeElement, Polymer.dom(dialog).querySelector('[autofocus]'), 'document.activeElement is the autofocused button'); done(); }, 10); }); }); test('removing a child element on click does not cause an exception', function(done) { var dialog = fixture('basic'); runAfterOpen(dialog, function() { var button = Polymer.dom(dialog).querySelector('[extra]'); button.addEventListener('click', function(event) { Polymer.dom(event.target.parentNode).removeChild(event.target); // should not throw exception here done(); }); button.click(); }); }); }); suite('a11y', function() { test('dialog has role="dialog"', function() { var dialog = fixture('basic'); assert.equal(dialog.getAttribute('role'), 'dialog', 'has role="dialog"'); }); test('dialog has aria-modal=false', function() { var dialog = fixture('basic'); assert.equal(dialog.getAttribute('aria-modal'), 'false', 'has aria-modal="false"'); }); test('modal dialog has aria-modal=true', function() { var dialog = fixture('modal'); assert.equal(dialog.getAttribute('aria-modal'), 'true', 'has aria-modal="true"'); }); test('dialog with header has aria-labelledby', function() { var dialog = fixture('header'); var header = Polymer.dom(dialog).querySelector('h2'); assert.ok(header.getAttribute('id'), 'header has auto-generated id'); assert.equal(dialog.getAttribute('aria-labelledby'), header.getAttribute('id'), 'aria-labelledby is set to header id'); }); test('dialog with lazily created header has aria-labelledby', function(done) { var dialog = fixture('basic'); var header = document.createElement('h2'); Polymer.dom(dialog).appendChild(header); Polymer.dom.flush(); setTimeout(function() { assert.ok(header.getAttribute('id'), 'header has auto-generated id'); assert.equal(dialog.getAttribute('aria-labelledby'), header.getAttribute('id'), 'aria-labelledby is set to header id'); done(); }, 10); }); test('dialog with header with id preserves id and has aria-labelledby', function() { var dialog = fixture('header-with-id'); var header = Polymer.dom(dialog).querySelector('h2'); assert.equal(header.getAttribute('id'), 'header', 'header has preset id'); assert.equal(dialog.getAttribute('aria-labelledby'), 'header', 'aria-labelledby is set to header id'); }); }); </script> </body> </html>