fix: update test dialog mocking patterns for Vitest compatibility

- Add Angulartics2Module.forRoot() to ForeignKeyFilterComponent tests
- Fix router mock in DbConnectionDeleteDialogComponent tests (add events Subject)
- Replace vi.spyOn(dialog, 'open') with provider-level MatDialog mocks
- Create mocks before TestBed.configureTestingModule for proper injection

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: gugu

docs/specs/frontend-secret-management.md

@@ -22,7 +22,7 @@ import { DbConnectionDeleteDialogComponent } from './db-connection-delete-dialog
 describe('ConnectDBComponent', () => {
 	let component: ConnectDBComponent;
 	let fixture: ComponentFixture<ConnectDBComponent>;
-	let dialog: MatDialog;
+	let mockMatDialog: { open: ReturnType<typeof vi.fn> };
 
 	const fakeNotifications = {
 		showErrorSnackbar: vi.fn(),
@@ -63,6 +63,8 @@ describe('ConnectDBComponent', () => {
 	};
 
 	beforeEach(async () => {
+		mockMatDialog = { open: vi.fn() };
+
 		await TestBed.configureTestingModule({
 			imports: [
 				MatSnackBarModule,
@@ -85,14 +87,14 @@ describe('ConnectDBComponent', () => {
 				},
 				{ provide: NotificationsService, useValue: fakeNotifications },
 				{ provide: ConnectionsService, useValue: fakeConnectionsService },
+				{ provide: MatDialog, useValue: mockMatDialog },
 			],
 		}).compileComponents();
 	});
 
 	beforeEach(() => {
 		fixture = TestBed.createComponent(ConnectDBComponent);
 		component = fixture.componentInstance;
-		dialog = TestBed.inject(MatDialog);
 
 		// @ts-expect-error
 		global.window.fbq = vi.fn();
@@ -161,11 +163,10 @@ describe('ConnectDBComponent', () => {
 	});
 
 	it('should open delete connection dialog', () => {
-		const fakeDialogOpen = vi.spyOn(dialog, 'open');
 		const event = { preventDefault: vi.fn(), stopImmediatePropagation: vi.fn() } as unknown as Event;
 
 		component.confirmDeleteConnection(connectionCredsApp, event);
-		expect(fakeDialogOpen).toHaveBeenCalledWith(DbConnectionDeleteDialogComponent, {
+		expect(mockMatDialog.open).toHaveBeenCalledWith(DbConnectionDeleteDialogComponent, {
 			width: '32em',
 			data: connectionCredsApp,
 		});
@@ -239,12 +240,11 @@ describe('ConnectDBComponent', () => {
 	});
 
 	it('should open dialog on test error', () => {
-		const fakeDialogOpen = vi.spyOn(dialog, 'open');
 		vi.spyOn(component, 'db', 'get').mockReturnValue(connectionCredsApp);
 		component.masterKey = 'master_password_12345678';
 		component.handleConnectionError('Hostname is invalid');
 
-		expect(fakeDialogOpen).toHaveBeenCalledWith(DbConnectionConfirmDialogComponent, {
+		expect(mockMatDialog.open).toHaveBeenCalledWith(DbConnectionConfirmDialogComponent, {
 			width: '25em',
 			data: {
 				dbCreds: connectionCredsApp,

frontend/src/app/components/connect-db/connect-db.component.spec.ts

@@ -6,7 +6,7 @@ import { MatRadioModule } from '@angular/material/radio';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { provideRouter, Router } from '@angular/router';
 import { Angulartics2, Angulartics2Module } from 'angulartics2';
-import { of } from 'rxjs';
+import { of, Subject } from 'rxjs';
 import { ConnectionsService } from 'src/app/services/connections.service';
 import { DbConnectionDeleteDialogComponent } from './db-connection-delete-dialog.component';
 
@@ -21,7 +21,7 @@ describe('DbConnectionDeleteDialogComponent', () => {
 	};
 
 	beforeEach(async (): Promise<void> => {
-		routerSpy = { navigate: vi.fn() };
+		routerSpy = { navigate: vi.fn(), events: new Subject() };
 
 		await TestBed.configureTestingModule({
 			imports: [

frontend/src/app/components/connect-db/db-connection-delete-dialog/db-connection-delete-dialog.component.spec.ts

@@ -19,13 +19,14 @@ describe('DbTableActionsComponent', () => {
 	let component: DbTableActionsComponent;
 	let fixture: ComponentFixture<DbTableActionsComponent>;
 	let tablesService: TablesService;
-	let dialog: MatDialog;
+	let mockMatDialog: { open: ReturnType<typeof vi.fn> };
 	let fakeNotifications;
 
 	beforeEach(async () => {
 		fakeNotifications = {
 			showSuccessSnackbar: vi.fn(),
 		};
+		mockMatDialog = { open: vi.fn() };
 
 		await TestBed.configureTestingModule({
 			imports: [
@@ -42,6 +43,7 @@ describe('DbTableActionsComponent', () => {
 					provide: NotificationsService,
 					useValue: fakeNotifications,
 				},
+				{ provide: MatDialog, useValue: mockMatDialog },
 			],
 		})
 			.overrideComponent(DbTableActionsComponent, {
@@ -52,7 +54,6 @@ describe('DbTableActionsComponent', () => {
 
 		fixture = TestBed.createComponent(DbTableActionsComponent);
 		tablesService = TestBed.inject(TablesService);
-		dialog = TestBed.inject(MatDialog);
 		component = fixture.componentInstance;
 		fixture.detectChanges();
 	});
@@ -374,8 +375,6 @@ describe('DbTableActionsComponent', () => {
 	});
 
 	it('should open dialog for delete action confirmation', () => {
-		const fakeConfirmationDialog = vi.spyOn(dialog, 'open');
-
 		const mockRule = {
 			id: '',
 			title: 'rule 2',
@@ -389,7 +388,7 @@ describe('DbTableActionsComponent', () => {
 
 		component.openDeleteRuleDialog();
 
-		expect(fakeConfirmationDialog).toHaveBeenCalledWith(ActionDeleteDialogComponent, {
+		expect(mockMatDialog.open).toHaveBeenCalledWith(ActionDeleteDialogComponent, {
 			width: '25em',
 			data: {
 				connectionID: '12345678',

frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.spec.ts

@@ -23,7 +23,7 @@ describe('DbTableWidgetsComponent', () => {
 	let fixture: ComponentFixture<DbTableWidgetsComponent>;
 	let tablesService: TablesService;
 	let connectionsService: ConnectionsService;
-	let dialog: MatDialog;
+	let mockMatDialog: { open: ReturnType<typeof vi.fn> };
 	const dialogRefSpyObj = {
 		afterClosed: vi.fn().mockReturnValue(of('delete')),
 		close: vi.fn(),
@@ -104,7 +104,11 @@ describe('DbTableWidgetsComponent', () => {
 				Angulartics2Module.forRoot(),
 				DbTableWidgetsComponent,
 			],
-			providers: [provideHttpClient(), { provide: MatDialogRef, useValue: {} }],
+			providers: [
+				provideHttpClient(),
+				{ provide: MatDialogRef, useValue: {} },
+				{ provide: MatDialog, useFactory: () => mockMatDialog },
+			],
 		})
 			.overrideComponent(WidgetComponent, {
 				remove: { imports: [CodeEditorModule] },
@@ -122,11 +126,11 @@ describe('DbTableWidgetsComponent', () => {
 	});
 
 	beforeEach(() => {
+		mockMatDialog = { open: vi.fn() };
 		fixture = TestBed.createComponent(DbTableWidgetsComponent);
 		component = fixture.componentInstance;
 		tablesService = TestBed.inject(TablesService);
 		connectionsService = TestBed.inject(ConnectionsService);
-		dialog = TestBed.inject(MatDialog);
 		fixture.detectChanges();
 	});
 
@@ -206,10 +210,10 @@ describe('DbTableWidgetsComponent', () => {
 			},
 		];
 
-		const fakeDialog = vi.spyOn(dialog, 'open').mockReturnValue(dialogRefSpyObj as any);
+		mockMatDialog.open.mockReturnValue(dialogRefSpyObj as any);
 		component.openDeleteWidgetDialog('user_name');
 
-		expect(fakeDialog).toHaveBeenCalledWith(WidgetDeleteDialogComponent, {
+		expect(mockMatDialog.open).toHaveBeenCalledWith(WidgetDeleteDialogComponent, {
 			width: '25em',
 			data: 'user_name',
 		});

frontend/src/app/components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component.spec.ts

@@ -5,6 +5,7 @@ import { MatDialogModule } from '@angular/material/dialog';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { provideRouter } from '@angular/router';
+import { Angulartics2Module } from 'angulartics2';
 import { of } from 'rxjs';
 import { TablesService } from 'src/app/services/tables.service';
 import { ForeignKeyFilterComponent } from './foreign-key.component';
@@ -126,6 +127,7 @@ describe('ForeignKeyFilterComponent', () => {
 				MatDialogModule,
 				ForeignKeyFilterComponent,
 				BrowserAnimationsModule,
+				Angulartics2Module.forRoot(),
 			],
 			providers: [provideHttpClient(), provideRouter([])],
 		}).compileComponents();

frontend/src/app/components/ui-components/filter-fields/foreign-key/foreign-key.component.spec.ts

@@ -12,13 +12,15 @@ import { AccountDeleteDialogComponent } from './account-delete-dialog.component'
 describe('AccountDeleteDialogComponent', () => {
 	let component: AccountDeleteDialogComponent;
 	let fixture: ComponentFixture<AccountDeleteDialogComponent>;
-	let dialog: MatDialog;
+	let mockMatDialog: { open: ReturnType<typeof vi.fn> };
 
 	const mockDialogRef = {
 		close: () => {},
 	};
 
 	beforeEach(async () => {
+		mockMatDialog = { open: vi.fn() };
+
 		await TestBed.configureTestingModule({
 			imports: [
 				MatDialogModule,
@@ -33,13 +35,13 @@ describe('AccountDeleteDialogComponent', () => {
 				provideHttpClient(),
 				{ provide: MAT_DIALOG_DATA, useValue: {} },
 				{ provide: MatDialogRef, useValue: mockDialogRef },
+				{ provide: MatDialog, useValue: mockMatDialog },
 			],
 		}).compileComponents();
 	});
 
 	beforeEach(() => {
 		fixture = TestBed.createComponent(AccountDeleteDialogComponent);
-		dialog = TestBed.inject(MatDialog);
 		component = fixture.componentInstance;
 		fixture.detectChanges();
 	});
@@ -52,10 +54,9 @@ describe('AccountDeleteDialogComponent', () => {
 		component.reason = 'technical-issues';
 		component.message = 'I cannot add connection';
 
-		const fakeDeleteUserDialogOpen = vi.spyOn(dialog, 'open');
 		component.openDeleteConfirmation();
 
-		expect(fakeDeleteUserDialogOpen).toHaveBeenCalledWith(AccountDeleteConfirmationComponent, {
+		expect(mockMatDialog.open).toHaveBeenCalledWith(AccountDeleteConfirmationComponent, {
 			width: '20em',
 			data: {
 				reason: 'technical-issues',

frontend/src/app/components/user-settings/account-delete-dialog/account-delete-dialog.component.spec.ts

@@ -20,9 +20,11 @@ describe('UserSettingsComponent', () => {
 	let component: UserSettingsComponent;
 	let fixture: ComponentFixture<UserSettingsComponent>;
 	let userService: UserService;
-	let dialog: MatDialog;
+	let mockMatDialog: { open: ReturnType<typeof vi.fn> };
 
 	beforeEach(async () => {
+		mockMatDialog = { open: vi.fn() };
+
 		await TestBed.configureTestingModule({
 			imports: [
 				RouterTestingModule,
@@ -42,6 +44,7 @@ describe('UserSettingsComponent', () => {
 					useExisting: forwardRef(() => UserSettingsComponent),
 					multi: true,
 				},
+				{ provide: MatDialog, useValue: mockMatDialog },
 			],
 		}).compileComponents();
 	});
@@ -50,7 +53,6 @@ describe('UserSettingsComponent', () => {
 		fixture = TestBed.createComponent(UserSettingsComponent);
 		component = fixture.componentInstance;
 		userService = TestBed.inject(UserService);
-		dialog = TestBed.inject(MatDialog);
 		fixture.detectChanges();
 	});
 
@@ -68,7 +70,6 @@ describe('UserSettingsComponent', () => {
 	});
 
 	it('should open delete account dialog', () => {
-		const fakeDeleteAccountOpen = vi.spyOn(dialog, 'open');
 		component.currentUser = {
 			id: 'user-12345678',
 			createdAt: '2021-10-01T13:43:02.034Z',
@@ -85,7 +86,7 @@ describe('UserSettingsComponent', () => {
 		};
 
 		component.confirmDeleteAccount();
-		expect(fakeDeleteAccountOpen).toHaveBeenCalledWith(AccountDeleteDialogComponent, {
+		expect(mockMatDialog.open).toHaveBeenCalledWith(AccountDeleteDialogComponent, {
 			width: '32em',
 			data: {
 				id: 'user-12345678',

frontend/src/app/components/user-settings/user-settings.component.spec.ts

@@ -0,0 +1,33 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+/**
+ * Mock component for ngs-code-editor from @ngstack/code-editor.
+ *
+ * Usage in tests:
+ * ```typescript
+ * import { MockCodeEditorComponent } from 'src/app/testing/code-editor.mock';
+ * import { CodeEditorModule } from '@ngstack/code-editor';
+ * import { NO_ERRORS_SCHEMA } from '@angular/core';
+ *
+ * await TestBed.configureTestingModule({
+ *   imports: [YourComponent, BrowserAnimationsModule],
+ * })
+ * .overrideComponent(YourComponent, {
+ *   remove: { imports: [CodeEditorModule] },
+ *   add: { imports: [MockCodeEditorComponent], schemas: [NO_ERRORS_SCHEMA] }
+ * })
+ * .compileComponents();
+ * ```
+ */
+@Component({
+	selector: 'ngs-code-editor',
+	template: '<div class="mock-code-editor"></div>',
+	standalone: true,
+})
+export class MockCodeEditorComponent {
+	@Input() theme: string = 'vs';
+	@Input() codeModel: any;
+	@Input() options: any;
+	@Input() readOnly: boolean = false;
+	@Output() valueChanged = new EventEmitter<string>();
+}

frontend/src/app/testing/code-editor.mock.ts

@@ -0,0 +1,16 @@
+/// <reference types="vitest/globals" />
+import 'zone.js';
+import 'zone.js/testing';
+import { TestBed } from '@angular/core/testing';
+import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
+import { vi } from 'vitest';
+
+// Initialize Angular testing environment
+try {
+	TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+} catch (e) {
+	// TestBed already initialized
+}
+
+// Expose vi globally for tests that need it
+(globalThis as any).vi = vi;