test(animations): Add bundling symbol test for animations package (#44809)

This adds a full bundling animation symbols test to the test suite.

PR Close #44809

packages/core/test/bundling/README.md

@@ -12,6 +12,7 @@ yarn bazel run //packages/core/test/bundling/forms:symbol_test.accept
 yarn bazel run //packages/core/test/bundling/hello_world:symbol_test.accept
 yarn bazel run //packages/core/test/bundling/router:symbol_test.accept
 yarn bazel run //packages/core/test/bundling/todo:symbol_test.accept
+yarn bazel run //packages/core/test/bundling/animations:symbol_test.accept
 ```
 
 ## Running all symbol tests

packages/core/test/bundling/animations/BUILD.bazel

@@ -0,0 +1,64 @@
+load("//tools:defaults.bzl", "app_bundle", "jasmine_node_test", "ng_module", "ts_library")
+load("//tools/symbol-extractor:index.bzl", "js_expected_symbol_test")
+load("@npm//http-server:index.bzl", "http_server")
+
+package(default_visibility = ["//visibility:public"])
+
+ng_module(
+    name = "animations",
+    srcs = ["index.ts"],
+    deps = [
+        "//packages/animations",
+        "//packages/core",
+        "//packages/platform-browser",
+        "//packages/platform-browser/animations",
+    ],
+)
+
+app_bundle(
+    name = "bundle",
+    entry_point = ":index.ts",
+    deps = [
+        ":animations",
+        "@npm//rxjs",
+    ],
+)
+
+ts_library(
+    name = "test_lib",
+    testonly = True,
+    srcs = glob(["*_spec.ts"]),
+    deps = [
+        "//packages:types",
+        "//packages/compiler",
+        "//packages/core",
+        "//packages/core/testing",
+        "//packages/private/testing",
+    ],
+)
+
+jasmine_node_test(
+    name = "test",
+    data = [
+        ":bundle.debug.min.js",
+        ":bundle.js",
+        ":bundle.min.js",
+        ":bundle.min.js.br",
+    ],
+    deps = [":test_lib"],
+)
+
+js_expected_symbol_test(
+    name = "symbol_test",
+    src = ":bundle.debug.min.js",
+    golden = ":bundle.golden_symbols.json",
+)
+
+http_server(
+    name = "prodserver",
+    data = [
+        "index.html",
+        ":bundle.debug.min.js",
+        ":bundle.min.js",
+    ],
+)

packages/core/test/bundling/animations/index.html

@@ -0,0 +1,35 @@
+<!doctype html>
+
+<html>
+
+<head>
+    <title>Angular Animations Example</title>
+</head>
+
+<body>
+    <!-- The Angular application will be bootstrapped into this element. -->
+
+    <app-root></app-root>
+
+    <!--
+      Script tag which bootstraps the application. Use `?debug` in URL to select
+      the debug version of the script.
+
+      There are two scripts sources: `bundle.min.js` and `bundle.debug.min.js` You can
+      switch between which bundle the browser loads to experiment with the application.
+
+      - `bundle.min.js`: Is what the site would serve to their users. It has gone
+        through rollup, build-optimizer, and uglify with tree shaking.
+      - `bundle.debug.min.js`: Is what the developer would like to see when debugging
+        the application. It has also gone through full pipeline of esbuild, babel optimization,
+        plugins from the devkit and terser, however mangling is disabled and the minified
+        file is formatted using prettier (to ease debugging).
+    -->
+    <script>
+        document.write('<script src="' +
+            (document.location.search.endsWith('debug') ? '/bundle.debug.min.js' : '/bundle.min.js') +
+            '"></' + 'script>');
+    </script>
+</body>
+
+</html>

packages/core/test/bundling/animations/index.ts

@@ -0,0 +1,45 @@
+/**
+ * @license
+ * Copyright Google LLC 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 {animate, style, transition, trigger} from '@angular/animations';
+import {Component, NgModule, ɵNgModuleFactory as NgModuleFactory} from '@angular/core';
+import {BrowserModule, platformBrowser} from '@angular/platform-browser';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+
+@Component({
+  selector: 'app-animations',
+  template: `
+    <div [@myAnimation]="exp"></div>
+    `,
+  animations:
+      [trigger('myAnimation', [transition('* => on', [animate(1000, style({opacity: 1}))])])]
+})
+class AnimationsComponent {
+  exp: any = false;
+}
+
+@Component({
+  selector: 'app-root',
+  template: `
+     <app-animations></app-animations>
+   `
+})
+class RootComponent {
+}
+
+@NgModule({
+  declarations: [RootComponent, AnimationsComponent],
+  imports: [BrowserModule, BrowserAnimationsModule],
+})
+class AnimationsExampleModule {
+  ngDoBootstrap(app: any) {
+    app.bootstrap(RootComponent);
+  }
+}
+
+(window as any).waitForApp =
+    platformBrowser().bootstrapModule(AnimationsExampleModule, {ngZone: 'noop'});

packages/core/test/bundling/animations/treeshaking_spec.ts

@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright Google LLC 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 '@angular/compiler';
+
+import * as fs from 'fs';
+import * as path from 'path';
+
+const UTF8 = {
+  encoding: 'utf-8'
+};
+const PACKAGE = 'angular/packages/core/test/bundling/animations';
+
+describe('treeshaking with uglify', () => {
+  let content: string;
+  // We use the debug version as otherwise symbols/identifiers would be mangled (and the test would
+  // always pass)
+  const contentPath = require.resolve(path.join(PACKAGE, 'bundle.debug.min.js'));
+  beforeAll(() => {
+    content = fs.readFileSync(contentPath, UTF8);
+  });
+
+  it('should drop unused TypeScript helpers', () => {
+    expect(content).not.toContain('__asyncGenerator');
+  });
+
+  it('should not contain rxjs from commonjs distro', () => {
+    expect(content).not.toContain('commonjsGlobal');
+    expect(content).not.toContain('createCommonjsModule');
+  });
+});