EventTarget.prototype.addEventListener is not overridden

What is your Test Scenario?

I’d like to test, whether screen size is bigger then 800px;

What is the Current behavior?

It works properly in regular browser (chrome without testcafe), but it does not when running testcafe test.

What is the Expected behavior?

My code should run consistently both in testcafe and in regular browser

What is your web application and your TestCafe test code?

https://github.com/bbonczek/testcafe-change-detection-issue

Steps to Reproduce:

You need to compare this app in regular browser and in testcafe browser. Clone repository and run npm run install

Next thing you want to do is run application in normal browser. You can do it by running npm run start and navigating to localhost:4200

try to resize window, to change it’s height - you should see value switching beetween true and false:

You can see mp4 version here: https://ezgif.com/video-to-gif/ezgif-2-271f5333a3b8.mp4

Now let’s try to do the same, but in testcafe test. Don’t stop dev server. Open other console and run npm run testcafe

Test will go into debug just after page loads. Click Unlock Page and try resizing again- this time nothing will happen: mp4 version is here: https://ezgif.com/video-to-gif/ezgif-2-37d0daf5224f.mp4

Your Environment details:

• testcafe version: 0.23.3
• node.js version: v10.14.1
• command-line arguments: testcafe chrome e2e/testcafe-buggy-test.test.js
• browser name and version: Chrome 71.0.3578.98
• platform and version: Windows 10

[Farfurix]

Hello, @bbonczek. Thank you for your detailed description. I’ve reproduced this issue. Our team will research it and check for a suitable solution.

[Farfurix]

The issue seems to be connected to the EventTarget method patch: webpack:///./node_modules/zone.js/dist/zone.js

function patchEventTargetMethods(obj, patchOptions)
...
    // proto: EventTarget {addEventListener: ƒ, removeEventListener: ƒ, dispatchEvent: ƒ, __zone_symbol__addEventListener: ƒ, __zone_symbol__removeEventListener: ƒ, …}
    proto[ADD_EVENT_LISTENER] = makeAddListener(nativeAddEventListener, ADD_EVENT_LISTENER_SOURCE, customSchedule, customCancel, returnTarget);

The test below is based on Chrome’s native behavior:

if (!browserUtils.isIE11) {
    test('patch EventTarget methods on the client side (GH-1902)', function () {
        var savedMeth   = window.EventTarget.prototype.addEventListener;
        var xhr         = new XMLHttpRequest();
        var patchedMeth = function () {
            return 'patched';
        };

        strictEqual(window.addEventListener, window.EventTarget.prototype.addEventListener);
        strictEqual(window.document.addEventListener, window.EventTarget.prototype.addEventListener);
        strictEqual(window.document.body.addEventListener, window.EventTarget.prototype.addEventListener);
        strictEqual(Object.getPrototypeOf(xhr).addEventListener, window.EventTarget.prototype.addEventListener);

        window.EventTarget.prototype.addEventListener = patchedMeth;

        strictEqual(window.addEventListener, patchedMeth);
        strictEqual(window.document.addEventListener, patchedMeth);
        strictEqual(window.document.body.addEventListener, patchedMeth);


        strictEqual(Object.getPrototypeOf(xhr).addEventListener, patchedMeth);

        window.EventTarget.prototype.addEventListener = savedMeth;
    });
}

We will consider fixing this issue in future sprints.