build(bazel): update bazel integration test to test secondary angular imports such as @angular/common/http (#24170)

PR Close #24170

integration/bazel/.bazelrc

@@ -1,3 +0,0 @@
-# Workaround https://github.com/bazelbuild/bazel/issues/3645
-# Limit Bazel to consuming 3072K of RAM
-build --local_resources=3072,2.0,1.0

integration/bazel/BUILD.bazel

@@ -17,3 +17,25 @@ filegroup(
         ],
     ),
 )
+
+ANGULAR_TESTING = [
+    "node_modules/@angular/*/bundles/*-testing.umd.js",
+    # We use AOT, so the compiler and the dynamic platform-browser should be
+    # visible only in tests
+    "node_modules/@angular/compiler/bundles/*.umd.js",
+    "node_modules/@angular/platform-browser-dynamic/bundles/*.umd.js",
+]
+
+filegroup(
+    name = "angular_bundles",
+    srcs = glob(
+        ["node_modules/@angular/*/bundles/*.umd.js"],
+        exclude = ANGULAR_TESTING,
+    ),
+)
+
+filegroup(
+    name = "angular_test_bundles",
+    testonly = 1,
+    srcs = glob(ANGULAR_TESTING),
+)

integration/bazel/WORKSPACE

@@ -1,5 +1,9 @@
 workspace(name = "bazel_integration_test")
 
