proxyless: fix 'window.postMessage' function (#7414)

DevExpress · Dec 12, 2022 · 5534e34 · 5534e34
1 parent aed7683
commit 5534e34
Show file tree

Hide file tree

Showing 10 changed files with 166 additions and 1 deletion.
diff --git a/gulp/constants/functional-test-globs.js b/gulp/constants/functional-test-globs.js
@@ -42,6 +42,7 @@ const PROXYLESS_TESTS_GLOB = [
     'test/functional/fixtures/api/es-next/console/test.js',
     'test/functional/fixtures/api/es-next/roles/test.js',
     'test/functional/fixtures/request-pipeline/**/test.js',
+    'test/functional/fixtures/hammerhead/worker/test.js',
 ];
 
 module.exports = {

diff --git a/package.json b/package.json
@@ -139,7 +139,7 @@
     "source-map-support": "^0.5.16",
     "strip-bom": "^2.0.0",
     "testcafe-browser-tools": "2.0.23",
-    "testcafe-hammerhead": "28.2.2",
+    "testcafe-hammerhead": "28.2.3",
     "testcafe-legacy-api": "5.1.6",
     "testcafe-reporter-dashboard": "^0.2.8",
     "testcafe-reporter-json": "^2.1.0",

diff --git a/test/functional/fixtures/api/es-next/iframe-switching/pages/message-event/cross-domain.html b/test/functional/fixtures/api/es-next/iframe-switching/pages/message-event/cross-domain.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Cross-domain page</title>
+</head>
+<body>
+    <h1>Cross-domain page</h1>
+    <div>
+        <strong>Received log</strong>
+        <div id="received-log"></div>
+    </div>
+    <div>
+        <strong>Interactions</strong>
+        <input id="input">
+    </div>
+    <script>
+        function processMessageEventData (e) {
+            let data = e.data;
+
+            if (typeof data === 'string')
+                data += ' processed';
+            else if (typeof data === 'object')
+                data.processed = true;
+
+            return data;
+        }
+        const receivedLog = document.getElementById('received-log');
+
+        window.addEventListener('message', e => {
+            const text     = JSON.stringify(e.data);
+            const logEntry = document.createTextNode(text);
+
+            receivedLog.appendChild(logEntry);
+
+            e.source.postMessage(processMessageEventData(e), e.origin);
+        });
+    </script>
+</body>
+</html>
diff --git a/test/functional/fixtures/api/es-next/iframe-switching/pages/message-event/index.html b/test/functional/fixtures/api/es-next/iframe-switching/pages/message-event/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Index Page</title>
+</head>
+<body>
+    <h1>Index Page</h1>
+    <div>
+        <button id="post-string-message">Post string message</button>
+        <button id="post-object-message">Post object message</button>
+    </div>
+    <div>
+        <strong>Received log</strong>
+        <div id="received-log"></div>
+    </div>
+    <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>
+    <script>
+        function postMessage (msg) {
+            const crossDomainIframe = document.getElementById('cross-domain-iframe');
+
+            crossDomainIframe.contentWindow.postMessage(msg, 'http://localhost:3001');
+        }
+
+        const receivedLog             = document.getElementById('received-log');
+        const postStringMessageButton = document.getElementById('post-string-message');
+        const postObjectMessageButton = document.getElementById('post-object-message');
+
+        postStringMessageButton.addEventListener('click', () => {
+            postMessage('string message');
+        });
+
+        postObjectMessageButton.addEventListener('click', () => {
+            postMessage({ object: 'message' });
+        });
+
+        window.addEventListener('message', e => {
+            const text     = JSON.stringify(e.data);
+            const logEntry = document.createTextNode(text);
+
+            receivedLog.appendChild(logEntry);
+        });
+    </script>
+</body>
+</html>
diff --git a/test/functional/fixtures/api/es-next/iframe-switching/test.js b/test/functional/fixtures/api/es-next/iframe-switching/test.js
@@ -74,6 +74,10 @@ describe('[API] t.switchToIframe(), t.switchToMainWindow()', function () {
         return runTests('./testcafe-fixtures/iframe-switching-test.js', 'Click in an iframe with the srcdoc attribute', { skip: 'ie', ...DEFAULT_RUN_OPTIONS });
     });
 
+    it('Correct execution order of "message" events in cross-domain iframe', function () {
+        return runTests('./testcafe-fixtures/message-event.js', null, { skip: 'ie', ...DEFAULT_RUN_OPTIONS });
+    });
+
     describe('Unavailable iframe errors', function () {
         it('Should ensure the iframe element exists before switching to it', function () {
             return runTests('./testcafe-fixtures/iframe-switching-test.js', 'Switch to a non-existent iframe',

diff --git a/test/functional/fixtures/api/es-next/iframe-switching/testcafe-fixtures/message-event.js b/test/functional/fixtures/api/es-next/iframe-switching/testcafe-fixtures/message-event.js
@@ -0,0 +1,20 @@
+import { Selector } from 'testcafe';
+
+fixture `Message Event`
+    .page('http://localhost:3000/fixtures/api/es-next/iframe-switching/pages/message-event/index.html');
+
+test('test', async t => {
+    const receivedLog = Selector('#received-log').addCustomDOMProperties({
+        trimmedInnerText: el => el.innerText.replace('\n', ''),
+    });
+
+    await t
+        .click('#post-string-message')
+        .click('#post-object-message')
+        .expect(receivedLog.trimmedInnerText).eql('"string message processed"{"object":"message","processed":true}')
+        .switchToIframe('#cross-domain-iframe')
+        .expect(receivedLog.trimmedInnerText).eql('"string message"{"object":"message"}')
+        .typeText('#input', 'Text')
+        .expect(Selector('#input').value).eql('Text')
+        .switchToMainWindow();
+});
diff --git a/test/functional/fixtures/hammerhead/worker/pages/index.html b/test/functional/fixtures/hammerhead/worker/pages/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Worker</title>
+</head>
+<body>
+    <h1>Worker</h1>
+    <div>
+        <input id="first"> * <input id="second"> = <input id="result">
+    </div>
+    <script>
+        const first = document.getElementById('first');
+        const second = document.getElementById('second');
+        const result = document.getElementById('result');
+
+        const worker = new Worker('worker.js');
+
+        function sendDataToWorker () {
+            worker.postMessage({
+                first:  first.value,
+                second: second.value
+            });
+        }
+
+        first.oninput  = sendDataToWorker;
+        second.oninput = sendDataToWorker;
+
+        worker.onmessage = function (e) {
+            result.value = e.data;
+        }
+    </script>
+</body>
+</html>
diff --git a/test/functional/fixtures/hammerhead/worker/pages/worker.js b/test/functional/fixtures/hammerhead/worker/pages/worker.js
@@ -0,0 +1,5 @@
+onmessage = function (e) {
+    const result = parseInt(e.data.first, 10) * parseInt(e.data.second, 10);
+
+    postMessage(isNaN(result) ? '' : result);
+};
diff --git a/test/functional/fixtures/hammerhead/worker/test.js b/test/functional/fixtures/hammerhead/worker/test.js
@@ -0,0 +1,5 @@
+describe('Worker', function () {
+    it('Basic Worker', function () {
+        return runTests('testcafe-fixtures/index.js', null, { skip: 'ie' });
+    });
+});
diff --git a/test/functional/fixtures/hammerhead/worker/testcafe-fixtures/index.js b/test/functional/fixtures/hammerhead/worker/testcafe-fixtures/index.js
@@ -0,0 +1,11 @@
+import { Selector } from 'testcafe';
+
+fixture `Worker`
+    .page `http://localhost:3000/fixtures/hammerhead/worker/pages/index.html`;
+
+test('test', async t => {
+    await t
+        .typeText('#first', '2')
+        .typeText('#second', '3')
+        .expect(Selector('#result').value).eql('6');
+});