| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <meta name="timeout" content="long"> |
| <title>Toast: option tests</title> |
| |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| |
| <body> |
| </body> |
| |
| <script type="module"> |
| import { showToast, StdToastElement } from 'std:elements/toast'; |
| import { assertToastNotShown, assertToastShown } from './resources/helpers.js'; |
| |
| // message |
| test(() => { |
| const toast = new StdToastElement('test'); |
| document.body.appendChild(toast); |
| |
| assert_equals(toast.textContent, 'test'); |
| }, 'passing test string as message sets the message properly'); |
| |
| test(() => { |
| const toast = new StdToastElement('<p>rich text</p>'); |
| document.body.appendChild(toast); |
| |
| assert_equals(toast.textContent, '<p>rich text</p>'); |
| assert_equals(toast.querySelector('p'), null); |
| }, 'passing markup to the constructor does not pass through the markup behaviors'); |
| |
| test(() => { |
| const toast = new StdToastElement(false); |
| document.body.appendChild(toast); |
| |
| assert_equals(toast.textContent, 'false'); |
| }), 'passing false as message converts to the string `false`'; |
| |
| test(() => { |
| const toast = new StdToastElement(); |
| document.body.appendChild(toast); |
| |
| assert_equals(toast.textContent, ''); |
| }, 'passing nothing as message sets the message to the empty string'); |
| |
| test(() => { |
| const toast = new StdToastElement(undefined); |
| document.body.appendChild(toast); |
| |
| assert_equals(toast.textContent, ''); |
| }, 'passing `undefined` as message sets the message to the empty string'); |
| |
| test(() => { |
| const toast = new StdToastElement(''); |
| document.body.appendChild(toast); |
| |
| assert_equals(toast.textContent, ''); |
| }, 'passing empty string as message sets the message to the empty string'); |
| |
| test(() => { |
| const toastString = '<std-toast id="test">test</std-toast>'; |
| document.body.innerHTML = toastString; |
| const toast = document.body.querySelector('#test'); |
| |
| assert_equals(toast.textContent, 'test'); |
| }, 'HTML created toast has `test` as its text content'); |
| |
| // duration |
| async_test(t => { |
| const toast = showToast('message'); |
| |
| t.step_timeout(() => { |
| assertToastShown(toast); |
| }, 2999); |
| |
| t.step_timeout(() => { |
| assertToastNotShown(toast); |
| t.done(); |
| }, 3000); |
| |
| t.add_cleanup(function() { |
| toast.remove(); |
| }); |
| }, 'showToast closes after default duration of 3000ms'); |
| // FIXME: find a way to virtualize time instead of waiting 3000ms |
| // BUG: https://github.com/web-platform-tests/wpt/issues/17489 |
| |
| async_test(t => { |
| const toast = showToast('message', {duration: 50}); |
| |
| t.step_timeout(() => { |
| assertToastShown(toast); |
| }, 49); |
| |
| t.step_timeout(() => { |
| assertToastNotShown(toast); |
| t.done(); |
| }, 50); |
| |
| t.add_cleanup(function() { |
| toast.remove(); |
| }); |
| }, 'showToast closes after user specified 50ms'); |
| |
| async_test(t => { |
| const toast = showToast('message', {duration: Infinity}); |
| |
| t.step_timeout(() => { |
| assertToastShown(toast); |
| t.done(); |
| }, 50); |
| |
| t.add_cleanup(function() { |
| toast.remove(); |
| }); |
| }, 'passing Infinity as the duration leaves the toast open for at least 50ms'); |
| |
| test(() => { |
| assert_throws(new RangeError(), () => { |
| const toast = showToast('Message', {duration: 0}); |
| }); |
| }, 'setting the duration to 0 throws a RangeError'); |
| |
| test(() => { |
| assert_throws(new RangeError(), () => { |
| const toast = showToast('Message', {duration: -5}); |
| }); |
| }, 'setting the duration to a negative number throws a RangeError'); |
| </script> |
