Skip to content
Navigation Menu
{{ message }}
forked from ampproject/amphtml
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathiframe.js
More file actions
339 lines (328 loc) · 11 KB
/
Copy pathiframe.js
File metadata and controls
339 lines (328 loc) · 11 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
/**
* Copyright 2015 The AMP HTML Authors. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS-IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import {Timer} from '../src/timer';
import {installCoreServices} from '../src/amp-core-service';
import {registerForUnitTest} from '../src/runtime';
let iframeCount = 0;
/**
* Creates an iframe from an HTML fixture for use in tests.
*
* Returns a promise for when the iframe is usable for testing that produces
* an object with properties related to the created iframe and utility methods:
* - win: The created window.
* - doc: The created document.
* - iframe: The host iframe element. Useful for e.g. resizing.
* - awaitEvent: A function that returns a promise for when the given custom
* event fired at least the given number of times.
* - errors: Array of console.error fired during page load.
*
* setTimeout inside the iframe will go 10x normal speed.
* TODO(@cramforce): Add support for a fake clock.
*
* @param {string} fixture The name of the fixture file.
* @param {number} initialIframeHeight in px.
* @param {function(!Window)} opt_beforeLoad Called just before any other JS
* executes in the window.
* @return {!Promise<{
* win: !Window,
* doc: !Document,
* iframe: !Element,
* awaitEvent: function(string, number):!Promise
* }>}
*/
export function createFixtureIframe(fixture, initialIframeHeight, opt_beforeLoad) {
return new Promise((resolve, reject) => {
// Counts the supported custom events.
const events = {
'amp:attached': 0,
'amp:error': 0,
'amp:stubbed': 0,
'amp:load:start': 0
};
const messages = [];
let html = __html__[fixture];
if (!html) {
throw new Error('Cannot find fixture: ' + fixture);
}
html = maybeSwitchToCompiledJs(html);
let firstLoad = true;
window.ENABLE_LOG = true;
// This global function will be called by the iframe immediately when it
// starts loading. This appears to be the only way to get the correct
// window object early enough to not miss any events that may get fired
// on that window.
window.beforeLoad = function(win) {
// Flag as being a test window.
win.AMP_TEST = true;
if (opt_beforeLoad) {
opt_beforeLoad(win);
}
win.addEventListener('message', (event) => {
if (event.data && /^amp/.test(event.data.sentinel)) {
messages.push(event.data);
}
})
// Function that returns a promise for when the given event fired at
// least count times.
let awaitEvent = (eventName, count) => {
if (!(eventName in events)) {
throw new Error('Unknown custom event ' + eventName);
}
return new Promise(function(resolve) {
if (events[eventName] >= count) {
resolve();
} else {
win.addEventListener(eventName, () => {
if (events[eventName] == count) {
resolve();
}
});
}
});
};
// Record firing of custom events.
for (const name in events) {
win.addEventListener(name, () => {
events[name]++;
});
}
win.onerror = function(message, file, line, col, error) {
reject(new Error('Error in frame: ' + message + '\n' +
file + ':' + line + '\n' +
(error ? error.stack : 'no stack')));
};
let errors = [];
win.console.error = function() {
errors.push('Error: ' + [].slice.call(arguments).join(' '));
console.error.apply(console, arguments);
};
// Make time go 10x as fast
win.setTimeout = function(fn, ms) {
ms = ms || 0;
setTimeout(fn, ms / 10);
};
let timeout = setTimeout(function() {
reject(new Error('Timeout waiting for elements to start loading.'));
}, 1000);
// Declare the test ready to run when the document was fully parsed.
window.afterLoad = function() {
resolve({
win: win,
doc: win.document,
iframe: iframe,
awaitEvent: awaitEvent,
errors: errors,
messages: messages,
});
};
};
// Add before and after load callbacks to the document.
html = html.replace('>', '><script>parent.beforeLoad(window);</script>');
html += '<script>parent.afterLoad(window);</script>';
let iframe = document.createElement('iframe');
iframe.name = 'test_' + fixture + iframeCount++;
iframe.onerror = function(event) {
reject(event.error);
};
iframe.height = initialIframeHeight;
iframe.width = 500;
if ('srcdoc' in iframe) {
iframe.srcdoc = html;
document.body.appendChild(iframe);
} else {
iframe.src = 'about:blank';
document.body.appendChild(iframe);
const idoc = iframe.contentWindow.document;
idoc.open();
idoc.write(html);
idoc.close();
}
});
}
/**
* Creates a super simple iframe. Use this in unit tests to register elements
* in a sandbox.
* Returns a promise for an object with:
* - win: The created window.
* - doc: The created document.
* - iframe: The host iframe element. Useful for e.g. resizing.
* - addElement: Adds an AMP element to the iframe and returns a promise for
* that element. When the promise is resolved we will have called the entire
* lifecycle including layoutCallback.
* @param {boolean=} opt_runtimeOff Whether runtime should be turned off.
* @param {function()=} opt_beforeLayoutCallback
* @return {!Promise<{
* win: !Window,
* doc: !Document,
* iframe: !Element,
* addElement: function(!Element):!Promise
* }>}
*/
export function createIframePromise(opt_runtimeOff, opt_beforeLayoutCallback) {
return new Promise(function(resolve, reject) {
let iframe = document.createElement('iframe');
iframe.name = 'test_' + iframeCount++;
iframe.srcdoc = '<!doctype><html><head>' +
'<script src="/base/build/polyfills.js"></script>' +
'<body style="margin:0"><div id=parent></div>';
iframe.onload = function() {
// Flag as being a test window.
iframe.contentWindow.AMP_TEST = true;
if (opt_runtimeOff) {
iframe.contentWindow.name = '__AMP__off=1';
}
installCoreServices(iframe.contentWindow);
registerForUnitTest(iframe.contentWindow);
// Act like no other elements were loaded by default.
iframe.contentWindow.ampExtendedElements = {};
resolve({
win: iframe.contentWindow,
doc: iframe.contentWindow.document,
iframe: iframe,
addElement: function(element) {
iframe.contentWindow.document.getElementById('parent')
.appendChild(element);
// Wait for mutation observer to fire.
return new Timer(window).promise(16).then(() => {
// Make sure it has dimensions since no styles are available.
element.style.display = 'block';
element.build(true);
if (element.layoutCount_ == 0) {
if (opt_beforeLayoutCallback) {
opt_beforeLayoutCallback(element);
}
return element.layoutCallback().then(() => {
return element;
});
}
return element;
});
}
});
};
iframe.onerror = reject;
document.body.appendChild(iframe);
});
}
export function createServedIframe(src) {
return new Promise(function(resolve, reject) {
const iframe = document.createElement('iframe');
iframe.name = 'test_' + iframeCount++;
iframe.src = src;
iframe.onload = function() {
const win = iframe.contentWindow;
win.AMP_TEST = true;
installCoreServices(win);
registerForUnitTest(win);
resolve({
win: win,
doc: win.document,
iframe: iframe
});
};
iframe.onerror = reject;
document.body.appendChild(iframe);
});
}
/**
* Returns a promise for when the condition becomes true.
* @param {string} description
* @param {fn():T} condition Should return a truthy value when the poll
* is done. The return value is then returned with the promise
* returned by this function.
* @param {fn():!Error=} opt_onError
* @param {number=} opt_timeout
* @return {!Promise<T>} The polled for value.
* @template T
*/
export function poll(description, condition, opt_onError, opt_timeout) {
return new Promise((resolve, reject) => {
let start = new Date().getTime();
function poll() {
const ret = condition();
if (ret) {
clearInterval(interval);
resolve(ret);
} else {
if (new Date().getTime() - start > (opt_timeout || 1600)) {
clearInterval(interval);
if (opt_onError) {
reject(opt_onError());
return;
}
reject(new Error('Timeout waiting for ' + description));
}
}
}
let interval = setInterval(poll, 8);
poll();
});
}
/**
* Polls for the given number of elements to have received layout or
* be in error state (Better to fail an assertion after this then just time
* out).
* @param {!Window} win
* @param {number} count
* @param {number=} opt_timeout
*
* @return {!Promise}
*/
export function pollForLayout(win, count, opt_timeout) {
let getCount = () => {
return win.document.querySelectorAll('.-amp-layout,.-amp-error').length;
};
return poll('Waiting for elements to layout: ' + count, () => {
return getCount() >= count;
}, () => {
return new Error('Failed to find elements with layout.' +
' Current count: ' + getCount() + ' HTML:\n' +
win.document.documentElement./*TEST*/innerHTML);
}, opt_timeout);
}
/**
* @param {!Window} win
* @return {!Promise}
*/
export function expectBodyToBecomeVisible(win) {
return poll('expect body to become visible', () => {
return win && win.document && win.document.body && (
(win.document.body.style.visibility == 'visible'
&& win.document.body.style.opacity != '0')
|| win.document.body.style.opacity == '1');
});
}
/**
* Takes a HTML document that is pointing to unminified JS and HTML
* binaries and massages the URLs to pointed to compiled binaries
* instead.
* @param {string} html
* @return {string}
*/
function maybeSwitchToCompiledJs(html) {
if (window.ampTestRuntimeConfig.useCompiledJs) {
return html
// Main JS
.replace(/\/dist\/amp\.js/, '/dist/v0.js')
// Extensions
.replace(/\.max\.js/g, '.js')
// 3p html binary
.replace(/\.max\.html/g, '.html')
// 3p path
.replace(/dist\.3p\/current\//g, 'dist.3p/current-min/');
}
return html;
}
You can’t perform that action at this time.