diff --git a/src/app/cdk/interstitials/backup-email/interstitial-component/backup-email.component.html b/src/app/cdk/interstitials/backup-email/interstitial-component/backup-email.component.html index 716f7539e..0c09876c0 100644 --- a/src/app/cdk/interstitials/backup-email/interstitial-component/backup-email.component.html +++ b/src/app/cdk/interstitials/backup-email/interstitial-component/backup-email.component.html @@ -29,13 +29,13 @@

class="email-category" *ngIf="primaryEmailCategory === 'PROFESSIONAL'" > - work + work Professional
- fingerprint + fingerprint Personal diff --git a/src/app/cdk/interstitials/backup-email/interstitial-component/backup-email.component.spec.ts b/src/app/cdk/interstitials/backup-email/interstitial-component/backup-email.component.spec.ts index 7aeb90986..c310427d3 100644 --- a/src/app/cdk/interstitials/backup-email/interstitial-component/backup-email.component.spec.ts +++ b/src/app/cdk/interstitials/backup-email/interstitial-component/backup-email.component.spec.ts @@ -207,6 +207,33 @@ describe('BackupEmailComponent', () => { expect(component.primaryEmailCategory).toBe('PROFESSIONAL') }) + // The outlined look comes from the Material Symbols font. The + // `material-icons-outlined` class these used to carry matches no loaded + // stylesheet, so it silently fell back to the filled font (PD-6198). + it('should draw the professional category icon in the outlined font', () => { + const icon = fixture.nativeElement.querySelector( + '.email-category mat-icon' + ) + + expect(icon.textContent.trim()).toBe('work') + expect(icon.classList).toContain('material-symbols-outlined') + }) + + it('should draw the personal category icon in the outlined font', () => { + emailCategory = () => + of({ category: 'PERSONAL', rorId: null } as EmailCategoryEndpoint) + + const newFixture = TestBed.createComponent(BackupEmailComponent) + newFixture.detectChanges() + + const icon = newFixture.nativeElement.querySelector( + '.email-category mat-icon' + ) + + expect(icon.textContent.trim()).toBe('fingerprint') + expect(icon.classList).toContain('material-symbols-outlined') + }) + it('should leave the category out when the lookup fails', () => { emailCategory = () => throwError(() => new Error('lookup failed'))