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

PR Close #24170

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>