+#
+# Download Bazel toolchain dependencies as needed by build actions
+#
+
 http_archive(
     name = "build_bazel_rules_nodejs",
     url = "https://github.com/bazelbuild/rules_nodejs/archive/0.9.1.zip",
@@ -7,9 +11,6 @@ http_archive(
     sha256 = "6139762b62b37c1fd171d7f22aa39566cb7dc2916f0f801d505a9aaf118c117f",
 )
 
-load("@build_bazel_rules_nodejs//:defs.bzl", "node_repositories")
-node_repositories(package_json = ["//:package.json"])
-
 http_archive(
     name = "io_bazel_rules_webtesting",
     url = "https://github.com/bazelbuild/rules_webtesting/archive/v0.2.0.zip",
@@ -24,10 +25,53 @@ http_archive(
     sha256 = "1aa75917330b820cb239b3c10a936a10f0a46fe215063d4492dd76dc6e1616f4",
 )
 
+http_archive(
+    name = "io_bazel_rules_go",
+    url = "https://github.com/bazelbuild/rules_go/releases/download/0.11.0/rules_go-0.11.0.tar.gz",
+    sha256 = "f70c35a8c779bb92f7521ecb5a1c6604e9c3edd431e50b6376d7497abc8ad3c1",
+)
+
+http_archive(
+    name = "io_bazel_rules_sass",
+    url = "https://github.com/bazelbuild/rules_sass/archive/0.0.3.zip",
+    strip_prefix = "rules_sass-0.0.3",
+    sha256 = "8fa98e7b48a5837c286a1ea254b5a5c592fced819ee9fe4fdd759768d97be868",
+)
+
+#
+# Load and install our dependencies downloaded above.
+#
+
+load("@build_bazel_rules_nodejs//:defs.bzl", "check_bazel_version", "node_repositories")
+
+check_bazel_version("0.13.0")
+node_repositories(package_json = ["//:package.json"])
+
+load("@io_bazel_rules_go//go:def.bzl", "go_rules_dependencies", "go_register_toolchains")
+
+go_rules_dependencies()
+go_register_toolchains()
+
+load("@io_bazel_rules_webtesting//web:repositories.bzl", "browser_repositories", "web_test_repositories")
+
+web_test_repositories()
+browser_repositories(
+    chromium = True,
+    firefox = True,
+)
+
 load("@build_bazel_rules_typescript//:defs.bzl", "ts_setup_workspace")
 
 ts_setup_workspace()
 
+load("@io_bazel_rules_sass//sass:sass.bzl", "sass_repositories")
+
+sass_repositories()
+
+#
+# Point Bazel to WORKSPACEs that live in subdirectories
+#
+
 local_repository(
     name = "angular",
     path = "node_modules/@angular/bazel",
@@ -37,14 +81,3 @@ local_repository(
     name = "rxjs",
     path = "node_modules/rxjs/src",
 )
-
-http_archive(
-    name = "io_bazel_rules_sass",
-    url = "https://github.com/bazelbuild/rules_sass/archive/0.0.3.zip",
-    strip_prefix = "rules_sass-0.0.3",
-    sha256 = "8fa98e7b48a5837c286a1ea254b5a5c592fced819ee9fe4fdd759768d97be868",
-)
-
-load("@io_bazel_rules_sass//sass:sass.bzl", "sass_repositories")
-
-sass_repositories()

integration/bazel/package.json

@@ -9,17 +9,26 @@
     "@angular/compiler": "file:../../dist/packages-dist/compiler",
     "@angular/core": "file:../../dist/packages-dist/core",
     "@angular/platform-browser": "file:../../dist/packages-dist/platform-browser",
+    "@angular/platform-browser-dynamic": "file:../../dist/packages-dist/platform-browser-dynamic",
     "rxjs": "file:../../node_modules/rxjs",
     "zone.js": "file:../../node_modules/zone.js"
   },
   "devDependencies": {
     "@angular/bazel": "file:../../dist/packages-dist/bazel",
     "@angular/compiler-cli": "file:../../dist/packages-dist/compiler-cli",
-    "typescript": "file:../../node_modules/typescript",
-    "@types/source-map": "0.5.1"
+    "@types/jasmine": "2.8.7",
+    "@types/source-map": "0.5.1",
+    "concurrently": "3.5.1",
+    "http-server": "0.11.1",
+    "protractor": "file:../../node_modules/protractor",
+    "typescript": "file:../../node_modules/typescript"
   },
   "scripts": {
-    "postinstall": "ngc -p angular.tsconfig.json",
-    "test": "bazel build //... --noshow_progress"
+    "postinstall": "concurrently \"webdriver-manager update $CHROMEDRIVER_VERSION_ARG\" \"ngc -p angular.tsconfig.json\"",
+    "test": "bazel build //... --noshow_progress && yarn e2e",
+    "pree2e": "bazel build test/...",
+    "e2e": "yarn e2e-prodserver && yarn e2e-devserver",
+    "e2e-prodserver": "concurrently \"bazel run //src:prodserver\" \"while ! nc -z 127.0.0.1 5432; do sleep 1; done && protractor\" --kill-others --success first",
+    "e2e-devserver": "concurrently \"bazel run //src:devserver\" \"while ! nc -z 127.0.0.1 5432; do sleep 1; done && protractor\" --kill-others --success first"
   }
 }

integration/bazel/protractor.conf.js

@@ -0,0 +1,9 @@
+exports.config = {
+  specs: ['bazel-bin/test/e2e/*.spec.js'],
+  capabilities: {browserName: 'chrome', chromeOptions: {args: ['--no-sandbox']}},
+  directConnect: true,
+  baseUrl: 'http://localhost:5432/',
+  framework: 'jasmine',
+  getPageTimeout: 60 * 1000,
+  allScriptsTimeout: 60 * 1000,
+};

integration/bazel/src/BUILD.bazel

@@ -9,3 +9,52 @@ ng_module(
     tsconfig = ":tsconfig.json",
     deps = ["//src/hello-world"],
 )
+
+load("@build_bazel_rules_typescript//:defs.bzl", "ts_devserver")
+
+ts_devserver(
+    name = "devserver",
+    additional_root_paths = [
+        "bazel_integration_test/node_modules/zone.js/dist",
+    ],
+    entry_module = "bazel_integration_test/src/main",
+    scripts = ["//:angular_bundles"],
+    serving_path = "/bundle.min.js",
+    static_files = [
+        "//:node_modules/zone.js/dist/zone.min.js",
+        "index.html",
+    ],
+    deps = ["//src"],
+)
+
+load("@build_bazel_rules_nodejs//:defs.bzl", "rollup_bundle", "nodejs_binary")
+
+rollup_bundle(
+    name = "bundle",
+    entry_point = "src/main",
+    deps = ["//src"],
+)
+
+# Needed because the prodserver only loads static files that appear under this
+# package.
+genrule(
+    name = "zone.js",
+    srcs = ["//:node_modules/zone.js/dist/zone.min.js"],
+    outs = ["zone.min.js"],
+    cmd = "cp $< $@",
+)
+
+nodejs_binary(
+    name = "prodserver",
+    args = [
+        "./src",
+        "-p",
+        "5432",
+    ],
+    data = [
+        "index.html",
+        ":bundle",
+        ":zone.js",
+    ],
+    entry_point = "http-server/bin/http-server",
+)

integration/bazel/src/app.component.ts

@@ -0,0 +1,19 @@
+import {Component} from '@angular/core';
+import {HttpClient} from '@angular/common/http';
+import {Observable} from 'rxjs';
+import {map, startWith} from 'rxjs/operators';
+
+@Component({
+  selector: 'app-component',
+  template: `
+    <hello-world-app></hello-world-app>
+    <div>The current time is {{ time$ | async }}</div>
+  `})
+export class AppComponent {
+  constructor(private http: HttpClient) {
+  }
+
+  time$ = this.http.get('http://worldclockapi.com/api/json/pst/now').pipe(
+    map((result: any) => result.currentDateTime),
+    startWith(['...']));
+}

integration/bazel/src/app.module.ts

@@ -1,9 +1,14 @@
-import {HelloWorldModule} from './hello-world/hello-world.module';
-
 import {NgModule} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
+import {HttpClientModule} from '@angular/common/http';
+import {CommonModule} from '@angular/common';
+
+import {AppComponent} from './app.component';
+import {HelloWorldModule} from './hello-world/hello-world.module';
 
 @NgModule({
-  imports: [BrowserModule, HelloWorldModule]
+  imports: [CommonModule, BrowserModule, HttpClientModule, HelloWorldModule],
+  declarations: [AppComponent],
+  bootstrap: [AppComponent],
 })
 export class AppModule {}

integration/bazel/src/hello-world/BUILD.bazel

@@ -2,6 +2,7 @@ package(default_visibility = ["//visibility:public"])
 
 load("@angular//:index.bzl", "ng_module", "ng_package")
 load("@io_bazel_rules_sass//sass:sass.bzl", "sass_binary")
+load("@build_bazel_rules_typescript//:defs.bzl", "ts_library", "ts_web_test_suite")
 
 sass_binary(
     name = "hello-world-styles",
@@ -10,7 +11,10 @@ sass_binary(
 
 ng_module(
     name = "hello-world",
-    srcs = glob(["*.ts"]),
+    srcs = glob(
+        ["*.ts"],
+        exclude = ["*.spec.ts"],
+    ),
     assets = [":hello-world-styles.css"],
     tsconfig = "//src:tsconfig.json",
     # FIXME(alexeagle): the rxjs dep should come from Angular, but if we use the
@@ -23,3 +27,24 @@ ng_package(
     entry_point = "src/hello-world/index.js",
     deps = [":hello-world"],
 )
+
+ts_library(
+    name = "test_lib",
+    testonly = 1,
+    srcs = glob(["*.spec.ts"]),
+    deps = [":hello-world"],
+)
+
+ts_web_test_suite(
+    name = "test",
+    bootstrap = ["//:node_modules/zone.js/dist/zone-testing-bundle.js"],
+    browsers = [
+        "@io_bazel_rules_webtesting//browsers:chromium-local",
+        "@io_bazel_rules_webtesting//browsers:firefox-local",
+    ],
+    deps = [
+        ":test_lib",
+        "//:angular_bundles",
+        "//:angular_test_bundles",
+    ],
+)

integration/bazel/src/hello-world/hello-world.component.spec.ts

@@ -0,0 +1,45 @@
+import {DebugElement} from '@angular/core';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {By} from '@angular/platform-browser';
+import {BrowserDynamicTestingModule, platformBrowserDynamicTesting} from '@angular/platform-browser-dynamic/testing';
+
+import {HelloWorldComponent} from './hello-world.component';
+import {HelloWorldModuleNgSummary} from './hello-world.module.ngsummary';
+
+// TODO(alexeagle): this helper should be in @angular/platform-browser-dynamic/testing
+try {
+  TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+} catch {
+  // Ignore exceptions when calling it multiple times.
+}
+
+describe('BannerComponent (inline template)', () => {
+  let comp: HelloWorldComponent;
+  let fixture: ComponentFixture<HelloWorldComponent>;
+  let el: HTMLElement;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [HelloWorldComponent],  // declare the test component
+      aotSummaries: HelloWorldModuleNgSummary,
+    });
+    TestBed.compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HelloWorldComponent);
+    comp = fixture.componentInstance;
+    el = fixture.debugElement.query(By.css('div')).nativeElement;
+  });
+
+  it('should display original title', () => {
+    fixture.detectChanges();
+    expect(el.textContent).toContain(comp.name);
+  });
+
+  it('should display a different test title', () => {
+    comp.name = 'Test';
+    fixture.detectChanges();
+    expect(el.textContent).toContain('Test');
+  });
+});

