Ionic 4 + angular 8 test failure

Ionic Framework
1

I decided it would be a good idea to update to the latest ionic (4.11.x) and angular 8 (8.2.x). Overall, it wasn’t horrible as I was on Ionic 4 beta and Angular 6.

All good until I got to running my tests… ugh. I keep getting this error and I cannot for the life of my find out why.

TypeError: Cannot read property ‘subscribeWithPriority’ of undefined
error properties: Object({ ngDebugContext: DebugContext_({ view: Object({ def: Object({ factory: Function, nodeFlags: 33603585, rootNodeFlags: 33554433, nodeMatchedQueries: 0, flags: 0, nodes: [ Object({ nodeIndex: 0, parent: null, renderParent: null, bindingIndex: 0, outputIndex: 0, checkIndex: 0, flags: 33554433, childFlags: 49152, directChildFlags: 49152, childMatchedQueries: 0, matchedQueries: Object({ }), matchedQueryIds: 0, references: Object({ }), ngContentIndex: null, childCount: 1, bindings: [ ], bindingFlags: 0, outputs: [ ], element: Object({ ns: ‘’, name: ‘stm-root’, attrs: [ ], template: null, componentProvider: Object({ nodeIndex: 1, parent: , renderParent: , bindingIndex: 0, outputIndex: 0, checkIndex: 1, flags: 49152, childFlags: 0, directChildFlags: 0, childMatchedQueries: 0, matchedQueries: Object, matchedQueryIds: 0, references: Object, ngContentIndex: -1, childCount: 0, bindings: Array, bindingFlags: 0, outputs: Array, …
at
at new NavController (http://localhost:9876/_karma_webpack_/node_modules/@ionic/angular/dist/fesm5.js:1007:1)
at NavController_Factory (http://localhost:9876/_karma_webpack_/node_modules/@ionic/angular/dist/fesm5.js:1391:118)
at _callFactory (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:20296:1)
at _createProviderInstance (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:20254:1)
at resolveNgModuleDep (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:20229:1)
at createClass (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:20287:1)
at createProviderInstance (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:20251:1)
at resolveNgModuleDep (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:20215:1)
at NgModuleRef.push…/node_modules/@angular/core/fesm5/core.js.NgModuleRef.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:20905:1)
at resolveDep (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:21276:1)

I am not even using subscribeWithPriority in Platform, but doing a little digging I found that it is now in the NavController.

How can’t i get this test to pass? I put the NavController as a provider in my spec.

UPDATE 1:
I just narrowed it down debugging the tests thats its my platform spy. Seems like the call in fesm5 in Ionic core is the culprit

 platform.backButton.subscribeWithPriority(0, (/**
         * @return {?}
         */
        function () { return _this.pop(); }));

platform is null with my spy

Any way I can use my platform spy and get this to pass?

2

I ran into this same problem.

I had expected to be able to mock the platform directly with code like this:

    platformSpy = jasmine.createSpyObj('Platform', {
      ready: platformReadySpy,
      backButton: mockBackButton,
    });

but Jasmine.createSpyObj creates a function for the backButton instead of assigning it to my mockBackButton instance.

I created my own MockPlatform instead:

class MockPlatform {
  ready: jasmine.Spy<any>;
  backButton: any;
}

and then I could instantiate the mock Platform with this code:

    mockPlatform = new MockPlatform();
    mockPlatform.ready = platformReadySpy;
    mockPlatform.backButton = mockBackButton;

Hope this helps.

1 Like
3

thank you so much! This is just what I needed. Much appreciated

1 Like
4

sorry, one more question… what is your mockBackButton implementation?

5

Yeah, that would be helpful ;-).

class MockBackButton {
  subscribeWithPriority: jasmine.Spy<any>;
}

    mockBackButton = new MockBackButton();
    mockBackButton.subscribeWithPriority = jasmine.createSpy('subscribeWithPriority', (priority, fn) => {});

I wasn’t trying to exercise the back button. I was only trying to get past the error being thrown, but this may point to a direction to try.

6

Same problem, help me please.

7

I actually never got it working, but didn’t care enough to really dive in. Looks at above comments, they seem pretty straightforward

8

Hello, do you have the code in a repository?
Thanks.

9

Sorry for the delay.

This spec is rather complicated, but I hope it helps you sort things out:

Also, it may not be running right now since there is a fair amount of development activity on this project.

1 Like
10

I encountered the issue as well but with Jest, here is my solution :

let statusBarSpy;
  let splashScreenSpy;
  let platformReadySpy: Promise<void>;
  let platformSpy;

  beforeEach(async(() => {
    statusBarSpy = { styleDefault: jest.fn() };
    splashScreenSpy = { hide: jest.fn() };
    platformReadySpy = Promise.resolve();
    platformSpy = {
      ready: jest.fn().mockReturnValue(platformReadySpy),
      backButton: { subscribeWithPriority: jest.fn() },
      is: jest.fn().mockReturnValue(true)
    };

    TestBed.configureTestingModule({
      declarations: [AppComponent],
      imports: [IonicModule, RouterTestingModule],
      providers: [
        { provide: StatusBar, useValue: statusBarSpy },
        { provide: SplashScreen, useValue: splashScreenSpy },
        { provide: Platform, useValue: platformSpy }
      ]
    }).compileComponents();
  }));
1 Like