diff options
| author | Laussel Loïc <[email protected]> | 2018-08-31 09:18:28 +0200 |
|---|---|---|
| committer | XhmikosR <[email protected]> | 2018-11-13 08:47:32 +0200 |
| commit | 4cac833447c53ec7f140c26260ddf36d78ff298f (patch) | |
| tree | 7c7b0631c775c79a39949c10d7d9d0bea5761219 /js/tests | |
| parent | 2f81ab007cad06dd333a7431a3a653f812bbf246 (diff) | |
| download | bootstrap-4cac833447c53ec7f140c26260ddf36d78ff298f.tar.xz bootstrap-4cac833447c53ec7f140c26260ddf36d78ff298f.zip | |
Implement `data-dismiss="toast"` to allow user to interact itself with the component (#27155)
Diffstat (limited to 'js/tests')
| -rw-r--r-- | js/tests/unit/toast.js | 29 | ||||
| -rw-r--r-- | js/tests/visual/toast.html | 10 |
2 files changed, 37 insertions, 2 deletions
diff --git a/js/tests/unit/toast.js b/js/tests/unit/toast.js index 873661c76..d9c5e1fb6 100644 --- a/js/tests/unit/toast.js +++ b/js/tests/unit/toast.js @@ -232,4 +232,33 @@ $(function () { }) .bootstrapToast('show') }) + + + QUnit.test('should close toast when close element with data-dismiss attribute is set', function (assert) { + assert.expect(2) + var done = assert.async() + + var toastHtml = + '<div class="toast" data-delay="1" data-autohide="false" data-animation="false">' + + '<button type="button" class="ml-2 mb-1 close" data-dismiss="toast">' + + 'close' + + '</button>' + + '</div>' + + var $toast = $(toastHtml) + .bootstrapToast() + .appendTo($('#qunit-fixture')) + + $toast + .on('shown.bs.toast', function () { + assert.strictEqual($toast.hasClass('show'), true) + var button = $toast.find('.close') + button.trigger('click') + }) + .on('hidden.bs.toast', function () { + assert.strictEqual($toast.hasClass('show'), false) + done() + }) + .bootstrapToast('show') + }) }) diff --git a/js/tests/visual/toast.html b/js/tests/visual/toast.html index 6897022c0..902194617 100644 --- a/js/tests/visual/toast.html +++ b/js/tests/visual/toast.html @@ -26,22 +26,28 @@ </div> <div class="notifications"> - <div id="toastAutoHide" class="toast"> + <div id="toastAutoHide" class="toast" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast-header"> <img class="rounded mr-2" data-src="holder.js/20x20?size=1&text=.&bg=#007aff" alt=""> <strong class="mr-auto">Bootstrap</strong> <small>11 mins ago</small> + <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"> + <span aria-hidden="true">×</span> + </button> </div> <div class="toast-body"> Hello, world! This is a toast message with <strong>autohide</strong> in 2 seconds </div> </div> - <div class="toast" data-autohide="false"> + <div class="toast" data-autohide="false" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast-header"> <img class="rounded mr-2" data-src="holder.js/20x20?size=1&text=.&bg=#007aff" alt=""> <strong class="mr-auto">Bootstrap</strong> <small class="text-muted">2 seconds ago</small> + <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"> + <span aria-hidden="true">×</span> + </button> </div> <div class="toast-body"> Heads up, toasts will stack automatically |