In my angular app, we have a 'LayoutContainer' class that just shows the title of our website and then a navbar with static links.
I needed to be able to make the links dynamic based on who the logged in user is -- if they are an admin, I want to be able to show a new link. What I did was I imported the reducers from the 'account' module.
Now, I've been seeing inconsistency with the unit tests and certain old tests are breaking when I do a randomized order of running the tests. Other times, all 68 tests pass.
Here's the error that occasionally pops up for certain component 'should create' classes:
Uncaught TypeError: Cannot read property 'authentication' of undefined
at :9876/_karma_webpack_/webpack:/src/app/account/reducers/index.ts:42
at :9876/_karma_webpack_/webpack:/node_modules/@ngrx/store/fesm5/store.js:528
at memoized (:9876/_karma_webpack_/webpack:/node_modules/@ngrx/store/fesm5/store.js:484)
at defaultStateFn (:9876/_karma_webpack_/webpack:/node_modules/@ngrx/store/fesm5/store.js:502)
at :9876/_karma_webpack_/webpack:/node_modules/@ngrx/store/fesm5/store.js:531
at memoized (:9876/_karma_webpack_/webpack:/node_modules/@ngrx/store/fesm5/store.js:484)
at :9876/_karma_webpack_/webpack:/node_modules/@ngrx/store/fesm5/store.js:501
at Array.map (<anonymous>)
at defaultStateFn (:9876/_karma_webpack_/webpack:/node_modules/@ngrx/store/fesm5/store.js:501)
at :9876/_karma_webpack_/webpack:/node_modules/@ngrx/store/fesm5/store.js:531
at
Line 42 of the account/reducers/index.ts is this:
// Reducers
import * as fromRoot from '../../reducers';
import * as fromAuthentication from './authentication.reducer';
import * as fromFacility from './club.reducer';
import * as fromRegistration from './registration.reducer';
import * as fromSubscription from './subscription.reducer';
import * as fromUserSubscription from './user-subscription.reducer';
import { RegistrationErrorTypes } from '../actions/registration.actions';
import { LEAVE_SELECTOR } from '../../../../node_modules/@angular/animations/browser/src/util';
export interface AccountState {
authentication: fromAuthentication.State;
facility: fromFacility.State;
registration: fromRegistration.State;
subscription: fromSubscription.State;
userSubscription: fromUserSubscription.State;
}
export const
selectAuthStatusState = createSelector(
selectAccountState,
(state: AccountState) => state.authentication /// LINE 42 that is 'undefined'
);
What's crazy is that when I rerun it a few times, often times all the tests pass. What could the issue be?
EDIT-- An example of a test that fails
// Angular Core
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
// Angular Material
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
// ngrx
import { StoreModule, combineReducers } from '@ngrx/store';
// Reducers
import * as fromAccount from '../../../account/reducers';
// Component
import { CancelSubscriptionDialogComponent } from './cancel-subscription-dialog.component';
describe('CancelSubscriptionComponent', () => {
let component: CancelSubscriptionDialogComponent;
let fixture: ComponentFixture<CancelSubscriptionDialogComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
StoreModule.forRoot({
account: combineReducers(fromAccount.reducers)
})
],
providers: [
{ provide: MatDialogRef, useValue: {} },
{
provide: MAT_DIALOG_DATA,
useValue: {}
}
],
declarations: [CancelSubscriptionDialogComponent]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(CancelSubscriptionDialogComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});