integration/bazel/src/hello-world/hello-world.module.ts

@@ -3,6 +3,6 @@ import {NgModule} from '@angular/core';
 
 @NgModule({
   declarations: [HelloWorldComponent],
-  bootstrap: [HelloWorldComponent],
+  exports: [HelloWorldComponent],
 })
 export class HelloWorldModule {}

integration/bazel/src/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+
+<html>
+  <head>
+    <title>Bazel Integration Test</title>
+  </head>
+  <body>
+    <app-component></app-component>
+    <script src="/zone.min.js"></script>
+    <script src="/bundle.min.js"></script>
+  </body>
+</html>

integration/bazel/test/e2e/BUILD.bazel

@@ -0,0 +1,7 @@
+load("@build_bazel_rules_typescript//:defs.bzl", "ts_library")
+
+ts_library(
+    name = "e2e",
+    testonly = 1,
+    srcs = glob(["*.ts"]),
+)

integration/bazel/test/e2e/app.spec.ts

@@ -0,0 +1,12 @@
+import {browser, by, element, ExpectedConditions} from 'protractor';
+
+describe('angular example application', () => {
+  it('should display: Hello World!', (done) => {
+    browser.get('');
+    const div = element(by.css('div'));
+    div.getText().then(t => expect(t).toEqual(`Hello world!`));
+    element(by.css('input')).sendKeys('!');
+    div.getText().then(t => expect(t).toEqual(`Hello world!!`));
+    done();
+  });
+});

integration/bazel/tools/bazel.rc

@@ -0,0 +1,10 @@
+# Make TypeScript and Angular compilation fast, by keeping a few copies of the
+# compiler running as daemons, and cache SourceFile AST's to reduce parse time.
+build --strategy=TypeScriptCompile=worker
+build --strategy=AngularTemplateCompile=worker
+
+test --test_output=errors
+
+# Workaround https://github.com/bazelbuild/bazel/issues/3645
+# Limit Bazel to consuming 3072K of RAM
+build --local_resources=3072,2.0,1.0