Question

在我构建的Ionic3应用程序的一个屏幕中，我最终需要告诉离子内容标记在数据更改后自行刷新。 Ionic documentation很好地记录了这个过程，并且不是一个工作问题。然后我开始更新我的测试，开始了乐趣。无论我做什么，我似乎都无法将内容注入我的测试中。

错误：

TypeError：无法读取属性＆＃39;调整大小＆＃39;未定义的

有问题的测试套件：

import {async, TestBed} from '@angular/core/testing';
import {CUSTOM_ELEMENTS_SCHEMA, ViewChild} from "@angular/core";
import {NavController, NavParams, Content} from "ionic-angular";
import {NavControllerMock} from "../../../test-config/custom-mocks/navController.mock";
import {NavParamsMock, ContentMock} from "ionic-mocks";

import {MessagingService} from "../shared/services/messaging.service";
import {MessagingServiceMock} from "../../../test-config/custom-mocks/messaging.service.mock";
import {VehicleService} from "../shared/services/vehicle.service";
import {VehicleServiceMock} from "../../../test-config/custom-mocks/vehicle.service.mock";
import {Vehicle} from "../shared/interfaces/vehicle.interface";
import {AlertButtonConfigClass} from "../shared/classes/alertConfig.class";
import {VehiclesDetailsComponent} from "../vehicles-details/vehicles-details.component";
import {UserClass} from "../shared/classes/user.class";
import {UserClassMock} from "../../../test-config/custom-mocks/user.class.mock";

import {VehiclesComponent} from "./vehicles.component";

describe('Vehicles Component', () => {
    describe('after initialization', () => {
        let fixture, component;

        beforeEach(async(() => {
            TestBed.configureTestingModule({
                declarations:[VehiclesComponent],
                providers :[
                    {provide:NavController, useClass:NavControllerMock},
                    {provide:NavParams, useClass:NavParamsMock},
                    {provide:MessagingService, useClass:MessagingServiceMock},
                    {provide:VehicleService, useClass:VehicleServiceMock},
                    {provide:UserClass, useClass:UserClassMock},
                    {provide:Content, useClass:ContentMock}
                ],
                schemas:[CUSTOM_ELEMENTS_SCHEMA]
            }).compileComponents();
        }));

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

        it('should be defined', () => {
            expect(component).toBeDefined();
        });

        it('should be created', () => {
            expect(component instanceof VehiclesComponent).toBe(true);
        });
    });

    describe('methods', () => {
        let navController:NavController;
        let navParams:NavParams;
        let messagingService:MessagingService;
        let vehicleService:VehicleService;
        let userClass:UserClass;
        let content:Content;

        let vehiclesComponent:VehiclesComponent;

        beforeEach(() => {
            navController = NavControllerMock.instance();
            navParams = NavParamsMock.instance();
            messagingService = MessagingServiceMock.instance();
            vehicleService = VehicleServiceMock.instance();
            userClass = UserClassMock.instance();
            content = ContentMock.instance();

            vehiclesComponent = new VehiclesComponent(navController, navParams, messagingService, vehicleService, userClass);
        });

        describe('ionViewWillEnter method', () => {
            it('should be defined', () => {
                expect(vehiclesComponent.ionViewWillEnter).toBeDefined();
            });

            it('should be a function', () => {
                expect(typeof vehiclesComponent.ionViewWillEnter).toEqual('function');
            });

            it('should assign the value of UserClass.vehicleList to the local variable', () => {
                vehiclesComponent.ionViewWillEnter();
                expect(vehiclesComponent.vehicles.length).toEqual(0);
            });
        });
    });
});

有问题的组件：

import {Component, ViewChild} from '@angular/core';
import {IonicPage, NavController, NavParams, Content} from 'ionic-angular';

import {MessagingService} from "../shared/services/messaging.service";
import {VehiclesDetailsComponent} from "../vehicles-details/vehicles-details.component";
import {VehicleService} from "../shared/services/vehicle.service";
import {Vehicle} from "../shared/interfaces/vehicle.interface";
import {AlertButtonConfigClass} from "../shared/classes/alertConfig.class";
import {UserClass} from "../shared/classes/user.class";

@IonicPage()
@Component({
  selector: 'pbm-vehicles',
  templateUrl: 'vehicles.component.html'
})
export class VehiclesComponent {
    @ViewChild(Content) content: Content;
  public vehicles: Vehicle[] = [];

    constructor(public navCtrl: NavController, public navParams: NavParams, private messagingService: MessagingService, private vehicleService: VehicleService, private userClass: UserClass) {}

    ionViewWillEnter(){
        this.vehicles = this.userClass.vehicleList;
        //TODO: When ionic fixes the refresh problem that happens after adding an item to a list we should probably remove this.
        //See this issue: https://github.com/ionic-team/ionic/issues/13028
        this.content.resize();
    }

  public addNewVehicle(){
    this.navCtrl.push(VehiclesDetailsComponent, {'theVehicle': this.vehicleService.newVehicle()});
  }

  editVehicle(theVehicle:Vehicle) {
    this.navCtrl.push(VehiclesDetailsComponent, {'theVehicle': theVehicle});
  }
}

我可以将错误隔离在＆＃34;方法＆＃34;的最后一个断言中。套房。有人可以告诉我如何将内容注入该测试吗？任何和所有建议都欢迎。

如何在单元测试中处理离子内容

0 个答案: