angular-redux / form

Keep your Angular2+ form state in Redux
MIT License
41 stars 15 forks source link

"Cannot read property 'getState' of null" in unit tests when using [connect]="['p1', 'p2']" #23

Closed m-reiniger closed 6 years ago

m-reiniger commented 7 years ago

This is a...

What toolchain are you using for transpilation/bundling?

Environment

NodeJS Version: latest Typescript Version: lastest Angular Version: latest @angular-redux/store version: latest @angular/cli version: (if applicable) latest OS:

Expected Behaviour:

Unit test work without errors

Actual Behaviour:

Stack Trace/Error Message:

TypeError: Cannot read property 'getState' of null

Additional Notes:

Hi,

When I run my unit tests, I get TypeError: Cannot read property 'getState' of null Error in the terminal / console. The tests actually pass, but the errors are still confusing. Maybe this is a lack of understanding or it's an actual bug.

I am using the connect directive in this format:

<form [connect]="['shops', 'form']">
        <label>Partner ID: </label>
        <input type="number" name="shopId" ngControl ngModel/>
</form>

because I need the state to be part of a sub module path.

My .spec.ts file looks like this:

import { FormsModule } from '@angular/forms';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { MockNgRedux, NgReduxTestingModule } from '@angular-redux/store/testing';
import { NgReduxFormModule } from '@angular-redux/form';

import { FormComponent } from './form.component';
import { ShopActions } from '../store/shops.actions';

const mockShopActions = {
    setShop: () => {
    },
    shopLoaded: () => {
    },
};

describe('FormComponent', () => {
    let component: FormComponent;
    let fixture: ComponentFixture<FormComponent>;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [
                FormsModule,
                NgReduxTestingModule,
                NgReduxFormModule
            ],
            declarations: [FormComponent],
            providers: [
                { provide: ShopActions, useValue: mockShopActions }
            ]
        }).compileComponents();

        MockNgRedux.reset();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(FormComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });

    it('should create', () => {
        expect(component).toBeTruthy();
    });
});

Here is the complete Error trace:

