108588: Created separate section for communities & collections browse sections

Author: alexandrevryghem

src/app/collection-page/collection-page-routing.module.ts

@@ -22,7 +22,7 @@ import { LinkMenuItemModel } from '../shared/menu/menu-item/models/link.model';
 import { ThemedCollectionPageComponent } from './themed-collection-page.component';
 import { MenuItemType } from '../shared/menu/menu-item-type.model';
 import { DSOEditMenuResolver } from '../shared/dso-page/dso-edit-menu.resolver';
-import { BrowseBySwitcherComponent } from '../browse-by/browse-by-switcher/browse-by-switcher.component';
+import { ComcolBrowseByComponent } from '../shared/comcol/sections/comcol-browse-by/comcol-browse-by.component';
 import { BrowseByGuard } from '../browse-by/browse-by-guard';
 import { BrowseByI18nBreadcrumbResolver } from '../browse-by/browse-by-i18n-breadcrumb.resolver';
 import { CollectionRecentlyAddedComponent } from './sections/recently-added/collection-recently-added.component';
@@ -78,7 +78,7 @@ import { CollectionRecentlyAddedComponent } from './sections/recently-added/coll
               {
                 path: 'browse/:id',
                 pathMatch: 'full',
-                component: BrowseBySwitcherComponent,
+                component: ComcolBrowseByComponent,
                 canActivate: [BrowseByGuard],
                 resolve: {
                   breadcrumb: BrowseByI18nBreadcrumbResolver,

src/app/community-page/community-page-routing.module.ts

@@ -18,7 +18,7 @@ import { DSOEditMenuResolver } from '../shared/dso-page/dso-edit-menu.resolver';
 import { SubComColSectionComponent } from './sections/sub-com-col-section/sub-com-col-section.component';
 import { BrowseByI18nBreadcrumbResolver } from '../browse-by/browse-by-i18n-breadcrumb.resolver';
 import { BrowseByGuard } from '../browse-by/browse-by-guard';
-import { BrowseBySwitcherComponent } from '../browse-by/browse-by-switcher/browse-by-switcher.component';
+import { ComcolBrowseByComponent } from '../shared/comcol/sections/comcol-browse-by/comcol-browse-by.component';
 
 @NgModule({
   imports: [
@@ -61,7 +61,7 @@ import { BrowseBySwitcherComponent } from '../browse-by/browse-by-switcher/brows
               {
                 path: 'browse/:id',
                 pathMatch: 'full',
-                component: BrowseBySwitcherComponent,
+                component: ComcolBrowseByComponent,
                 canActivate: [BrowseByGuard],
                 resolve: {
                   breadcrumb: BrowseByI18nBreadcrumbResolver,

src/app/shared/comcol/comcol.module.ts

@@ -16,6 +16,8 @@ import { ComcolRoleComponent } from './comcol-forms/edit-comcol-page/comcol-role
 import { SharedModule } from '../shared.module';
 import { FormModule } from '../form/form.module';
 import { UploadModule } from '../upload/upload.module';
+import { ComcolBrowseByComponent } from './sections/comcol-browse-by/comcol-browse-by.component';
+import { BrowseByModule } from '../../browse-by/browse-by.module';
 
 const COMPONENTS = [
   ComcolPageContentComponent,
@@ -29,7 +31,8 @@ const COMPONENTS = [
   ComcolPageBrowseByComponent,
   ThemedComcolPageBrowseByComponent,
   ComcolRoleComponent,
-  ThemedComcolPageHandleComponent
+  ThemedComcolPageHandleComponent,
+  ComcolBrowseByComponent,
 ];
 
 @NgModule({
@@ -41,6 +44,7 @@ const COMPONENTS = [
     FormModule,
     SharedModule,
     UploadModule,
+    BrowseByModule,
   ],
   exports: [
     ...COMPONENTS,

src/app/shared/comcol/sections/comcol-browse-by/comcol-browse-by.component.html

@@ -0,0 +1,2 @@
+<ds-browse-by-switcher [browseByType]="browseByType$ | async">
+</ds-browse-by-switcher>

src/app/shared/comcol/sections/comcol-browse-by/comcol-browse-by.component.scss

@@ -0,0 +1,70 @@
+// eslint-disable-next-line max-classes-per-file
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComcolBrowseByComponent } from './comcol-browse-by.component';
+import { rendersBrowseBy } from '../../../../browse-by/browse-by-switcher/browse-by-decorator';
+import { BrowseByDataType } from '../../../../browse-by/browse-by-switcher/browse-by-data-type';
+import { Component } from '@angular/core';
+import { AbstractBrowseByTypeComponent } from '../../../../browse-by/abstract-browse-by-type.component';
+import { BrowseDefinition } from '../../../../core/shared/browse-definition.model';
+import { ActivatedRouteStub } from '../../../testing/active-router.stub';
+import { ThemeService } from '../../../theme-support/theme.service';
+import { getMockThemeService } from '../../../mocks/theme-service.mock';
+import { BrowseBySwitcherComponent } from '../../../../browse-by/browse-by-switcher/browse-by-switcher.component';
+import { DynamicComponentLoaderDirective } from '../../../abstract-component-loader/dynamic-component-loader.directive';
+import { ActivatedRoute } from '@angular/router';
+import { By } from '@angular/platform-browser';
+
+@rendersBrowseBy('ComcolBrowseByComponent' as BrowseByDataType)
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: '',
+  template: '<span id="ComcolBrowseByComponent"></span>',
+})
+class BrowseByTestComponent extends AbstractBrowseByTypeComponent {
+}
+
+class TestBrowseByPageBrowseDefinition extends BrowseDefinition {
+  getRenderType(): BrowseByDataType {
+    return 'ComcolBrowseByComponent' as BrowseByDataType;
+  }
+}
+
+describe('ComcolBrowseByComponent', () => {
+  let component: ComcolBrowseByComponent;
+  let fixture: ComponentFixture<ComcolBrowseByComponent>;
+
+  let activatedRoute: ActivatedRouteStub;
+  let themeService: ThemeService;
+
+  beforeEach(async () => {
+    activatedRoute = new ActivatedRouteStub();
+    themeService = getMockThemeService();
+
+    await TestBed.configureTestingModule({
+      declarations: [
+        ComcolBrowseByComponent,
+        BrowseBySwitcherComponent,
+        DynamicComponentLoaderDirective,
+      ],
+      providers: [
+        BrowseByTestComponent,
+        { provide: ActivatedRoute, useValue: activatedRoute },
+        { provide: ThemeService, useValue: themeService },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ComcolBrowseByComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create the correct browse section based on the route browseDefinition', () => {
+    activatedRoute.testData = {
+      browseDefinition: new TestBrowseByPageBrowseDefinition(),
+    };
+
+    fixture.detectChanges();
+
+    expect(component).toBeTruthy();
+    expect(fixture.debugElement.query(By.css('#ComcolBrowseByComponent'))).not.toBeNull();
+  });
+});

src/app/shared/comcol/sections/comcol-browse-by/comcol-browse-by.component.spec.ts

@@ -0,0 +1,31 @@
+import { Component, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+import { BrowseByDataType } from '../../../../browse-by/browse-by-switcher/browse-by-data-type';
+import { ActivatedRoute } from '@angular/router';
+import { map } from 'rxjs/operators';
+import { BrowseDefinition } from '../../../../core/shared/browse-definition.model';
+
+@Component({
+  selector: 'ds-comcol-browse-by',
+  templateUrl: './comcol-browse-by.component.html',
+  styleUrls: ['./comcol-browse-by.component.scss'],
+})
+export class ComcolBrowseByComponent implements OnInit {
+
+  browseByType$: Observable<BrowseByDataType>;
+
+  constructor(
+    protected route: ActivatedRoute,
+  ) {
+  }
+
+  /**
+   * Fetch the correct browse-by component by using the relevant config from the route data
+   */
+  ngOnInit(): void {
+    this.browseByType$ = this.route.data.pipe(
+      map((data: { browseDefinition: BrowseDefinition }) => data.browseDefinition.getRenderType()),
+    );
+  }
+
+}