Stack Exchange
How to mock ofActionSuccessful from ngxs
I have a component with ngOnInit that looks like
  ngOnInit() {
this.integrationsFacadeService.getTemplates();
this.actions$
  .pipe(ofActionSuccessful(GetTemplates))
  .subscribe(() => this.integrationsFacadeService.getTemplateOptions());
this.fields = this.getFields();
}

And then in my test module
describe('AdminCenterIntegrationAddComponent', () => {
  let component: AdminCenterIntegrationAddComponent;
  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [AdminCenterIntegrationAddComponent, { provide: Actions, useValue: createSpyFromClass(Actions) }],
    }).compileComponents();
    component = TestBed.inject<any>(AdminCenterIntegrationAddComponent);
  });
  it('should be truthy', () => {
    expect(component).toBeTruthy();
  });

  it('ngOnInt should be ok', () => {
    component.ngOnInit();
  });
});

But the 'ngOnInt should be ok' fails at this line
this.actions$
  .pipe(ofActionSuccessful(GetTemplates))
  .subscribe(() => this.integrationsFacadeService.getTemplateOptions());

with the error:

TypeError: Cannot read property 'subscribe' of undefined

I have tried to mock ofActionSuccessful like:
        ofActionSuccessful: () => {
          return () => {
            return of([]);
          };
        }

but I still get the same error.
Any insights are appreciated.

You can use new Subject<ActionContext>();
beforeEach(async () => {
    store = spyStore();
    await TestBed.configureTestingModule({
      declarations: [
        YourComponent,
      ],
      providers: [
        { provide: Actions, useValue: actionsCtx },
      ],
    })
      .compileComponents();
  });

  it('...', () => {
    ...
    actionsCtx.next({
      status: ActionStatus.Successful,
      action: ProjectLoadAllJobs
    });
    // you might need a tick();
    ...
    excpect(...)...
  })


Building on Donovant's answer, which is the best to use for a simple case like OP's example,

if instead of a static action you have a complex one with dynamic metadata, eg.:

export class ComplexAction {
  static readonly type = 'ACTION.COMPLEX';

  readonly id: string = uuid();

  constructor(readonly param1: string, readonly param2: number, ...... readonly param8: CustomType) {
  }
}


AND if you need only some properties in the subscribe:

this.actions$
  .pipe(ofActionSuccessful(ComplexAction))
  .subscribe((action) => console.log(`Using only ${action.id} and ${action.param8}`));


AND if for some reason (readability when there are too many useless parameters to initialize, or because some dynamic properties are harder to mock) you don't want to do:

actionsCtx.next({
  status: ActionStatus.Successful,
  action: Object.assign(new ComplexAction(
    param1,
    param2,
    .......
    param8
  ), { id: '42' })
});

Then you can actually use a fake action, as long as you indicate the type:
actionsCtx.next({
  status: ActionStatus.Successful,
  action: { type: ComplexAction.type, id: '42', param8: { ... } }
});

Actually, if you have a lot of these, you can just create a utility class for testing:
export class MockActions extends Subject<ActionContext> {
  nextAction(
    actionType: string,
    actionValue: any,
    status: ActionStatus = ActionStatus.Successful
  ): void {
    this.next({
      status,
      action: {
        ...actionValue,
        type: actionType
      }
    });
  }
}

which you can call in a one-liner:
mockActions.nextAction(ComplexAction.type, { id: '42', param8: { ... } } )

