fix(zone.js): patch shadydom (#31717)

Close #31686

PR Close #31717

packages/zone.js/lib/browser/shadydom.ts

@@ -10,15 +10,17 @@ Zone.__load_patch('shadydom', (global: any, Zone: ZoneType, api: _ZonePrivate) =
   // in web components, shadydom will patch addEventListener/removeEventListener of
   // Node.prototype and WindowPrototype, this will have conflict with zone.js
   // so zone.js need to patch them again.
-  const windowPrototype = Object.getPrototypeOf(window);
+  const HTMLSlotElement = global.HTMLSlotElement;
-  if (windowPrototype && windowPrototype.hasOwnProperty('addEventListener')) {
+  const prototypes = [
-    (windowPrototype as any)[Zone.__symbol__('addEventListener')] = null;
+    Object.getPrototypeOf(window), Node.prototype, Text.prototype, Element.prototype,
-    (windowPrototype as any)[Zone.__symbol__('removeEventListener')] = null;
+    HTMLElement.prototype, HTMLSlotElement && HTMLSlotElement.prototype, DocumentFragment.prototype,
-    api.patchEventTarget(global, [windowPrototype]);
+    Document.prototype
-  }
+  ];
-  if (Node.prototype.hasOwnProperty('addEventListener')) {
+  prototypes.forEach(function(proto) {
-    (Node.prototype as any)[Zone.__symbol__('addEventListener')] = null;
+    if (proto && proto.hasOwnProperty('addEventListener')) {
-    (Node.prototype as any)[Zone.__symbol__('removeEventListener')] = null;
+      proto[Zone.__symbol__('addEventListener')] = null;
-    api.patchEventTarget(global, [Node.prototype]);
+      proto[Zone.__symbol__('removeEventListener')] = null;
-  }
+      api.patchEventTarget(global, [proto]);
+    }
+  });
 });

packages/zone.js/test/BUILD.bazel

@@ -1,6 +1,5 @@
 load("//tools:defaults.bzl", "jasmine_node_test", "ts_library")
-load("@build_bazel_rules_nodejs//:defs.bzl", "rollup_bundle")
+load("//packages/zone.js/test:karma_test.bzl", "karma_test")
-load("@npm_bazel_karma//:index.bzl", "karma_web_test_suite")
 
 package(default_visibility = ["//:__pkg__"])
 
@@ -184,187 +183,90 @@ jasmine_node_test(
     ],
 )
 
