Revert "build: switch example e2e tests to bazel (#28402)" (#28438)

This reverts commit ef78e33560.

PR Close #28438

packages/examples/common/BUILD.bazel

@@ -1,63 +0,0 @@
-package(default_visibility = ["//visibility:public"])
-
-load("//packages/bazel:index.bzl", "protractor_web_test_suite")
-load("//tools:defaults.bzl", "ng_module", "ts_library")
-load("@build_bazel_rules_typescript//:defs.bzl", "ts_devserver")
-
-ng_module(
-    name = "common_examples",
-    srcs = glob(
-        ["**/*.ts"],
-        exclude = ["**/*_spec.ts"],
-    ),
-    # TODO: FW-1004 Type checking is currently not complete.
-    type_check = False,
-    deps = [
-        "//packages/common",
-        "//packages/core",
-        "//packages/platform-browser",
-        "//packages/platform-browser-dynamic",
-        "//packages/router",
-        "@rxjs",
-    ],
-)
-
-ts_library(
-    name = "common_tests_lib",
-    testonly = True,
-    srcs = glob(["**/*_spec.ts"]),
-    tsconfig = "//packages/examples:tsconfig-e2e.json",
-    deps = [
-        "//packages/examples/test-utils",
-        "//packages/private/testing",
-        "@ngdeps//@types/jasminewd2",
-        "@ngdeps//protractor",
-    ],
-)
-
-ts_devserver(
-    name = "devserver",
-    entry_module = "@angular/examples/common/main",
-    index_html = "//packages/examples:index.html",
-    port = 4200,
-    scripts = ["@ngdeps//node_modules/tslib:tslib.js"],
-    static_files = [
-        "@ngdeps//node_modules/zone.js:dist/zone.js",
-        # This is needed because the "ngComponentOutlet" test uses the JIT compiler
-        # and needs to be able to read metadata at runtime.
-        "@ngdeps//node_modules/reflect-metadata:Reflect.js",
-    ],
-    deps = [":common_examples"],
-)
-
-protractor_web_test_suite(
-    name = "protractor_tests",
-    data = ["//packages/bazel/src/protractor/utils"],
-    on_prepare = ":start-server.js",
-    server = ":devserver",
-    deps = [
-        ":common_tests_lib",
-        "@ngdeps//protractor",
-        "@ngdeps//selenium-webdriver",
-    ],
-)

packages/examples/common/location/ts/e2e_test/location_component_spec.ts

@@ -8,7 +8,7 @@
 
 import {$, browser, by, element, protractor} from 'protractor';
 
-import {verifyNoBrowserErrors} from '../../../../test-utils';
+import {verifyNoBrowserErrors} from '../../../../_common/e2e_util';
 
 
 function waitForElement(selector: string) {
@@ -21,9 +21,10 @@ describe('Location', () => {
   afterEach(verifyNoBrowserErrors);
 
   it('should verify paths', () => {
-    browser.get('/location/#/bar/baz');
+    browser.get('/common/location/ts/#/bar/baz');
     waitForElement('hash-location');
-    expect(element.all(by.css('path-location code')).get(0).getText()).toEqual('/location');
+    expect(element.all(by.css('path-location code')).get(0).getText())
+        .toEqual('/common/location/ts');
     expect(element.all(by.css('hash-location code')).get(0).getText()).toEqual('/bar/baz');
   });
 });

packages/examples/common/location/ts/module.ts

@@ -17,13 +17,14 @@ import {PathLocationComponent} from './path_location_component';
   selector: 'example-app',
   template: `<hash-location></hash-location><path-location></path-location>`
 })
