Merge pull request #2651 from alexandrevryghem/theme-fixes_contribute-main

Fixed ItemSearchResultListElementComponent not fully themable

src/app/shared/object-collection/shared/listable-object/listable-object-component-loader.component.spec.ts

@@ -1,7 +1,4 @@
-import {
-  ChangeDetectionStrategy,
-  NO_ERRORS_SCHEMA,
-} from '@angular/core';
+import { ChangeDetectionStrategy } from '@angular/core';
 import {
   ComponentFixture,
   fakeAsync,
@@ -11,29 +8,31 @@ import {
 } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { ActivatedRoute } from '@angular/router';
-import { provideMockStore } from '@ngrx/store/testing';
 import { TranslateModule } from '@ngx-translate/core';
-import { of } from 'rxjs';
-import { AuthRequestService } from 'src/app/core/auth/auth-request.service';
-import { CookieService } from 'src/app/core/services/cookie.service';
-import { HardRedirectService } from 'src/app/core/services/hard-redirect.service';
-import { XSRFService } from 'src/app/core/xsrf/xsrf.service';
-import { CookieServiceMock } from 'src/app/shared/mocks/cookie.service.mock';
-import { getMockThemeService } from 'src/app/shared/mocks/theme-service.mock';
-import { AuthRequestServiceStub } from 'src/app/shared/testing/auth-request-service.stub';
 
-import {
-  APP_CONFIG,
-  APP_DATA_SERVICES_MAP,
-} from '../../../../../config/app-config.interface';
-import { REQUEST } from '../../../../../express.tokens';
+import { APP_CONFIG } from '../../../../../config/app-config.interface';
+import { environment } from '../../../../../environments/environment.test';
+import { AuthService } from '../../../../core/auth/auth.service';
+import { DSONameService } from '../../../../core/breadcrumbs/dso-name.service';
+import { AuthorizationDataService } from '../../../../core/data/feature-authorization/authorization-data.service';
 import { Context } from '../../../../core/shared/context.model';
+import { FileService } from '../../../../core/shared/file.service';
 import { GenericConstructor } from '../../../../core/shared/generic-constructor';
 import { ListableModule } from '../../../../core/shared/listable.module';
 import { ViewMode } from '../../../../core/shared/view-mode.model';
+import { XSRFService } from '../../../../core/xsrf/xsrf.service';
 import { DynamicComponentLoaderDirective } from '../../../abstract-component-loader/dynamic-component-loader.directive';
+import { DSONameServiceMock } from '../../../mocks/dso-name.service.mock';
+import { getMockThemeService } from '../../../mocks/theme-service.mock';
 import { ItemListElementComponent } from '../../../object-list/item-list-element/item-types/item/item-list-element.component';
+import { SearchResultListElementComponent } from '../../../object-list/search-result-list-element/search-result-list-element.component';
+import { ActivatedRouteStub } from '../../../testing/active-router.stub';
+import { AuthServiceStub } from '../../../testing/auth-service.stub';
+import { AuthorizationDataServiceStub } from '../../../testing/authorization-service.stub';
+import { FileServiceStub } from '../../../testing/file-service.stub';
+import { TruncatableServiceStub } from '../../../testing/truncatable-service.stub';
 import { ThemeService } from '../../../theme-support/theme.service';
+import { TruncatableService } from '../../../truncatable/truncatable.service';
 import { ListableObject } from '../listable-object.model';
 import { ListableObjectComponentLoaderComponent } from './listable-object-component-loader.component';
 
@@ -57,8 +56,22 @@ describe('ListableObjectComponentLoaderComponent', () => {
   let comp: ListableObjectComponentLoaderComponent;
   let fixture: ComponentFixture<ListableObjectComponentLoaderComponent>;
 
+  let activatedRoute: ActivatedRouteStub;
+  let authService: AuthServiceStub;
+  let authorizationService: AuthorizationDataServiceStub;
+  let fileService: FileServiceStub;
+  let themeService: ThemeService;
+  let truncatableService: TruncatableServiceStub;
+
   beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
+    activatedRoute = new ActivatedRouteStub();
+    authService = new AuthServiceStub();
+    authorizationService = new AuthorizationDataServiceStub();
+    fileService = new FileServiceStub();
+    themeService = getMockThemeService();
+    truncatableService = new TruncatableServiceStub();
+
+    void TestBed.configureTestingModule({
       imports: [
         TranslateModule.forRoot(),
         ListableObjectComponentLoaderComponent,
@@ -66,21 +79,16 @@ describe('ListableObjectComponentLoaderComponent', () => {
         ItemListElementComponent,
         DynamicComponentLoaderDirective,
       ],
-      schemas: [NO_ERRORS_SCHEMA],
       providers: [
-        { provide: HardRedirectService, useValue: jasmine.createSpyObj('hardRedirectService', ['redirect']) },
-        { provide: AuthRequestService, useValue: new AuthRequestServiceStub() },
-        { provide: CookieService, useValue: new CookieServiceMock() },
+        { provide: APP_CONFIG, useValue: environment },
+        { provide: ActivatedRoute, useValue: activatedRoute },
+        { provide: AuthService, useValue: authService },
+        { provide: AuthorizationDataService, useValue: authorizationService },
+        { provide: DSONameService, useValue: new DSONameServiceMock() },
+        { provide: FileService, useValue: fileService },
+        { provide: ThemeService, useValue: themeService },
+        { provide: TruncatableService, useValue: truncatableService },
         { provide: XSRFService, useValue: {} },
-        { provide: REQUEST, useValue: {} },
-        {
-          provide: ActivatedRoute,
-          useValue: { data: of({ dso: { payload: {} } }), params: of({}) },
-        },
-        provideMockStore({}),
-        { provide: ThemeService, useValue: getMockThemeService('dspace') },
-        { provide: APP_CONFIG, useValue: { browseBy: { showThumbnails: true } } },
-        { provide: APP_DATA_SERVICES_MAP, useValue: {} },
       ],
     }).overrideComponent(ListableObjectComponentLoaderComponent, {
       set: {
@@ -95,7 +103,7 @@ describe('ListableObjectComponentLoaderComponent', () => {
     comp.object = new TestType();
     comp.viewMode = testViewMode;
     comp.context = testContext;
-    spyOn(comp, 'getComponent').and.returnValue(ItemListElementComponent as any);
+    spyOn(comp, 'getComponent').and.returnValue(SearchResultListElementComponent as any);
     spyOn(comp as any, 'connectInputsAndOutputs').and.callThrough();
     fixture.detectChanges();
 
@@ -119,7 +127,7 @@ describe('ListableObjectComponentLoaderComponent', () => {
       spyOn(comp, 'instantiateComponent').and.returnValue(null);
       spyOn(comp.contentChange, 'emit').and.returnValue(null);
 
-      listableComponent = fixture.debugElement.query(By.css('ds-item-list-element')).componentInstance;
+      listableComponent = fixture.debugElement.query(By.css('ds-search-result-list-element')).componentInstance;
       reloadedObject = 'object';
     });
 

src/app/shared/object-list/item-list-element/item-types/item/item-list-element.component.html

@@ -1 +1,5 @@
-<ds-item-search-result-list-element [showLabel]="showLabel" [object]="{ indexableObject: object, hitHighlights: {} }" [linkType]="linkType"></ds-item-search-result-list-element>
+<ds-listable-object-component-loader
+  [object]="itemSearchResult"
+  [viewMode]="viewMode"
+  [linkType]="linkType">
+</ds-listable-object-component-loader>

src/app/shared/object-list/item-list-element/item-types/item/item-list-element.component.spec.ts

@@ -1,8 +1,6 @@
+import { ChangeDetectionStrategy } from '@angular/core';
 import {
-  ChangeDetectionStrategy,
-  NO_ERRORS_SCHEMA,
-} from '@angular/core';
-import {
+  ComponentFixture,
   TestBed,
   waitForAsync,
 } from '@angular/core/testing';
@@ -10,20 +8,21 @@ import { By } from '@angular/platform-browser';
 import { ActivatedRoute } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 import { of as observableOf } from 'rxjs';
-import { APP_CONFIG } from 'src/config/app-config.interface';
-import { environment } from 'src/environments/environment.test';
 
+import { APP_CONFIG } from '../../../../../../config/app-config.interface';
+import { environment } from '../../../../../../environments/environment.test';
 import { AuthService } from '../../../../../core/auth/auth.service';
 import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service';
 import { AuthorizationDataService } from '../../../../../core/data/feature-authorization/authorization-data.service';
 import { Item } from '../../../../../core/shared/item.model';
 import { XSRFService } from '../../../../../core/xsrf/xsrf.service';
-import { AuthServiceMock } from '../../../../../shared/mocks/auth.service.mock';
-import { mockTruncatableService } from '../../../../../shared/mocks/mock-trucatable.service';
-import { getMockThemeService } from '../../../../../shared/mocks/theme-service.mock';
-import { ActivatedRouteStub } from '../../../../../shared/testing/active-router.stub';
-import { ThemeService } from '../../../../../shared/theme-support/theme.service';
 import { DSONameServiceMock } from '../../../../mocks/dso-name.service.mock';
+import { getMockThemeService } from '../../../../mocks/theme-service.mock';
+import { ActivatedRouteStub } from '../../../../testing/active-router.stub';
+import { AuthServiceStub } from '../../../../testing/auth-service.stub';
+import { AuthorizationDataServiceStub } from '../../../../testing/authorization-service.stub';
+import { TruncatableServiceStub } from '../../../../testing/truncatable-service.stub';
+import { ThemeService } from '../../../../theme-support/theme.service';
 import { TruncatableService } from '../../../../truncatable/truncatable.service';
 import { TruncatePipe } from '../../../../utils/truncate.pipe';
 import { ItemListElementComponent } from './item-list-element.component';
@@ -65,23 +64,39 @@ const mockItem: Item = Object.assign(new Item(), {
 });
 
 describe('ItemListElementComponent', () => {
-  let comp;
-  let fixture;
+  let comp: ItemListElementComponent;
+  let fixture: ComponentFixture<ItemListElementComponent>;
+
+  let activatedRoute: ActivatedRouteStub;
+  let authService: AuthServiceStub;
+  let authorizationService: AuthorizationDataServiceStub;
+  let themeService: ThemeService;
+  let truncatableService: TruncatableServiceStub;
 
   beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      imports: [TruncatePipe, TranslateModule.forRoot(), ItemListElementComponent],
+    activatedRoute = new ActivatedRouteStub();
+    authService = new AuthServiceStub();
+    authorizationService = new AuthorizationDataServiceStub();
+    themeService = getMockThemeService();
+    truncatableService = new TruncatableServiceStub();
+
+    void TestBed.configureTestingModule({
+      imports: [
+        TranslateModule.forRoot(),
+        TruncatePipe,
+      ],
+      declarations: [
+      ],
       providers: [
         { provide: DSONameService, useValue: new DSONameServiceMock() },
-        { provide: TruncatableService, useValue: mockTruncatableService },
         { provide: APP_CONFIG, useValue: environment },
-        { provide: ThemeService, useValue: getMockThemeService() },
-        { provide: ActivatedRoute, useValue: new ActivatedRouteStub() },
-        { provide: AuthService, useValue: new AuthServiceMock() },
-        { provide: AuthorizationDataService, useValue: {} },
+        { provide: ActivatedRoute, useValue: activatedRoute },
+        { provide: AuthService, useValue: authService },
+        { provide: AuthorizationDataService, useValue: authorizationService },
+        { provide: ThemeService, useValue: themeService },
+        { provide: TruncatableService, useValue: truncatableService },
         { provide: XSRFService, useValue: {} },
       ],
-      schemas: [NO_ERRORS_SCHEMA],
     }).overrideComponent(ItemListElementComponent, {
       set: { changeDetection: ChangeDetectionStrategy.Default },
     }).compileComponents();
@@ -95,6 +110,7 @@ describe('ItemListElementComponent', () => {
   describe(`when the publication is rendered`, () => {
     beforeEach(() => {
       comp.object = mockItem;
+      comp.ngOnChanges();
       fixture.detectChanges();
     });
 

src/app/shared/object-list/item-list-element/item-types/item/item-list-element.component.ts

@@ -1,10 +1,15 @@
-import { Component } from '@angular/core';
+import {
+  Component,
+  OnChanges,
+} from '@angular/core';
 
 import { Item } from '../../../../../core/shared/item.model';
 import { ViewMode } from '../../../../../core/shared/view-mode.model';
+import { hasValue } from '../../../../empty.util';
+import { ItemSearchResult } from '../../../../object-collection/shared/item-search-result.model';
 import { listableObjectComponent } from '../../../../object-collection/shared/listable-object/listable-object.decorator';
+import { ListableObjectComponentLoaderComponent } from '../../../../object-collection/shared/listable-object/listable-object-component-loader.component';
 import { AbstractListableElementComponent } from '../../../../object-collection/shared/object-collection-element/abstract-listable-element.component';
-import { ItemSearchResultListElementComponent } from '../../../search-result-list-element/item-search-result/item-types/item/item-search-result-list-element.component';
 
 @listableObjectComponent('Publication', ViewMode.ListElement)
 @listableObjectComponent(Item, ViewMode.ListElement)
@@ -13,10 +18,23 @@ import { ItemSearchResultListElementComponent } from '../../../search-result-lis
   styleUrls: ['./item-list-element.component.scss'],
   templateUrl: './item-list-element.component.html',
   standalone: true,
-  imports: [ItemSearchResultListElementComponent],
+  imports: [
+    ListableObjectComponentLoaderComponent,
+  ],
 })
 /**
  * The component for displaying a list element for an item of the type Publication
  */
-export class ItemListElementComponent extends AbstractListableElementComponent<Item> {
+export class ItemListElementComponent extends AbstractListableElementComponent<Item> implements OnChanges {
+
+  itemSearchResult: ItemSearchResult;
+
+  ngOnChanges(): void {
+    if (hasValue(this.object)) {
+      this.itemSearchResult = Object.assign(new ItemSearchResult(), {
+        indexableObject: this.object,
+      });
+    }
+  }
+
 }

src/app/shared/testing/truncatable-service.stub.ts

@@ -0,0 +1,24 @@
+import {
+  Observable,
+  of as observableOf,
+} from 'rxjs';
+
+export class TruncatableServiceStub {
+
+  isCollapsed(_id: string): Observable<boolean> {
+    return observableOf(false);
+  }
+
+  // eslint-disable-next-line no-empty, @typescript-eslint/no-empty-function
+  public toggle(_id: string): void {
+  }
+
+  // eslint-disable-next-line no-empty, @typescript-eslint/no-empty-function
+  public collapse(_id: string): void {
+  }
+
+  // eslint-disable-next-line no-empty, @typescript-eslint/no-empty-function
+  public expand(_id: string): void {
+  }
+
+}