title: CucumberJS, Protractor, and Angular 5 mock out services
body: <p>I am trying to make some cucumber test cases using protractor with my angular 5 application. I am not sure how to mock my services. I want my components to use my mock service whenever they call functions from them.</p>
  
  <p>Here's a simple example:</p>
  
  <p>foobar.component.ts</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { TestService } from '../../../services/test.service';
  
  @Component({
      selector: 'app-test',
      templateUrl: './test.component.html',
      styleUrls: ['./test.component.css']
  })
  export class TestComponent implements OnInit {
      myDataObject: any;
  
      constructor(private testService: TestService) {
          this.myDataObject = this.testService.getTestObject();
      }
  
      ngOnInit() {}
  }
  </code></pre>
  
  <p>test.service.ts</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  
  @Injectable()
  export class TestService {
      constructor() {}
  
      getTestObject(): any {
          return {
              'foo': 1,
              'bar': 2
          }
      }
  }
  </code></pre>
  
  <p>foobar.step.ts</p>
  
  <pre><code>import { browser, element, by } from 'protractor';
  const { Before, Given, When, Then, defineSupportCode } = require('cucumber');
  const chai = require('chai').use(require('chai-as-promised'));
  const expect = chai.expect;
  
  defineSupportCode(function ({ setDefaultTimeout }) {
      setDefaultTimeout(120 * 1000);
  });
  
  Before(() =&gt; {
      // Setup a mock service and use the values I set here. In this case I would want to mock out whatever TestService.getTestObject() returns and have my component use the mock values.
  }
  
  Given('some test here', (next) =&gt; {
      next();
  });
  
  When('the page loads', (next) =&gt; {
      browser.get('/').then(function () {
          next();
      });
  });
  
  Then('some text here', (next) =&gt; {
      // Use mock values and create expect statement to see if something was shown on the page.
  });
  </code></pre>
  
  <p>The reason I want to do this is because my templates depend on the values from the objects my services return to determine if some <code>div</code> blocks should be shown or not. </p>
  
  <p>How can I mock my service and have my component use it in my protractor tests? Any help would be appreciated. Thank you!</p>