-export class AppComponent {
+export class ExampleAppComponent {
 }
 
 @NgModule({
-  declarations: [AppComponent, PathLocationComponent, HashLocationComponent],
+  declarations: [ExampleAppComponent, PathLocationComponent, HashLocationComponent],
   providers: [{provide: APP_BASE_HREF, useValue: '/'}],
   imports: [BrowserModule],
+  bootstrap: [ExampleAppComponent]
 })
 export class AppModule {
 }

packages/examples/common/main.ts

@@ -1,12 +0,0 @@
-/**
- * @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 {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
-import {TestsAppModuleNgFactory} from './test_module.ngfactory';
-
-platformBrowserDynamic().bootstrapModuleFactory(TestsAppModuleNgFactory);

packages/examples/common/ngComponentOutlet/ts/e2e_test/ngComponentOutlet_spec.ts

@@ -7,8 +7,7 @@
  */
 
 import {$, ExpectedConditions, browser, by, element} from 'protractor';
-
-import {verifyNoBrowserErrors} from '../../../../test-utils';
+import {verifyNoBrowserErrors} from '../../../../_common/e2e_util';
 
 function waitForElement(selector: string) {
   const EC = ExpectedConditions;

packages/examples/common/ngComponentOutlet/ts/module.ts

@@ -7,22 +7,21 @@
  */
 
 import {CommonModule} from '@angular/common';
-import {COMPILER_OPTIONS, Compiler, CompilerFactory, Component, Injectable, Injector, NgModule, NgModuleFactory} from '@angular/core';
+import {Compiler, Component, Injectable, Injector, NgModule, NgModuleFactory} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
-import {JitCompilerFactory} from '@angular/platform-browser-dynamic';
 
 
 
 // #docregion SimpleExample
 @Component({selector: 'hello-world', template: 'Hello World!'})
-export class HelloWorld {
+class HelloWorld {
 }
 
 @Component({
   selector: 'ng-component-outlet-simple-example',
   template: `<ng-container *ngComponentOutlet="HelloWorld"></ng-container>`
 })
-export class NgTemplateOutletSimpleExample {
+class NgTemplateOutletSimpleExample {
   // This field is necessary to expose HelloWorld to the template.
   HelloWorld = HelloWorld;
 }
@@ -30,7 +29,7 @@ export class NgTemplateOutletSimpleExample {
 
 // #docregion CompleteExample
 @Injectable()
-export class Greeter {
+class Greeter {
   suffix = '!';
 }
 
@@ -38,7 +37,7 @@ export class Greeter {
   selector: 'complete-component',
   template: `Complete: <ng-content></ng-content> <ng-content></ng-content>{{ greeter.suffix }}`
 })
-export class CompleteComponent {
+class CompleteComponent {
   constructor(public greeter: Greeter) {}
 }
 
@@ -49,7 +48,7 @@ export class CompleteComponent {
                                       injector: myInjector; 
                                       content: myContent"></ng-container>`
 })
-export class NgTemplateOutletCompleteExample {
+class NgTemplateOutletCompleteExample {
   // This field is necessary to expose CompleteComponent to the template.
   CompleteComponent = CompleteComponent;
   myInjector: Injector;
@@ -65,7 +64,7 @@ export class NgTemplateOutletCompleteExample {
 
 // #docregion NgModuleFactoryExample
 @Component({selector: 'other-module-component', template: `Other Module Component!`})
-export class OtherModuleComponent {
+class OtherModuleComponent {
 }
 
 @Component({
@@ -74,7 +73,7 @@ export class OtherModuleComponent {
     <ng-container *ngComponentOutlet="OtherModuleComponent;
                                       ngModuleFactory: myModule;"></ng-container>`
 })
-export class NgTemplateOutletOtherModuleExample {
+class NgTemplateOutletOtherModuleExample {
   // This field is necessary to expose OtherModuleComponent to the template.
   OtherModuleComponent = OtherModuleComponent;
   myModule: NgModuleFactory<any>;
@@ -92,7 +91,19 @@ export class NgTemplateOutletOtherModuleExample {
              <hr/>
              <ng-component-outlet-other-module-example></ng-component-outlet-other-module-example>`
 })
-export class AppComponent {
+class ExampleApp {
+}
+
+@NgModule({
+  imports: [BrowserModule],
+  declarations: [
+    ExampleApp, NgTemplateOutletSimpleExample, NgTemplateOutletCompleteExample,
+    NgTemplateOutletOtherModuleExample, HelloWorld, CompleteComponent
+  ],
+  entryComponents: [HelloWorld, CompleteComponent],
+  bootstrap: [ExampleApp]
+})
+export class AppModule {
 }
 
 @NgModule({
@@ -102,26 +113,3 @@ export class AppComponent {
 })
 export class OtherModule {
 }
-
-export function createCompiler(compilerFactory: CompilerFactory) {
-  return compilerFactory.createCompiler();
-}
-
-@NgModule({
-  imports: [BrowserModule],
-  declarations: [
-    AppComponent, NgTemplateOutletSimpleExample, NgTemplateOutletCompleteExample,
-    NgTemplateOutletOtherModuleExample, HelloWorld, CompleteComponent
-  ],
-  entryComponents: [HelloWorld, CompleteComponent],
-  providers: [
-    // Setup the JIT compiler that is not set up by default because the examples
-    // are bootstrapped using their NgModule factory. Since this example uses the
-    // JIT compiler, we manually set it up for this module.
-    {provide: COMPILER_OPTIONS, useValue: {}, multi: true},
-    {provide: CompilerFactory, useClass: JitCompilerFactory, deps: [COMPILER_OPTIONS]},
-    {provide: Compiler, useFactory: createCompiler, deps: [CompilerFactory]}
-  ]
-})
-export class AppModule {
-}

packages/examples/common/ngIf/ts/e2e_test/ngIf_spec.ts

@@ -7,7 +7,7 @@
  */
 
 import {$, ExpectedConditions, browser, by, element} from 'protractor';
-import {verifyNoBrowserErrors} from '../../../../test-utils';
+import {verifyNoBrowserErrors} from '../../../../_common/e2e_util';
 
 function waitForElement(selector: string) {
   const EC = ExpectedConditions;
@@ -16,7 +16,7 @@ function waitForElement(selector: string) {
 }
 
 describe('ngIf', () => {
-  const URL = '/ngIf';
+  const URL = 'common/ngIf/ts/';
   afterEach(verifyNoBrowserErrors);
 
   describe('ng-if-simple', () => {

packages/examples/common/ngIf/ts/module.ts

@@ -21,7 +21,7 @@ import {Subject} from 'rxjs';
     <div *ngIf="show">Text to show</div>
 `
 })
-export class NgIfSimple {
+class NgIfSimple {
   show: boolean = true;
 }
 // #enddocregion
@@ -37,7 +37,7 @@ export class NgIfSimple {
     <ng-template #elseBlock>Alternate text while primary text is hidden</ng-template>
 `
 })
-export class NgIfElse {
+class NgIfElse {
   show: boolean = true;
 }
 // #enddocregion
@@ -56,7 +56,7 @@ export class NgIfElse {
     <ng-template #elseBlock>Alternate text while primary text is hidden</ng-template>
 `
 })
-export class NgIfThenElse implements OnInit {
+class NgIfThenElse implements OnInit {
   thenBlock: TemplateRef<any>|null = null;
   show: boolean = true;
 
@@ -85,7 +85,7 @@ export class NgIfThenElse implements OnInit {
     <ng-template #loading let-user>Waiting... (user is {{user|json}})</ng-template>
 `
 })
-export class NgIfAs {
+class NgIfAs {
   userObservable = new Subject<{first: string, last: string}>();
   first = ['John', 'Mike', 'Mary', 'Bob'];
   firstIndex = 0;
@@ -116,12 +116,13 @@ export class NgIfAs {
     <hr>
 `
 })
-export class AppComponent {
+class ExampleApp {
 }
 
 @NgModule({
   imports: [BrowserModule],
-  declarations: [AppComponent, NgIfSimple, NgIfElse, NgIfThenElse, NgIfAs],
+  declarations: [ExampleApp, NgIfSimple, NgIfElse, NgIfThenElse, NgIfAs],
+  bootstrap: [ExampleApp]
 })
 export class AppModule {
 }

packages/examples/common/ngTemplateOutlet/ts/e2e_test/ngTemplateOutlet_spec.ts

@@ -7,7 +7,7 @@
  */
 
 import {$, ExpectedConditions, browser, by, element} from 'protractor';
-import {verifyNoBrowserErrors} from '../../../../test-utils';
+import {verifyNoBrowserErrors} from '../../../../_common/e2e_util';
 
 function waitForElement(selector: string) {
   const EC = ExpectedConditions;
@@ -16,7 +16,7 @@ function waitForElement(selector: string) {
 }
 
 describe('ngTemplateOutlet', () => {
-  const URL = '/ngTemplateOutlet';
+  const URL = 'common/ngTemplateOutlet/ts/';
   afterEach(verifyNoBrowserErrors);
 
   describe('ng-template-outlet-example', () => {

packages/examples/common/ngTemplateOutlet/ts/module.ts

@@ -26,7 +26,7 @@ import {BrowserModule} from '@angular/platform-browser';
     <ng-template #svk let-person="localSk"><span>Ahoj {{person}}!</span></ng-template>
 `
 })
-export class NgTemplateOutletExample {
+class NgTemplateOutletExample {
   myContext = {$implicit: 'World', localSk: 'Svet'};
 }
 // #enddocregion
@@ -36,12 +36,13 @@ export class NgTemplateOutletExample {
   selector: 'example-app',
   template: `<ng-template-outlet-example></ng-template-outlet-example>`
 })
-export class AppComponent {
+class ExampleApp {
 }
 
 @NgModule({
   imports: [BrowserModule],
-  declarations: [AppComponent, NgTemplateOutletExample],
+  declarations: [ExampleApp, NgTemplateOutletExample],
+  bootstrap: [ExampleApp]
 })
 export class AppModule {
 }

packages/examples/common/pipes/ts/async_pipe.ts

@@ -58,7 +58,7 @@ export class AsyncObservablePipeComponent {
 // protractor will not see us. Also we want to have this outside the docregion so as not to confuse
 // the reader.
 function setInterval(fn: Function, delay: number) {
-  const zone = (window as any)['Zone'].current;
+  const zone = Zone.current;
   let rootZone = zone;
   while (rootZone.parent) {
     rootZone = rootZone.parent;

packages/examples/common/pipes/ts/e2e_test/pipe_spec.ts

@@ -7,7 +7,7 @@
  */
 
 import {$, ExpectedConditions, browser, by, element} from 'protractor';
-import {verifyNoBrowserErrors} from '../../../../test-utils';
+import {verifyNoBrowserErrors} from '../../../../_common/e2e_util';
 
 function waitForElement(selector: string) {
   const EC = ExpectedConditions;
@@ -17,7 +17,7 @@ function waitForElement(selector: string) {
 
 describe('pipe', () => {
   afterEach(verifyNoBrowserErrors);
-  const URL = '/pipes';
+  const URL = '/common/pipes/ts/';
 
   describe('async', () => {
     it('should resolve and display promise', () => {

packages/examples/common/pipes/ts/module.ts

@@ -59,19 +59,19 @@ import {TitleCasePipeComponent} from './titlecase_pipe';
     <keyvalue-pipe></keyvalue-pipe>
   `
 })
-export class AppComponent {
+export class ExampleAppComponent {
 }
 
 @NgModule({
   declarations: [
-    AsyncPromisePipeComponent, AsyncObservablePipeComponent, AppComponent, JsonPipeComponent,
+    AsyncPromisePipeComponent, AsyncObservablePipeComponent, ExampleAppComponent, JsonPipeComponent,
     DatePipeComponent, DeprecatedDatePipeComponent, LowerUpperPipeComponent, TitleCasePipeComponent,
-    NumberPipeComponent, DeprecatedNumberPipeComponent, PercentPipeComponent,
-    DeprecatedPercentPipeComponent, CurrencyPipeComponent, DeprecatedCurrencyPipeComponent,
-    SlicePipeStringComponent, SlicePipeListComponent, I18nPluralPipeComponent,
-    I18nSelectPipeComponent, KeyValuePipeComponent
+    NumberPipeComponent, PercentPipeComponent, DeprecatedPercentPipeComponent,
+    CurrencyPipeComponent, DeprecatedCurrencyPipeComponent, SlicePipeStringComponent,
+    SlicePipeListComponent, I18nPluralPipeComponent, I18nSelectPipeComponent, KeyValuePipeComponent
   ],
   imports: [BrowserModule],
+  bootstrap: [ExampleAppComponent]
 })
 export class AppModule {
 }

packages/examples/common/start-server.js

@@ -1,17 +0,0 @@
-/**
- * @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
- */
-
-const protractorUtils = require('@angular/bazel/protractor-utils');
-const protractor = require('protractor');
-
-module.exports = async function(config) {
-  const {port} = await protractorUtils.runServer(config.workspace, config.server, '-port', []);
-  const serverUrl = `http://localhost:${port}`;
-
-  protractor.browser.baseUrl = serverUrl;
-};

packages/examples/common/test_module.ts

@@ -1,41 +0,0 @@
-/**
- * @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 {Component, NgModule} from '@angular/core';
-import {RouterModule} from '@angular/router';
-
-import * as locationExample from './location/ts/module';
-import * as ngComponentOutletExample from './ngComponentOutlet/ts/module';
-import * as ngIfExample from './ngIf/ts/module';
-import * as ngTemplateOutletExample from './ngTemplateOutlet/ts/module';
-import * as pipesExample from './pipes/ts/module';
-
-@Component({selector: 'example-app', template: '<router-outlet></router-outlet>'})
-export class TestsAppComponent {
-}
-
-@NgModule({
-  imports: [
-    locationExample.AppModule, ngComponentOutletExample.AppModule, ngIfExample.AppModule,
-    ngTemplateOutletExample.AppModule, pipesExample.AppModule,
-
-    // Router configuration so that the individual e2e tests can load their
-    // app components.
-    RouterModule.forRoot([
-      {path: 'location', component: locationExample.AppComponent},
-      {path: 'ngComponentOutlet', component: ngComponentOutletExample.AppComponent},
-      {path: 'ngIf', component: ngIfExample.AppComponent},
-      {path: 'ngTemplateOutlet', component: ngTemplateOutletExample.AppComponent},
-      {path: 'pipes', component: pipesExample.AppComponent},
-    ])
-  ],
-  declarations: [TestsAppComponent],
-  bootstrap: [TestsAppComponent]
-})
-export class TestsAppModule {
-}