Creating components tests

Author: Guilherme Andrade Pinto

angular.json

@@ -106,6 +106,11 @@
               "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.scss"
             ],
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "src/assets/styles"
+              ]
+            },
             "scripts": []
           }
         },

ngsw-config.json

@@ -25,5 +25,19 @@
         ]
       }
     }
+  ],
+  "dataGroups": [
+    {
+      "name": "api-tech-crunch-rss-reader",
+      "urls": [
+        "http://0.0.0.0:4000/api/posts"
+      ],
+      "cacheConfig": {
+        "strategy": "freshness",
+        "timeout": "6s",
+        "maxSize": 100,
+        "maxAge": "1h"
+      }
+    }
   ]
 }

src/app/app.component.html

@@ -1,6 +1,6 @@
 <mat-toolbar color="primary">
   <mat-toolbar-row>
-    <span>TechCrunch</span>
+    <span class="toolbar-title">TechCrunch</span>
   </mat-toolbar-row>
 </mat-toolbar>
 <main class="main-container">

src/app/app.component.spec.ts

@@ -1,12 +1,14 @@
 import { TestBed, async } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
+import { MatToolbarModule } from '@angular/material';
 
 describe('AppComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [
-        RouterTestingModule
+        RouterTestingModule,
+        MatToolbarModule
       ],
       declarations: [
         AppComponent
@@ -20,16 +22,10 @@ describe('AppComponent', () => {
     expect(app).toBeTruthy();
   });
 
-  it(`should have as title 'tech-crunch-rss-reader'`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app.title).toEqual('tech-crunch-rss-reader');
-  });
-
-  it('should render title', () => {
+  it('should render title in toolbar', () => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('.content span').textContent).toContain('tech-crunch-rss-reader app is running!');
+    expect(compiled.querySelector('.toolbar-title').textContent).toContain('TechCrunch');
   });
 });

src/app/app.component.ts

@@ -5,7 +5,6 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
-  title = 'tech-crunch-rss-reader';
 
   constructor() {}
 

src/app/posts/full-post-content/full-post-content.component.html

@@ -1,7 +1,7 @@
 <div class="close-full-post-content">
-    <mat-icon (click)="close()">close</mat-icon>
+    <mat-icon (click)="close()" class="close">close</mat-icon>
 </div>
 
-<app-post-card [showDescription]="showDescription" [post]="post"></app-post-card>
+<app-post-card [showDescription]="false" [post]="post"></app-post-card>
 
-<span [innerHTML]="post.encondedContent | sanitizeHtml"></span>
+<span class="encodedContent" [innerHTML]="post.encodedContent | sanitizeHtml"></span>

src/app/posts/full-post-content/full-post-content.component.spec.ts

@@ -1,25 +1,59 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { FullPostContentComponent } from './full-post-content.component';
+import Util from '../util-post-spec';
+import { Component } from '@angular/core';
+import { MatIcon } from '@angular/material';
+import { PostCardComponent } from '../post-card/post-card.component';
+import { SanitizeHtmlPipe } from '../../shared/pipes/sanitize-html.pipe';
 
 describe('FullPostContentComponent', () => {
   let component: FullPostContentComponent;
   let fixture: ComponentFixture<FullPostContentComponent>;
 
+  const setup = () => {
+    const post = Util.createPost();
+    component.post = post;
+    fixture.detectChanges();
+    const compile = fixture.debugElement.nativeElement;
+
+    return { post, compile};
+  };
+
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ FullPostContentComponent ]
+      declarations: [ MatIcon, PostCardComponent, SanitizeHtmlPipe, FullPostContentComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(FullPostContentComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
   });
 
   it('should create', () => {
+    setup();
     expect(component).toBeTruthy();
   });
+
+  it(`should not render the post description`, () => {
+    const { post, compile} = setup();
+
+    expect(compile.querySelector('.post-card-content')).toBeNull();
+  });
+
+  it(`should render the enconded content`, () => {
+    const { post, compile} = setup();
+
+    expect(compile.querySelector('.encodedContent').textContent).toContain(post.encodedContent);
+  });
+
+  it('should trigger fullPostContentClosed event emmiter when click on close', () => {
+    spyOn(component.fullPostContentClosed, 'emit');
+
+    component.close();
+
+    expect(component.fullPostContentClosed.emit).toHaveBeenCalled();
+  });
 });

