test(developer-apps): added unit tests for developer apps components

Author: dinlvkdn

jest.config.js

@@ -53,7 +53,6 @@ module.exports = {
     '<rootDir>/src/app/features/project/',
     '<rootDir>/src/app/features/registries/',
     '<rootDir>/src/app/features/settings/addons/',
-    '<rootDir>/src/app/features/settings/developer-apps/',
     '<rootDir>/src/app/features/settings/notifications/',
     '<rootDir>/src/app/features/settings/settings-container.component.ts',
     '<rootDir>/src/app/features/settings/tokens/components/',

src/app/features/settings/developer-apps/components/developer-app-add-edit-form/developer-app-add-edit-form.component.spec.ts

@@ -1,14 +1,17 @@
 import { provideStore } from '@ngxs/store';
 
-import { TranslatePipe, TranslateService } from '@ngx-translate/core';
-import { MockPipe, MockProvider } from 'ng-mocks';
+import { TranslatePipe } from '@ngx-translate/core';
+import { MockPipe, MockProviders } from 'ng-mocks';
 
 import { DynamicDialogRef } from 'primeng/dynamicdialog';
 
 import { provideHttpClient } from '@angular/common/http';
 import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
+import { TranslateServiceMock } from '@shared/mocks';
+import { ToastService } from '@shared/services';
+
 import { DeveloperAppsState } from '../../store';
 
 import { DeveloperAppAddEditFormComponent } from './developer-app-add-edit-form.component';
@@ -24,17 +27,33 @@ describe('CreateDeveloperAppComponent', () => {
         provideHttpClient(),
         provideHttpClientTesting(),
         provideStore([DeveloperAppsState]),
-        MockProvider(TranslateService),
-        MockProvider(DynamicDialogRef),
+        TranslateServiceMock,
+        MockProviders(DynamicDialogRef, ToastService),
       ],
     }).compileComponents();
 
     fixture = TestBed.createComponent(DeveloperAppAddEditFormComponent);
     component = fixture.componentInstance;
+
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should mark form as touched and dirty when invalid', () => {
+    const form = component['appForm'];
+    form.patchValue({
+      name: '',
+    });
+
+    const markAllAsTouchedSpy = jest.spyOn(form, 'markAllAsTouched');
+    const markAsDirtySpy = jest.spyOn(form.controls['name'], 'markAsDirty');
+
+    component.handleSubmitForm();
+
+    expect(markAllAsTouchedSpy).toHaveBeenCalled();
+    expect(markAsDirtySpy).toHaveBeenCalled();
+  });
 });

src/app/features/settings/developer-apps/developer-apps-container.component.spec.ts

@@ -1,26 +1,88 @@
 import { TranslatePipe, TranslateService } from '@ngx-translate/core';
 import { MockPipe, MockProvider } from 'ng-mocks';
 
+import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
+
+import { BehaviorSubject, Subject } from 'rxjs';
+
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
+import { DeveloperAppAddEditFormComponent } from '@osf/features/settings/developer-apps/components';
+import { TranslateServiceMock } from '@shared/mocks';
+import { ToastService } from '@shared/services';
+import { IS_MEDIUM } from '@shared/utils';
+
 import { DeveloperAppsContainerComponent } from './developer-apps-container.component';
 
