blob: 154015d78374c932e352f560f29e9ebd24533a19 [file] [log] [blame]
Aurimas Liutikas7a2249a2021-06-21 14:24:43 -07001<!doctype html>
2<!--
3@license
4Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
5This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
6The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
7The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
8Code distributed by Google as part of the polymer project is also
9subject 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>