TypeError: Cannot read property 'getState' of null
    at MockNgRedux.NgRedux.getState (http://localhost:9876/base/src/test.ts?ac69261a7f71dfd7ceb4ff33a2a00c39d09bbc33:27537:58)
    at FormStore.Array.concat.FormStore.getState (http://localhost:9876/base/src/test.ts?ac69261a7f71dfd7ceb4ff33a2a00c39d09bbc33:22217:27)
    at Connect.Array.concat.Connect.getState (http://localhost:9876/base/src/test.ts?ac69261a7f71dfd7ceb4ff33a2a00c39d09bbc33:30142:27)
    at http://localhost:9876/base/src/test.ts?ac69261a7f71dfd7ceb4ff33a2a00c39d09bbc33:30131:49
    at Array.forEach (native)
    at Connect.Array.concat.Connect.resetState (http://localhost:9876/base/src/test.ts?ac69261a7f71dfd7ceb4ff33a2a00c39d09bbc33:30129:18)
    at http://localhost:9876/base/src/test.ts?ac69261a7f71dfd7ceb4ff33a2a00c39d09bbc33:30092:19
    at ZoneDelegate.invoke (http://localhost:9876/base/src/polyfills.ts?bdd59f38a06b817981b3da211939e6141b2452a4:2764:26)
    at ProxyZoneSpec.Array.concat.ProxyZoneSpec.onInvoke (http://localhost:9876/base/src/test.ts?ac69261a7f71dfd7ceb4ff33a2a00c39d09bbc33:63940:39)
    at ZoneDelegate.invoke (http://localhost:9876/base/src/polyfills.ts?bdd59f38a06b817981b3da211939e6141b2452a4:2763:32)
    at Object.onInvoke (http://localhost:9876/base/src/test.ts?ac69261a7f71dfd7ceb4ff33a2a00c39d09bbc33:4622:37)
    at ZoneDelegate.invoke (http://localhost:9876/base/src/polyfills.ts?bdd59f38a06b817981b3da211939e6141b2452a4:2763:32)
    at Zone.run (http://localhost:9876/base/src/polyfills.ts?bdd59f38a06b817981b3da211939e6141b2452a4:2524:43)
    at http://localhost:9876/base/src/polyfills.ts?bdd59f38a06b817981b3da211939e6141b2452a4:3157:57
    at ZoneDelegate.invokeTask (http://localhost:9876/base/src/polyfills.ts?bdd59f38a06b817981b3da211939e6141b2452a4:2797:31)
    at resolvePromise (http://localhost:9876/base/src/polyfills.ts?bdd59f38a06b817981b3da211939e6141b2452a4:3109:31) [angular]
    at http://localhost:9876/base/src/polyfills.ts?bdd59f38a06b817981b3da211939e6141b2452a4:3160:17 [angular]
    at ProxyZoneSpec.Array.concat.ProxyZoneSpec.onInvokeTask (http://localhost:9876/base/src/test.ts?ac69261a7f71dfd7ceb4ff33a2a00c39d09bbc33:63964:39) [angular]
    at Object.onInvokeTask (http://localhost:9876/base/src/polyfills.ts?bdd59f38a06b817981b3da211939e6141b2452a4:2675:100) [angular]
    at Object.onInvokeTask (http://localhost:9876/base/src/test.ts?ac69261a7f71dfd7ceb4ff33a2a00c39d09bbc33:4613:37) [angular]
    at drainMicroTaskQueue (http://localhost:9876/base/src/polyfills.ts?bdd59f38a06b817981b3da211939e6141b2452a4:2990:35) [<root>]
    at ZoneTask.invoke (http://localhost:9876/base/src/polyfills.ts?bdd59f38a06b817981b3da211939e6141b2452a4:2863:25) [<root>]
    at timer (http://localhost:9876/base/src/polyfills.ts?bdd59f38a06b817981b3da211939e6141b2452a4:4054:29) [<root>]
    at ____________________Elapsed_4_ms__At__Tue_May_09_2017_19_37_21_GMT_0200__CEST_ (http://localhost)
    at getStacktraceWithUncaughtError (http://localhost:9876/base/src/test.ts?ac69261a7f71dfd7ceb4ff33a2a00c39d09bbc33:63719:12) [angular]
    at new LongStackTrace (http://localhost:9876/base/src/test.ts?ac69261a7f71dfd7ceb4ff33a2a00c39d09bbc33:63713:22) [angular]
    at Object.onScheduleTask (http://localhost:9876/base/src/test.ts?ac69261a7f71dfd7ceb4ff33a2a00c39d09bbc33:63789:22) [angular]
    at Object.onScheduleTask (http://localhost:9876/base/src/polyfills.ts?bdd59f38a06b817981b3da211939e6141b2452a4:2673:29) [angular]
    at scheduleResolveOrReject (http://localhost:9876/base/src/polyfills.ts?bdd59f38a06b817981b3da211939e6141b2452a4:3155:14) [angular]
    at ZoneAwarePromise.then (http://localhost:9876/base/src/polyfills.ts?bdd59f38a06b817981b3da211939e6141b2452a4:3244:17) [angular]
    at Connect.Array.concat.Connect.ngAfterContentInit (http://localhost:9876/base/src/test.ts?ac69261a7f71dfd7ceb4ff33a2a00c39d09bbc33:30091:27) [angular]
    at callProviderLifecycles (http://localhost:9876/base/src/test.ts?ac69261a7f71dfd7ceb4ff33a2a00c39d09bbc33:11537:18) [angular]
    at callElementProvidersLifecycles (http://localhost:9876/base/src/test.ts?ac69261a7f71dfd7ceb4ff33a2a00c39d09bbc33:11518:13) [angular]

It looks to me as if the the nested state object is not present, when the connect class cycles through the path children.

Is there a way to tell MockNgRedux what the state object should consist of? Or am I simply doing something wrong?

smithad15 commented 6 years ago

Considering the age of this issue, I hope that you have been able to find a solution to your problem. Closing for now, but please re-open if you still require assistance.