Unit Testing

Unit testing is easy with NGXS and NGXS Data plugin. A basic test looks like this:

describe('AppState', () => {
    @StateRepository()
    @State({
        name: 'app',
        defaults: 'hello world'
    })
    @Injectable()
    class AppState extends NgxsDataRepository<string> {}

    it(
        'should be correct ensure state from AppState',
        ngxsTestingPlatform([AppState], (store: Store, app: AppState) => {
            expect(store.snapshot()).toEqual({ app: 'hello world' });
            expect(app.getState()).toEqual('hello world');
        })
    );
});

ngxsTestingPlatform - This is a testing platform that allows you to fully test the entire lifecycle of NGXS methods.

Example where we testing NGXS Lifecycle

// ..

describe('[TEST]: Abstract ngxs data repository', () => {
    let event: string[] = [];

    interface Model {
        value: number;
    }

    @StateRepository()
    @State({
        name: 'a',
        defaults: { value: 1 }
    })
    class A extends NgxsDataRepository<Model> implements NgxsDataDoCheck, NgxsDataAfterReset {
        constructor() {
            super();
            event.push(`create: ${this.name}`);
        }

        public ngxsOnInit(): void {
            event.push(`ngxsOnInit: ${this.name}`);
            super.ngxsOnInit();
        }

        public ngxsOnChanges(change: NgxsSimpleChange): void {
            event.push(`ngxsOnChanges: ${this.name} -> ${JSON.stringify(change)}`);
            super.ngxsOnChanges();
        }

        public ngxsAfterBootstrap(): void {
            event.push(`ngxsAfterBootstrap: ${this.name}`);
            super.ngxsAfterBootstrap();
        }

        public ngxsDataDoCheck(): void {
            event.push(`ngxsDataDoCheck: ${this.name}`);
        }

        public ngxsDataAfterReset(): void {
            event.push(`ngxsDataAfterReset: ${this.name}`);
        }
    }

    @StateRepository()
    @State({
        name: 'b',
        defaults: { value: 1 }
    })
    @Injectable()
    class B extends NgxsImmutableDataRepository<Model> implements NgxsDataDoCheck, NgxsDataAfterReset {
        constructor() {
            super();
            event.push(`create: ${this.name}`);
        }

        public ngxsOnInit(): void {
            event.push(`ngxsOnInit: ${this.name}`);
            super.ngxsOnInit();
        }

        public ngxsOnChanges(change: NgxsSimpleChange): void {
            event.push(`ngxsOnChanges: ${this.name} -> ${JSON.stringify(change)}`);
            super.ngxsOnChanges();
        }

        public ngxsAfterBootstrap(): void {
            event.push(`ngxsAfterBootstrap: ${this.name}`);
            super.ngxsAfterBootstrap();
        }

        public ngxsDataDoCheck(): void {
            event.push(`ngxsDataDoCheck: ${this.name}`);
        }

        public ngxsDataAfterReset(): void {
            event.push(`ngxsDataAfterReset: ${this.name}`);
        }
    }

    beforeEach(() => {
        event = [];
    });

    it(
        'should be ngxs data repository',
        ngxsTestingPlatform([A], (store: Store, a: A) => {
            expect(store.snapshot()).toEqual({ a: { value: 1 } });

            expect(a.isInitialised).toEqual(true);
            expect(a.isBootstrapped).toEqual(true);

            a.state$.subscribe((e: Model) => event.push(`state(${a.name}): set value - ${e.value}`));

            expect(a.name).toEqual('a');

            a.setState({ value: 2 });
            expect(a.getState()).toEqual({ value: 2 });

            a.initialState.value = 5; // not affected
            a.reset();

            expect(a.getState()).toEqual({ value: 1 });

            a.setState({ value: 3 });
            a.setState({ value: 4 });
            a.setState({ value: 5 });

            a.reset();

            store.reset({ a: { value: 10 } });

            expect(a.getState()).toEqual({ value: 10 });

            expect(event).toEqual([
                'create: a',
                'ngxsOnChanges: a -> {"currentValue":{"value":1},"firstChange":true}',
                'ngxsOnInit: a',
                'ngxsAfterBootstrap: a',
                'ngxsDataDoCheck: a',
                'state(a): set value - 1',
                'ngxsOnChanges: a -> {"previousValue":{"value":1},"currentValue":{"value":2},"firstChange":false}',
                'state(a): set value - 2',
                'ngxsOnChanges: a -> {"previousValue":{"value":2},"currentValue":{"value":1},"firstChange":false}',
                'state(a): set value - 1',
                'ngxsDataAfterReset: a',
                'ngxsOnChanges: a -> {"previousValue":{"value":1},"currentValue":{"value":3},"firstChange":false}',
                'ngxsDataDoCheck: a',
                'state(a): set value - 3',
                'ngxsOnChanges: a -> {"previousValue":{"value":3},"currentValue":{"value":4},"firstChange":false}',
                'state(a): set value - 4',
                'ngxsOnChanges: a -> {"previousValue":{"value":4},"currentValue":{"value":5},"firstChange":false}',
                'state(a): set value - 5',
                'ngxsOnChanges: a -> {"previousValue":{"value":5},"currentValue":{"value":1},"firstChange":false}',
                'state(a): set value - 1',
                'ngxsDataAfterReset: a',
                'state(a): set value - 10'
            ]);
        })
    );

    it(
        'should be ngxs data immutable repository',
        ngxsTestingPlatform([B], (store: Store, b: B) => {
            expect(b.isInitialised).toEqual(true);
            expect(b.isBootstrapped).toEqual(true);

            b.state$.subscribe((e: Immutable<Model>) => event.push(`state(${b.name}): set value - ${e.value}`));

            expect(b.name).toEqual('b');

            b.setState({ value: 2 });
            expect(b.getState()).toEqual({ value: 2 });

            (b.initialState as any).value = 5; // not affected
            b.reset();

            expect(b.getState()).toEqual({ value: 1 });

            b.setState({ value: 3 });
            b.setState({ value: 4 });
            b.setState({ value: 5 });

            b.reset();

            store.reset({ b: { value: 10 } });

            expect(b.getState()).toEqual({ value: 10 });

            expect(event).toEqual([
                'create: b',
                'ngxsOnChanges: b -> {"currentValue":{"value":1},"firstChange":true}',
                'ngxsOnInit: b',
                'ngxsAfterBootstrap: b',
                'ngxsDataDoCheck: b',
                'state(b): set value - 1',
                'ngxsOnChanges: b -> {"previousValue":{"value":1},"currentValue":{"value":2},"firstChange":false}',
                'state(b): set value - 2',
                'ngxsOnChanges: b -> {"previousValue":{"value":2},"currentValue":{"value":1},"firstChange":false}',
                'state(b): set value - 1',
                'ngxsDataAfterReset: b',
                'ngxsOnChanges: b -> {"previousValue":{"value":1},"currentValue":{"value":3},"firstChange":false}',
                'ngxsDataDoCheck: b',
                'state(b): set value - 3',
                'ngxsOnChanges: b -> {"previousValue":{"value":3},"currentValue":{"value":4},"firstChange":false}',
                'state(b): set value - 4',
                'ngxsOnChanges: b -> {"previousValue":{"value":4},"currentValue":{"value":5},"firstChange":false}',
                'state(b): set value - 5',
                'ngxsOnChanges: b -> {"previousValue":{"value":5},"currentValue":{"value":1},"firstChange":false}',
                'state(b): set value - 1',
                'ngxsDataAfterReset: b',
                'state(b): set value - 10'
            ]);
        })
    );
});