-describe('DeveloperAppsComponent', () => {
+describe('DeveloperAppsContainerComponent', () => {
   let component: DeveloperAppsContainerComponent;
   let fixture: ComponentFixture<DeveloperAppsContainerComponent>;
+  let isMedium: BehaviorSubject<boolean>;
+  let translateService: TranslateService;
+  let dialogRefMock: Partial<DynamicDialogRef>;
+  let dialogService: DialogService;
+  let openSpy: jest.SpyInstance;
+  let translateSpy: jest.SpyInstance;
 
   beforeEach(async () => {
+    isMedium = new BehaviorSubject<boolean>(false);
+    dialogRefMock = { onClose: new Subject<void>() };
+
     await TestBed.configureTestingModule({
       imports: [DeveloperAppsContainerComponent, MockPipe(TranslatePipe)],
-      providers: [MockProvider(TranslateService)],
+      providers: [
+        MockProvider(DialogService),
+        MockProvider(IS_MEDIUM, isMedium),
+        MockProvider(ToastService),
+        TranslateServiceMock,
+      ],
     }).compileComponents();
 
     fixture = TestBed.createComponent(DeveloperAppsContainerComponent);
     component = fixture.componentInstance;
+
+    translateService = TestBed.inject(TranslateService);
+    dialogService = fixture.debugElement.injector.get(DialogService);
+
+    openSpy = jest.spyOn(dialogService, 'open').mockReturnValue(dialogRefMock as DynamicDialogRef);
+    translateSpy = jest.spyOn(translateService, 'instant').mockReturnValue('Create Developer App');
+
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should open dialog with 340px width when isMedium returns false', () => {
+    (component as any).isMedium = jest.fn().mockReturnValue(false);
+
+    component.createDeveloperApp();
+
+    expect(openSpy).toHaveBeenCalledWith(DeveloperAppAddEditFormComponent, {
+      width: '340px',
+      focusOnShow: false,
+      header: 'Create Developer App',
+      closeOnEscape: true,
+      modal: true,
+      closable: true,
+    });
+    expect(translateSpy).toHaveBeenCalledWith('settings.developerApps.form.createTitle');
+  });
+
+  it('should open dialog with 500px width when isMedium returns true', () => {
+    (component as any).isMedium = jest.fn().mockReturnValue(true);
+
+    component.createDeveloperApp();
+
+    expect(openSpy).toHaveBeenCalledWith(DeveloperAppAddEditFormComponent, {
+      width: '500px',
+      focusOnShow: false,
+      header: 'Create Developer App',
+      closeOnEscape: true,
+      modal: true,
+      closable: true,
+    });
+    expect(translateSpy).toHaveBeenCalledWith('settings.developerApps.form.createTitle');
+  });
 });

src/app/features/settings/developer-apps/pages/developer-app-details/developer-app-details.component.spec.ts

@@ -10,7 +10,10 @@ import { of } from 'rxjs';
 import { provideHttpClient } from '@angular/common/http';
 import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
+
+import { CustomConfirmationService } from '@osf/shared/services';
+import { IS_XSMALL } from '@osf/shared/utils';
 
 import { DeveloperAppsState } from '../../store';
 
@@ -19,6 +22,13 @@ import { DeveloperAppDetailsComponent } from './developer-app-details.component'
 describe('DeveloperAppDetailsComponent', () => {
   let component: DeveloperAppDetailsComponent;
   let fixture: ComponentFixture<DeveloperAppDetailsComponent>;
+  let router: Router;
+  let customConfirmationService: CustomConfirmationService;
+
+  const mockRouter = {
+    url: '/test/path',
+    events: of(new NavigationEnd(1, '/test/path', '/test/path')),
+  };
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
@@ -29,16 +39,57 @@ describe('DeveloperAppDetailsComponent', () => {
         provideHttpClientTesting(),
         provideStore([DeveloperAppsState]),
         MockProvider(TranslateService),
-        MockProvider(ActivatedRoute, { params: of({}) }),
+        MockProvider(ActivatedRoute, { params: of({ id: 'test-client-id' }) }),
+        MockProvider(Router, mockRouter),
+        MockProvider(CustomConfirmationService),
+        MockProvider(IS_XSMALL, of(false)),
       ],
     }).compileComponents();
 
     fixture = TestBed.createComponent(DeveloperAppDetailsComponent);
     component = fixture.componentInstance;
+
+    customConfirmationService = TestBed.inject(CustomConfirmationService);
+    router = TestBed.inject(Router);
+
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should not dispatch delete when user cancels confirmation', () => {
+    const navigateSpy = jest.spyOn(router, 'navigate');
+
+    jest.spyOn(customConfirmationService, 'confirmDelete').mockImplementation(() => {
+      // Simulate cancelling the confirmation
+    });
+
+    component.deleteApp();
+
+    expect(customConfirmationService.confirmDelete).toHaveBeenCalledWith({
+      headerKey: 'settings.developerApps.confirmation.delete.title',
+      headerParams: { name: undefined },
+      messageKey: 'settings.developerApps.confirmation.delete.message',
+      onConfirm: expect.any(Function),
+    });
+    expect(navigateSpy).not.toHaveBeenCalled();
+  });
+
+  it('should not dispatch resetClientSecret when user cancels confirmation', () => {
+    jest.spyOn(customConfirmationService, 'confirmDelete').mockImplementation(() => {
+      // Simulate cancelling the confirmation
+    });
+
+    component.resetClientSecret();
+
+    expect(customConfirmationService.confirmDelete).toHaveBeenCalledWith({
+      headerKey: 'settings.developerApps.confirmation.resetSecret.title',
+      headerParams: { name: undefined },
+      messageKey: 'settings.developerApps.confirmation.resetSecret.message',
+      acceptLabelKey: 'settings.developerApps.details.clientSecret.reset',
+      onConfirm: expect.any(Function),
+    });
+  });
 });

src/app/features/settings/developer-apps/pages/developer-apps-list/developer-apps-list.component.spec.ts

@@ -9,13 +9,17 @@ import { provideHttpClient } from '@angular/common/http';
 import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
+import { CustomConfirmationService } from '@osf/shared/services';
+import { MOCK_DEVELOPER_APP } from '@shared/mocks/developer-app.mock';
+
 import { DeveloperAppsState } from '../../store';
 
 import { DeveloperAppsListComponent } from './developer-apps-list.component';
 
 describe('DeveloperApplicationsListComponent', () => {
   let component: DeveloperAppsListComponent;
   let fixture: ComponentFixture<DeveloperAppsListComponent>;
+  let customConfirmationService: CustomConfirmationService;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
@@ -26,15 +30,32 @@ describe('DeveloperApplicationsListComponent', () => {
         provideHttpClientTesting(),
         MockProvider(ConfirmationService),
         MockProvider(TranslateService),
+        MockProvider(CustomConfirmationService),
       ],
     }).compileComponents();
 
     fixture = TestBed.createComponent(DeveloperAppsListComponent);
     component = fixture.componentInstance;
+    customConfirmationService = TestBed.inject(CustomConfirmationService);
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should not dispatch delete when user cancels confirmation', () => {
+    jest.spyOn(customConfirmationService, 'confirmDelete').mockImplementation(() => {
+      // Simulate cancelling the confirmation
+    });
+
+    component.deleteApp(MOCK_DEVELOPER_APP);
+
+    expect(customConfirmationService.confirmDelete).toHaveBeenCalledWith({
+      headerKey: 'settings.developerApps.confirmation.delete.title',
+      headerParams: { name: 'Test App' },
+      messageKey: 'settings.developerApps.confirmation.delete.message',
+      onConfirm: expect.any(Function),
+    });
+  });
 });

src/app/shared/mocks/developer-app.mock.ts

@@ -0,0 +1,11 @@
+import { DeveloperApp } from '@osf/features/settings/developer-apps/models';
+
+export const MOCK_DEVELOPER_APP: DeveloperApp = {
+  id: 'test-id',
+  name: 'Test App',
+  description: 'This is a test application',
+  projHomePageUrl: 'https://example.com',
+  authorizationCallbackUrl: 'https://example.com/callback',
+  clientId: 'test-client-id',
+  clientSecret: 'test-secret',
+};