add web-api.ts to patch mediaQuery (#571)

Author: JiaLiPassion

Diff for: gulpfile.js

@@ -86,6 +86,10 @@ gulp.task('build/zone.min.js', ['compile-esm'], function(cb) {
   return generateScript('./lib/browser/rollup-main.ts', 'zone.min.js', true, cb);
 });
 
+gulp.task('build/web-api.js', ['compile-esm'], function(cb) {
+    return generateScript('./lib/browser/web-api.ts', 'web-api.js', true, cb);
+});
+
 gulp.task('build/jasmine-patch.js', ['compile-esm'], function(cb) {
   return generateScript('./lib/jasmine/jasmine.ts', 'jasmine-patch.js', false, cb);
 });
@@ -151,6 +155,7 @@ gulp.task('build', [
   'build/zone.js.d.ts',
   'build/zone.min.js',
   'build/zone-node.js',
+  'build/web-api.js',
   'build/jasmine-patch.js',
   'build/jasmine-patch.min.js',
   'build/mocha-patch.js',

Diff for: lib/browser/web-api.ts

@@ -0,0 +1,45 @@
+/**
+ * @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 {NestedEventListenerOrEventListenerObject, patchEventTargetMethods} from '../common/utils';
+
+((_global: any) => {
+  // patch MediaQuery
+  patchMediaQuery(_global);
+
+  function patchMediaQuery(_global: any) {
+    if (!_global['MediaQueryList']) {
+      return;
+    }
+    patchEventTargetMethods(
+        _global['MediaQueryList'].prototype, 'addListener', 'removeListener', (self, args) => {
+          return {
+            useCapturing: false,
+            eventName: 'mediaQuery',
+            handler: args[0],
+            target: self || _global,
+            name: 'mediaQuery',
+            invokeAddFunc: function(
+                addFnSymbol: any, delegate: Task|NestedEventListenerOrEventListenerObject) {
+              if (delegate && (<Task>delegate).invoke) {
+                return this.target[addFnSymbol]((<Task>delegate).invoke);
+              } else {
+                return this.target[addFnSymbol](delegate);
+              }
+            },
+            invokeRemoveFunc: function(
+                removeFnSymbol: any, delegate: Task|NestedEventListenerOrEventListenerObject) {
+              if (delegate && (<Task>delegate).invoke) {
+                return this.target[removeFnSymbol]((<Task>delegate).invoke);
+              } else {
+                return this.target[removeFnSymbol](delegate);
+              }
+            }
+          };
+        });
+  }
+})(typeof window === 'object' && window || typeof self === 'object' && self || global);

Diff for: test/browser/MediaQuery.spec.ts

@@ -0,0 +1,27 @@
+/**
+ * @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 '../../lib/browser/web-api';
+
+import {zoneSymbol} from '../../lib/common/utils';
+import {ifEnvSupports} from '../test-util';
+
+function supportMediaQuery() {
+  const _global =
+      typeof window === 'object' && window || typeof self === 'object' && self || global;
+  return _global['MediaQueryList'] && _global['matchMedia'];
+}
+
+describe('test mediaQuery patch', ifEnvSupports(supportMediaQuery, () => {
+           it('test whether addListener is patched', () => {
+             const mqList = window.matchMedia('min-width:500px');
+             if (mqList && mqList['addListener']) {
+               expect(mqList[zoneSymbol('addListener')]).not.toBe(undefined);
+             }
+           });
+         }));

Diff for: test/browser_entry_point.ts

@@ -19,4 +19,5 @@ import './browser/registerElement.spec';
 import './browser/requestAnimationFrame.spec';
 import './browser/WebSocket.spec';
 import './browser/XMLHttpRequest.spec';
+import './browser/MediaQuery.spec';
 import './mocha-patch.spec';