Content Page refactor

cer-graphql/validateUnauthenticatedQuery.ts

@@ -42,7 +42,6 @@ const GRAPHQL_INTROSPECTION_FIELDS = [
     'linkedFrom',
     'slug',
     'banner',
-    'icon',
     ...GRAPHQL_INTROSPECTION_FIELDS
   ]);
 

research-hub-web/src/app/components/activities-page/activities-page.component.spec.ts

@@ -7,7 +7,7 @@ import { StageCollection, AllStagesGQL } from '@graphql/schema';
 import { Observable, of } from 'rxjs';
 import { MockComponent, MockProvider } from 'ng-mocks';
 import { PageTitleService } from '@services/page-title.service';
-
+import { RouterTestingModule } from '@angular/router/testing';
 
 describe('ActivitiesPageComponent', () => {
   let component: ActivitiesPageComponent;
@@ -49,7 +49,8 @@ describe('ActivitiesPageComponent', () => {
       ],
       imports: [
         HttpClientTestingModule,
-        ApolloTestingModule
+        ApolloTestingModule,
+        RouterTestingModule.withRoutes([])
       ],
       providers: [
         MockProvider(SearchService),

research-hub-web/src/app/components/articles/article-list/article-list.component.html

@@ -0,0 +1 @@
+<app-collection-list [collection]="articles"></app-collection-list>

research-hub-web/src/app/components/articles/article-list/article-list.component.spec.ts

@@ -0,0 +1,77 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ApolloTestingController, ApolloTestingModule } from 'apollo-angular/testing';
+import { ArticleListComponent } from './article-list.component';
+import { SharedModule } from '@components/shared/app.shared.module';
+import { MockComponent, MockModule, MockProvider } from 'ng-mocks';
+import { RouterTestingModule } from '@angular/router/testing';
+import { PageTitleService } from '@services/page-title.service';
+import { CollectionListComponent } from '@app/components/shared/collection-list/collection-list.component';
+import { ArticleCollection } from '@app/graphql/schema';
+import { Observable, of } from 'rxjs';
+
+describe('ArticleListComponent', () => {
+  let component: ArticleListComponent;
+  let fixture: ComponentFixture<ArticleListComponent>;
+  let controller: ApolloTestingController;
+
+  const mockAllArticles$: Observable<ArticleCollection> = of({
+    'items': [
+      {
+        '__typename': 'Article',
+        'slug': 'first-article',
+        'title': 'First article',
+        'summary': 'A brief description of the first article. I\'m writing some more stuff here just so that this seems a little more realistic. Sam was here. Have a good day.',
+        'ssoProtected': false,
+        'searchable': true
+      },
+      {
+        '__typename': 'Article',
+        'slug': 'top-secret-article',
+        'title': 'Top Secret Article',
+        'summary': 'For testing SSO',
+        'ssoProtected': true,
+        'searchable': true
+      }
+    ],
+    '__typename': 'ArticleCollection'
+  } as ArticleCollection);
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [
+        ArticleListComponent,
+        MockComponent(CollectionListComponent)
+      ],
+      imports: [
+        ApolloTestingModule,
+        MockModule(SharedModule),
+        RouterTestingModule.withRoutes([])
+      ],
+      providers: [
+        MockProvider(PageTitleService)
+      ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    controller = TestBed.inject(ApolloTestingController);
+    fixture = TestBed.createComponent(ArticleListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('Should get all articles', () => {
+    spyOn(component, 'loadContent').and.returnValue(mockAllArticles$);
+
+    fixture.whenStable().then(() => {
+      component.loadContent().subscribe(res => {
+        expect(res.items.length).toBe(1);
+      });
+    })
+  });
+});

research-hub-web/src/app/components/articles/article-list/article-list.component.ts

@@ -0,0 +1,40 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { AllArticlesGQL, ArticleCollection } from '@app/graphql/schema';
+import { Observable, Subscription } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { PageTitleService } from '@services/page-title.service';
+
+@Component({
+  selector: 'app-article-list',
+  templateUrl: './article-list.component.html',
+  styleUrls: ['./article-list.component.scss']
+})
+export class ArticleListComponent implements OnInit, OnDestroy {
+  public articles: ArticleCollection;
+  public title: string = 'Article Collection';
+
+  private subscription = new Subscription();
+
+  constructor(
+    private allArticlesGQL: AllArticlesGQL,
+    public pageTitleService: PageTitleService
+  ) { }
+
+  ngOnInit(): void {
+    this.pageTitleService.title = this.title;
+    this.subscription.add(
+      this.loadContent().subscribe((collection) => this.articles = collection)
+    );
+  }
+
+  public loadContent(): Observable<ArticleCollection> {
+    return this.allArticlesGQL.fetch().pipe(
+      map((result) => result.data.articleCollection as ArticleCollection)
+    )
+  }
+
+  ngOnDestroy(): void {
+    this.subscription.unsubscribe();
+  }
+
+}

research-hub-web/src/app/components/articles/articles.component.html → research-hub-web/src/app/components/articles/article/article.component.html

@@ -1,22 +1,8 @@
-<!-- If we're displaying a collection of articles-->
-<div
-  *ngIf="allArticles$ | async as allArticles"
-  class="site-padding margin-bottom top-padding"
-  ngClass.lt-md="site-padding-mobile margin-bottom top-padding"
->
-  <app-collection-list [collection]="allArticles"></app-collection-list>
-</div>
-
-<div id="article-container" *ngIf="article | async as article">
+<div id="article-container" *ngIf="article">
   <div
     class="banner-container"
-    [ngClass]="
-      bannerImageUrl === undefined
-        ? ''
-        : isMobile
-        ? 'mobile-banner'
-        : 'standard-banner'
-    "
+    [ngClass]="{ 'standard-banner': bannerImageUrl }"
+    [ngClass.xs]="{ 'mobile-banner': bannerImageUrl }"
     [ngStyle]="
       bannerImageUrl && { 'background-image': 'url(' + bannerImageUrl + ')' }
     "
@@ -87,10 +73,7 @@
   </div>
 
   <div class="site-padding margin-bottom" ngClass.lt-md="site-padding-mobile">
-    <app-breadcrumbs
-      [contentItem]="parentSubHubs"
-      [title]="article.title"
-    ></app-breadcrumbs>
+    <app-breadcrumbs [title]="article.title"></app-breadcrumbs>
 
     <div fxLayout="row" fxLayoutAlign="space-around" fxLayout.lt-lg="column">
       <!-- Article Body -->
@@ -124,7 +107,8 @@ <h3 *ngIf="article?.relatedContactsCollection.items.length > 0">
           <hr />
         </h3>
         <div
-          fxLayout.lg="column"
+          fxLayout="column"
+          fxLayoutGap="0px"
           fxLayout.lt-lg="row wrap"
           fxLayoutGap.lt-lg="25px"
           fxLayout.lt-sm="column"
@@ -142,7 +126,8 @@ <h3 *ngIf="article?.relatedDocsCollection.items.length > 0">
         </h3>
         <div
           id="documents"
-          fxLayout.lg="column"
+          fxLayout="column"
+          fxLayoutGap="0px"
           fxLayout.lt-lg="row wrap"
           fxLayoutGap.lt-lg="25px"
           fxLayout.lt-sm="column"
@@ -158,7 +143,8 @@ <h3 *ngIf="article?.relatedOrgsCollection.items.length > 0">
           <hr />
         </h3>
         <div
-          fxLayout.lg="column"
+          fxLayout="column"
+          fxLayoutGap="0px"
           fxLayout.lt-lg="row wrap"
           fxLayoutGap.lt-lg="25px"
           fxLayout.lt-sm="column"
@@ -184,7 +170,8 @@ <h3>
         </h3>
         <div
           id="you-might-be-interested-in"
-          fxLayout.lg="column"
+          fxLayout="column"
+          fxLayoutGap="0px"
           fxLayout.lt-lg="row wrap"
           fxLayoutGap.lt-lg="25px"
           fxLayout.lt-sm="column"

research-hub-web/src/app/components/articles/articles.component.spec.ts → research-hub-web/src/app/components/articles/article/article.component.spec.ts

@@ -1,44 +1,23 @@
-import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
-import { PageTitleService } from '../../services/page-title.service';
-import { ArticlesComponent } from './articles.component';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { PageTitleService } from '@services/page-title.service';
+import { ArticleComponent } from './article.component';
 import { ApolloTestingController, ApolloTestingModule } from 'apollo-angular/testing';
-import { RouterModule, ActivatedRoute, convertToParamMap, Router } from '@angular/router';
-import { By } from '@angular/platform-browser';
+import { ActivatedRoute } from '@angular/router';
 import { Observable, of } from 'rxjs';
-import { ArticleCollection, AllArticlesGQL, Article } from '@graphql/schema';
+import { Article } from '@graphql/schema';
 import { CommonModule } from '@angular/common';
 import { MaterialModule } from '@app/app.material.module';
 import { SharedModule } from '@components/shared/app.shared.module';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterTestingModule } from '@angular/router/testing';
-import { MockModule, MockProvider } from 'ng-mocks';
+import { MockComponent, MockModule, MockProvider } from 'ng-mocks';
+import { BreadcrumbsComponent } from '@app/components/shared/breadcrumbs/breadcrumbs.component';
+import { ArticleListComponent } from '../article-list/article-list.component';
 
-describe('ArticlesComponent', () => {
-  let component: ArticlesComponent;
-  let appComponentService: PageTitleService;
-  let fixture: ComponentFixture<ArticlesComponent>;
+describe('ArticleComponent', () => {
+  let component: ArticleComponent;
+  let fixture: ComponentFixture<ArticleComponent>;
   let controller: ApolloTestingController;
-  const mockAllArticles$: Observable<ArticleCollection> = of({
-    'items': [
-      {
-        '__typename': 'Article',
-        'slug': 'first-article',
-        'title': 'First article',
-        'summary': 'A brief description of the first article. I\'m writing some more stuff here just so that this seems a little more realistic. Sam was here. Have a good day.',
-        'ssoProtected': false,
-        'searchable': true
-      },
-      {
-        '__typename': 'Article',
-        'slug': 'top-secret-article',
-        'title': 'Top Secret Article',
-        'summary': 'For testing SSO',
-        'ssoProtected': true,
-        'searchable': true
-      }
-    ],
-    '__typename': 'ArticleCollection'
-  } as ArticleCollection);
 
   const mockArticle$: Observable<Article> = of({
     'title': 'First article',
@@ -238,12 +217,6 @@ describe('ArticlesComponent', () => {
     },
     'slug': 'first-article',
     'searchable': true,
-    'icon': {
-      'title': 'Pippy',
-      'description': 'Sam\'s dog Pippy',
-      'url': 'https://imgs.ctfassets.net/vbuxn5csp0ik/014fpqFg0KmnP8NWc9Jyxe/0a1a14a6a0dd438443f70d5f917568fc/Screen_Shot_2020-07-23_at_3.12.46_PM.png',
-      '__typename': 'Asset'
-    },
     'relatedItemsCollection': {
       'items': [
         {
@@ -264,16 +237,21 @@ describe('ArticlesComponent', () => {
     '__typename': 'Article'
   } as unknown as Article);
 
-  beforeEach(waitForAsync(() => {
+  beforeEach(waitForAsync (() => {
     TestBed.configureTestingModule({
-      declarations: [ArticlesComponent],
+      declarations: [
+        ArticleComponent,
+        MockComponent(BreadcrumbsComponent)
+      ],
       imports: [
         ApolloTestingModule,
         MockModule(CommonModule),
         MockModule(MaterialModule),
         MockModule(SharedModule),
         MockModule(BrowserAnimationsModule),
-        RouterTestingModule.withRoutes([])
+        RouterTestingModule.withRoutes([
+          { path: 'article/list', component: ArticleListComponent }
+        ])
       ], providers: [
         MockProvider(PageTitleService)
       ]
@@ -282,12 +260,11 @@ describe('ArticlesComponent', () => {
 
   beforeEach(() => {
     controller = TestBed.inject(ApolloTestingController);
-    fixture = TestBed.createComponent(ArticlesComponent);
+    fixture = TestBed.createComponent(ArticleComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
 
-
   afterEach(() => {
     fixture.destroy();
   });
@@ -296,29 +273,28 @@ describe('ArticlesComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('Should get all articles', () => {
-    spyOn(component, 'getAllArticles').and.returnValue(mockAllArticles$);
-    component.getAllArticles().subscribe(res => {
-      expect(res).toBeTruthy();
-    });
-  })
-
   describe('When a url slug is present', async () => {
+    const testSlug: string = 'first-article';
+
     beforeEach(() => {
       controller = TestBed.inject(ApolloTestingController);
-      fixture = TestBed.createComponent(ArticlesComponent);
+      fixture = TestBed.createComponent(ArticleComponent);
       component = fixture.componentInstance;
       TestBed.inject(ActivatedRoute).params = of({
-        slug: 'first-article'
+        slug: testSlug
       });
       fixture.detectChanges();
+      component.ngOnInit();
     });
 
     it('Should get a single article data', () => {
       spyOn(component, 'getArticleBySlug').and.returnValue(mockArticle$);
-      component.getArticleBySlug(component.slug).subscribe(res => {
-        expect(res.slug).toEqual('first-article');
-      });
+
+      fixture.whenStable().then(() => {
+        component.getArticleBySlug(testSlug).subscribe(res => {
+          expect(res.slug).toEqual(testSlug);
+        });
+      })
     });
   });
 });