elements', async t => {
14 | const app = new App({
15 | target
16 | });
17 |
18 | t.htmlEqual(target.innerHTML, `
19 |
20 |
21 |
22 | `);
23 |
24 | app.$destroy();
25 | });
26 |
27 | test('allows height to be specified', async t => {
28 | const app = new App({
29 | target,
30 | props: {
31 | height: '150px'
32 | }
33 | });
34 |
35 | const el = target.firstElementChild;
36 |
37 | t.equal(getComputedStyle(el).height, '150px');
38 |
39 | app.height = '50%';
40 | t.equal(getComputedStyle(el).height, '250px');
41 |
42 | app.$destroy();
43 | });
44 |
45 | test('allows item height to be specified', async t => {
46 | const app = new App({
47 | target,
48 | props: {
49 | items: [{ text: 'bar' }, { text: 'bar' }, { text: 'bar' }, { text: 'bar' }],
50 | height: '150px',
51 | itemHeight: 100
52 | }
53 | });
54 |
55 | const el = target.firstElementChild;
56 |
57 | await sleep(1);
58 | t.equal(el.getElementsByTagName('svelte-virtual-list-row').length, 2);
59 |
60 | app.itemHeight = 50;
61 |
62 | await sleep(1);
63 | t.equal(el.getElementsByTagName('svelte-virtual-list-row').length, 3);
64 |
65 | app.$destroy();
66 | });
67 |
68 | test('updates when items change', async t => {
69 | const app = new App({
70 | target,
71 | props: {
72 | items: [{ text: 'bar'}],
73 | height: '100px'
74 | }
75 | });
76 |
77 | await sleep(1);
78 |
79 | t.htmlEqual(target.innerHTML, `
80 |
81 |
82 |
83 | bar
84 |
85 |
86 |
87 | `);
88 |
89 | app.items = [{ text: 'bar'}, { text: 'baz'}, { text: 'qux'}];
90 |
91 | await sleep(1);
92 |
93 | t.htmlEqual(target.innerHTML, `
94 |
95 |
96 |
97 | bar
98 |
99 |
100 |
101 | baz
102 |
103 |
104 |
105 | `);
106 |
107 | app.$destroy();
108 | });
109 |
110 | test('updates when items change from an empty list', async t => {
111 | const app = new App({
112 | target,
113 | props: {
114 | items: [],
115 | height: '100px'
116 | }
117 | });
118 |
119 | await sleep(1);
120 |
121 | t.htmlEqual(target.innerHTML, `
122 |
123 |
124 |
125 | `);
126 |
127 | app.items = [{ text: 'bar'}, { text: 'baz'}, { text: 'qux'}];
128 | await sleep(1);
129 |
130 | t.htmlEqual(target.innerHTML, `
131 |
132 |
133 |
134 | bar
135 |
136 |
137 |
138 | baz
139 |
140 |
141 |
142 | `);
143 |
144 | app.$destroy();
145 | });
146 |
147 | test('handles unexpected height changes when scrolling up', async t => {
148 | const app = new App({
149 | target,
150 | props: {
151 | items: Array(20).fill().map(() => ({ height: 50 })),
152 | height: '500px'
153 | }
154 | });
155 |
156 | await sleep(1);
157 |
158 | const viewport = target.querySelector('svelte-virtual-list-viewport');
159 |
160 | await scroll(viewport, 500);
161 | assert.equal(viewport.scrollTop, 500);
162 |
163 | app.items = Array(20).fill().map(() => ({ height: 100 }));
164 | await scroll(viewport, 475);
165 | assert.equal(viewport.scrollTop, 525);
166 |
167 | app.$destroy();
168 | });
169 |
170 | // This doesn't seem to work inside puppeteer...
171 | test.skip('handles viewport resizes', async t => {
172 | target.style.height = '50px';
173 |
174 | const app = new App({
175 | target,
176 | props: {
177 | items: [{ foo: 'bar'}, { foo: 'baz'}, { foo: 'qux'}],
178 | height: '100%'
179 | }
180 | });
181 |
182 | t.htmlEqual(target.innerHTML, `
183 |
184 |
185 |
186 | bar
187 |
188 |
189 |
190 | `);
191 |
192 | target.style.height = '200px';
193 |
194 | t.htmlEqual(target.innerHTML, `
195 |
196 |
197 |
198 | bar
199 |
200 |
201 |
202 | baz
203 |
204 |
205 |
206 | qux
207 |
208 |
209 |
210 | `);
211 |
212 | app.$destroy();
213 | });
214 |
215 | function scroll(element, y) {
216 | if (!element || !element.addEventListener) {
217 | throw new Error('???');
218 | }
219 |
220 | return new Promise(fulfil => {
221 | element.addEventListener('scroll', function handler() {
222 | element.removeEventListener('scroll', handler);
223 | fulfil();
224 | });
225 |
226 | element.scrollTo(0, y);
227 |
228 | setTimeout(fulfil, 100);
229 | });
230 | }
231 |
232 | // this allows us to close puppeteer once tests have completed
233 | window.done = done;
--------------------------------------------------------------------------------