build: bundle spec files for saucelabs legacy job (angular#44281)

Bundle spec files similar to how it is done within the Angular Components repo. This should simplify the setup and also speed up the Saucelab job as only a single spec bundle would need to be downloaded, compared to having to load hundreds of files through the Saucelabs tunnel. Also makes a couple of tests more robust with the emulators/and accounts for ES2015 test runner changes. The tests should be less reluctant to such build process changes. Note for reviewers: Some imports have been simplified here. This work came from Joey's original WIP for this. It's unclear to me whether this is still needed, but it sounded like this was necessary for the ESBuild bundling to work. I have robusted the module resolution plugin though, so I doubt it's still needed. At the same time though: Not worth reverting/trying as these changes are nice to have anyway! Co-Authored-By: Joey Perrott <[email protected]> Co-Authored-By: Paul Gschwendtner <[email protected]> PR Close angular#44281
mikoloism · Nov 30, 2021 · b23ce15 · b23ce15
1 parent 61e0234
commit b23ce15
Show file tree

Hide file tree

Showing 24 changed files with 388 additions and 422 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -614,30 +614,28 @@ jobs:
                 //packages/common/locales
 
             # Needed for the ES5 downlevel reflector test in `packages/core/test/reflection`.
-            mkdir -p dist/all/@angular/core/test/reflection/
+            mkdir -p dist/legacy-test-out/core/test/reflection/
             cp dist/bin/packages/core/test/reflection/es5_downleveled_inheritance_fixture.js \
-              dist/all/@angular/core/test/reflection/es5_downleveled_inheritance_fixture.js
+              dist/legacy-test-out/core/test/reflection/es5_downleveled_inheritance_fixture.js
             # Locale files are needed for i18n tests running within Saucelabs. These are added
             # directly as sources so that the TypeScript compilation of `/packages/tsconfig.json`
             # can succeed. Note that the base locale and currencies files are checked-in, so
             # we do not need to re-generate those through Bazel.
             mkdir -p packages/common/locales/extra
             cp dist/bin/packages/common/locales/*.ts packages/common/locales
             cp dist/bin/packages/common/locales/extra/*.ts packages/common/locales/extra
-      # add module umd tsc compile option so the test can work
-      # properly in the legacy browsers
-      - run: yarn tsc -p packages/tsconfig-legacy-saucelabs.json --module UMD
-      - run: yarn tsc -p modules --module UMD
+      # Build ZoneJS so that it can be loaded globally in the Karma tests.
       - run: yarn bazel build //packages/zone.js:npm_package
+      # Build the bundle for all tests to run within Saucelabs
+      - run: node tools/legacy-saucelabs/build-saucelabs-test-bundle.mjs
       - run:
           # Waiting on ready ensures that we don't run tests too early without Saucelabs not being ready.
           name: Waiting for Saucelabs tunnel to connect
           command: ./tools/saucelabs/sauce-service.sh ready-wait
       - run:
           name: Running tests on Saucelabs.
           command: |
-            browsers=$(node -e 'console.log(require("./browser-providers.conf").sauceAliases.CI_REQUIRED.join(","))')
-            yarn karma start ./karma-js.conf.js --single-run --browsers=${browsers}
+            KARMA_WEB_TEST_MODE=SL_REQUIRED yarn karma start ./karma-js.conf.js --single-run
       - run:
           name: Stop Saucelabs tunnel service
           command: ./tools/saucelabs/sauce-service.sh stop

diff --git a/.pullapprove.yml b/.pullapprove.yml
@@ -1196,6 +1196,7 @@ groups:
           'tools/circular_dependency_test/**',
           'tools/contributing-stats/**',
           'tools/gulp-tasks/**',
+          'tools/legacy-saucelabs/**',
           'tools/npm/**',
           'tools/npm_integration_test/**',
           'tools/rxjs/**',

diff --git a/karma-js.conf.js b/karma-js.conf.js
@@ -23,10 +23,6 @@ module.exports = function(config) {
     },
 
     files: [
-      // Sources and specs.
-      // Loaded through the System loader, in `test-main.js`.
-      {pattern: 'dist/all/@angular/**/*.js', included: false, watched: true},
-
       // Serve AngularJS for `ngUpgrade` testing.
       {pattern: 'node_modules/angular-1.5/angular?(.min).js', included: false, watched: false},
       {pattern: 'node_modules/angular-mocks-1.5/angular-mocks.js', included: false, watched: false},
@@ -46,10 +42,9 @@ module.exports = function(config) {
       'dist/bin/packages/zone.js/npm_package/bundles/zone-testing.umd.js',
       'dist/bin/packages/zone.js/npm_package/bundles/task-tracking.umd.js',
 
-      // Including systemjs because it defines `__eval`, which produces correct stack traces.
-      'test-events.js',
-      'third_party/shims_for_internal_tests.js',
-      'node_modules/systemjs/dist/system.src.js',
+      // Static test assets.
+      {pattern: 'packages/platform-browser/test/static_assets/**/*', included: false},
+      {pattern: 'packages/platform-browser/test/browser/static_assets/**/*', included: false},
 
       // Serve polyfills necessary for testing the `elements` package.
       {
@@ -58,42 +53,9 @@ module.exports = function(config) {
         watched: false
       },
 
-      {pattern: 'node_modules/rxjs/**', included: false, watched: false, served: true},
       'node_modules/reflect-metadata/Reflect.js',
-      'tools/build/file2modulename.js',
-      'test-main.js',
-      {pattern: 'dist/all/@angular/empty.*', included: false, watched: false},
-      {pattern: 'packages/platform-browser/test/static_assets/**', included: false, watched: false},
-      {
-        pattern: 'packages/platform-browser/test/browser/static_assets/**',
-        included: false,
-        watched: false,
-      },
-    ],
 
-    exclude: [
-      'dist/all/@angular/_testing_init/**',
-      'dist/all/@angular/**/e2e_test/**',
-      'dist/all/@angular/**/*node_only_spec.js',
-      'dist/all/@angular/benchpress/**',
-      'dist/all/@angular/compiler-cli/**',
-      'dist/all/@angular/compiler-cli/src/ngtsc/**',
-      'dist/all/@angular/compiler-cli/test/compliance/**',
-      'dist/all/@angular/compiler-cli/test/ngtsc/**',
-      'dist/all/@angular/compiler/test/aot/**',
-      'dist/all/@angular/compiler/test/render3/**',
-      'dist/all/@angular/core/test/bundling/**',
-      'dist/all/@angular/core/test/render3/ivy/**',
-      'dist/all/@angular/core/test/render3/jit/**',
-      'dist/all/@angular/core/test/render3/perf/**',
-      'dist/all/@angular/elements/schematics/**',
-      'dist/all/@angular/examples/**/e2e_test/*',
-      'dist/all/@angular/language-service/**',
-      'dist/all/@angular/localize/**/test/**',
-      'dist/all/@angular/localize/schematics/**',
-      'dist/all/@angular/router/**/test/**',
-      'dist/all/@angular/platform-browser/testing/e2e_util.js',
-      'dist/examples/**/e2e_test/**',
+      'dist/legacy-test-bundle.spec.js',
     ],
 
     customLaunchers: browserProvidersConf.customLaunchers,
@@ -149,15 +111,6 @@ module.exports = function(config) {
     set: () => {},
   });
 
-  if (process.env.CIRCLECI) {
-    conf.frameworks.unshift('parallel');
-    conf.plugins.unshift(require('karma-parallel'));
-    conf.parallelOptions = {
-      executors: 2,
-      shardStrategy: 'round-robin',
-    };
-  }
-
   if (process.env['SAUCE_TUNNEL_IDENTIFIER']) {
     console.log(`SAUCE_TUNNEL_IDENTIFIER: ${process.env.SAUCE_TUNNEL_IDENTIFIER}`);
 
@@ -171,8 +124,7 @@ module.exports = function(config) {
     // the test logs from upstream and tries re-uploading them with the Karma enhanced details.
     // This slows-down tests/browser restarting and can decrease stability.
     // https://github.com/karma-runner/karma-sauce-launcher/blob/59b0c5c877448e064ad56449cd906743721c6b62/src/launcher/launcher.ts#L72-L79.
-    require('saucelabs').default.prototype.downloadJobAsset =
-        () => Promise.resolve('<FAKE-LOGS>');
+    require('saucelabs').default.prototype.downloadJobAsset = () => Promise.resolve('<FAKE-LOGS>');
   }
 
   // For SauceLabs jobs, we set up a domain which resolves to the machine which launched

diff --git a/modules/benchmarks/src/old/compiler/compiler_benchmark.ts b/modules/benchmarks/src/old/compiler/compiler_benchmark.ts
@@ -8,7 +8,7 @@
 
 import {CompilerConfig, DirectiveResolver} from '@angular/compiler';
 import {Component, ComponentResolver, Directive, ViewContainerRef,} from '@angular/core';
-import {ViewMetadata} from '@angular/core/src/metadata/view';
+import {ViewMetadata} from '@angular/core/view';
 import {PromiseWrapper} from '@angular/facade/src/async';
 import {print, Type} from '@angular/facade/src/lang';
 import {bootstrap} from '@angular/platform-browser';

diff --git a/package.json b/package.json
@@ -176,9 +176,9 @@
     "gulp-conventional-changelog": "^2.0.35",
     "husky": "7.0.4",
     "inquirer": "^8.0.0",
-    "karma-parallel": "^0.3.1",
     "karma-sauce-launcher": "^4.3.6",
     "madge": "^5.0.0",
+    "multimatch": "^6.0.0",
     "sauce-connect": "https://saucelabs.com/downloads/sc-4.7.1-linux.tar.gz",
     "semver": "^7.3.5",
     "ts-node": "^10.0.0",

diff --git a/packages/core/test/acceptance/content_spec.ts b/packages/core/test/acceptance/content_spec.ts
@@ -7,8 +7,7 @@
  */
 
 import {CommonModule} from '@angular/common';
-import {ChangeDetectorRef, Component, Directive, TemplateRef, ViewChild, ViewContainerRef} from '@angular/core';
-import {Input} from '@angular/core/src/metadata';
+import {ChangeDetectorRef, Component, Directive, Input, TemplateRef, ViewChild, ViewContainerRef} from '@angular/core';
 import {TestBed} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 import {expect} from '@angular/platform-browser/testing/src/matchers';
@@ -322,7 +321,7 @@ describe('projection', () => {
        @Component(
            {selector: 'comp', template: `<ng-template><ng-content></ng-content></ng-template>`})
        class Comp {
-         @ViewChild(TemplateRef, {static: true}) template !: TemplateRef<any>;
+         @ViewChild(TemplateRef, {static: true}) template!: TemplateRef<any>;
        }
 
        @Directive({selector: '[trigger]'})

diff --git a/packages/core/test/acceptance/directive_spec.ts b/packages/core/test/acceptance/directive_spec.ts
@@ -7,8 +7,7 @@
  */
 
 import {CommonModule} from '@angular/common';
-import {Component, Directive, ElementRef, EventEmitter, NgModule, Output, TemplateRef, ViewChild, ViewContainerRef} from '@angular/core';
-import {Input} from '@angular/core/src/metadata';
+import {Component, Directive, ElementRef, EventEmitter, Input, NgModule, Output, TemplateRef, ViewChild, ViewContainerRef} from '@angular/core';
 import {TestBed} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 

diff --git a/packages/core/test/acceptance/discover_utils_spec.ts b/packages/core/test/acceptance/discover_utils_spec.ts
@@ -6,10 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import {CommonModule} from '@angular/common';
-import {Component, Directive, HostBinding, InjectionToken, ViewChild} from '@angular/core';
-import {ChangeDetectionStrategy} from '@angular/core/src/change_detection';
+import {ChangeDetectionStrategy, Component, Directive, HostBinding, InjectionToken, Input, Output, ViewChild, ViewEncapsulation} from '@angular/core';
 import {EventEmitter} from '@angular/core/src/event_emitter';
-import {Input, Output, ViewEncapsulation} from '@angular/core/src/metadata';
 import {isLView} from '@angular/core/src/render3/interfaces/type_checks';
 import {CONTEXT} from '@angular/core/src/render3/interfaces/view';
 import {ComponentFixture, TestBed} from '@angular/core/testing';

diff --git a/packages/core/test/acceptance/text_spec.ts b/packages/core/test/acceptance/text_spec.ts
@@ -127,7 +127,8 @@ describe('text instructions', () => {
     fixture.detectChanges();
     const div = fixture.nativeElement.querySelector('div');
 
-    expect(div.innerHTML).toBe('function foo() { }');
+    expect(div.innerHTML).toBe(fixture.componentInstance.test.toString());
+    expect(div.innerHTML).toContain('foo');
   });
 
   it('should stringify an object using its toString method', () => {

diff --git a/packages/core/test/acceptance/view_container_ref_spec.ts b/packages/core/test/acceptance/view_container_ref_spec.ts
@@ -8,8 +8,7 @@
 
 import {CommonModule, DOCUMENT} from '@angular/common';
 import {computeMsgId} from '@angular/compiler';
-import {Compiler, Component, ComponentFactoryResolver, Directive, DoCheck, ElementRef, EmbeddedViewRef, ErrorHandler, InjectionToken, Injector, NgModule, NgModuleRef, NO_ERRORS_SCHEMA, OnDestroy, OnInit, Pipe, PipeTransform, QueryList, RendererFactory2, RendererType2, Sanitizer, TemplateRef, ViewChild, ViewChildren, ViewContainerRef, ɵsetDocument} from '@angular/core';
-import {Input} from '@angular/core/src/metadata';
+import {Compiler, Component, ComponentFactoryResolver, Directive, DoCheck, ElementRef, EmbeddedViewRef, ErrorHandler, InjectionToken, Injector, Input, NgModule, NgModuleRef, NO_ERRORS_SCHEMA, OnDestroy, OnInit, Pipe, PipeTransform, QueryList, RendererFactory2, RendererType2, Sanitizer, TemplateRef, ViewChild, ViewChildren, ViewContainerRef, ɵsetDocument} from '@angular/core';
 import {ngDevModeResetPerfCounters} from '@angular/core/src/util/ng_dev_mode';
 import {ComponentFixture, TestBed, TestComponentRenderer} from '@angular/core/testing';
 import {clearTranslations, loadTranslations} from '@angular/localize';

diff --git a/packages/core/test/animation/animations_with_web_animations_integration_spec.ts b/packages/core/test/animation/animations_with_web_animations_integration_spec.ts
@@ -249,7 +249,8 @@ describe('animation integration tests using web animations', function() {
                 overflow:hidden;
               }
               .list .inner {
-                line-height:50px;
+                box-sizing: border-box;
+                height: 50px;
               }
             `],
           template: `

diff --git a/packages/core/test/debug/debug_node_spec.ts b/packages/core/test/debug/debug_node_spec.ts
@@ -8,8 +8,7 @@
 
 
 import {CommonModule, NgIfContext, ɵgetDOM as getDOM} from '@angular/common';
-import {Component, DebugElement, DebugNode, Directive, ElementRef, EmbeddedViewRef, EventEmitter, HostBinding, Injectable, Input, NO_ERRORS_SCHEMA, OnInit, Output, Renderer2, TemplateRef, ViewChild, ViewContainerRef} from '@angular/core';
-import {NgZone} from '@angular/core/src/zone';
+import {Component, DebugElement, DebugNode, Directive, ElementRef, EmbeddedViewRef, EventEmitter, HostBinding, Injectable, Input, NgZone, NO_ERRORS_SCHEMA, OnInit, Output, Renderer2, TemplateRef, ViewChild, ViewContainerRef} from '@angular/core';
 import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
 import {By} from '@angular/platform-browser/src/dom/debug/by';
 import {createMouseEvent, hasClass} from '@angular/platform-browser/testing/src/browser_util';

diff --git a/packages/core/test/directive_lifecycle_integration_spec.ts b/packages/core/test/directive_lifecycle_integration_spec.ts
@@ -6,8 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {AfterContentChecked, AfterContentInit, AfterViewChecked, AfterViewInit, DoCheck, OnChanges, OnInit} from '@angular/core';
-import {Component, Directive} from '@angular/core/src/metadata';
+import {AfterContentChecked, AfterContentInit, AfterViewChecked, AfterViewInit, Component, Directive, DoCheck, OnChanges, OnInit} from '@angular/core';
 import {inject, TestBed} from '@angular/core/testing';
 import {Log} from '@angular/core/testing/src/testing_internal';
 

diff --git a/packages/core/test/linker/integration_spec.ts b/packages/core/test/linker/integration_spec.ts
@@ -7,15 +7,14 @@
  */
 
 import {CommonModule, DOCUMENT, ɵgetDOM as getDOM} from '@angular/common';
-import {Compiler, ComponentFactory, ComponentRef, EventEmitter, Host, Inject, Injectable, InjectionToken, Injector, NgModule, NgModuleRef, NO_ERRORS_SCHEMA, OnDestroy, SkipSelf, ViewChild, ViewRef} from '@angular/core';
+import {Attribute, Compiler, Component, ComponentFactory, ComponentRef, ContentChildren, Directive, EventEmitter, Host, HostBinding, HostListener, Inject, Injectable, InjectionToken, Injector, Input, NgModule, NgModuleRef, NO_ERRORS_SCHEMA, OnDestroy, Output, Pipe, SkipSelf, ViewChild, ViewRef} from '@angular/core';
 import {ChangeDetectionStrategy, ChangeDetectorRef, PipeTransform} from '@angular/core/src/change_detection/change_detection';
 import {ComponentFactoryResolver} from '@angular/core/src/linker/component_factory_resolver';
 import {ElementRef} from '@angular/core/src/linker/element_ref';
 import {QueryList} from '@angular/core/src/linker/query_list';
 import {TemplateRef} from '@angular/core/src/linker/template_ref';
 import {ViewContainerRef} from '@angular/core/src/linker/view_container_ref';
 import {EmbeddedViewRef} from '@angular/core/src/linker/view_ref';
-import {Attribute, Component, ContentChildren, Directive, HostBinding, HostListener, Input, Output, Pipe} from '@angular/core/src/metadata';
 import {fakeAsync, getTestBed, TestBed, tick, waitForAsync} from '@angular/core/testing';
 import {createMouseEvent, dispatchEvent, el, isCommentNode} from '@angular/platform-browser/testing/src/browser_util';
 import {expect} from '@angular/platform-browser/testing/src/matchers';

diff --git a/packages/core/test/render3/i18n_debug_spec.ts b/packages/core/test/render3/i18n_debug_spec.ts
@@ -29,6 +29,13 @@ describe('i18n debug', () => {
     });
 
     it('should print Attribute opCode', () => {
+      // The `sanitizeFn` is written as actual function, compared to it being an arrow function.
+      // This is done to make this test less reluctant to build process changes where e.g. an
+      // arrow function might be transformed to a function declaration in ES5.
+      const sanitizeFn = function(v: any) {
+        return v;
+      };
+
       expect(i18nUpdateOpCodesToString([
         0b01,    8,
         'pre ',  -4,
@@ -39,11 +46,12 @@ describe('i18n debug', () => {
         'pre ',  -4,
         ' in ',  -3,
         ' post', 1 << I18nUpdateOpCode.SHIFT_REF | I18nUpdateOpCode.Attr,
-        'title', (v: any) => v,
+        'title', sanitizeFn,
       ] as unknown as I18nUpdateOpCodes))
           .toEqual([
             'if (mask & 0b1) { (lView[1] as Element).setAttribute(\'title\', `pre ${lView[i-4]} in ${lView[i-3]} post`); }',
-            'if (mask & 0b10) { (lView[1] as Element).setAttribute(\'title\', (function (v) { return v; })(`pre ${lView[i-4]} in ${lView[i-3]} post`)); }'
+            `if (mask & 0b10) { (lView[1] as Element).setAttribute('title', (${
+                sanitizeFn.toString()})(\`pre $\{lView[i-4]} in $\{lView[i-3]} post\`)); }`
           ]);
     });
 

diff --git a/packages/core/test/render3/ivy/jit_spec.ts b/packages/core/test/render3/ivy/jit_spec.ts
@@ -7,14 +7,10 @@
  */
 import 'reflect-metadata';
 
-import {ElementRef, QueryList} from '@angular/core';
+import {Component, ContentChild, ContentChildren, Directive, ElementRef, HostBinding, HostListener, Input, NgModule, Pipe, QueryList, ViewChild, ViewChildren, ɵNgModuleDef as NgModuleDef} from '@angular/core';
 import {Injectable} from '@angular/core/src/di/injectable';
 import {setCurrentInjector, ɵɵinject} from '@angular/core/src/di/injector_compatibility';
 import {ɵɵdefineInjectable, ɵɵInjectorDef} from '@angular/core/src/di/interface/defs';
-import {ContentChild, ContentChildren, ViewChild, ViewChildren} from '@angular/core/src/metadata/di';
-import {Component, Directive, HostBinding, HostListener, Input, Pipe} from '@angular/core/src/metadata/directives';
-import {NgModule} from '@angular/core/src/metadata/ng_module';
-import {NgModuleDef} from '@angular/core/src/metadata/ng_module_def';
 import {FactoryFn} from '@angular/core/src/render3/definition_factory';
 import {ComponentDef, PipeDef} from '@angular/core/src/render3/interfaces/definition';
 

diff --git a/packages/router/test/router_preloader.spec.ts b/packages/router/test/router_preloader.spec.ts
@@ -7,7 +7,6 @@
  */
 
 import {Compiler, Component, Injector, NgModule, NgModuleFactory, NgModuleRef, Type} from '@angular/core';
-import {resolveComponentResources} from '@angular/core/src/metadata/resource_loading';
 import {fakeAsync, inject, TestBed, tick} from '@angular/core/testing';
 import {PreloadAllModules, PreloadingStrategy, RouterPreloader} from '@angular/router';
 import {BehaviorSubject, Observable, of, throwError} from 'rxjs';

diff --git a/packages/tsconfig-legacy-saucelabs.json b/packages/tsconfig-legacy-saucelabs.json
@@ -1,13 +1,37 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
-    "target": "ES5",
-    "module": "commonjs",
+    "outDir": "../dist/legacy-test-out",
+    "target": "ES2015",
+    "module": "ES2020",
+    "importHelpers": true,
     // The project uses Bazel for TypeScript compilation. Unlike with Bazel, we build all
     // sources as part of a single TypeScript compilation. This results in `@internal`
     // declarations not being omitted between the logical as defined per the Bazel targets.
     // This can cause issues where the `override` keyword is needed for the legacy TS
     // compilation, but not within Bazel where the overridden member has `@internal`.
-    "noImplicitOverride": false
-  }
+    "noImplicitOverride": false,
+    // We run the decorator downlevel transform when compiling the sources and tests.
+    // Given that is the case, we do not need additional `design` metadata being emitted.
+    // The default TS decorator metadata would also not work with ES2015 JIT.
+    // https://github.com/angular/angular/issues/30106.
+    "emitDecoratorMetadata": false
+  },
+  "exclude": [
+    // Exclusions from the parent `tsconfig` need to be merged manually here.
+    "bazel",
+    "common/locales",
+    "compiler-cli/integrationtest",
+    "compiler-cli/test/compliance",
+    "core/schematics",
+    "elements/schematics",
+    "examples/**",
+    "http/**",
+    "platform-server/integrationtest",
+    "router/test/aot_ngsummary_test",
+
+    // Additional exclusion since tests for the language-service never run within the
+    // Saucelabs job and the package is not compatible with ESM TS compilation anyway.
+    "language-service/**",
+  ]
 }