build: set up adev testing (#53854)

Set up testing for the adev directory PR Close #53854
angular · Jan 10, 2024 · 4af7e0c · 4af7e0c
1 parent 9bbc415
commit 4af7e0c
Show file tree

Hide file tree

Showing 13 changed files with 298 additions and 106 deletions.
diff --git a/adev/BUILD.bazel b/adev/BUILD.bazel
@@ -1,6 +1,6 @@
 load("//:packages.bzl", "link_packages")
 load("@build_bazel_rules_nodejs//:index.bzl", "copy_to_bin")
-load("@npm//@angular-devkit/architect-cli:index.bzl", "architect")
+load("@npm//@angular-devkit/architect-cli:index.bzl", "architect", "architect_test")
 
 package(default_visibility = ["//visibility:public"])
 
@@ -21,6 +21,13 @@ APPLICATION_FILES = [
     ],
 )
 
+TEST_FILES = APPLICATION_FILES + [
+    "karma.conf.js",
+    "tsconfig.spec.json",
+] + glob(
+    ["**/*.spec.ts"],
+)
+
 APPLICATION_DEPS = link_packages([
     "@npm//@angular-devkit/build-angular",
     "@npm//@angular/animations",
@@ -69,6 +76,21 @@ APPLICATION_DEPS = link_packages([
     "@npm//angular-split",
 ])
 
+TEST_DEPS = APPLICATION_DEPS + link_packages([
+    "@npm//@angular/platform-browser-dynamic",
+    "@npm//@angular/build-tooling/bazel/browsers/chromium",
+    "@npm//@types/jasmine",
+    "@npm//@types/node",
+    "@npm//assert",
+    "@npm//jasmine",
+    "@npm//jasmine-core",
+    "@npm//karma-chrome-launcher",
+    "@npm//karma-coverage",
+    "@npm//karma-jasmine",
+    "@npm//karma-jasmine-html-reporter",
+    "//aio/tools:windows-chromium-path",
+])
+
 copy_to_bin(
     name = "application_files_bin",
     srcs = APPLICATION_FILES,
@@ -100,3 +122,19 @@ architect(
         ":application_files_bin",
     ],
 )
+
+architect_test(
+    name = "test",
+    args = [
+        "angular-dev:test",
+        "--no-watch",
+    ],
+    chdir = package_name(),
+    data = TEST_DEPS + TEST_FILES,
+    env = {
+        "CHROME_BIN": "../$(CHROMIUM)",
+    },
+    toolchains = [
+        "@npm//@angular/build-tooling/bazel/browsers/chromium:toolchain_alias",
+    ],
+)
diff --git a/adev/angular.json b/adev/angular.json
@@ -89,6 +89,7 @@
             "polyfills": ["zone.js", "zone.js/testing"],
             "tsConfig": "tsconfig.spec.json",
             "include": ["src/app"],
+            "karmaConfig": "karma.conf.js",
             "inlineStyleLanguage": "scss",
             "assets": ["src/favicon.ico", "src/assets"],
             "styles": ["@angular/docs/styles/global-styles.scss"],

diff --git a/adev/karma.conf.js b/adev/karma.conf.js
@@ -0,0 +1,74 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+const {getAdjustedChromeBinPathForWindows} = require('../aio/tools/windows-chromium-path');
+
+process.env.CHROME_BIN = getAdjustedChromeBinPathForWindows();
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma'),
+      {'reporter:jasmine-seed': ['type', JasmineSeedReporter]},
+    ],
+    proxies: {
+      '/dummy/image': 'src/assets/images/logos/angular/angular.png',
+    },
+    client: {
+      clearContext: false,  // leave Jasmine Spec Runner output visible in browser
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+        random: true,
+        seed: '',
+      },
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, './coverage/site'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ],
+    },
+    reporters: ['progress', 'kjhtml', 'jasmine-seed'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    customLaunchers: {
+      ChromeHeadlessNoSandbox: {
+        base: 'ChromeHeadless',
+        // See /integration/README.md#browser-tests for more info on these args
+        flags: ['--no-sandbox', '--headless', '--disable-gpu', '--disable-dev-shm-usage', '--hide-scrollbars', '--mute-audio'],
+      },
+    },
+    browsers: ['ChromeHeadlessNoSandbox'],
+    browserNoActivityTimeout: 60000,
+    singleRun: false,
+    restartOnFileChange: true,
+  });
+};
+
+// Helpers
+function JasmineSeedReporter(baseReporterDecorator) {
+  baseReporterDecorator(this);
+
+  this.onBrowserComplete = (browser, result) => {
+    const seed = result.order && result.order.random && result.order.seed;
+    if (seed) this.write(`${browser}: Randomized with seed ${seed}.\n`);
+  };
+
+  this.onRunComplete = () => undefined;
+}
diff --git a/adev/src/app/core/services/analytics/analytics.service.spec.ts b/adev/src/app/core/services/analytics/analytics.service.spec.ts
@@ -7,7 +7,7 @@
  */
 
 import {Injector} from '@angular/core';
-import {WINDOW} from '@angular/docs';
+import {ENVIRONMENT, WINDOW} from '@angular/docs';
 import {AnalyticsService} from './analytics.service';
 
 describe('AnalyticsService', () => {
@@ -36,6 +36,7 @@ describe('AnalyticsService', () => {
 
     injector = Injector.create({
       providers: [
+        {provide: ENVIRONMENT, useValue: {}},
         {provide: AnalyticsService, deps: [WINDOW]},
         {provide: WINDOW, useFactory: () => mockWindow, deps: []},
       ],

diff --git a/adev/src/app/editor/code-editor/code-editor.component.spec.ts b/adev/src/app/editor/code-editor/code-editor.component.spec.ts
@@ -19,7 +19,7 @@ import {EmbeddedTutorialManager} from '../embedded-tutorial-manager.service';
 
 import {CodeEditor, REQUIRED_FILES} from './code-editor.component';
 import {CodeMirrorEditor} from './code-mirror-editor.service';
-import {FakeChangeDetectorRef} from '../../../../../shared/src/lib/utils/test-utils.spec';
+import {FakeChangeDetectorRef} from '@angular/docs/testing';
 import {TutorialType} from '@angular/docs';
 
 const files = [