Angular 7 testing public methods dependent on private ones

I am using angular 7.1 and Jasmine to test my components. I am trying to write some tests but this one seems to be too much for me.

Simplified class I am trying to test:

import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'a',
  templateUrl: './a.html',
  styleUrls: ['./a.scss']
}
export class A implements OnInit {
  constructor(private http: HttpClient) {}
  private privateState: State;
  public publicState: State2;      

  ngOnInit() {
      this.http.get(this.GetUrl()).subscribe((x) => {
      this.privateState = x['whatever'];
    });
  }

  private hiddenComplexFunction() {
    this.publicState = this.privateState.something;
  }

  public testedFunction() {
    //someComplex Code
    this.hiddenComplexFunction();
  }
}

What I've tried:

• I tried to set up the private variable like A.['privateState'] but did not work

• I tried to use SpyOn http get but had the same issue with having to set up a private property

• I tried to user HttpClientTestingModule but I had the same issue as with the previous point

• lastly I tried to make privateState protected and test it in the following way:

   import { HttpClientTestingModule } from '@angular/common/http/testing';
   import { async, ComponentFixture, TestBed } from '@angular/core/testing';
  
   class AMock extends A {
     ngOnInit() {
       //privateState is now protected
       this.privateState = mockedState;
     }
   }
   describe('A', () => {
     let component: AMock;
     let fixture: ComponentFixture<AMock>;
  
     beforeEach(async(() => {
       TestBed.configureTestingModule({
         imports: [HttpClientTestingModule],
         declarations: [AMock]
       })
         .compileComponents().catch();
     }));
  
     beforeEach(() => {
       fixture = TestBed.createComponent(AMock);
       component = fixture.componentInstance;
     });
  
     it('testedFunction should set up public state correctly', () => {
       component.testedFunction();
  
       expect(component.publicState).toEqual(mockedState.something);
     });
  

the last point did not work with an error coming back as Cannot read property 'testedFunction' of undefined after running ng test command.

I don't know which way would be the right way of testing this. I know I can make hiddenComplexFunction public and all my problems go away and also I don't like the fact that because of tests I would have to change the access modifiers (from private to protected like in the mocked example which just seems all wrong to me).

There's a lot going on in your question, so I'll start with things I can readily see.

We can start with your core Component code. In your testedFunction(), call this.hiddenComplexFunction(). You want the instance version of the function, so need to add ""this."" to it. It's perfectly appropriate, and you wouldn't want to directly test the private functions/private properties anyway.

Next, I'm guessing you wanted this code

this.state = x['whatever'];

to set your privateState, not state

this.privateState = x['whatever'];

Next, you don't need to mock A with your AMock class, the test rigging will do that for you. Try something like below for a start. The bit I don't have in here is the State code. All I really did was get rid of your AMock and replaced it with the actual component, and build a test state (and poorly built the state, I might add. Ha!). I tackle the HTTP data below, which would be related to your state I'm guessing by looking at your code.

import { HttpClientTestingModule } from '@angular/common/http/testing';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { A } from './zing.component';  // this should point to your component

// get rid of this, not needed
// class AMock extends A {
//   ngOnInit() {
//     //privateState is now protected
//     let privateState = mockedState;
//   }
// }

describe('A', () => {
  let component: A;  // changed from AMock to A
  let fixture: ComponentFixture<A>; // changed from AMock to A

  let mockedState = {something: 'yelp'}; // build your expected state here

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      declarations: [A] // changed from AMock to A
    })
      .compileComponents().catch();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(A); // changed from AMock to A
    component = fixture.componentInstance;
  });

  it('testedFunction should set up public state correctly', () => {
    component.testedFunction();

    expect(component.publicState).toEqual(mockedState.something);
  });
});

And finally for your HTTP mock, you can use HttpTestingController to flush some data to your component.

in Describe block -

let backend: HttpTestingController;

before each -

backend = TestBed.get(HttpTestingController);

in your IT statement -

backend.expectOne(expectedURL).flush(mockedState);

backend.verify();

Let us know how far this get's you, if it's helpful or if you get other errors.