如何在角度4测试中模拟数据服务

时间:2017-12-17 05:22:04

标签: typescript

以下是我的 dropdown.spec.ts 文件:

    import { async, ComponentFixture, TestBed, inject } from '@angular/core/testing';
    import { By }              from '@angular/platform-browser';
    import { DebugElement }    from '@angular/core';
    import { APP_BASE_HREF } from '@angular/common';
    import { RouterTestingModule } from '@angular/router/testing';
    import { FormsModule } from '@angular/forms';
    import { ProjectionDropdownsComponent } from './projection-dropdowns.component';
    import { AppComponent } from '../../../app.component';
    import { DataService } from '../../../data.service';

    class mockDataService {

    }

    describe('projection dropdown', () => {
      let component: ProjectionDropdownsComponent;
      let fixture: ComponentFixture<ProjectionDropdownsComponent>;
      let de:      DebugElement;
      beforeEach(async(() => {
        TestBed.configureTestingModule({
          declarations: [
            ProjectionDropdownsComponent
        ],
          imports : [
            RouterTestingModule,
            FormsModule,
            HttpModule],
          providers: [
            AppComponent,      
            {provide: DataService, useValue: mockDataService},
            {provide: APP_BASE_HREF, useValue: '/'},
            {provide: XHRBackend, useClass: MockBackend }
          ]
        })
        .compileComponents();

        fixture = TestBed.createComponent(ProjectionDropdownsComponent);
        component = fixture.componentInstance;
        console.log(DataService);
      }));

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

      it('should create a service', inject([DataService], (service: DataService) => {   // it passes test successfully
        console.log(this.divisions);
        expect(service).toBeTruthy();
      }));


        // from below code m trying to mock service using mock backed but it gives error that this.getDivisions is not a function while testing 
        it('should return divisions',
            inject([DataService, XHRBackend], (service, mockBackend) => {
            console.log(service);
            const mockResponse = {
              data: [
                { id: 0, sbu: 'Ag & Turf' },
                { id: 1, sbu: 'C&F' }
              ]
            };

            mockBackend.connections.subscribe((connection) => {
              connection.mockRespond(new Response(new ResponseOptions({
                body: JSON.stringify(mockResponse)
              })));
            });            
            service.getDivisions().subscribe((data) => {
              //expect(videos.length).toBe(4);
              console.log(data);
              expect(data[0].sbu).toEqual('Ag & Turf');
              expect(data[1].sbu).toEqual('C&F');
            });

        }));
    });

如何在spec文件中模拟服务以测试数据?

0 个答案:

没有答案