test: firefox headless

Author: KillerCodeMonkey

package-lock.json

@@ -29,6 +29,7 @@
     "@angular/platform-browser": "^20.0.0",
     "@angular/platform-browser-dynamic": "^20.0.0",
     "@angular/router": "^20.0.0",
+    "karma-firefox-launcher": "^2.1.3",
     "rxjs": "^7.8.1",
     "three": "^0.170.0",
     "tslib": "^2.7.0",

package.json

@@ -11,7 +11,8 @@ module.exports = function (config) {
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
       require('karma-coverage'),
-      require('@angular-devkit/build-angular/plugins/karma')
+      require('@angular-devkit/build-angular/plugins/karma'),
+      require('karma-firefox-launcher')
     ],
     client: {
       clearContext: false // leave Jasmine Spec Runner output visible in browser
@@ -40,7 +41,24 @@ module.exports = function (config) {
     colors: true,
     logLevel: config.LOG_INFO,
     autoWatch: true,
-    browsers: ['ChromeHeadless'],
+    browsers: ['FirefoxHeadless'],
+    customLaunchers: {
+      ChromeHeadlessNoSandbox: {
+        base: 'ChromeHeadless',
+        flags: [
+          '--no-sandbox'
+        ]
+      },
+      FirefoxHeadless: {
+        base: 'Firefox',
+        flags: [
+          '-headless'
+        ],
+        prefs: {
+          'network.proxy.type': 0
+        }
+      }
+    },
     singleRun: false,
     restartOnFileChange: true
   })

projects/angular-stl-model-viewer/karma.conf.js

@@ -5,7 +5,6 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'
 import * as THREE from 'three'
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
 
-import { BrowserModule } from '@angular/platform-browser'
 import { StlModelViewerComponent } from './angular-stl-model-viewer.component'
 import { StlModelViewerModule } from './angular-stl-model-viewer.module'
 
@@ -36,7 +35,7 @@ describe('StlModelViewerComponent', () => {
     TestBed.configureTestingModule({
       declarations: [],
       imports: [
-        BrowserModule
+        StlModelViewerComponent
       ],
       schemas: [CUSTOM_ELEMENTS_SCHEMA]
     }).compileComponents()

projects/angular-stl-model-viewer/src/lib/angular-stl-model-viewer.component.spec.ts

@@ -1,23 +1,14 @@
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 
-import 'zone.js'
-import 'zone.js/testing'
 import { getTestBed } from '@angular/core/testing'
 import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting
-} from '@angular/platform-browser-dynamic/testing'
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-declare const require: {
-  context(path: string, deep?: boolean, filter?: RegExp): {
-    <T>(id: string): T
-    keys(): string[]
-  }
-}
+  BrowserTestingModule,
+  platformBrowserTesting
+} from '@angular/platform-browser/testing'
+import 'zone.js'
+import 'zone.js/testing'
 
-// First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting()
+  BrowserTestingModule,
+  platformBrowserTesting()
 )

projects/angular-stl-model-viewer/src/test.ts

@@ -32,7 +32,15 @@ module.exports = function (config) {
     colors: true,
     logLevel: config.LOG_INFO,
     autoWatch: true,
-    browsers: ['ChromeHeadless'],
+    browsers: ['ChromeHeadlessNoSandbox'],
+    customLaunchers: {
+      ChromeHeadlessNoSandbox: {
+        base: 'ChromeHeadless',
+        flags: [
+          '--no-sandbox'
+        ]
+      }
+    },
     singleRun: false,
     restartOnFileChange: true
   })

projects/examples/karma.conf.js

@@ -1,16 +1,11 @@
 import { TestBed, waitForAsync } from '@angular/core/testing'
 import { AppComponent } from './app.component'
 
-import { StlModelViewerModule } from '../../../angular-stl-model-viewer/src/public-api'
-import { BrowserModule } from '@angular/platform-browser'
-
 describe('AppComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [
-        AppComponent
-      ],
-      imports: [BrowserModule, StlModelViewerModule]
+
+      imports: [AppComponent]
     }).compileComponents()
   }))
 

projects/examples/src/app/app.component.spec.ts

@@ -2,22 +2,14 @@
 
 import 'zone.js'
 import 'zone.js/testing'
+
 import { getTestBed } from '@angular/core/testing'
 import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting
-} from '@angular/platform-browser-dynamic/testing'
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-declare const require: {
-  context(path: string, deep?: boolean, filter?: RegExp): {
-    <T>(id: string): T
-    keys(): string[]
-  }
-}
+  BrowserTestingModule,
+  platformBrowserTesting
+} from '@angular/platform-browser/testing'
 
-// First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting()
+  BrowserTestingModule,
+  platformBrowserTesting()
 )