Skip to content

Commit 5534e34

Browse files
authored
proxyless: fix 'window.postMessage' function (#7414)
1 parent aed7683 commit 5534e34

File tree

10 files changed

+166
-1
lines changed

10 files changed

+166
-1
lines changed

gulp/constants/functional-test-globs.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ const PROXYLESS_TESTS_GLOB = [
4242
'test/functional/fixtures/api/es-next/console/test.js',
4343
'test/functional/fixtures/api/es-next/roles/test.js',
4444
'test/functional/fixtures/request-pipeline/**/test.js',
45+
'test/functional/fixtures/hammerhead/worker/test.js',
4546
];
4647

4748
module.exports = {

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@
139139
"source-map-support": "^0.5.16",
140140
"strip-bom": "^2.0.0",
141141
"testcafe-browser-tools": "2.0.23",
142-
"testcafe-hammerhead": "28.2.2",
142+
"testcafe-hammerhead": "28.2.3",
143143
"testcafe-legacy-api": "5.1.6",
144144
"testcafe-reporter-dashboard": "^0.2.8",
145145
"testcafe-reporter-json": "^2.1.0",
Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Cross-domain page</title>
6+
</head>
7+
<body>
8+
<h1>Cross-domain page</h1>
9+
<div>
10+
<strong>Received log</strong>
11+
<div id="received-log"></div>
12+
</div>
13+
<div>
14+
<strong>Interactions</strong>
15+
<input id="input">
16+
</div>
17+
<script>
18+
function processMessageEventData (e) {
19+
let data = e.data;
20+
21+
if (typeof data === 'string')
22+
data += ' processed';
23+
else if (typeof data === 'object')
24+
data.processed = true;
25+
26+
return data;
27+
}
28+
const receivedLog = document.getElementById('received-log');
29+
30+
window.addEventListener('message', e => {
31+
const text = JSON.stringify(e.data);
32+
const logEntry = document.createTextNode(text);
33+
34+
receivedLog.appendChild(logEntry);
35+
36+
e.source.postMessage(processMessageEventData(e), e.origin);
37+
});
38+
</script>
39+
</body>
40+
</html>
Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Index Page</title>
6+
</head>
7+
<body>
8+
<h1>Index Page</h1>
9+
<div>
10+
<button id="post-string-message">Post string message</button>
11+
<button id="post-object-message">Post object message</button>
12+
</div>
13+
<div>
14+
<strong>Received log</strong>
15+
<div id="received-log"></div>
16+
</div>
17+
<iframe id="cross-domain-iframe" src="http://localhost:3001/fixtures/api/es-next/iframe-switching/pages/message-event/cross-domain.html" style="width: auto; height: 300px"></iframe>
18+
<script>
19+
function postMessage (msg) {
20+
const crossDomainIframe = document.getElementById('cross-domain-iframe');
21+
22+
crossDomainIframe.contentWindow.postMessage(msg, 'http://localhost:3001');
23+
}
24+
25+
const receivedLog = document.getElementById('received-log');
26+
const postStringMessageButton = document.getElementById('post-string-message');
27+
const postObjectMessageButton = document.getElementById('post-object-message');
28+
29+
postStringMessageButton.addEventListener('click', () => {
30+
postMessage('string message');
31+
});
32+
33+
postObjectMessageButton.addEventListener('click', () => {
34+
postMessage({ object: 'message' });
35+
});
36+
37+
window.addEventListener('message', e => {
38+
const text = JSON.stringify(e.data);
39+
const logEntry = document.createTextNode(text);
40+
41+
receivedLog.appendChild(logEntry);
42+
});
43+
</script>
44+
</body>
45+
</html>

test/functional/fixtures/api/es-next/iframe-switching/test.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,10 @@ describe('[API] t.switchToIframe(), t.switchToMainWindow()', function () {
7474
return runTests('./testcafe-fixtures/iframe-switching-test.js', 'Click in an iframe with the srcdoc attribute', { skip: 'ie', ...DEFAULT_RUN_OPTIONS });
7575
});
7676

77+
it('Correct execution order of "message" events in cross-domain iframe', function () {
78+
return runTests('./testcafe-fixtures/message-event.js', null, { skip: 'ie', ...DEFAULT_RUN_OPTIONS });
79+
});
80+
7781
describe('Unavailable iframe errors', function () {
7882
it('Should ensure the iframe element exists before switching to it', function () {
7983
return runTests('./testcafe-fixtures/iframe-switching-test.js', 'Switch to a non-existent iframe',
Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { Selector } from 'testcafe';
2+
3+
fixture `Message Event`
4+
.page('http://localhost:3000/fixtures/api/es-next/iframe-switching/pages/message-event/index.html');
5+
6+
test('test', async t => {
7+
const receivedLog = Selector('#received-log').addCustomDOMProperties({
8+
trimmedInnerText: el => el.innerText.replace('\n', ''),
9+
});
10+
11+
await t
12+
.click('#post-string-message')
13+
.click('#post-object-message')
14+
.expect(receivedLog.trimmedInnerText).eql('"string message processed"{"object":"message","processed":true}')
15+
.switchToIframe('#cross-domain-iframe')
16+
.expect(receivedLog.trimmedInnerText).eql('"string message"{"object":"message"}')
17+
.typeText('#input', 'Text')
18+
.expect(Selector('#input').value).eql('Text')
19+
.switchToMainWindow();
20+
});
Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Worker</title>
6+
</head>
7+
<body>
8+
<h1>Worker</h1>
9+
<div>
10+
<input id="first"> * <input id="second"> = <input id="result">
11+
</div>
12+
<script>
13+
const first = document.getElementById('first');
14+
const second = document.getElementById('second');
15+
const result = document.getElementById('result');
16+
17+
const worker = new Worker('worker.js');
18+
19+
function sendDataToWorker () {
20+
worker.postMessage({
21+
first: first.value,
22+
second: second.value
23+
});
24+
}
25+
26+
first.oninput = sendDataToWorker;
27+
second.oninput = sendDataToWorker;
28+
29+
worker.onmessage = function (e) {
30+
result.value = e.data;
31+
}
32+
</script>
33+
</body>
34+
</html>
Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
onmessage = function (e) {
2+
const result = parseInt(e.data.first, 10) * parseInt(e.data.second, 10);
3+
4+
postMessage(isNaN(result) ? '' : result);
5+
};
Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
describe('Worker', function () {
2+
it('Basic Worker', function () {
3+
return runTests('testcafe-fixtures/index.js', null, { skip: 'ie' });
4+
});
5+
});
Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { Selector } from 'testcafe';
2+
3+
fixture `Worker`
4+
.page `http://localhost:3000/fixtures/hammerhead/worker/pages/index.html`;
5+
6+
test('test', async t => {
7+
await t
8+
.typeText('#first', '2')
9+
.typeText('#second', '3')
10+
.expect(Selector('#result').value).eql('6');
11+
});

0 commit comments

Comments
 (0)