ng-mocks: Bug: ComponentStore observale not working with ng-mock >= 13.3.0

Description of the bug

Hi, I just migrated an angular project from version 12 to 13. Everything goes well except for ComponentStore (NGRX) tests. The observables complete directly, without emiting value.

For the context:

I tested all versions of ng-mocks to find the one that causes problems, and it’s this one: 13.3.0. Everything works before (ex 13.2.0).

Do you have any idea of the modification that causes this?

Thanks

Minimal reproduction example:

ComponentStore to be tested:

@Injectable()
export class MyComponentStore extends ComponentStore<{ value: string }> {
  constructor() {
    super({ value: 'value' });
  }

  readonly values$ = this.select(({ value }) => value);
}

Failling test case:

describe('MyComponentStore', () => {
  let componentStore: MyComponentStore;

  beforeEach(() => MockBuilder(MyComponentStore));

  beforeEach(() => {
    componentStore = MockRender(MyComponentStore).point.componentInstance;
  });

  // This test no longer works with ng-mocks >= 13.3.0
  it('should initial state and value', () => {
    expect(componentStore.state$).toBeObservable(cold('a', { a: { value: 'value' } }));
    expect(componentStore.values$).toBeObservable(cold('a', { a: 'value' }));
  });
});

Working test case without jest-marble:

describe('MyComponentStore', () => {
  let componentStore: MyComponentStore;

  beforeEach(() => MockBuilder(MyComponentStore));

  beforeEach(() => {
    componentStore = MockRender(MyComponentStore).point.componentInstance;
  });

  const testScheduler = new TestScheduler((actual, expected) => {
    expect(actual).toEqual(expected);
  });

  // However, this one works all the time (without jest-marble)
  it('should have initial state', () => {
    testScheduler.run((helpers) => {
      const { expectObservable } = helpers;

      expectObservable(componentStore.state$).toBe('a', { a: { value: 'value' } });
      expectObservable(componentStore.values$).toBe('a', { a: 'value' });
    });
  });
});

It works fine without an ng-mocks context (to show that it doesn’t come from jest-marble):

describe('MyComponentStore', () => {
  let componentStore: MyComponentStore;

  beforeEach(() => {
    componentStore = new MyComponentStore();
  });

  // Work
  it('should initial state and value', () => {
    expect(componentStore.state$).toBeObservable(cold('a', { a: { value: 'value' } }));
    expect(componentStore.values$).toBeObservable(cold('a', { a: 'value' }));
  });
});

Expected vs actual behavior

Actual:

● MyComponentStore › should initial state and value

    expect(received).toBeNotifications(expected)

    Expected notifications to be:
      [{"frame": 0, "notification": {"error": undefined, "kind": "N", "value": {"value": "value"}}}]
    But got:
      [{"frame": 0, "notification": {"error": undefined, "kind": "C", "value": undefined}}]

Expected: Test should passed

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Reactions: 3
  • Comments: 18 (15 by maintainers)

Most upvoted comments

Hi there. Thanks for the report. I’ll take a look, hopefully, this week.

The release: https://github.com/ike18t/ng-mocks/releases/tag/v13.3.0

Here is a minimal example of reproduction https://stackblitz.com/edit/github-ec7feu?file=package.json,src%2Ftest.spec.ts

I tested in Angular 14 before downgrading to Angular 13 in Stackblitz, and it seemed to work.

I did not know this token, I will try to test this afternoon.

Thanks