test(tokens): added new unit tests

Author: dinlvkdn

jest.config.js

@@ -89,10 +89,8 @@ module.exports = {
     '<rootDir>/src/app/features/project/project.component.ts',
     '<rootDir>/src/app/features/registries/',
     '<rootDir>/src/app/features/settings/addons/',
-    '<rootDir>/src/app/features/settings/settings-container.component.ts',
     '<rootDir>/src/app/features/settings/tokens/mappers/',
     '<rootDir>/src/app/features/settings/tokens/store/',
-    '<rootDir>/src/app/features/settings/tokens/pages/tokens-list/',
     '<rootDir>/src/app/shared/components/file-menu/',
     '<rootDir>/src/app/shared/components/files-tree/',
     '<rootDir>/src/app/shared/components/line-chart/',

src/app/features/settings/tokens/components/token-add-edit-form/token-add-edit-form.component.spec.ts

@@ -1,7 +1,7 @@
 import { Store } from '@ngxs/store';
 
-import { TranslatePipe } from '@ngx-translate/core';
-import { MockPipe, MockProvider } from 'ng-mocks';
+import { TranslateService } from '@ngx-translate/core';
+import { MockProvider } from 'ng-mocks';
 
 import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
 
@@ -12,14 +12,17 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
 import { TokenCreatedDialogComponent } from '@osf/features/settings/tokens/components';
+import { InputLimits } from '@osf/shared/constants';
 import { MOCK_STORE, TranslateServiceMock } from '@shared/mocks';
 import { ToastService } from '@shared/services';
 
 import { TokenFormControls, TokenModel } from '../../models';
-import { TokensSelectors } from '../../store';
+import { CreateToken, TokensSelectors } from '../../store';
 
 import { TokenAddEditFormComponent } from './token-add-edit-form.component';
 
+import { OSFTestingStoreModule } from '@testing/osf.testing.module';
+
 describe('TokenAddEditFormComponent', () => {
   let component: TokenAddEditFormComponent;
   let fixture: ComponentFixture<TokenAddEditFormComponent>;
@@ -32,9 +35,7 @@ describe('TokenAddEditFormComponent', () => {
   const MOCK_TOKEN: TokenModel = {
     id: '1',
     name: 'Test Token',
-    tokenId: 'token1',
     scopes: ['read', 'write'],
-    ownerId: 'user1',
   };
 
   const MOCK_SCOPES = [
@@ -78,7 +79,7 @@ describe('TokenAddEditFormComponent', () => {
     };
 
     await TestBed.configureTestingModule({
-      imports: [TokenAddEditFormComponent, MockPipe(TranslatePipe), ReactiveFormsModule],
+      imports: [TokenAddEditFormComponent, ReactiveFormsModule, OSFTestingStoreModule],
       providers: [
         TranslateServiceMock,
         MockProvider(Store, MOCK_STORE),
@@ -107,6 +108,34 @@ describe('TokenAddEditFormComponent', () => {
     expect(component.tokenForm.get(TokenFormControls.Scopes)?.value).toEqual(MOCK_TOKEN.scopes);
   });
 
+  it('should call patchValue with initial values on ngOnInit', () => {
+    fixture.componentRef.setInput('initialValues', MOCK_TOKEN);
+    const patchSpy = jest.spyOn(component.tokenForm, 'patchValue');
+
+    component.ngOnInit();
+
+    expect(patchSpy).toHaveBeenCalledWith(
+      expect.objectContaining({
+        [TokenFormControls.TokenName]: MOCK_TOKEN.name,
+        [TokenFormControls.Scopes]: MOCK_TOKEN.scopes,
+      })
+    );
+  });
+
+  it('should not patch form when initialValues are not provided', () => {
+    fixture.componentRef.setInput('initialValues', null);
+
+    component.tokenForm.patchValue({
+      [TokenFormControls.TokenName]: 'Existing Name',
+      [TokenFormControls.Scopes]: ['read'],
+    });
+
+    component.ngOnInit();
+
+    expect(component.tokenForm.get(TokenFormControls.TokenName)?.value).toBe('Existing Name');
+    expect(component.tokenForm.get(TokenFormControls.Scopes)?.value).toEqual(['read']);
+  });
+
   it('should not submit when form is invalid', () => {
     component.tokenForm.patchValue({
       [TokenFormControls.TokenName]: '',
@@ -115,11 +144,13 @@ describe('TokenAddEditFormComponent', () => {
 
     const markAllAsTouchedSpy = jest.spyOn(component.tokenForm, 'markAllAsTouched');
     const markAsDirtySpy = jest.spyOn(component.tokenForm.get(TokenFormControls.TokenName)!, 'markAsDirty');
+    const markScopesAsDirtySpy = jest.spyOn(component.tokenForm.get(TokenFormControls.Scopes)!, 'markAsDirty');
 
     component.handleSubmitForm();
 
     expect(markAllAsTouchedSpy).toHaveBeenCalled();
     expect(markAsDirtySpy).toHaveBeenCalled();
+    expect(markScopesAsDirtySpy).toHaveBeenCalled();
     expect(MOCK_STORE.dispatch).not.toHaveBeenCalled();
   });
 
@@ -145,32 +176,60 @@ describe('TokenAddEditFormComponent', () => {
     expect(MOCK_STORE.dispatch).not.toHaveBeenCalled();
   });
 
-  it('should create token when not in edit mode', () => {
-    fixture.componentRef.setInput('isEditMode', false);
+  it('should early-return when tokenName is falsy even if form is valid', () => {
+    const tokenNameControl = component.tokenForm.get(TokenFormControls.TokenName)!;
+    const scopesControl = component.tokenForm.get(TokenFormControls.Scopes)!;
+
+    tokenNameControl.clearValidators();
+    scopesControl.clearValidators();
+    tokenNameControl.updateValueAndValidity();
+    scopesControl.updateValueAndValidity();
+
+    component.tokenForm.patchValue({
+      [TokenFormControls.TokenName]: undefined as unknown as string,
+      [TokenFormControls.Scopes]: ['read'],
+    });
+
+    expect(component.tokenForm.valid).toBe(true);
+
+    component.handleSubmitForm();
+
+    expect(MOCK_STORE.dispatch).not.toHaveBeenCalled();
+  });
+
+  it('should early-return when scopes is falsy even if form is valid', () => {
+    const tokenNameControl = component.tokenForm.get(TokenFormControls.TokenName)!;
+    const scopesControl = component.tokenForm.get(TokenFormControls.Scopes)!;
+
+    tokenNameControl.clearValidators();
+    scopesControl.clearValidators();
+    tokenNameControl.updateValueAndValidity();
+    scopesControl.updateValueAndValidity();
+
     component.tokenForm.patchValue({
       [TokenFormControls.TokenName]: 'Test Token',
-      [TokenFormControls.Scopes]: ['read', 'write'],
+      [TokenFormControls.Scopes]: undefined as unknown as string[],
     });
 
-    MOCK_STORE.dispatch.mockReturnValue(of(undefined));
+    expect(component.tokenForm.valid).toBe(true);
 
     component.handleSubmitForm();
 
-    expect(MOCK_STORE.dispatch).toHaveBeenCalled();
+    expect(MOCK_STORE.dispatch).not.toHaveBeenCalled();
   });
 
-  it('should update token when in edit mode', () => {
-    fixture.componentRef.setInput('isEditMode', true);
+  it('should create token when not in edit mode', () => {
+    fixture.componentRef.setInput('isEditMode', false);
     component.tokenForm.patchValue({
-      [TokenFormControls.TokenName]: 'Updated Token',
-      [TokenFormControls.Scopes]: ['read', 'write', 'delete'],
+      [TokenFormControls.TokenName]: 'Test Token',
+      [TokenFormControls.Scopes]: ['read', 'write'],
     });
 
     MOCK_STORE.dispatch.mockReturnValue(of(undefined));
 
     component.handleSubmitForm();
 
-    expect(MOCK_STORE.dispatch).toHaveBeenCalled();
+    expect(MOCK_STORE.dispatch).toHaveBeenCalledWith(new CreateToken('Test Token', ['read', 'write']));
   });
 
   it('should show success toast and close dialog after creating token', () => {
@@ -188,46 +247,35 @@ describe('TokenAddEditFormComponent', () => {
     expect(dialogRef.close).toHaveBeenCalled();
   });
 
-  it('should show success toast and navigate after updating token', () => {
-    fixture.componentRef.setInput('isEditMode', true);
+  it('should open created dialog with new token name and value after create', () => {
+    fixture.componentRef.setInput('isEditMode', false);
     component.tokenForm.patchValue({
-      [TokenFormControls.TokenName]: 'Updated Token',
+      [TokenFormControls.TokenName]: 'Test Token',
       [TokenFormControls.Scopes]: ['read', 'write'],
     });
 
+    const showDialogSpy = jest.spyOn(component, 'showTokenCreatedDialog');
+
     MOCK_STORE.dispatch.mockReturnValue(of(undefined));
 
     component.handleSubmitForm();
 
-    expect(toastService.showSuccess).toHaveBeenCalledWith('settings.tokens.toastMessage.successEdit');
-    expect(router.navigate).toHaveBeenCalledWith(['settings/tokens']);
+    expect(showDialogSpy).toHaveBeenCalledWith(MOCK_TOKEN.name, MOCK_TOKEN.id);
   });
 
-  it('should show token created dialog with new token data after successful creation', () => {
-    fixture.componentRef.setInput('isEditMode', false);
+  it('should show success toast and navigate after updating token', () => {
+    fixture.componentRef.setInput('isEditMode', true);
     component.tokenForm.patchValue({
-      [TokenFormControls.TokenName]: 'Test Token',
+      [TokenFormControls.TokenName]: 'Updated Token',
       [TokenFormControls.Scopes]: ['read', 'write'],
     });
 
     MOCK_STORE.dispatch.mockReturnValue(of(undefined));
 
     component.handleSubmitForm();
 
-    expect(dialogService.open).toHaveBeenCalledWith(
-      TokenCreatedDialogComponent,
-      expect.objectContaining({
-        width: '500px',
-        header: 'settings.tokens.createdDialog.title',
-        closeOnEscape: true,
-        modal: true,
-        closable: true,
-        data: {
-          tokenName: MOCK_TOKEN.name,
-          tokenValue: MOCK_TOKEN.tokenId,
-        },
-      })
-    );
+    expect(toastService.showSuccess).toHaveBeenCalledWith('settings.tokens.toastMessage.successEdit');
+    expect(router.navigate).toHaveBeenCalledWith(['settings/tokens']);
   });
 
   it('should open dialog with correct configuration', () => {
@@ -252,6 +300,31 @@ describe('TokenAddEditFormComponent', () => {
     );
   });
 
+  it('should use TranslateService.instant for dialog header', () => {
+    const translate = TestBed.inject(TranslateService) as unknown as { instant: jest.Mock };
+    component.showTokenCreatedDialog('Name', 'Value');
+    expect(translate.instant).toHaveBeenCalledWith('settings.tokens.createdDialog.title');
+  });
+
+  it('should read tokens via selectSignal after create', () => {
+    fixture.componentRef.setInput('isEditMode', false);
+    component.tokenForm.patchValue({
+      [TokenFormControls.TokenName]: 'Test Token',
+      [TokenFormControls.Scopes]: ['read'],
+    });
+
+    const selectSpy = jest.spyOn(MOCK_STORE, 'selectSignal');
+    MOCK_STORE.dispatch.mockReturnValue(of(undefined));
+
+    component.handleSubmitForm();
+
+    expect(selectSpy).toHaveBeenCalledWith(TokensSelectors.getTokens);
+  });
+
+  it('should expose the same inputLimits as InputLimits.fullName', () => {
+    expect(component.inputLimits).toBe(InputLimits.fullName);
+  });
+
   it('should require token name', () => {
     const tokenNameControl = component.tokenForm.get(TokenFormControls.TokenName);
     expect(tokenNameControl?.hasError('required')).toBe(true);
@@ -274,4 +347,30 @@ describe('TokenAddEditFormComponent', () => {
   it('should have correct input limits for token name', () => {
     expect(component.inputLimits).toBeDefined();
   });
+
+  it('should expose tokenId from route params', () => {
+    expect(component.tokenId()).toBe(MOCK_TOKEN.id);
+  });
+
+  it('should expose scopes from store via tokenScopes signal', () => {
+    expect(component.tokenScopes()).toEqual(MOCK_SCOPES);
+  });
+
+  it('should disable form when isLoading is true', () => {
+    (MOCK_STORE.selectSignal as jest.Mock).mockImplementation((selector) => {
+      if (selector === TokensSelectors.getScopes) return () => MOCK_SCOPES;
+      if (selector === TokensSelectors.isTokensLoading) return () => true;
+      if (selector === TokensSelectors.getTokens) return () => MOCK_TOKENS;
+      if (selector === TokensSelectors.getTokenById) {
+        return () => (id: string) => MOCK_TOKENS.find((token) => token.id === id);
+      }
+      return () => null;
+    });
+
+    const loadingFixture = TestBed.createComponent(TokenAddEditFormComponent);
+    const loadingComponent = loadingFixture.componentInstance;
+    loadingFixture.detectChanges();
+
+    expect(loadingComponent.tokenForm.disabled).toBe(true);
+  });
 });

src/app/features/settings/tokens/components/token-created-dialog/token-created-dialog.component.spec.ts

@@ -1,51 +1,26 @@
-import { MockProvider } from 'ng-mocks';
+import { MockComponent, MockProvider } from 'ng-mocks';
 
-import { DialogService, DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
+import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { ActivatedRoute, Router } from '@angular/router';
 
-import { TranslateServiceMock } from '@shared/mocks';
-import { ToastService } from '@shared/services';
+import { CopyButtonComponent } from '@shared/components';
 
 import { TokenCreatedDialogComponent } from './token-created-dialog.component';
 
+import { OSFTestingModule } from '@testing/osf.testing.module';
+
 describe('TokenCreatedDialogComponent', () => {
   let component: TokenCreatedDialogComponent;
   let fixture: ComponentFixture<TokenCreatedDialogComponent>;
-  let dialogService: Partial<DialogService>;
-  let dialogRef: Partial<DynamicDialogRef>;
-  let activatedRoute: Partial<ActivatedRoute>;
-  let router: Partial<Router>;
-  let toastService: Partial<ToastService>;
 
   const mockTokenName = 'Test Token';
   const mockTokenValue = 'test-token-value';
 
   beforeEach(async () => {
-    dialogService = {
-      open: jest.fn(),
-    };
-
-    dialogRef = {
-      close: jest.fn(),
-    };
-
-    router = {
-      navigate: jest.fn(),
-    };
-
-    toastService = {
-      showSuccess: jest.fn(),
-      showError: jest.fn(),
-    };
-
     await TestBed.configureTestingModule({
-      imports: [TokenCreatedDialogComponent],
+      imports: [TokenCreatedDialogComponent, OSFTestingModule, MockComponent(CopyButtonComponent)],
       providers: [
-        TranslateServiceMock,
-        MockProvider(ToastService),
         MockProvider(DynamicDialogRef, { close: jest.fn() }),
         MockProvider(DynamicDialogConfig, {
           data: {
@@ -64,20 +39,4 @@ describe('TokenCreatedDialogComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
-
-  it('should initialize with token data from config', () => {
-    expect(component.tokenName()).toBe(mockTokenName);
-    expect(component.tokenId()).toBe(mockTokenValue);
-  });
-
-  it('should display token name and value in the template', () => {
-    const tokenInput = fixture.debugElement.query(By.css('input')).nativeElement;
-    expect(tokenInput.value).toBe(mockTokenValue);
-  });
-
-  it('should set input selection range to 0 after render', () => {
-    const input = fixture.debugElement.query(By.css('input')).nativeElement;
-    expect(input.selectionStart).toBe(0);
-    expect(input.selectionEnd).toBe(0);
-  });
 });