test(core): update Web Platform feature detection (#24861)

PR Close #24861

packages/elements/test/create-custom-element_spec.ts

@@ -9,6 +9,7 @@
 import {Component, DoBootstrap, EventEmitter, Injector, Input, NgModule, Output, destroyPlatform} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
 import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+import {browserDetection} from '@angular/platform-browser/testing/src/browser_util';
 import {Subject} from 'rxjs';
 
 import {NgElementConstructor, createCustomElement} from '../src/create-custom-element';
@@ -19,7 +20,7 @@ type WithFooBar = {
   barBar: string
 };
 
-if (typeof customElements !== 'undefined') {
+if (browserDetection.supportsCustomElements) {
   describe('createCustomElement', () => {
     let NgElementCtor: NgElementConstructor<WithFooBar>;
     let strategy: TestStrategy;

packages/elements/test/slots_spec.ts

@@ -9,6 +9,7 @@
 import {Component, ComponentFactoryResolver, EventEmitter, Injector, Input, NgModule, Output, ViewEncapsulation, destroyPlatform} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
 import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+import {browserDetection} from '@angular/platform-browser/testing/src/browser_util';
 import {Subject} from 'rxjs';
 
 import {NgElement, NgElementConstructor, createCustomElement} from '../src/create-custom-element';
@@ -18,8 +19,8 @@ type WithFooBar = {
   fooFoo: string,
   barBar: string
 };
-
+// we only run these tests in browsers that support Shadom DOM slots natively
-if (typeof customElements !== 'undefined') {
+if (browserDetection.supportsCustomElements && browserDetection.supportsShadowDom) {
   describe('slots', () => {
     let testContainer: HTMLDivElement;
 

packages/platform-browser/test/dom/dom_renderer_spec.ts

@@ -87,8 +87,7 @@ import {NAMESPACE_URIS} from '../../src/dom/dom_renderer';
       });
     });
 
-    // other browsers don't support shadow dom
+    if (browserDetection.supportsDeprecatedShadowDomV0) {
-    if (browserDetection.isChromeDesktop) {
       it('should allow to style components with emulated encapsulation and no encapsulation inside of components with shadow DOM',
          () => {
            const fixture = TestBed.createComponent(SomeApp);

packages/platform-browser/test/dom/shadow_dom_spec.ts

@@ -9,14 +9,11 @@
 import {Component, EventEmitter, Injector, Input, NgModule, Output, Renderer2, ViewEncapsulation, destroyPlatform} from '@angular/core';
 import {TestBed} from '@angular/core/testing';
 import {BrowserModule} from '@angular/platform-browser';
+import {browserDetection} from '@angular/platform-browser/testing/src/browser_util';
 import {expect} from '@angular/platform-browser/testing/src/matchers';
 
-function supportsShadowDOMV1() {
-  const testEl = document.createElement('div');
-  return (typeof customElements !== 'undefined') && (typeof testEl.attachShadow !== 'undefined');
-}
 
-if (supportsShadowDOMV1()) {
+if (browserDetection.supportsShadowDom) {
   describe('ShadowDOM Support', () => {
 
     let testContainer: HTMLDivElement;

packages/platform-browser/testing/src/browser_util.ts

@@ -68,6 +68,23 @@ export class BrowserDetection {
     return this._ua.indexOf('Chrome') > -1 && this._ua.indexOf('Chrome/3') > -1 &&
         this._ua.indexOf('Edge') == -1;
   }
+
+  get supportsCustomElements() { return (typeof(<any>global).customElements !== 'undefined'); }
+
+  get supportsDeprecatedCustomCustomElementsV0() {
+    return (typeof(document as any).registerElement !== 'undefined');
+  }
+
+  get supportsShadowDom() {
+    const testEl = document.createElement('div');
+    return (typeof customElements !== 'undefined') && (typeof testEl.attachShadow !== 'undefined');
+  }
+
+  get supportsDeprecatedShadowDomV0() {
+    const testEl = document.createElement('div') as any;
+    return (typeof customElements !== 'undefined') &&
+        (typeof testEl.createShadowRoot !== 'undefined');
+  }
 }
 
 BrowserDetection.setup();