0

I am writing test case for an angular component, which has a huge dependency on a service named UserRecordFormService which carries a list of methods, for the ones that makes http request I have created a mock class (to override methods), and wanted the TestBed to extent all other functions from UserRecordFormService itself.

I have taken reference from few sources and could pass component creation, but it throws errors form all other test spec and also fails the test specs from other components. Am I missing something here, please help me identify my mistake.

describe('UserRecordFormComponent', () => {

let component: UserRecordFormComponent;
let fixture: ComponentFixture<UserRecordFormComponent>;

class UserRecordFormServiceStub {
    //some methods returning data;
}

class AppLookupServiceStub {
    //some methods returning data;
}

class AppRouterStub {
    navigate() {}
}

const tb_base = {
    imports: [
      RouterTestingModule,
      BrowserAnimationsModule,
      RouterModule,
      BrowserDynamicTestingModule
    ],
    providers: [
      UserRecordFormService,
      AppHttpService,
      HttpClient,
      AppCookieService,
      CookieService,
      HttpHandler,
      { provide: AppLookupService, useClass: AppLookupServiceStub },
      { provide: ActivatedRoute, useValue: {
        outlet: "primary",
        data: {
          actionId: "E",
          buttonDesc: "Update"
        },
        params: of({ 
            id: "0009"
        }),
        queryParams: of({
          objectKey: "36353639373739393535353E352525252525253E3E3E3E363738363735363D3637363B353535"
        }),
        snapshot: {
          data: {
            actionId: "E",
            buttonDesc: "Update"
          },
          queryParams: {
            objectKey: "36353639373739393535353E352525252525253E3E3E3E363738363735363D3637363B353535"
          }
        }
    }},
    { provide: Router, useClass: AppRouterStub }
    ],
    declarations: [UserRecordFormComponent],
    schemas: [NO_ERRORS_SCHEMA]
  };

let UserRecordFormServiceStub = UserRecordFormServiceStub;

beforeEach(async(() => {

TestBed.configureTestingModule(tb_base)
    .compileComponents();
}))

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

it('should create component', inject([UserRecordFormService], (loader: UserRecordFormServiceStub) => {
    expect(component).toBeTruthy();
}));

it('should show expected output for ',inject([UserRecordFormService], (loader: UserRecordFormServiceStub) => {
    expect(component.actionButtonDesc).toEqual("Update");
    expect(component.subtypeName).toEqual("0 - Main bank");
}));


})

I have taken references from here: https://github.com/angular/quickstart/issues/320 https://github.com/angular/angular/issues/10943

Error: "Uncaught TypeError: Cannot read property 'message' of undefined thrown", is the error that it throws from other components test spec, i.e UserListComponent. Is the inject causing any trouble to other components.

Please let me know if I am missing something here.

nircraft
  • 8,242
  • 5
  • 30
  • 46
Soujanya J
  • 121
  • 3
  • 12
  • 1
    **You should not have a common Test bed for all of your tests**. This is called *Unit Testing* for a reason ! By using a single test bed, you do NOT prevent side effects from one unit to another. Tat means if you edit some of your common testbed properties, it gets repercuted through your whole testing session. This is obviously where your error comes from. Try resolving this issue, see what happens (disclaimer : it may take you a long to to resolve it, but it's worth every second). –  Jun 03 '19 at 13:21
  • 1
    @nircraft I did change my code as per your suggestion, And I could overcome that error. Still need to configure the component with other dependencies to make it test ready, Thank you so much for pointing out. That was a great help. – Soujanya J Jun 04 '19 at 13:16

0 Answers0