title: Angular2+ Cucumber & Protractor intercept http calls
body: <p>I am trying to intercept http requests that my Angular2+ application makes in my cucumber tests. I tried using <code>nock</code> without success. I don't believe nock is intercepting my http calls. What am I missing from the below code?</p>
  
  <p>I have a service class that makes my REST calls:</p>
  
  <pre><code>@Injectable()
  export class RestService {
  
      getTestdata() {
          this.http.get&lt;ITestData&gt;('/info/testdata', { observe: 'response' })
              .catch(this.handleError)
              .subscribe(response =&gt; this._testData.next({ ...response.body }));
      }
  
  }
  </code></pre>
  
  <p>In my cucumber test file, I do:</p>
  
  <pre><code>import { browser, element, by, protractor } from 'protractor';
  import { of } from 'rxjs/observable/of';
  import * as testData from '../../utilities/data/testData.json';
  
  const { Before, After, Given, When, Then, defineSupportCode } = require('cucumber');
  const chai = require('chai').use(require('chai-as-promised'));
  const expect = chai.expect;
  const nock = require('nock');
  
  defineSupportCode(function ({ setDefaultTimeout }) {
      setDefaultTimeout(120 * 1000);
  });
  
  Before(() =&gt; {
      nock('http://localhost:9084').log(console.log).get('/info/testdata').reply(200, of(testdata));
  });
  
  After(() =&gt; {
      nock.cleanAll();
  });
  
  Given('something', (next: any) =&gt; {
      next();
  });
  
  When('the user loads the page', (next: any) =&gt; {
      testData['testKey1'] = false;
      testData['testKey2'] = false;
  
      browser.get('/').then(next());
  });
  
  Then('element is { displayed } to the user', (displayed: boolean, next: any) =&gt; {
      const testElement = element(by.id('test-element'));
  
      testElement .isPresent().then(response =&gt; {
          expect(response).to.equal(displayed);
          next();
      });
  });
  </code></pre>
  
  <p>As soon as the page loads using <code>browser.get('/')</code>, my components make a call to the given endpoint. I believe the call is not being intercepted because the <code>testData</code> object never has its keys changed (I change the values in the <code>When</code> step. I also did a <code>console.log</code> and it is always the original values, never <code>false</code>). </p>
  
  <p>Also, the <code>.log(console.log)</code> doesn't do anything. I never see anything printed anywhere. What am I doing wrong? </p>
  
  <p>Is there something else I can use? Any help would be appreciated, thank you!</p>