src/app/posts/full-post-content/full-post-content.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
-import { Post } from '../../shared/models/post';
+import { Post } from '../models/post';
 
 @Component({
   selector: 'app-full-post-content',
@@ -11,9 +11,6 @@ export class FullPostContentComponent {
   @Input()
   post: Post;
 
-  @Input()
-  showDescription: true;
-
   @Output()
   fullPostContentClosed: EventEmitter<Post> = new EventEmitter();
 

src/app/posts/models/post.spec.ts

@@ -0,0 +1,19 @@
+import { Post } from './post';
+
+const createPost = ({
+  title = 'Post card component',
+  link = '',
+  creator = 'Guilherme Andrade',
+  pubDate = new Date(),
+  description = 'description',
+  encodedContent = '<p>Component Tests</p>',
+  categories = ['Component Tests']
+} = {}) => {
+  return new Post(title, link, creator, pubDate, description, encodedContent, categories);
+};
+
+describe('Post', () => {
+  it('should create an instance', () => {
+    expect(createPost.call(this)).toBeTruthy();
+  });
+});

src/app/shared/models/post.ts renamed to src/app/posts/models/post.ts

@@ -4,7 +4,7 @@ export class Post {
     creator: string;
     pubDate: Date;
     description: string;
-    encondedContent: string;
+    encodedContent: string;
     categories: string[];
 
     constructor(
@@ -13,7 +13,7 @@ export class Post {
         creator: string,
         pubDate: Date,
         description: string,
-        encondedContent: string,
+        encodedContent: string,
         categories: string[]
     ) {
         this.title = title;

src/app/posts/post-card-list-header/post-card-list-header.component.spec.ts

@@ -1,25 +1,61 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { async, ComponentFixture, TestBed, tick, fakeAsync } from '@angular/core/testing';
 
 import { PostCardListHeaderComponent } from './post-card-list-header.component';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatAutocompleteModule, MatInputModule, MatFormFieldModule, MatAutocompleteSelectedEvent, MatOption } from '@angular/material';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 describe('PostCardListHeaderComponent', () => {
   let component: PostCardListHeaderComponent;
   let fixture: ComponentFixture<PostCardListHeaderComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ PostCardListHeaderComponent ]
+      declarations: [PostCardListHeaderComponent],
+      imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        MatAutocompleteModule,
+        MatFormFieldModule,
+        MatInputModule,
+        BrowserAnimationsModule
+      ]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(PostCardListHeaderComponent);
     component = fixture.componentInstance;
+    component.categories = ['Music', 'Technology'];
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it(`should emit 'selectedCategory' when 'onPanelClosing' is called`, () => {
+
+    spyOn(component.selectedCategory, 'emit');
+
+    component.onPanelClosing();
+
+    expect(component.selectedCategory.emit).toHaveBeenCalled();
+  });
+
+  it(`should emit 'selectedCategory' when 'onPanelClosing' is called`, () => {
+
+    spyOn(component.selectedCategory, 'emit');
+    const option: any = {
+      value: 'mock_value'
+    };
+    const event: MatAutocompleteSelectedEvent = new MatAutocompleteSelectedEvent(
+      null,
+      option
+    );
+    component.onSelectOption(event);
+
+    expect(component.selectedCategory.emit).toHaveBeenCalled();
+  });
 });

src/app/posts/post-card-list/post-card-list.component.html

@@ -3,7 +3,11 @@
 
     <ul class="post-card-list">
         <li *ngFor="let post of filteredPosts">
-            <app-post-card [post]="post" [showDescription]="true" (click)="selectPost(post)"></app-post-card>
+            <app-post-card 
+                [post]="post" 
+                [showDescription]="true" 
+                (click)="selectPost(post)">
+            </app-post-card>
         </li>
     </ul>
 </section>

src/app/posts/post-card-list/post-card-list.component.spec.ts

@@ -1,25 +1,89 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { PostCardListComponent } from './post-card-list.component';
+import Util from '../util-post-spec';
+import { PostCardListHeaderComponent } from '../post-card-list-header/post-card-list-header.component';
+import { PostCardComponent } from '../post-card/post-card.component';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatAutocompleteModule, MatFormField, MatFormFieldModule, MatInputModule } from '@angular/material';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { By } from '@angular/platform-browser';
 
 describe('PostCardListComponent', () => {
   let component: PostCardListComponent;
   let fixture: ComponentFixture<PostCardListComponent>;
 
+  const setup = () => {
+    const posts = [{ title: 'First Post', categories: ['Music'] }, { title: 'Music', categories: ['Technology'] }]
+      .map(postData => Util.createPost(postData));
+    component.posts = posts;
+    fixture.detectChanges();
+
+    return posts;
+  };
+
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ PostCardListComponent ]
+      declarations: [PostCardListHeaderComponent, PostCardComponent, PostCardListComponent],
+      imports: [FormsModule, ReactiveFormsModule, MatAutocompleteModule, MatFormFieldModule, MatInputModule, BrowserAnimationsModule]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(PostCardListComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
   });
 
   it('should create', () => {
+    setup();
     expect(component).toBeTruthy();
   });
+
+  it(`should initialize 'filteredPosts' and 'categories'`, () => {
+    const posts = setup();
+
+    expect(component.filteredPosts).toEqual(posts);
+    expect(component.categories).toEqual( ['Music', 'Technology'] );
+  });
+
+  it(`should render the posts`, () => {
+    const posts = setup();
+    const debugElement = fixture.debugElement.queryAll(By.css('.post-card'));
+
+    expect(debugElement.length).toEqual(2);
+  });
+
+  it(`should emit 'postCardSelected' when 'selectPost' is called`, () => {
+    const posts = setup();
+
+    spyOn(component.postCardSelected, 'emit');
+
+    component.selectPost(posts[1]);
+
+    expect(component.postCardSelected.emit).toHaveBeenCalled();
+  });
+
+  it(`should emit 'postCardListFiltered' when 'onSelectCategory' is called`, () => {
+    const posts = setup();
+
+    spyOn(component.postCardListFiltered, 'emit');
+
+    component.onSelectCategory('Technology');
+
+    expect(component.postCardListFiltered.emit).toHaveBeenCalled();
+  });
+
+  it(`should filter posts`, () => {
+    const posts = setup();
+
+    spyOn(component.postCardListFiltered, 'emit');
+
+    component.onSelectCategory('Technology');
+
+    fixture.detectChanges();
+
+    const debugElement = fixture.debugElement.queryAll(By.css('.post-card'));
+    expect(debugElement.length).toEqual(1);
+  });
 });

src/app/posts/post-card-list/post-card-list.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
-import { Post } from '../../shared/models/post';
+import { Post } from '../models/post';
 
 @Component({
   selector: 'app-post-card-list',