2

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();
  });
});
Benny
  • 186
  • 1
  • 1
  • 11

0 Answers0