refactor(settings): Implement CR suggestions; Update tests

Author: futa-ikeda

src/app/features/profile/components/profile-information/profile-information.component.ts

@@ -9,6 +9,7 @@ import { toSignal } from '@angular/core/rxjs-interop';
 import { EducationHistoryComponent } from '@osf/shared/components/education-history/education-history.component';
 import { EmploymentHistoryComponent } from '@osf/shared/components/employment-history/employment-history.component';
 import { SOCIAL_LINKS } from '@osf/shared/constants/social-links.const';
+import { ExternalIdentityStatus } from '@osf/shared/enums/external-identity-status.enum';
 import { IS_MEDIUM } from '@osf/shared/helpers/breakpoints.tokens';
 import { UserModel } from '@osf/shared/models/user/user.models';
 import { SortByDatePipe } from '@osf/shared/pipes/sort-by-date.pipe';
@@ -45,7 +46,7 @@ export class ProfileInformationComponent {
 
   orcidId = computed(() => {
     const orcid = this.currentUser()?.external_identity?.ORCID;
-    return orcid?.status?.toUpperCase() === 'VERIFIED' ? orcid.id : undefined;
+    return orcid?.status?.toUpperCase() === ExternalIdentityStatus.VERIFIED ? orcid.id : undefined;
   });
 
   toProfileSettings() {

src/app/features/settings/profile-settings/components/authenticated-identity/authenticated-identity.component.html

@@ -6,7 +6,7 @@ <h2>
   </div>
   <div class="flex flex-column row-gap-4 w-full md:flex-row md:align-items-end md:column-gap-3">
     <div class="w-full md:w-12">
-      @if (existingOrcid) {
+      @if (existingOrcid()) {
         <div class="flex flex-row align-items-center gap-2">
           <img ngSrc="assets/icons/colored/orcid.svg" width="16" height="16" alt="orcid" />
           <a class="font-bold" [href]="orcidUrl()"> {{ orcidUrl() }} </a>

src/app/features/settings/profile-settings/components/authenticated-identity/authenticated-identity.component.spec.ts

@@ -1,7 +1,13 @@
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+import { MockPipe, MockProvider } from 'ng-mocks';
+
+import { signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { AccountSettingsSelectors } from '@osf/features/settings/account-settings/store/account-settings.selectors';
 import { CustomConfirmationService } from '@osf/shared/services/custom-confirmation.service';
+import { LoaderService } from '@osf/shared/services/loader.service';
+import { ToastService } from '@osf/shared/services/toast.service';
 
 import { AuthenticatedIdentityComponent } from './authenticated-identity.component';
 
@@ -12,22 +18,27 @@ describe('AuthenticatedIdentityComponent', () => {
   let component: AuthenticatedIdentityComponent;
   let fixture: ComponentFixture<AuthenticatedIdentityComponent>;
 
+  const mockExternalIdentities = signal([
+    {
+      id: 'ORCID',
+      externalId: '0001-0002-0003-0004',
+      status: 'VERIFIED',
+    },
+  ]);
+
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [AuthenticatedIdentityComponent],
+      imports: [AuthenticatedIdentityComponent, MockPipe(TranslatePipe)],
       providers: [
+        MockProvider(ToastService),
+        MockProvider(LoaderService),
+        MockProvider(TranslateService),
         { provide: CustomConfirmationService, useValue: MockCustomConfirmationServiceProvider.useValue },
         provideMockStore({
           signals: [
             {
               selector: AccountSettingsSelectors.getExternalIdentities,
-              value: [
-                {
-                  id: 'ORCID',
-                  externalId: '0001-0002-0003-0004',
-                  status: 'VERIFIED',
-                },
-              ],
+              value: mockExternalIdentities,
             },
           ],
         }),
@@ -44,17 +55,17 @@ describe('AuthenticatedIdentityComponent', () => {
   });
 
   it('should show existing user ORCID when present in external identities', () => {
-    expect(component.existingOrcid).toEqual('0001-0002-0003-0004');
+    expect(component.existingOrcid()).toEqual('0001-0002-0003-0004');
     expect(component.orcidUrl()).toEqual('https://orcid.org/0001-0002-0003-0004');
     component.disconnectOrcid();
     expect(MockCustomConfirmationServiceProvider.useValue.confirmDelete).toHaveBeenCalled();
   });
 
   it('should show connect button when no existing ORCID is present in external identities', () => {
-    TestBed.inject(provideMockStore).overrideSelector(AccountSettingsSelectors.getExternalIdentities, []);
+    mockExternalIdentities.set([]);
     fixture.detectChanges();
 
-    expect(component.existingOrcid).toBeUndefined();
+    expect(component.existingOrcid()).toBeUndefined();
     expect(component.orcidUrl()).toBeNull();
   });
 });

src/app/features/settings/profile-settings/components/authenticated-identity/authenticated-identity.component.ts

@@ -8,8 +8,9 @@ import { Tooltip } from 'primeng/tooltip';
 import { finalize } from 'rxjs';
 
 import { NgOptimizedImage } from '@angular/common';
-import { ChangeDetectionStrategy, Component, computed, effect, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject, OnInit } from '@angular/core';
 
+import { ExternalIdentityStatus } from '@osf/shared/enums/external-identity-status.enum';
 import { CustomConfirmationService } from '@osf/shared/services/custom-confirmation.service';
 import { LoaderService } from '@osf/shared/services/loader.service';
 import { ToastService } from '@osf/shared/services/toast.service';
@@ -27,15 +28,15 @@ import {
   styleUrl: './authenticated-identity.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AuthenticatedIdentityComponent {
+export class AuthenticatedIdentityComponent implements OnInit {
   private readonly customConfirmationService = inject(CustomConfirmationService);
   private readonly toastService = inject(ToastService);
   private readonly loaderService = inject(LoaderService);
 
-  constructor() {
-    effect(() => {
-      this.actions.getExternalIdentities();
-    });
+  private readonly ORCID_PROVIDER = 'ORCID';
+
+  ngOnInit() {
+    this.actions.getExternalIdentities();
   }
 
   readonly actions = createDispatchMap({
@@ -46,27 +47,24 @@ export class AuthenticatedIdentityComponent {
   readonly externalIdentities = select(AccountSettingsSelectors.getExternalIdentities);
 
   readonly orcidUrl = computed(() => {
-    return this.existingOrcid ? `https://orcid.org/${this.existingOrcid}` : null;
+    return this.existingOrcid() ? `https://orcid.org/${this.existingOrcid()}` : null;
   });
 
-  get existingOrcid(): string | undefined {
-    const externalIdentities = this.externalIdentities();
-    const existingOrcid = externalIdentities?.find((identity) => identity.id === 'ORCID');
-    if (existingOrcid && existingOrcid.status === 'VERIFIED') {
-      return existingOrcid.externalId;
-    }
-    return undefined;
-  }
+  readonly existingOrcid = computed(
+    (): string | undefined =>
+      this.externalIdentities()?.find((i) => i.id === 'ORCID' && i.status === ExternalIdentityStatus.VERIFIED)
+        ?.externalId
+  );
 
   disconnectOrcid(): void {
     this.customConfirmationService.confirmDelete({
       headerKey: 'settings.accountSettings.connectedIdentities.deleteDialog.header',
-      messageParams: { name: 'ORCID' },
+      messageParams: { name: this.ORCID_PROVIDER },
       messageKey: 'settings.accountSettings.connectedIdentities.deleteDialog.message',
       onConfirm: () => {
         this.loaderService.show();
         this.actions
-          .deleteExternalIdentity('ORCID')
+          .deleteExternalIdentity(this.ORCID_PROVIDER)
           .pipe(finalize(() => this.loaderService.hide()))
           .subscribe(() => this.toastService.showSuccess('settings.accountSettings.connectedIdentities.successDelete'));
       },

src/app/features/settings/profile-settings/components/social/social.component.spec.ts

@@ -8,6 +8,7 @@ import { CustomConfirmationService } from '@osf/shared/services/custom-confirmat
 import { LoaderService } from '@osf/shared/services/loader.service';
 import { ToastService } from '@osf/shared/services/toast.service';
 
+import { AuthenticatedIdentityComponent } from '../authenticated-identity/authenticated-identity.component';
 import { SocialFormComponent } from '../social-form/social-form.component';
 
 import { SocialComponent } from './social.component';
@@ -24,7 +25,12 @@ describe('SocialComponent', () => {
     jest.clearAllMocks();
 
     await TestBed.configureTestingModule({
-      imports: [SocialComponent, MockComponent(SocialFormComponent), MockPipe(TranslatePipe)],
+      imports: [
+        SocialComponent,
+        MockComponent(SocialFormComponent),
+        MockComponent(AuthenticatedIdentityComponent),
+        MockPipe(TranslatePipe),
+      ],
       providers: [
         provideMockStore({
           signals: [{ selector: UserSelectors.getSocialLinks, value: MOCK_USER.social }],

src/app/shared/enums/external-identity-status.enum.ts

@@ -0,0 +1,5 @@
+export enum ExternalIdentityStatus {
+  VERIFIED = 'VERIFIED',
+  LINK = 'LINK',
+  CREATE = 'CREATE',
+}

src/app/shared/models/user/external-identity.model.ts

@@ -1,6 +1,8 @@
+import { ExternalIdentityStatus } from '@osf/shared/enums/external-identity-status.enum';
+
 export interface OrcidInfo {
   id: string;
-  status: string;
+  status: ExternalIdentityStatus;
 }
 
 export interface ExternalIdentityModel {