Angular NGRX test a selection subscription with pipe skip

Question

My method works the way I want it to, however, the test is failing when I add the pipe(skip(1))

How do I test an observable with a pipeable skip. Here is my method:

getSomething() {
    this.store.pipe(select(selectSomeStatus))
        .pipe(skip(1)) // TEST WILL PASS WHEN LINE REMOVED
        .subscribe((data) => {
            // TEST NOT GETTING HERE
        });
}

Here is the test:

it('should getSomething', fakeAsync(() => {
    // Arrange
    const mockResult = [];
    store.overrideSelector(selectSomeStatus, mockResult);
    store.refreshState();


    // Act
    component.getSomething();
    tick();

    // Assert
    // Assertions will go here
}));

I'm not sure what I am doing wrong. Any help would be much appreciated.

John · Accepted Answer · 2025-05-02 21:43:12Z

2

Thank you for your response Naren. I see what you mean by calling overrideSelector twice in the test since we are skipping the first value, which makes sense. I took what you posted and changed it to:

// Arrange
store.overrideSelector(selectBooks, [{ test: 1 }] as any);
store.refreshState();

// Act
component.getSomething();

const mockResult: any = [];
store.overrideSelector(selectBooks, mockResult);
store.refreshState();
flush();

After that it worked/passed great. Thanks again!

answered May 2 at 21:43

John

1792 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Naren Murali · Accepted Answer · 2025-05-02 21:11:10Z

First we have to call the method, so that the subscribe is listening for changes. I also created a dummy method to confirm it is called inside the subscribe.

it('should getSomething', fakeAsync(() => {
  spyOn(component, 'isCalled');
  // Act
  component.getSomething();

Then we set some dummy value using overrideSelector, then call refreshState, so that the dummy value is skipped by skip(1).

  // Arrange
  store.overrideSelector(selectBooks, [{ test: 1 }] as any);
  store.refreshState();

After this, we can call the actual value we want to mock and call refreshState again.

const mockResult: any = [];
store.overrideSelector(selectBooks, mockResult);
store.refreshState();

Finally, we use flush to complete the subscribe action and then check if the dummy method was called.

    flush();
    // Assert
    // Assertions will go here
    expect(component.isCalled).toHaveBeenCalled();
  }));

Full Code:

Method:

getSomething() {
  this._store$
    .pipe(select(selectBooks))
    .pipe(skip(1)) // TEST WILL PASS WHEN LINE REMOVED
    .subscribe((data) => {
      // TEST NOT GETTING HERE
      this.isCalled();
    });
}

isCalled() {}

Testcase:

it('should getSomething', fakeAsync(() => {
  spyOn(component, 'isCalled');
  // Act
  component.getSomething();
  // Arrange
  store.overrideSelector(selectBooks, [{ test: 1 }] as any);
  store.refreshState();
  const mockResult: any = [];
  store.overrideSelector(selectBooks, mockResult);
  store.refreshState();
  flush();
  // Assert
  // Assertions will go here
  expect(component.isCalled).toHaveBeenCalled();
}));

Collectives™ on Stack Overflow

Angular NGRX test a selection subscription with pipe skip

2 Answers 2

Comments

Full Code:

Method:

Testcase:

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Full Code:

Method:

Testcase:

Comments

Related