Angular2+ Usage

[MSaIim]

I am trying to make this work for an Angular2+ project, but it doesn't seem to be working. Is it not possible?

I have a service class that makes my REST calls:

@Injectable()
export class RestService {

    getTestdata() {
        this.http.get<ITestData>('/info/testdata', { observe: 'response' })
              .catch(this.handleError)
              .subscribe(response => this._testData.next({ ...response.body }));
    }

}

In my cucumber test file, I do:

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 httpbackend = require('httpbackend');

let backend: any;

defineSupportCode(function ({ setDefaultTimeout }) {
    setDefaultTimeout(120 * 1000);
});

Before(() => {
    backend = new httpbackend(browser);
});

After(() => {
    backend.clear();
});

Given('something', (next: any) => {
    next();
});

When('the user loads the page', (next: any) => {
    testData['testKey1'] = false;
    testData['testKey2'] = false;
    backend.whenGET('/info/testdata').respond(of(testData));

    browser.get('/').then(next());
});

Then('element is { displayed } to the user', (displayed: boolean, next: any) => {
    const testElement = element(by.id('test-element'));

    testElement .isPresent().then(response => {
        expect(response).to.equal(displayed);
        next();
    });
});

However, the testElement.isPresent() is always true because it is loading the original JSON data from when my components make the call (testElement should not show if the testKeys are false). I put a console.log inside the respond function, and I see the testData has changed the two values I set in the When step.

How do I make this work? Is there something I am missing?