Let’s assume we have some UserListComponent
exposing public stream users$
(typeof User):
type User = {
id: number;
name: string;
email: string;
};
In case we’d like to test it, for this example we’ll need the following setup:
const usersMock: User[] = [
{ id: 1, name: "Johny Bravo", email: "johny.bravo@xoxo.com" },
{ id: 2, name: "React dev", email: "ihatemyjob@really.io" }, // Heey I'm just kidding, Angular 🤝 React
{ id: 3, name: "10x Dev", email: "10xdev@hotmail.com" },
];
const userListComponent = {
users$: of(usersMock),
};
Then you aren’t limited only to use subscribe()
on this Observable, you can pick different ways depending on your case:
it("done func", (done: DoneCallback) => {
userListComponent.users$.subscribe((expectedUsers: User[]) => {
expect(expectedUsers).toStrictEqual(usersMock);
done();
});
});
it("first value from", async () => {
const expectedUsers: User[] = await firstValueFrom(userListComponent.users$);
expect(expectedUsers).toStrictEqual(usersMock);
});
it("Fake async & tick", fakeAsync(() => {
let expectedUsers;
userListComponent.users$.subscribe((users: User[]) =>
setTimeout(() => {
expectedUsers = users;
}, 2000)
);
tick(2100);
expect(expectedUsers).toStrictEqual(usersMock);
}));
it("marbles", () => {
const testScheduler = new TestScheduler((actual, expected) => {
expect(actual).toStrictEqual(expected);
});
testScheduler.run(({ expectObservable }) => {
expectObservable(userListComponent.users$).toBe("(a|)", {
a: usersMock,
});
});
});