Failed: Expected one matching operation for criteria "Match DocumentNode", found none

I am trying to write a test for an angular service which I am using with grahpql & Apollo, I am trying to do the implementation as instructed here: Apollo Testing. The service is injected in a component which subscribes to the what's returned from the service.

I'm receiving these 2 errors:

1. Failed: Expected one matching operation for criteria "Match DocumentNode", found none.
2. NullInjectorError: No provider for HttpClient! - eventhough I added HttpClientTestingModule to the imports.

Component:

import { RulesService } from './rules.service'
import { Consequent, Condition } from './../../models/rules'
import { ModalComponent } from './components/modal/modal.component'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
import { Component, OnInit, OnDestroy } from '@angular/core'
import { RuleDisplayService } from './services/rule-display.service'
import { DataService } from '../data/data.service'

interface Rule {
    id: string,
    conditions: Condition[]
    consequent: Consequent
}
@Component({
  selector: 'lib-a-rate-rules',
  templateUrl: './rules.component.html',
  styleUrls: [
    './rules.component.scss',
  ]
})

export class RulesComponent implements OnInit {

  rules
  /**
   * Creates an instance of RulesComponent.
   */
  constructor (
    public rulesService: RulesService,
    public ruleDisplayService: RuleDisplayService,
    private modalService: NgbModal,
  ) {}

  ngOnInit(): void {
    this.rulesService.loadRules()
      .valueChanges.subscribe(
        ({data}) => {
          this.rules = data as Rule
        }
      )
  }

}

Service:

import { Injectable } from '@angular/core'
import gql from 'graphql-tag'
import { PlatformGraphQLService } from 'platform-graphql'
import { Apollo } from 'apollo-angular'

export const GET_RULE_QUERY = gql`
  query GetRule($id: ID!) {
    getRule(id: $id) {
      conditions {
        glItemType
        operation
        value
      }
      consequent {
        ... on FASelection {
          faPool {
            code
            name
            level
          }
          faSubpool {
            code
            name
          }
        }
        ... on MTDCSelection {
          mtdcCategory
        }
        ... on Exclusion {
          isExluded
        }
      }
    }
  }
`


@Injectable({
  providedIn: 'root',
})
export class RulesService {

  private apollo: Apollo
  constructor(
    private platformGraphQLService: PlatformGraphQLService,
  ) {
    this.apollo = this.platformGraphQLService
      .createClient('ws://localhost:5000/graphql')
  }

  loadRule(ruleID: string) {
    return this.apollo.watchQuery({
      query: GET_RULE_QUERY,
      variables: {
        id: ruleID
      }
    })
  }


}

Spec file:

import { PlatformGraphQLService } from 'platform-graphql'
import { TestBed, ComponentFixture } from '@angular/core/testing'
import { RulesService, GET_RULE_QUERY } from './rules.service'
import {
  ApolloTestingModule,
  ApolloTestingController
} from 'apollo-angular/testing'
import { async } from '@angular/core/testing'
import { HttpClientTestingModule } from '@angular/common/http/testing'
import { RulesComponent } from './rules.component'

describe('RulesService', () => {
  let controller: ApolloTestingController
  let fixure: ComponentFixture<RulesComponent>
  let component: RulesComponent
  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [
        RulesComponent
      ],
      imports: [
        ApolloTestingModule,
        HttpClientTestingModule,
      ],
      providers: [
        PlatformGraphQLService,
      ],
    })
    controller = TestBed.get(ApolloTestingController)
  })

  xit('should be created', async(() => {
    const service: RulesService = TestBed.get(RulesService)
    expect(service).toBeTruthy()
  }))

  it('should return a rule from server', async(() => {
    fixure = TestBed.createComponent(RulesComponent)
    component = fixure.componentInstance
    component.ngOnInit()
    fixure.detectChanges()

    component.rulesService.loadRules()
      .valueChanges.subscribe(() => {
        expect(op.operation.variables.consequent.isExluded).toEqual(true)
      })

    const op = controller.expectOne(GET_RULE_QUERY)

    op.flush({
      data: {
        getRule: {
          'conditions': [
            {
              'glItemType': 'DEPARTMENT',
              'operation': 'LEQ',
              'value': 1300,
            },
            {
              'glItemType': 'SUBDEPARTMENT',
              'operation': 'GEQ',
              'value': 4805,
            }
          ],
          'consequent': {
            'isExluded': true,
          },
        }
      }
    })

    controller.verify()
  }))

  afterEach(() => {
    controller.verify()
  })


})