Aurimas Liutikas | 7a2249a | 2021-06-21 14:24:43 -0700 | [diff] [blame] | 1 | <!doctype html> |
| 2 | <!-- |
| 3 | @license |
| 4 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved. |
| 5 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt |
| 6 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| 7 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt |
| 8 | Code distributed by Google as part of the polymer project is also |
| 9 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt |
| 10 | --> |
| 11 | |
| 12 | <html> |
| 13 | |
| 14 | <head> |
| 15 | |
| 16 | <title>paper-toast-basic</title> |
| 17 | <meta charset="utf-8"> |
| 18 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 19 | |
| 20 | <script src="../../webcomponentsjs/webcomponents-lite.js"></script> |
| 21 | <script src="../../web-component-tester/browser.js"></script> |
| 22 | |
| 23 | <link rel="import" href="../paper-toast.html"> |
| 24 | |
| 25 | <style> |
| 26 | body { |
| 27 | margin: 0; |
| 28 | padding: 0; |
| 29 | } |
| 30 | </style> |
| 31 | </head> |
| 32 | |
| 33 | <body> |
| 34 | |
| 35 | <test-fixture id="basic"> |
| 36 | <template> |
| 37 | <paper-toast></paper-toast> |
| 38 | </template> |
| 39 | </test-fixture> |
| 40 | |
| 41 | <test-fixture id="show"> |
| 42 | <template> |
| 43 | <paper-toast opened></paper-toast> |
| 44 | </template> |
| 45 | </test-fixture> |
| 46 | |
| 47 | <test-fixture id="contained"> |
| 48 | <template> |
| 49 | <paper-toast class="fit-bottom"></paper-toast> |
| 50 | <div style="margin: 50px; width: 100px; height: 100px; background-color: orange;"></div> |
| 51 | </template> |
| 52 | </test-fixture> |
| 53 | |
| 54 | <script> |
| 55 | |
| 56 | suite('basic', function() { |
| 57 | |
| 58 | var toast; |
| 59 | |
| 60 | test('is hidden', function() { |
| 61 | toast = fixture('basic'); |
| 62 | assert.isFalse(toast.opened, '`opened` is false'); |
| 63 | }); |
| 64 | |
| 65 | test('is visible', function() { |
| 66 | toast = fixture('show'); |
| 67 | assert.isTrue(toast.opened, '`opened` is true'); |
| 68 | }); |
| 69 | |
| 70 | test('show() will open toast', function() { |
| 71 | toast = fixture('basic'); |
| 72 | toast.show(); |
| 73 | assert.isTrue(toast.opened, '`opened` is true'); |
| 74 | }); |
| 75 | |
| 76 | test('hide() will close toast', function() { |
| 77 | toast = fixture('show'); |
| 78 | toast.hide(); |
| 79 | assert.isFalse(toast.opened, '`opened` is false'); |
| 80 | }); |
| 81 | |
| 82 | test('toast auto-close after 10ms', function(done) { |
| 83 | toast = fixture('basic'); |
| 84 | toast.duration = 10; |
| 85 | toast.show(); |
| 86 | setTimeout(function() { |
| 87 | assert.isFalse(toast.opened, '`opened` is false'); |
| 88 | done(); |
| 89 | }, 12); |
| 90 | }); |
| 91 | |
| 92 | test('toast fires opened event', function(done) { |
| 93 | toast = fixture('show'); |
| 94 | toast.addEventListener('iron-overlay-opened', function() { |
| 95 | done(); |
| 96 | }); |
| 97 | }); |
| 98 | |
| 99 | test('toast does not get focused', function(done) { |
| 100 | toast = fixture('show'); |
| 101 | var spy = sinon.spy(toast, 'focus'); |
| 102 | assert.isTrue(toast.noAutoFocus, 'no-auto-focus is true'); |
| 103 | toast.addEventListener('iron-overlay-opened', function() { |
| 104 | assert.isFalse(spy.called, 'toast is not focused'); |
| 105 | done(); |
| 106 | }); |
| 107 | }); |
| 108 | |
| 109 | test('toast fires closed event', function(done) { |
| 110 | toast = fixture('basic'); |
| 111 | toast.show({duration: 350}); |
| 112 | toast.addEventListener('iron-overlay-closed', function() { |
| 113 | done(); |
| 114 | }); |
| 115 | }); |
| 116 | |
| 117 | test('show() accepts valid properties', function() { |
| 118 | toast = fixture('basic'); |
| 119 | toast.show({text: 'hello world', duration: 20}); |
| 120 | assert.isTrue(toast.opened, '`opened` is true'); |
| 121 | assert.equal(toast.text, 'hello world', '`text` is correct'); |
| 122 | assert.equal(toast.duration, 20, '`duration` is correct'); |
| 123 | }); |
| 124 | |
| 125 | test('show() does not accept invalid properties', function() { |
| 126 | toast = fixture('basic'); |
| 127 | toast.show({foo: 'bar'}); |
| 128 | assert.isUndefined(toast.foo, '`foo` is not a valid property and will not be set'); |
| 129 | assert.isTrue(toast.opened, '`opened` is true'); |
| 130 | }); |
| 131 | |
| 132 | test('show() does not accept private properties', function() { |
| 133 | toast = fixture('basic'); |
| 134 | var temp = toast._manager; |
| 135 | toast.show({_manager: 'bar'}); |
| 136 | assert.equal(toast._manager, temp, '`_manager` is a private property and will not be set'); |
| 137 | assert.isTrue(toast.opened, '`opened` is true'); |
| 138 | }); |
| 139 | |
| 140 | test('show() accepts a string argument as the text parameter', function() { |
| 141 | toast = fixture('basic'); |
| 142 | toast.show('hello world 2'); |
| 143 | assert.equal(toast.text, 'hello world 2', '`text is correct`'); |
| 144 | }); |
| 145 | |
| 146 | suite('disable auto-close', function() { |
| 147 | var spy; |
| 148 | setup(function() { |
| 149 | toast = fixture('basic'); |
| 150 | spy = sinon.spy(toast, 'async'); |
| 151 | }); |
| 152 | test('duration = Infinity', function() { |
| 153 | toast.duration = Infinity; |
| 154 | toast.show(); |
| 155 | assert.isFalse(spy.calledWith(toast.close), '`async` was not called with `close()`'); |
| 156 | assert.isFalse(spy.calledWith(toast.hide), '`async` was not called with `hide()`'); |
| 157 | }); |
| 158 | |
| 159 | test('duration = 0', function() { |
| 160 | toast.duration = 0; |
| 161 | toast.show(); |
| 162 | assert.isFalse(spy.calledWith(toast.close), '`async` was not called with `close()`'); |
| 163 | assert.isFalse(spy.calledWith(toast.hide), '`async` was not called with `hide()`'); |
| 164 | }); |
| 165 | |
| 166 | test('duration = -10', function() { |
| 167 | toast.duration = -10; |
| 168 | toast.show(); |
| 169 | assert.isFalse(spy.calledWith(toast.close), '`async` was not called with `close()`'); |
| 170 | assert.isFalse(spy.calledWith(toast.hide), '`async` was not called with `hide()`'); |
| 171 | }); |
| 172 | }); |
| 173 | |
| 174 | test('there is only 1 toast opened', function() { |
| 175 | var toast1 = fixture('basic'); |
| 176 | var toast2 = fixture('show'); |
| 177 | toast2.open(); |
| 178 | toast1.open(); |
| 179 | assert.isTrue(toast1.opened, 'toast1 is opened'); |
| 180 | assert.isFalse(toast2.opened, 'toast2 is not opened'); |
| 181 | toast2.open(); |
| 182 | assert.isFalse(toast1.opened, 'toast1 is now not opened'); |
| 183 | assert.isTrue(toast2.opened, 'toast2 is now opened'); |
| 184 | }); |
| 185 | |
| 186 | test('auto-close is correctly reset', function(done) { |
| 187 | toast = fixture('basic'); |
| 188 | toast.duration = 10; |
| 189 | toast.show(); |
| 190 | // a bit later (before the auto-close), toast is reset |
| 191 | setTimeout(function() { |
| 192 | toast.hide(); |
| 193 | // keep toast opened |
| 194 | toast.duration = 0; |
| 195 | toast.show(); |
| 196 | setTimeout(function() { |
| 197 | assert.isTrue(toast.opened, 'toast is still open'); |
| 198 | done(); |
| 199 | }, 10); |
| 200 | }, 5); |
| 201 | }); |
| 202 | |
| 203 | test('toast is positioned according at the bottom left of its fitInto', function(done) { |
| 204 | var f = fixture('contained'); |
| 205 | var toast = f[0]; |
| 206 | var container = f[1]; |
| 207 | toast.fitInto = container; |
| 208 | toast.open(); |
| 209 | // Wait for it to be opened, so it will be sized correctly. |
| 210 | toast.addEventListener('iron-overlay-opened', function() { |
| 211 | var rect = toast.getBoundingClientRect(); |
| 212 | assert.equal(rect.left, 50, 'left ok'); |
| 213 | // 150px from top, (100px of height + 50px of margin-top) |
| 214 | assert.equal(rect.bottom, 150, 'bottom'); |
| 215 | done(); |
| 216 | }); |
| 217 | }); |
| 218 | |
| 219 | suite('a11y', function() { |
| 220 | test('show() will announce text', function() { |
| 221 | toast = fixture('basic'); |
| 222 | var spy = sinon.spy(toast, 'fire'); |
| 223 | toast.text = 'announce!'; |
| 224 | toast.show(); |
| 225 | assert.isTrue(spy.calledWith('iron-announce', { |
| 226 | text: 'announce!' |
| 227 | }), 'text announced'); |
| 228 | }); |
| 229 | |
| 230 | test('hide() will not announce text', function() { |
| 231 | toast = fixture('show'); |
| 232 | var spy = sinon.spy(toast, 'fire'); |
| 233 | toast.hide(); |
| 234 | assert.isFalse(spy.calledWith('iron-announce'), 'text not announced'); |
| 235 | }); |
| 236 | }); |
| 237 | |
| 238 | }); |
| 239 | </script> |
| 240 | |
| 241 | </body> |
| 242 | |
| 243 | </html> |