test(elements): add integration tests for Angular Elements using `ShadowDom` (#39452)

Previously, the project used for running integration tests for Angular
Elements declared a component that used `ShadowDom` for view
encopsulation, but it did not include any tests to verify that the view
was updated correctly.

This commit adds the missing tests.

PR Close #39452

integration/ng_elements/e2e/app.e2e-spec.ts

@@ -1,22 +1,42 @@
-import { browser, element, ExpectedConditions as EC, by } from 'protractor';
+import {browser, by, element, ElementFinder, ExpectedConditions as EC} from 'protractor';
 
 browser.waitForAngularEnabled(false);
 describe('Element E2E Tests', function () {
   describe('Hello World Elements', () => {
-    const helloWorldEl = element(by.css('hello-world-el'));
-
     beforeEach(() => browser.get('hello-world.html'));
 
-    it('should display "Hello World!"', function () {
+    describe('(with default view encapsulation)', () => {
-      expect(helloWorldEl.getText()).toEqual('Hello World!');
+      const helloWorldEl = element(by.css('hello-world-el'));
+
+      it('should display "Hello World!"', function () {
+        expect(helloWorldEl.getText()).toBe('Hello World!');
+      });
+
+      it('should display "Hello Foo!" via name attribute', function () {
+        const input = element(by.css('input[type=text]'));
+        input.sendKeys('Foo');
+
+        // Make tests less flaky on CI by waiting up to 5s for the element text to be updated.
+        browser.wait(EC.textToBePresentInElement(helloWorldEl, 'Hello Foo!'), 5000);
+      });
     });
 
-    it('should display "Hello Foo!" via name attribute', function () {
+    describe('(with `ShadowDom` view encapsulation)', () => {
-      const input = element(by.css('input[type=text]'));
+      const helloWorldShadowEl = element(by.css('hello-world-shadow-el'));
-      input.sendKeys('Foo');
+      const getShadowDomText = (el: ElementFinder) =>
+        browser.executeScript('return arguments[0].shadowRoot.textContent', el);
 
-      // Make tests less flaky on CI by waiting up to 5s for the element text to be updated.
+      it('should display "Hello World!"', function () {
-      browser.wait(EC.textToBePresentInElement(helloWorldEl, 'Hello Foo!'), 5000);
+        expect(getShadowDomText(helloWorldShadowEl)).toBe('Hello World!');
+      });
+
+      it('should display "Hello Foo!" via name attribute', function () {
+        const input = element(by.css('input[type=text]'));
+        input.sendKeys('Foo');
+
+        // Make tests less flaky on CI by waiting up to 5s for the element text to be updated.
+        browser.wait(async () => await getShadowDomText(helloWorldShadowEl) === 'Hello Foo!', 5000);
+      });
     });
   });
 });

integration/ng_elements/src/app.ts

@@ -11,7 +11,7 @@ import {HelloWorldComponent, HelloWorldShadowComponent, TestCardComponent} from
   imports: [BrowserModule],
 })
 export class AppModule {
-  constructor(private injector: Injector) {
+  constructor(injector: Injector) {
     customElements.define('hello-world-el', createCustomElement(HelloWorldComponent, {injector}));
     customElements.define(
         'hello-world-shadow-el', createCustomElement(HelloWorldShadowComponent, {injector}));

integration/ng_elements/src/elements.ts

@@ -2,7 +2,7 @@ import {Component, Input, ViewEncapsulation} from '@angular/core';
 
 @Component({
   selector: 'hello-world-el',
-  template: `Hello {{name}}!`,
+  template: 'Hello {{name}}!',
 })
 export class HelloWorldComponent {
   @Input() name: string = 'World';
@@ -10,14 +10,13 @@ export class HelloWorldComponent {
 
 @Component({
   selector: 'hello-world-shadow-el',
-  template: `Hello {{name}}!`,
+  template: 'Hello {{name}}!',
-  encapsulation: ViewEncapsulation.ShadowDom
+  encapsulation: ViewEncapsulation.ShadowDom,
 })
 export class HelloWorldShadowComponent {
   @Input() name: string = 'World';
 }
 
-
 @Component({
   selector: 'test-card',
   template: `
@@ -29,7 +28,6 @@ export class HelloWorldShadowComponent {
       <slot name="card-footer"></slot>
     </footer>`,
   encapsulation: ViewEncapsulation.ShadowDom,
-  styles: []
 })
 export class TestCardComponent {
 }

integration/ng_elements/src/hello-world.html

@@ -10,8 +10,8 @@
 <body>
   <input type="text">
   <hello-world-el></hello-world-el>
+  <hello-world-shadow-el></hello-world-shadow-el>
   <script src="dist/bundle.js"></script>
-
 </body>
 
 </html>

integration/ng_elements/src/main.ts

@@ -3,8 +3,11 @@ import {AppModuleNgFactory} from './app.ngfactory';
 
 platformBrowser().bootstrapModuleFactory(AppModuleNgFactory, {ngZone: 'noop'});
 
-const input = document.querySelector('input');
+const input = document.querySelector('input')!;
-const helloWorld = document.querySelector('hello-world-el');
+const helloWorld = document.querySelector('hello-world-el')!;
-if(input && helloWorld){
+const helloWorldShadow = document.querySelector('hello-world-shadow-el')!;
-  input.addEventListener('input', () => helloWorld.setAttribute('name', input.value));
+
-}
+input.addEventListener('input', () => {
+  helloWorld.setAttribute('name', input.value);
+  helloWorldShadow.setAttribute('name', input.value);
+});