fix: Karma test setup -- closes #1065

.github/workflows/CI.yml

@@ -22,7 +22,7 @@ jobs:
         npm install -g npm@latest @angular/cli
         npm ci --legacy-peer-deps
         ng lint
-        # ng test --watch false --browsers ChromeHeadless --code-coverage
+        ng test --watch false --browsers ChromeHeadless --code-coverage
         ng build --configuration production --aot
       env:
         CI: true

angular.json

@@ -124,6 +124,7 @@
   "cli": {
     "schematicCollections": [
       "@angular-eslint/schematics"
-    ]
+    ],
+    "analytics": false
   }
 }

karma.conf.js

@@ -1,8 +1,6 @@
 // Karma configuration file, see link for more information
 // https://karma-runner.github.io/1.0/config/configuration-file.html
 
-process.env.CHROME_BIN = require('puppeteer').executablePath();
-
 module.exports = function (config) {
   config.set({
     basePath: '',
@@ -17,27 +15,39 @@ module.exports = function (config) {
       require('@angular-devkit/build-angular/plugins/karma'),
     ],
     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`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
     },
     coverageIstanbulReporter: {
       dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
       fixWebpackSourcePaths: true,
     },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
     angularCli: {
       environment: 'dev',
     },
+    coverageReporter: {
+      dir: require('path').join(__dirname, './coverage/angular-cv'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
     reporters: ['coverage-istanbul', 'progress', 'kjhtml', 'spec'],
     port: 9876,
     colors: true,
     logLevel: config.LOG_INFO,
     autoWatch: true,
-    browsers: ['Chrome_no_sandbox'],
-    customLaunchers: {
-      Chrome_no_sandbox: {
-        base: 'ChromeHeadless',
-        flags: ['--no-sandbox'],
-      },
-    },
+    browsers: ['Chrome'],
+    restartOnFileChange: true,
     singleRun: false,
   });
 };

src/app/header/header.component.html

@@ -19,7 +19,7 @@
   </a>
 </mat-toolbar>
 
-<nav mat-tab-nav-bar *ngIf="windowWidth >= 800">
+<nav mat-tab-nav-bar [tabPanel]="tabPanel" *ngIf="windowWidth >= 800">
   <a mat-tab-link
      *ngFor="let link of navLinks"
      routerLink="{{link.location}}"
@@ -28,3 +28,4 @@
     <span>{{link.label | uppercase}}</span>
   </a>
 </nav>
+<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>

src/app/picture-modal/picture-modal.component.spec.ts

@@ -1,4 +1,5 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';
 
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { MaterialModule } from '../material/material.module';
@@ -16,6 +17,13 @@ describe('PictureModalComponent', () => {
       providers: [ { provide: MatDialogRef, useValue: {} }, { provide: MAT_DIALOG_DATA, useValue: {} }, ],
     });
 
+    TestBed.overrideModule(BrowserDynamicTestingModule, {
+      set: {
+        // @ts-ignore
+        entryComponents: [ PictureModalComponent ],
+      }
+    });
+
     TestBed.compileComponents();
   }));
 

src/test.ts

@@ -8,23 +8,10 @@ import {
   platformBrowserDynamicTesting,
 } from '@angular/platform-browser-dynamic/testing';
 
-// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
-declare const __karma__: any;
-declare const require: any;
-
-// Prevent Karma from running prematurely.
-__karma__.loaded = function () {};
-
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
   BrowserDynamicTestingModule,
   platformBrowserDynamicTesting(), {
     teardown: { destroyAfterEach: false }
-},
+  },
 );
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);
-// Finally, start Karma to run the tests.
-__karma__.start();