-ts_library(
+env_srcs = [
-    name = "test_browser_lib",
+    "browser-env-setup.ts",
-    testonly = True,
+    "browser_symbol_setup.ts",
-    srcs = glob(["browser/*.ts"]) + [
-        "extra/cordova.spec.ts",
-        "mocha-patch.spec.ts",
-        "jasmine-patch.spec.ts",
-        "common_tests.ts",
-        "browser_entry_point.ts",
-    ],
-    deps = [
-        ":common_spec_env",
-        ":common_spec_srcs",
-        ":common_spec_util",
-        ":error_spec_srcs",
-        "//packages/zone.js/lib",
-        "@npm//@types/shelljs",
-        "@npm//@types/systemjs",
-        "@npm//rxjs",
-        "@npm//shelljs",
-        "@npm//systemjs",
-    ],
-)
-
-ts_library(
-    name = "browser_env_setup",
-    testonly = True,
-    srcs = [
-        "browser-env-setup.ts",
-        "browser_symbol_setup.ts",
-    ],
-    deps = [
-        ":common_spec_env",
-    ],
-)
-
-rollup_bundle(
-    name = "browser_test_env_setup_rollup",
-    testonly = True,
-    entry_point = ":browser-env-setup.ts",
-    deps = [
-        ":browser_env_setup",
-    ],
-)
-
-filegroup(
-    name = "browser_test_env_setup_rollup.es5",
-    testonly = True,
-    srcs = [":browser_test_env_setup_rollup"],
-    output_group = "umd",
-)
-
-rollup_bundle(
-    name = "browser_test_rollup",
-    testonly = True,
-    entry_point = ":browser_entry_point.ts",
-    globals = {
-        "electron": "electron",
-    },
-    deps = [
-        ":test_browser_lib",
-    ],
-)
-
-filegroup(
-    name = "browser_test_rollup.es5",
-    testonly = True,
-    srcs = [":browser_test_rollup"],
-    output_group = "umd",
-)
-
-genrule(
-    name = "browser_test_trim_map",
-    testonly = True,
-    srcs = [
-        ":browser_test_rollup.es5",
-    ],
-    outs = [
-        "browser_test_rollup_trim_map.js",
-    ],
-    cmd = " && ".join([
-        "cp $(@D)/browser_test_rollup.umd.js $@",
-    ]),
-)
-
-genrule(
-    name = "browser_test_env_setup_trim_map",
-    testonly = True,
-    srcs = [
-        ":browser_test_env_setup_rollup.es5",
-    ],
-    outs = [
-        "browser_test_env_setup_rollup_trim_map.js",
-    ],
-    cmd = " && ".join([
-        "cp $(@D)/browser_test_env_setup_rollup.umd.js $@",
-    ]),
-)
-
-_karma_test_required_dist_files = [
-    "//packages/zone.js/dist:task-tracking-dist-dev-test",
-    "//packages/zone.js/dist:wtf-dist-dev-test",
-    "//packages/zone.js/dist:webapis-notification-dist-dev-test",
-    "//packages/zone.js/dist:webapis-media-query-dist-dev-test",
-    "//packages/zone.js/dist:zone-patch-canvas-dist-dev-test",
-    "//packages/zone.js/dist:zone-patch-fetch-dist-dev-test",
-    "//packages/zone.js/dist:zone-patch-resize-observer-dist-dev-test",
-    "//packages/zone.js/dist:zone-patch-user-media-dist-dev-test",
-    ":browser_test_trim_map",
 ]
 
-karma_web_test_suite(
+env_deps = [
-    name = "karma_jasmine_test",
+    ":common_spec_env",
-    srcs = [
+    ":common_spec_srcs",
-        "fake_entry.js",
+    ":common_spec_util",
-    ],
+    ":error_spec_srcs",
-    bootstrap = [
+    "//packages/zone.js/lib",
-        ":browser_test_env_setup_trim_map",
+    "@npm//@types/shelljs",
-        "//packages/zone.js/dist:zone-testing-bundle-dist-dev-test",
+    "@npm//@types/systemjs",
-    ] + _karma_test_required_dist_files,
+    "@npm//rxjs",
-    static_files = [
+    "@npm//shelljs",
-        ":assets/sample.json",
+    "@npm//systemjs",
-        ":assets/worker.js",
+]
-        ":assets/import.html",
-    ],
-    tags = ["zone_karma_test"],
-    runtime_deps = [
-        "@npm//karma-browserstack-launcher",
-    ],
-)
 
-karma_web_test_suite(
+env_entry_point = ":browser-env-setup.ts"
-    name = "karma_jasmine_evergreen_test",
+
-    srcs = [
+test_srcs = glob(
-        "fake_entry.js",
+    ["browser/*.ts"],
-    ],
+    exclude = ["browser/shadydom.spec.ts"],
-    bootstrap = [
+) + [
-        ":browser_test_env_setup_trim_map",
+    "extra/cordova.spec.ts",
+    "mocha-patch.spec.ts",
+    "jasmine-patch.spec.ts",
+    "common_tests.ts",
+    "browser_entry_point.ts",
+]
+
+test_deps = [
+    ":common_spec_env",
+    ":common_spec_srcs",
+    ":common_spec_util",
+    ":error_spec_srcs",
+    "//packages/zone.js/lib",
+    "@npm//@types/shelljs",
+    "@npm//@types/systemjs",
+    "@npm//rxjs",
+    "@npm//shelljs",
+    "@npm//systemjs",
+]
+
+test_entry_point = ":browser_entry_point.ts"
+
+karma_tests = {
+    "browser_test": ["//packages/zone.js/dist:zone-testing-bundle-dist-dev-test"],
+    "browser_green_test": [
         "//packages/zone.js/dist:zone-evergreen-dist-dev-test",
         "//packages/zone.js/dist:zone-testing-dist-dev-test",
-    ] + _karma_test_required_dist_files,
-    data = [
-        "//:browser-providers.conf.js",
-        "//tools:jasmine-seed-generator.js",
-    ],
-    static_files = [
-        ":assets/sample.json",
-        ":assets/worker.js",
-        ":assets/import.html",
-    ],
-    tags = ["zone_karma_test"],
-    runtime_deps = [
-        "@npm//karma-browserstack-launcher",
     ],
+}
+
+karma_test(
+    name = "browser_test",
+    bootstraps = karma_tests,
+    ci = True,
+    env_deps = env_deps,
+    env_entry_point = env_entry_point,
+    env_srcs = env_srcs,
+    test_deps = test_deps,
+    test_entry_point = test_entry_point,
+    test_srcs = test_srcs,
 )
 
-karma_web_test_suite(
+karma_test(
-    name = "karma_jasmine_test_ci",
+    name = "browser_shadydom",
-    srcs = [
+    bootstraps = {"browser_shadydom": [
-        "fake_entry.js",
+        "//packages/zone.js/dist:zone-testing-bundle-dist-dev-test",
+        "//packages/zone.js/dist:webapis-shadydom-dist-dev-test",
+    ]},
+    ci = False,
+    env_deps = [
+        "//packages/zone.js/lib",
     ],
-    bootstrap = [
+    env_entry_point = ":browser_shadydom_setup.ts",
-        ":saucelabs.js",
+    env_srcs = ["browser_shadydom_setup.ts"],
-        ":browser_test_env_setup_trim_map",
+    test_deps = [
-        "//packages/zone.js/dist:zone-testing-bundle-dist-test",
+        "//packages/zone.js/lib",
-    ] + _karma_test_required_dist_files,
-    config_file = "//:karma-js.conf.js",
-    configuration_env_vars = ["KARMA_WEB_TEST_MODE"],
-    data = [
-        "//:browser-providers.conf.js",
-        "//tools:jasmine-seed-generator.js",
     ],
-    static_files = [
+    test_entry_point = ":browser_shadydom_entry_point.ts",
-        ":assets/sample.json",
+    test_srcs = [
-        ":assets/worker.js",
+        "browser/shadydom.spec.ts",
-        ":assets/import.html",
+        "browser_shadydom_entry_point.ts",
-    ],
-    tags = ["zone_karma_test"],
-    # Visible to //:test_web_all target
-    visibility = ["//:__pkg__"],
-    runtime_deps = [
-        "@npm//karma-browserstack-launcher",
     ],
 )

packages/zone.js/test/browser/shadydom.spec.ts

@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+describe('shadydom', () => {
+  const div = document.createElement('div');
+  const text = document.createTextNode('text');
+  const span = document.createElement('span');
+  const fragment = document.createDocumentFragment();
+  document.body.appendChild(div);
+  document.body.appendChild(text);
+  document.body.appendChild(span);
+  document.body.appendChild(fragment);
+  const targets = [
+    {name: 'window', target: window}, {name: 'div', target: div}, {name: 'text', target: text},
+    {name: 'span', target: span}, {name: 'document', target: document},
+    {name: 'fragment', target: fragment}
+  ];
+  targets.forEach((t: any) => {
+    it(`test for prototype ${t.name}`, () => {
+      const target = t.target;
+      const zone = Zone.current.fork({name: 'zone'});
+      const logs: string[] = [];
+      zone.run(
+          () => { target.addEventListener('click', () => { logs.push(Zone.current.name); }); });
+      const event = document.createEvent('MouseEvent');
+      event.initEvent('click', true, true);
+      target.dispatchEvent(event);
+      expect(logs).toEqual(['zone']);
+    });
+  });
+});

packages/zone.js/test/browser_shadydom_entry_point.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import './browser/shadydom.spec';

packages/zone.js/test/browser_shadydom_setup.ts

@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+function initAddEventListeners() {
+  const HTMLSlotElement = (window as any).HTMLSlotElement;
+  const prototypes = [
+    Object.getPrototypeOf(window), Node.prototype, Text.prototype, Element.prototype,
+    Object.getPrototypeOf(window), HTMLElement.prototype,
+    HTMLSlotElement && HTMLSlotElement.prototype, DocumentFragment.prototype, Document.prototype
+  ];
+  prototypes.forEach(proto => {
+    proto.addEventListener = function(eventName: string, callback: any) {
+      this.callback = callback;
+    };
+    proto.dispatchEvent = function(event: any) {
+      this.callback && this.callback.call(this, event);
+    };
+  });
+}
+
+initAddEventListeners();

packages/zone.js/test/karma_test.bzl

@@ -0,0 +1,144 @@
+load("//tools:defaults.bzl", "ts_library")
+load("@build_bazel_rules_nodejs//:defs.bzl", "rollup_bundle")
+load("@npm_bazel_karma//:index.bzl", "karma_web_test_suite")
+
+def karma_test_prepare(name, env_srcs, env_deps, env_entry_point, test_srcs, test_deps, test_entry_point):
+    ts_library(
+        name = name + "_env",
+        testonly = True,
+        srcs = env_srcs,
+        deps = env_deps,
+    )
+    rollup_bundle(
+        name = name + "_env_rollup",
+        testonly = True,
+        entry_point = env_entry_point,
+        deps = [
+            ":" + name + "_env",
+        ],
+    )
+    native.filegroup(
+        name = name + "_env_rollup.es5",
+        testonly = True,
+        srcs = [":" + name + "_env_rollup"],
+        output_group = "umd",
+    )
+    native.genrule(
+        name = name + "_env_trim_map",
+        testonly = True,
+        srcs = [
+            ":" + name + "_env_rollup.es5",
+        ],
+        outs = [
+            name + "_env_rollup_trim_map.js",
+        ],
+        cmd = " && ".join([
+            "cp $(@D)/" + name + "_env_rollup.umd.js $@",
+        ]),
+    )
+    ts_library(
+        name = name + "_test",
+        testonly = True,
+        srcs = test_srcs,
+        deps = test_deps,
+    )
+    rollup_bundle(
+        name = name + "_rollup",
+        testonly = True,
+        entry_point = test_entry_point,
+        globals = {
+            "electron": "electron",
+        },
+        deps = [
+            ":" + name + "_test",
+        ],
+    )
+    native.filegroup(
+        name = name + "_rollup.es5",
+        testonly = True,
+        srcs = [":" + name + "_rollup"],
+        output_group = "umd",
+    )
+    native.genrule(
+        name = name + "_trim_map",
+        testonly = True,
+        srcs = [
+            ":" + name + "_rollup.es5",
+        ],
+        outs = [
+            name + "_rollup_trim_map.js",
+        ],
+        cmd = " && ".join([
+            "cp $(@D)/" + name + "_rollup.umd.js $@",
+        ]),
+    )
+
+def karma_test(name, env_srcs, env_deps, env_entry_point, test_srcs, test_deps, test_entry_point, bootstraps, ci):
+    first = True
+    for subname in bootstraps:
+        bootstrap = bootstraps[subname]
+        firstFlag = first
+        if first:
+            first = False
+            karma_test_prepare(name, env_srcs, env_deps, env_entry_point, test_srcs, test_deps, test_entry_point)
+        _karma_test_required_dist_files = [
+            "//packages/zone.js/dist:task-tracking-dist-dev-test",
+            "//packages/zone.js/dist:wtf-dist-dev-test",
+            "//packages/zone.js/dist:webapis-notification-dist-dev-test",
+            "//packages/zone.js/dist:webapis-media-query-dist-dev-test",
+            "//packages/zone.js/dist:zone-patch-canvas-dist-dev-test",
+            "//packages/zone.js/dist:zone-patch-fetch-dist-dev-test",
+            "//packages/zone.js/dist:zone-patch-resize-observer-dist-dev-test",
+            "//packages/zone.js/dist:zone-patch-user-media-dist-dev-test",
+            ":" + name + "_trim_map",
+        ]
+
+        karma_web_test_suite(
+            name = subname + "_karma_jasmine_test",
+            srcs = [
+                "fake_entry.js",
+            ],
+            bootstrap = [
+                            ":" + name + "_env_trim_map",
+                        ] + bootstrap +
+                        _karma_test_required_dist_files,
+            static_files = [
+                ":assets/sample.json",
+                ":assets/worker.js",
+                ":assets/import.html",
+            ],
+            tags = ["zone_karma_test"],
+            runtime_deps = [
+                "@npm//karma-browserstack-launcher",
+            ],
+        )
+
+        if ci and firstFlag:
+            karma_web_test_suite(
+                name = "karma_jasmine_test_ci",
+                srcs = [
+                    "fake_entry.js",
+                ],
+                bootstrap = [
+                    ":saucelabs.js",
+                    ":" + name + "_env_trim_map",
+                    "//packages/zone.js/dist:zone-testing-bundle-dist-test",
+                ] + _karma_test_required_dist_files,
+                config_file = "//:karma-js.conf.js",
+                configuration_env_vars = ["KARMA_WEB_TEST_MODE"],
+                data = [
+                    "//:browser-providers.conf.js",
+                    "//tools:jasmine-seed-generator.js",
+                ],
+                static_files = [
+                    ":assets/sample.json",
+                    ":assets/worker.js",
+                    ":assets/import.html",
+                ],
+                tags = ["zone_karma_test"],
+                # Visible to //:test_web_all target
+                visibility = ["//:__pkg__"],
+                runtime_deps = [
+                    "@npm//karma-browserstack-launcher",
+                ],
+            )