feat(components): simple cmp test with dep on service

Author: juristr

README.md

@@ -34,8 +34,8 @@ All the scenarios are listed here below and nicely linked to the source file.
       _Test dynamic CSS styles using custom Jasmine matchers._
     * [mocking nested components](./src/app/components/nested.component.spec.ts)  
       _Learn how to mock out nested components which you don't want to necessarily test_
-    * [async pipes within templates](./src/app/components/async-stream.component.spec.ts)  
-      _Shows how to correctly resolve async pipes and then verify they properly render in the HTML_
+    * [testing component with service deps](./src/app/components/component-mock-external.component.spec.ts)  
+      _Simple test of component logic by manually instantiating the component_
 1.  [**Testing Services**](./src/app/services)
     * [Simple stateless function](./src/app/services/greeting.service.spec.ts)  
       _Learn about different ways of injecting a service into a test case as well as how to test service methods._
@@ -45,6 +45,8 @@ All the scenarios are listed here below and nicely linked to the source file.
       _Learn how to mock external dependencies, such as use the `MockBackend` provided by Angular to respond to http calls._
 1.  [**Testing Pipes**](./src/app/pipes)
     * [custom filter pipe](./src/app/pipes/filter.pipe.spec.ts)
+    * [async pipes within templates](./src/app/components/async-stream.component.spec.ts)  
+      _Shows how to correctly resolve async pipes and then verify they properly render in the HTML_
 1.  [**Custom Matchers and Utilities**](./src/app/utils)
     * [Create your own custom Jasmine matchers](./src/app/utils/custom-matchers.ts)
 

src/app/components/component-mock-external.component.spec.ts

@@ -0,0 +1,37 @@
+/* tslint:disable:no-unused-variable */
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { WithExternalServiceComponent } from './component-mock-external.component';
+import { LanguageService, LanguageEnum } from './language.service';
+
+describe('ContentProjectionComponent', () => {
+  let component: WithExternalServiceComponent;
+  let langService: LanguageService;
+
+  beforeEach(() => {
+    langService = new LanguageService();
+    component = new WithExternalServiceComponent(langService);
+  });
+
+  afterEach(() => {
+    langService = null;
+    component = null;
+  });
+
+  it('should greet in italian when the lang is IT', () => {
+    langService.setCurrentLanguage(LanguageEnum.IT);
+    expect(component.getGreeting()).toBe('Ciao');
+  });
+
+  it('should greet in german when the lang is DE', () => {
+    spyOnProperty(langService, 'currentLang', 'get').and.returnValue(
+      LanguageEnum.DE
+    );
+    expect(component.getGreeting()).toBe('Hallo');
+  });
+
+  it('should greet in english by default', () => {
+    expect(component.getGreeting()).toBe('Hi');
+  });
+});

src/app/components/component-mock-external.component.ts

@@ -0,0 +1,22 @@
+import { LanguageService, LanguageEnum } from './language.service';
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-greeting-component',
+  template: `
+        {{ getGreeting() }}!
+    `
+})
+export class WithExternalServiceComponent {
+  constructor(private langService: LanguageService) {}
+
+  getGreeting() {
+    if (this.langService.currentLang === LanguageEnum.DE) {
+      return 'Hallo';
+    } else if (this.langService.currentLang === LanguageEnum.IT) {
+      return 'Ciao';
+    } else {
+      return 'Hi';
+    }
+  }
+}

src/app/components/language.service.ts

@@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core';
+
+export enum LanguageEnum {
+  DE = 'de',
+  IT = 'it',
+  EN = 'en'
+}
+
+@Injectable()
+export class LanguageService {
+  private _currentLang = LanguageEnum.EN;
+
+  get currentLang() {
+    return this._currentLang;
+  }
+
+  setCurrentLanguage(lang: LanguageEnum) {
+    this._currentLang = lang;
+  }
+}