fix(preprint-details): updated logic for truncated abstract (#933)

- Ticket: [ENG-10735]
- Feature flag: n/a

## Summary of Changes
1. Added logic to expand text.
2. Added expanded text for abstract in preprints.

Author: nsemets

src/app/features/preprints/components/preprint-details/general-information/general-information.component.html

@@ -19,7 +19,7 @@ <h3>{{ 'preprints.preprintStepper.review.sections.metadata.authors' | translate
 
       <section class="flex flex-column gap-2">
         <h3>{{ 'preprints.preprintStepper.common.labels.abstract' | translate }}</h3>
-        <osf-truncated-text [maxVisibleLines]="2" [text]="preprintValue.description" />
+        <osf-truncated-text [expanded]="!isBrowser" [maxVisibleLines]="2" [text]="preprintValue.description" />
       </section>
 
       @if (affiliatedInstitutions().length) {

src/app/features/preprints/components/preprint-details/general-information/general-information.component.ts

@@ -57,7 +57,7 @@ import { PreprintDoiSectionComponent } from '../preprint-doi-section/preprint-do
 export class GeneralInformationComponent implements OnDestroy {
   private readonly environment = inject(ENVIRONMENT);
   private readonly platformId = inject(PLATFORM_ID);
-  private readonly isBrowser = isPlatformBrowser(this.platformId);
+  readonly isBrowser = isPlatformBrowser(this.platformId);
 
   readonly preprintProvider = input.required<PreprintProviderDetails | undefined>();
   readonly preprintVersionSelected = output<string>();

src/app/features/preprints/components/preprint-details/preprint-tombstone/preprint-tombstone.component.html

@@ -25,7 +25,7 @@ <h3>{{ 'preprints.preprintStepper.review.sections.metadata.authors' | translate
 
       <section class="flex flex-column gap-2">
         <h3>{{ 'preprints.preprintStepper.common.labels.abstract' | translate }}</h3>
-        <osf-truncated-text [maxVisibleLines]="2" [text]="preprintValue.description" />
+        <osf-truncated-text [expanded]="!isBrowser" [maxVisibleLines]="2" [text]="preprintValue.description" />
       </section>
 
       <osf-preprint-doi-section

src/app/features/preprints/components/preprint-details/preprint-tombstone/preprint-tombstone.component.ts

@@ -56,7 +56,7 @@ import { PreprintDoiSectionComponent } from '../preprint-doi-section/preprint-do
 })
 export class PreprintTombstoneComponent implements OnDestroy {
   private readonly router = inject(Router);
-  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+  readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
 
   readonly preprintProvider = input.required<PreprintProviderDetails | undefined>();
   readonly preprintVersionSelected = output<string>();

src/app/shared/components/truncated-text/truncated-text.component.html

@@ -1,13 +1,13 @@
 <div class="flex flex-column gap-3">
-  <div #textContent class="text-content" [class.expanded]="isTextExpanded()" [style.--line-clamp]="maxVisibleLines()">
+  <div #textContent class="text-content" [class.expanded]="isExpanded()" [style.--line-clamp]="maxVisibleLines()">
     @if (hasOwnContent()) {
       <ng-content></ng-content>
     } @else {
       <div [innerHTML]="text()"></div>
     }
   </div>
 
-  @if (hasOverflowingText()) {
+  @if (hasOverflowingText() && !expanded()) {
     <p-button class="link-btn-no-padding" link [label]="buttonLabel() | translate" (onClick)="handleButtonClick()" />
   }
 </div>

src/app/shared/components/truncated-text/truncated-text.component.spec.ts

@@ -1,81 +1,121 @@
+import { MockProvider } from 'ng-mocks';
+
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Router } from '@angular/router';
 
 import { TruncatedTextComponent } from './truncated-text.component';
 
-import { TranslateServiceMock } from '@testing/mocks/translate.service.mock';
+import { provideOSFCore } from '@testing/osf.testing.provider';
+import { RouterMockBuilder, RouterMockType } from '@testing/providers/router-provider.mock';
 
 describe('TruncatedTextComponent', () => {
   let component: TruncatedTextComponent;
   let fixture: ComponentFixture<TruncatedTextComponent>;
+  let mockRouter: RouterMockType;
+
+  beforeEach(() => {
+    mockRouter = RouterMockBuilder.create().build();
 
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
+    TestBed.configureTestingModule({
       imports: [TruncatedTextComponent],
-      providers: [TranslateServiceMock],
-    }).compileComponents();
+      providers: [provideOSFCore(), MockProvider(Router, mockRouter)],
+    });
 
     fixture = TestBed.createComponent(TruncatedTextComponent);
     component = fixture.componentInstance;
   });
 
   it('should create', () => {
+    fixture.detectChanges();
     expect(component).toBeTruthy();
   });
 
-  it('should set text input correctly', () => {
-    fixture.componentRef.setInput('text', 'Test text content');
-    expect(component.text()).toBe('Test text content');
-  });
-
-  it('should set maxVisibleLines input correctly', () => {
+  it('should reflect text, maxVisibleLines, and expanded inputs', () => {
+    fixture.componentRef.setInput('text', 'hello');
     fixture.componentRef.setInput('maxVisibleLines', 5);
+    fixture.componentRef.setInput('expanded', true);
+
+    expect(component.text()).toBe('hello');
     expect(component.maxVisibleLines()).toBe(5);
+    expect(component.expanded()).toBe(true);
   });
 
-  it('should call checkTextOverflow in ngAfterViewInit', () => {
-    const checkTextOverflowSpy = jest.spyOn(component as any, 'checkTextOverflow');
+  it('should derive isExpanded from expanded input or user expansion', () => {
+    expect(component.isExpanded()).toBe(false);
 
-    component.ngAfterViewInit();
+    fixture.componentRef.setInput('expanded', true);
+    expect(component.isExpanded()).toBe(true);
 
-    expect(checkTextOverflowSpy).toHaveBeenCalledTimes(1);
+    fixture.componentRef.setInput('expanded', false);
+    component.isTextExpanded.set(true);
+    expect(component.isExpanded()).toBe(true);
   });
 
-  it('should handle empty text input', () => {
-    fixture.componentRef.setInput('text', '');
-    expect(component.text()).toBe('');
+  it('should compute buttonLabel for read-more vs hide when not navigating', () => {
+    fixture.componentRef.setInput('navigateOnReadMore', false);
+    fixture.componentRef.setInput('readMoreLabel', 'read');
+    fixture.componentRef.setInput('hideLabel', 'hide');
+
+    expect(component.buttonLabel()).toBe('read');
+
+    component.isTextExpanded.set(true);
+    expect(component.buttonLabel()).toBe('hide');
   });
 
-  it('should handle different maxVisibleLines values', () => {
-    const values = [1, 2, 3, 5, 10, 100];
+  it('should use readMoreLabel for buttonLabel when navigateOnReadMore is true', () => {
+    fixture.componentRef.setInput('navigateOnReadMore', true);
+    fixture.componentRef.setInput('readMoreLabel', 'go');
 
-    values.forEach((value) => {
-      fixture.componentRef.setInput('maxVisibleLines', value);
-      expect(component.maxVisibleLines()).toBe(value);
-    });
+    expect(component.buttonLabel()).toBe('go');
+
+    component.isTextExpanded.set(true);
+    expect(component.buttonLabel()).toBe('go');
   });
 
-  it('should handle negative maxVisibleLines', () => {
-    fixture.componentRef.setInput('maxVisibleLines', -1);
-    expect(component.maxVisibleLines()).toBe(-1);
+  it('should call checkTextOverflow from ngAfterViewInit', () => {
+    const checkTextOverflowSpy = jest.spyOn(component, 'checkTextOverflow');
+
+    component.ngAfterViewInit();
+
+    expect(checkTextOverflowSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('should reset user expansion when text changes to a new non-empty value', () => {
+    jest.useFakeTimers();
+    try {
+      fixture.componentRef.setInput('text', 'first');
+      fixture.detectChanges();
+      jest.advanceTimersByTime(0);
+
+      component.isTextExpanded.set(true);
+      fixture.componentRef.setInput('text', 'second');
+      fixture.detectChanges();
+      jest.advanceTimersByTime(0);
+
+      expect(component.isTextExpanded()).toBe(false);
+    } finally {
+      jest.useRealTimers();
+    }
   });
 
-  it('should properly update isTextExpanded signal', () => {
-    expect(component['isTextExpanded']()).toBe(false);
+  it('should toggle isTextExpanded on handleButtonClick when not navigateOnReadMore', () => {
+    fixture.componentRef.setInput('navigateOnReadMore', false);
+
+    expect(component.isTextExpanded()).toBe(false);
 
-    component['isTextExpanded'].set(true);
-    expect(component['isTextExpanded']()).toBe(true);
+    component.handleButtonClick();
+    expect(component.isTextExpanded()).toBe(true);
 
-    component['isTextExpanded'].set(false);
-    expect(component['isTextExpanded']()).toBe(false);
+    component.handleButtonClick();
+    expect(component.isTextExpanded()).toBe(false);
   });
 
-  it('should properly update hasOverflowingText signal', () => {
-    expect(component['hasOverflowingText']()).toBe(false);
+  it('should navigate when navigateOnReadMore is true', () => {
+    fixture.componentRef.setInput('navigateOnReadMore', true);
+    fixture.componentRef.setInput('link', ['/preprints', '123']);
 
-    component['hasOverflowingText'].set(true);
-    expect(component['hasOverflowingText']()).toBe(true);
+    component.handleButtonClick();
 
-    component['hasOverflowingText'].set(false);
-    expect(component['hasOverflowingText']()).toBe(false);
+    expect(mockRouter.navigate).toHaveBeenCalledWith(['/preprints', '123']);
   });
 });

src/app/shared/components/truncated-text/truncated-text.component.ts

@@ -7,6 +7,7 @@ import { timer } from 'rxjs';
 import {
   AfterViewInit,
   Component,
+  computed,
   DestroyRef,
   effect,
   ElementRef,
@@ -26,6 +27,7 @@ import { Router } from '@angular/router';
 })
 export class TruncatedTextComponent implements AfterViewInit {
   readonly text = input('');
+  readonly expanded = input(false);
   readonly maxVisibleLines = input(3);
   readonly navigateOnReadMore = input(false);
   readonly link = input<string[]>([]);
@@ -40,13 +42,15 @@ export class TruncatedTextComponent implements AfterViewInit {
   isTextExpanded = signal(false);
   hasOverflowingText = signal(false);
 
-  buttonLabel = () => {
+  isExpanded = computed(() => this.expanded() || this.isTextExpanded());
+
+  buttonLabel = computed(() => {
     if (this.navigateOnReadMore()) {
       return this.readMoreLabel();
     }
 
     return this.isTextExpanded() ? this.hideLabel() : this.readMoreLabel();
-  };
+  });
 
   constructor() {
     effect(() => {