test: make `elements` integration tests less flaky (#26869)

PR Close #26869

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

@@ -1,20 +1,22 @@
-import { browser, element, by } from 'protractor';
+import { browser, element, ExpectedConditions as EC, by } from 'protractor';
 
 browser.waitForAngularEnabled(false);
 describe('Element E2E Tests', function () {
   describe('Hello World Elements', () => {
-    it('should display: Hello world!', function () {
-      browser.get('hello-world.html');
-      const helloWorldEl = element(by.css('hello-world-el'));
+    const helloWorldEl = element(by.css('hello-world-el'));
+
+    beforeEach(() => browser.get('hello-world.html'));
+
+    it('should display "Hello World!"', function () {
       expect(helloWorldEl.getText()).toEqual('Hello World!');
     });
 
-    it('should display: Hello Foo! via name attribute', function () {
-      browser.get('hello-world.html');
-      const helloWorldEl = element(by.css('hello-world-el'));
+    it('should display "Hello Foo!" via name attribute', function () {
       const input = element(by.css('input[type=text]'));
-      ['f', 'o', 'o'].forEach((key) => input.sendKeys(key));
-      expect(helloWorldEl.getText()).toEqual('Hello foo!');
+      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);
     });
   });
 });

integration/ng_elements/src/app.ts

@@ -19,5 +19,3 @@ export class AppModule {
   }
   ngDoBootstrap() {}
 }
-
-export {HelloWorldComponent};

integration/ng_elements/src/main.ts

@@ -3,11 +3,8 @@ import {AppModuleNgFactory} from './app.ngfactory';
 
 platformBrowser().bootstrapModuleFactory(AppModuleNgFactory, {ngZone: 'noop'});
 
+const input = document.querySelector('input');
 const helloWorld = document.querySelector('hello-world-el');
-const input = document.querySelector('input[type=text]');
 if(input && helloWorld){
-    input.addEventListener('input', e => {
-    const newText = (e.target as any).value;
-    helloWorld.setAttribute('name', newText);
-  });
+  input.addEventListener('input', () => helloWorld.setAttribute('name', input.value));
 }