frontend: Configure custom Webpack for Karma testing and update component imports in tests

frontend/angular.json

@@ -167,10 +167,14 @@
 					"defaultConfiguration": "production"
 				},
 				"test": {
-					"builder": "@angular-devkit/build-angular:karma",
+					"builder": "@angular-builders/custom-webpack:karma",
 					"options": {
 						"tsConfig": "projects/shared-meet-components/tsconfig.spec.json",
-						"polyfills": ["zone.js", "zone.js/testing"]
+						"polyfills": ["zone.js", "zone.js/testing"],
+						"karmaConfig": "./karma.conf.js",
+						"customWebpackConfig": {
+							"path": "projects/shared-meet-components/src/tests/webpack.config.js"
+						}
 					}
 				}
 			}

frontend/karma.conf.js

@@ -0,0 +1,32 @@
+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')
+		],
+		client: {
+			clearContext: false // Leave Jasmine Spec Runner output visible in browser
+		},
+		jasmineHtmlReporter: {
+			suppressAll: true // Removes the duplicated traces
+		},
+		coverageReporter: {
+			dir: require('path').join(__dirname, './coverage'),
+			subdir: '.',
+			reporters: [{ type: 'html' }, { type: 'text-summary' }]
+		},
+		reporters: ['progress', 'kjhtml'],
+		port: 9876,
+		colors: true,
+		logLevel: config.LOG_INFO,
+		autoWatch: true,
+		browsers: ['Chrome'],
+		singleRun: false,
+		restartOnFileChange: true,
+	});
+};

frontend/package.json

@@ -45,6 +45,7 @@
 		"zone.js": "0.14.10"
 	},
 	"devDependencies": {
+		"@angular-builders/custom-webpack": "^18.0.0",
 		"@angular-devkit/build-angular": "18.2.6",
 		"@angular-eslint/builder": "18.3.1",
 		"@angular-eslint/eslint-plugin": "18.3.1",
@@ -55,6 +56,7 @@
 		"@angular/compiler-cli": "18.2.5",
 		"@types/chai": "4.3.19",
 		"@types/fluent-ffmpeg": "2.1.27",
+		"@types/jasmine": "^5.1.7",
 		"@types/mocha": "9.1.1",
 		"@types/node": "20.12.14",
 		"@types/pixelmatch": "^5.2.6",
@@ -68,6 +70,13 @@
 		"eslint": "8.57.1",
 		"eslint-config-prettier": "9.1.0",
 		"fluent-ffmpeg": "2.1.3",
+		"jasmine-core": "^5.6.0",
+		"jasmine-spec-reporter": "^7.0.0",
+		"karma": "^6.4.4",
+		"karma-chrome-launcher": "^3.2.0",
+		"karma-coverage": "^2.2.1",
+		"karma-jasmine": "^5.1.0",
+		"karma-jasmine-html-reporter": "^2.1.0",
 		"mocha": "10.7.3",
 		"ng-packagr": "18.2.1",
 		"pixelmatch": "5.3.0",

frontend/projects/shared-meet-components/src/lib/pages/console/login/login.component.spec.ts

@@ -1,23 +1,22 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { LoginComponent } from './login.component';
+import { ConsoleLoginComponent } from './login.component';
 
-describe('LoginComponent', () => {
+describe('ConsoleLoginComponent', () => {
-  let component: LoginComponent;
+	let component: ConsoleLoginComponent;
-  let fixture: ComponentFixture<LoginComponent>;
+	let fixture: ComponentFixture<ConsoleLoginComponent>;
 
-  beforeEach(async () => {
+	beforeEach(async () => {
-    await TestBed.configureTestingModule({
+		await TestBed.configureTestingModule({
-      imports: [LoginComponent]
+			imports: [ConsoleLoginComponent]
-    })
+		}).compileComponents();
-    .compileComponents();
 
-    fixture = TestBed.createComponent(LoginComponent);
+		fixture = TestBed.createComponent(ConsoleLoginComponent);
-    component = fixture.componentInstance;
+		component = fixture.componentInstance;
-    fixture.detectChanges();
+		fixture.detectChanges();
-  });
+	});
 
-  it('should create', () => {
+	it('should create', () => {
-    expect(component).toBeTruthy();
+		expect(component).toBeTruthy();
-  });
+	});
 });

frontend/projects/shared-meet-components/src/lib/pages/console/rooms/rooms.component.spec.ts

@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { RoomPreferencesComponent } from './rooms.component';
+import { RoomsComponent } from './rooms.component';
 
 describe('RoomConfigComponent', () => {
-  let component: RoomPreferencesComponent;
+  let component: RoomsComponent;
-  let fixture: ComponentFixture<RoomPreferencesComponent>;
+  let fixture: ComponentFixture<RoomsComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [RoomPreferencesComponent]
+      imports: [RoomsComponent]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(RoomPreferencesComponent);
+    fixture = TestBed.createComponent(RoomsComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

frontend/projects/shared-meet-components/src/tests/webpack.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+	resolve: {
+	  extensions: ['.ts', '.js', '.json'],
+	  extensionAlias: {
+		".js": [".ts", ".js"],
+		".cjs": [".cts", ".cjs"],
+		".mjs": [".mts", ".mjs"]
+	  }
+	}
+  };

frontend/projects/shared-meet-components/tsconfig.spec.json

@@ -1,15 +1,10 @@
 /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
 /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
 {
-  "extends": "../../tsconfig.json",
+	"extends": "../../tsconfig.json",
-  "compilerOptions": {
+	"compilerOptions": {
-    "outDir": "../../out-tsc/spec",
+		"outDir": "../../out-tsc/spec",
-    "types": [
+		"types": ["jasmine"]
-      "jasmine"
+	},
-    ]
+	"include": ["**/*.spec.ts", "**/*.d.ts"]
-  },
-  "include": [
-    "**/*.spec.ts",
-    "**/*.d.ts"
-  ]
 }