Is it possible to add component-store test example to documentation?

[peterhe2000]

There is store testing in the documentation:
https://ngrx.io/guide/store/testing
Is it possible to have something similar for component store?

[timdeschryver]

I think that will be a great addition, do you want to create a Pull Request for this @peterhe2000 ?

[peterhe2000]

@timdeschryver Thanks for asking. Tim. Happy to leave opptunities to others since i have not yet used component store in a real project and don't have much experience with it.

[ngfelixl]

Hi @peterhe2000 @timdeschryver, I would be very happy to help adding the testing docs for the component store. Is it ok if I go for it?

[peterhe2000]

@ngfelixl No worries. Go ahead.

[ngfelixl]

@timdeschryver do you know a way how to override an Injectable that is provided in the components providers array and not in the corresponding module. The problem is that the component store is provided in that way, and it makes most sense. But to do the integration tests for the component, it would be nice to provide a way to mock the store and to get a reference to work with it.

The components decorator looks like:

@Component({
  selector: 'app-movies',
  templateUrl: './movies.component.html',
  styleUrls: ['./movies.component.css'],
  providers: [MoviesStore] // <-- Here we provide the MoviesStore to the component
})

And the TestBed configuration like this:

let mockMoviesStore = jasmine.createSpyObj('MoviesStore', ['setState', 'addMovie'], ['movies$']);
[...]
await TestBed.configureTestingModule({
  declarations: [ MoviesComponent ],
  providers: [{ // <-- This won't work, because it overrides the module moviesstore, not the component moviesstore
    provide: MoviesStore,
    useValue: mockMoviesStore
  }],
});

If the MoviesStore is provided in the module, it works.

[timdeschryver]

@ngfelixl I think you can override it with

   TestBed.overrideProvider(MoviesStore, {useValue: mockMoviesStore});

[ngfelixl]

@timdeschryver Thank you, it works as expected.

[ngfelixl]

@timdeschryver I've set up a repository with a sample app that includes the read/write pages from the ngrx.io docs and the corresponding tests here. The github actions are set up and run the tests.

The tests are separated into two types of tests. One is the component integration test with the TestBed using a mockComponentStore which describes all the features related to the DOM, the FormGroup and makes sure that all the corresponding actions of the component store are dispatched with the correct values.

The other one tests the component store. It creates an instance and tests all the reducers (updaters) and selectors using the top level function setState to arrange an initial state, and the observable state$ to assert the expectations.

Would you like to have a look at it? Then I could start to set up the testing page in the docs. Please note that currently the effects are not covered yet.
Thanks in advance 🙏

[alex-okrushko]

Thank you so much @ngfelixl for getting this going! 🙏
I'll peeked into the suggested tests and would provide some feedback a bit later.

[peterhe2000]

@alex-okrushko Maybe off track a little bit.
I am curious to know how firebase team do form validation with component store.
Are you guys using template driven form validation or reactive form validation?

[alex-okrushko]

@peterhe2000
let's take that discussion to https://discord.gg/ngrx :)

[ZackDeRose]

Is this still needed?