javascript - 从列表中选择项目的 Jasmine 测试

Question

我有一个 Angular 应用程序，我需要使用 Jasmine 对某些方法进行一些单元测试。在这种情况下，我对选择列表进行了单元测试。这样选择列表就不会为空。

方法如下所示:

 createStatusOptions(listValueoptions: OptionModel[], resources: any): OptionModel[] {
        const processStatusOptions = listValueoptions.map(listValueOption => {
            listValueOption.value = `${caseStatusEnum.inProgress}_${listValueOption.value}`;
            listValueOption.selected = true;
            return listValueOption;
        });

        const caseStatusEnumKeys = Object.keys(caseStatusEnum).filter(key => !isNaN(Number(key)));
        const enumOptions = this.optionService.createOptions(
            new ConfigOptionModel({ source: caseStatusEnumKeys, resources, resourcesModel: enumResourcesModel, isCustomEnum: true, }));

        return [
            this.getEnumOption(enumOptions, caseStatusEnum.submitted, true),
            ...processStatusOptions,
            this.getEnumOption(enumOptions, caseStatusEnum.closed),
        ];
    }

 private getEnumOption(options: OptionModel[], enumType, isSelected = false): OptionModel {
        const option = options.filter(enumOption => enumOption.value === `${enumType}`)[0];
        option.selected = isSelected;
        return option;
    }

我有这样的单元测试:

it('should create status options when there ar list value options are provided', () => {
        optionService.options = [
            {
                value: caseStatusEnum.submitted.toString(),
            },
            {
                value: caseStatusEnum.inProgress.toString(),
            },
            {
                value: caseStatusEnum.closed.toString(),
            },
        ] as OptionModel[];



        // tslint:disable-next-line:max-line-length
        const result = service.createStatusOptions(optionService.options, [[103], [104], [105] ]);
        console.log(result);
       expect(result.length).toBe(2);
        expect(result).toEqual([{ value: '103', selected: true }, { value: '105', selected: false }]);

    });

但是我得到这样的错误:

Services: CaseService > should create status options when there ar list value options are provided
TypeError: Cannot set property 'selected' of undefined
    at <Jasmine>
    at CaseService.getEnumOption (http://localhost:9878/src/app/case/src/services/case.service.ts?:130:9)
    at CaseService.getEnumOption [as createStatusOptions] (http://localhost:9878/src/app/case/src/services/case.service.ts?:109:22)
    at UserContext.<anonymous> (http://localhost:9878/src/app/case/src/services/case.service.spec.ts?:149:32)
    at ZoneDelegate.../../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9878/E:/Projects/Source/Repos/VLR/Web/vlrworkspace/node_modules/zone.js/dist/zone.js?:388:1)
    at ProxyZoneSpec.push.../../node_modules/zone.js/dist/proxy.js.ProxyZoneSpec.onInvoke (http://localhost:9878/E:/Projects/Source/Repos/VLR/Web/vlrworkspace/node_modules/zone.js/dist/proxy.js?:128:1)
    at ZoneDelegate.../../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9878/E:/Projects/Source/Repos/VLR/Web/vlrworkspace/node_modules/zone.js/dist/zone.js?:387:1)
    at Zone.../../node_modules/zone.js/dist/zone.js.Zone.run (http://localhost:9878/E:/Projects/Source/Repos/VLR/Web/vlrworkspace/node_modules/zone.js/dist/zone.js?:138:1)
    at runInTestZone (http://localhost:9878/E:/Projects/Source/Repos/VLR/Web/vlrworkspace/node_modules/zone.js/dist/jasmine-patch.js?:145:1)
    at UserContext.<anonymous> (http://localhost:9878/E:/Projects/Source/Repos/VLR/Web/vlrworkspace/node_modules/zone.js/dist/jasmine-patch.js?:160:1)
    at <Jasmine>

所以我的问题是:如何解决这个问题？

谢谢

如果我这样做:

   console.log(optionService.options);

我得到这个输出:

Array(3)
0: {value: "103", selected: true}
1: {value: "104"}
2: {value: "105", selected: false}
length: 3
__proto__: Array(0)

这是文件:

import { fakeAsync, tick } from '@angular/core/testing';
import { FormServiceMock, MultiFileUploadServiceMock } from 'afw/forms/testing';
import { AfwHttp } from 'afw/generic-services';
import { AfwHttpMock, OptionServiceMock } from 'afw/generic-services/testing';
import { OptionModel, SearchResultModel } from 'afw/models';
import { FeedbackStoreServiceMock } from 'afw/store-services/testing';
import { RouterMock } from 'afw/testing';
import { PagingDataModel, TableSortDataModel } from 'afw/ui-components';
import { caseOwnerEnum, caseStatusEnum, caseTypeEnum, MultiFileUploadResourcesModel } from 'lr/models';
import { Observable, observable } from 'rxjs';
import { CaseTypeInfoModel } from 'support-shared/base/models';
import { CaseTypeInfoStoreServiceMock } from 'support-shared/base/services/case-type-info-store.service.mock';
import { CaseFormComponent } from '../case-base/src/case-form/case-form.component';
import { CaseBaseModel, CaseReferenceModel } from '../models';
import { CaseService } from './case.service';

let service: CaseService;
let afwHttpMock: AfwHttpMock;
// tslint:disable-next-line:prefer-const
let formServiceMock: FormServiceMock;
let multiFileUploadService: MultiFileUploadServiceMock;
let router: RouterMock;
let feedbackStoreService: FeedbackStoreServiceMock;
let optionService: OptionServiceMock;
let caseTypeInfoStoreService: CaseTypeInfoStoreServiceMock;
// tslint:disable-next-line:prefer-const
let component: CaseFormComponent;


fdescribe('Services: CaseService', () => {

    beforeEach(() => {
        afwHttpMock = new AfwHttpMock();
        multiFileUploadService = new MultiFileUploadServiceMock();
        router = new RouterMock();
        feedbackStoreService = new FeedbackStoreServiceMock();
        optionService = new OptionServiceMock();
        caseTypeInfoStoreService = new CaseTypeInfoStoreServiceMock();
        service = new CaseService(afwHttpMock as any, multiFileUploadService as any, router as any,
            feedbackStoreService as any, optionService as any, caseTypeInfoStoreService as any);
    });

    it('should create an instance', () => {
        expect(service).toBeTruthy();
    });

    it('should get case reference details', () => {
        afwHttpMock.setupOnlyResponse({ type: caseTypeEnum.revisionRequest, details: { bsn: 'bsnLabel' } }, 200);
        const d = service.getCaseReferenceDetails('spinnerMessage', { reference: '112314121', type: caseTypeEnum.revisionRequest });
        d.subscribe(r => {
            expect(r.details.length === 1);
            expect(r.details[0].key).toBe('bsn');
            expect(r.details[0].value).toBe('bsnLabel');
            expect((r.details[0] as any).resourceKey).toBe('bsn');
        });
        afwHttpMock.returnSuccessResponse();
    });


    // tslint:disable-next-line:no-identical-functions
    it('should get case reference details with full response', () => {
        afwHttpMock.setupOnlyResponse({ body: { type: caseTypeEnum.revisionRequest, details: [{ key: 'hoi' }] } }, 200);
        const d = service.getCaseReferenceDetailsFullResponse('spinnerMessage', { reference: '100001075', type: caseTypeEnum.revisionRequest });
        // tslint:disable-next-line:no-commented-code
        // tslint:disable-next-line:no-identical-functions
        /*  let result;
         d.subscribe(r => {
             result = r;
         }); */

        d.subscribe(r => {
            expect(r.ok === true);
            expect(r.body.details[0].key).toBe('hoi');
        });

        afwHttpMock.returnSuccessResponse();
        // expect(result.ok === true);
        // expect(result.)

    });


    // tslint:disable-next-line:no-commented-code
    it('shoud get case type info configuration that is used on various views when snapshot exists', () => {
        let result99: Observable<CaseTypeInfoModel[]>;
        result99 = service.getCaseTypeInfo('spinner') as Observable<CaseTypeInfoModel[]>;
        const response = [{ mock: 'mock' } as any];
        service['caseTypeInfoSnapshot'] = response;
        service.getCaseTypeInfo('spinner').subscribe(i => {
            expect(i).toEqual(response);
        });
    });

    // tslint:disable-next-line:no-identical-functions
    it('shoud get case type info configuration that is used on various views when snapshot doesnt exists', () => {
        let result99: Observable<CaseTypeInfoModel[]>;
        const spy = spyOn(caseTypeInfoStoreService, 'addCaseTypeInfoToStore');
        result99 = service.getCaseTypeInfo('spinner') as Observable<CaseTypeInfoModel[]>;
        const response = [{ mock: 'mock' } as any];
        service['caseTypeInfoSnapshot'] = response;
        // caseTypeInfoStoreService..subscribe((result) => { expect(result).toBe(false); });
        result99.subscribe((result) => {
            expect(response).toEqual(response);
        });


        afwHttpMock.setupOnlyResponse(result99, 200);
        afwHttpMock.returnSuccessResponse();
    });

    it('should create status options when no list value options are provided', () => {
        optionService.options = [
            {
                value: caseStatusEnum.submitted.toString(),
            },
            {
                value: caseStatusEnum.inProgress.toString(),
            },
            {
                value: caseStatusEnum.closed.toString(),
            },
        ] as OptionModel[];


        // tslint:disable-next-line:no-commented-code
        //  const spy = spyOn(service, 'createStatusOptions');
        const result = service.createStatusOptions([], {});
        expect(result.length).toBe(2);
        expect(result).toEqual([{ value: '103', selected: true }, { value: '105', selected: false }]);
        // tslint:disable-next-line:no-commented-code
        //  const response = [{ mock: 'mock' } as any];
        // expect(spy).toBe(result);
    });

    it('should create status options when there ar list value options are provided', () => {
        optionService.options = [
            {
                value: caseStatusEnum.submitted.toString(),
            },
            {
                value: caseStatusEnum.inProgress.toString(),
            },
            {
                value: caseStatusEnum.closed.toString(),
            },
        ] as OptionModel[];



        // tslint:disable-next-line:max-line-length
        const result = service.createStatusOptions(optionService.options, 103);
        console.log(optionService.options);
        expect(result.length).toBe(2);
        expect(result).toEqual([{ value: '103', selected: true }, { value: '105', selected: false }]);

    });






    it('should get case reference without details', () => {
        afwHttpMock.setupOnlyResponse({}, 200);
        const spy = spyOn(afwHttpMock, 'post').and.callThrough();
        const model = new CaseReferenceModel({ reference: '112314121', type: caseTypeEnum.revisionRequest });
        const d = service.getCaseReferenceDetails('spinnerMessage', model);
        d.subscribe(r => {
            expect(r).toBeDefined();
        });
        expect(spy).toHaveBeenCalledWith('api/support/cases/get-reference-details', model, 'spinnerMessage');
        afwHttpMock.returnSuccessResponse();
    });

    it('should add case reference without details', () => {
        afwHttpMock.setupOnlyResponse({}, 200);
        const spy = spyOn(afwHttpMock, 'post').and.callThrough();
        const model = new CaseReferenceModel({ reference: '112314121', type: caseTypeEnum.revisionRequest });
        const d = service.addCase('spinnerMessage', model as any);
        d.subscribe(r => {
            expect(r).toBeDefined();
        });
        expect(spy).toHaveBeenCalledWith('api/support/cases', model, 'spinnerMessage');
        afwHttpMock.returnSuccessResponse();
    });

    it('should search for cases', () => {
        const formModel: any = { makeQueryString: () => 'name=test' };
        const pagingModel = new PagingDataModel({ currentPage: 10, itemsPerPage: 20 });
        const sortModel = new TableSortDataModel({ columnName: 'kol', isDescending: false });

        const spy = spyOn(afwHttpMock, 'get').and.callThrough();
        const mockData = [
            new CaseBaseModel({
                id: 100000001,
                type: caseTypeEnum.revisionRequest,
                status: caseStatusEnum.inProgress,
                substatus: 5266,
                verdict: null,
                owner: caseOwnerEnum.caseManager,
                dateSubmitted: '02-02-2009',
                dateClosed: '',
                reference: 'aaa',
            }),
        ];

        const setupResponse = new SearchResultModel<CaseBaseModel>();
        setupResponse.result = mockData;
        setupResponse.totalResultCount = 27;

        afwHttpMock.setupOnlyResponse(setupResponse, 200);
        let response: SearchResultModel<CaseBaseModel>;
        service.search(formModel, sortModel, pagingModel, 'spinnerText').subscribe(result => {
            response = result;
        });
        afwHttpMock.returnOnlyResponse();

        expect(spy).toHaveBeenCalledWith('api/support/cases?name=test&columnName=kol&isDescending=false&currentPage=10&itemsPerPage=20',
            'spinnerText');
        expect(response).toEqual(setupResponse);
        expect(response.result[0].getResourceForStatus).toBeDefined();
    });

    it('should save documents', fakeAsync(() => {
        const spy = spyOn(multiFileUploadService, 'syncFilesWithBackend').and.callThrough();
        const spyRouter = spyOn(router, 'navigate').and.callThrough();
        const spyFeedback = spyOn(feedbackStoreService, 'addSuccessMessageOnMainPortal');
        service.saveDocuments(1, [{} as any], MultiFileUploadResourcesModel.keys, '../', { key: 'da', value: 'fa' });
        expect(spy).toHaveBeenCalledWith('api/support/cases/1/documents', [{}],
            MultiFileUploadResourcesModel.keys.bijlageToevoegenSpinnerTekst,
            MultiFileUploadResourcesModel.keys.bijlageVerwijderenSpinnerTekst
        );
        tick();
        expect(spyRouter).toHaveBeenCalledWith(['../']);
        expect(spyFeedback).toHaveBeenCalled();
    }));

    it('should not save documents if there are no documents in array', fakeAsync(() => {
        const spy = spyOn(multiFileUploadService, 'syncFilesWithBackend').and.callThrough();
        const spyRouter = spyOn(router, 'navigate').and.callThrough();
        const spyFeedback = spyOn(feedbackStoreService, 'addSuccessMessageOnMainPortal');
        service.saveDocuments(1, [], MultiFileUploadResourcesModel.keys, '../', { key: 'da', value: 'fa' });
        expect(spy).not.toHaveBeenCalled();
        tick();
        expect(spyRouter).toHaveBeenCalledWith(['../']);
        expect(spyFeedback).toHaveBeenCalled();
    }));

    it('should save documents and report errors', fakeAsync(() => {
        multiFileUploadService.setResponse([{}, { error: {} }]);
        spyOn(multiFileUploadService, 'makeWarningMessageForUnsyncedFiles').and.returnValue('mock');
        const spyRouter = spyOn(router, 'navigate').and.callThrough();
        const spyFeedback = spyOn(feedbackStoreService, 'addWarningMessageOnMainPortal');
        const spy = spyOn(multiFileUploadService, 'syncFilesWithBackend').and.callThrough();
        service.saveDocuments(1, [{} as any], MultiFileUploadResourcesModel.keys, '../', { key: 'da', value: 'fa' });
        expect(spy).toHaveBeenCalledWith('api/support/cases/1/documents', [{}],
            MultiFileUploadResourcesModel.keys.bijlageToevoegenSpinnerTekst,
            MultiFileUploadResourcesModel.keys.bijlageVerwijderenSpinnerTekst
        );
        tick();
        expect(spyRouter).toHaveBeenCalledWith(['../']);
        expect(spyFeedback).toHaveBeenCalled();
    }));


    it('should get case by id', () => {
        const id = 66208014;
        const setupResponse = new CaseBaseModel({
            id,
            dateSubmitted: '',
            owner: caseOwnerEnum.caseManager,
            reference: 'ksjhkjshdf',
            status: caseStatusEnum.submitted,
            type: caseTypeEnum.revisionRequest,

        });
        afwHttpMock.setupOnlyResponse(setupResponse, 200);
        service.getCase(id, 'spinner').subscribe(r => {
            expect(r).toEqual(setupResponse);
        });
        afwHttpMock.returnSuccessResponse();
    });

    it('edit the case with model', () => {
        const spy = spyOn(service, 'editCase').and.callThrough();

        const caseUpdate = new CaseBaseModel({
            id: 100001075,
            dateSubmitted: '',
            owner: caseOwnerEnum.caseManager,
            reference: 'ksjhkjshdf',
            status: caseStatusEnum.submitted,
            type: caseTypeEnum.revisionRequest,

        });
        service.editCase('spinner', caseUpdate);
        expect(spy).toHaveBeenCalledWith('spinner', caseUpdate);
        expect(caseUpdate.id).toEqual(100001075);
    });
});

Answer 1

根据您目前展示的内容，我猜测传递给 getEnumOption() 的 options 参数未定义，这导致了您看到的错误。 getEnumOption() 中的快速 console.log(options) 将验证这一点。

如果您的代码在其他方面工作正常，但只是在测试中失败，那么我会再次猜测您没有正确模拟/spiedOn this.optionService.createOptions() 因为它设置了增加可能未定义的选项参数。这将在 .spec 文件的早期完成 - 如果您发布整个文件，那么这将帮助阅读您问题的其他人确定是否属于这种情况。

使用 Stackblitz 更新

我把你所有的代码都放到了 Stackblitz 中测试它。有很多我无法访问的代码，我只是猜测它们的功能。但是，我确实发现了一些事情。

首先，当您进行测试时，您似乎在模拟 this.optionService.createOptions() 预期的返回以及对 的调用中使用相同的变量service.createStatusOptions() - 这可能不是您想要做的。

这是我正在谈论的代码片段:

optionService.options = [
    {
        value: caseStatusEnum.submitted.toString(),
    },
    {
        value: caseStatusEnum.inProgress.toString(),
    },
    {
        value: caseStatusEnum.closed.toString(),
    },
] as OptionModel[];

// tslint:disable-next-line:max-line-length
const result = service.createStatusOptions(optionService.options, [[103], [104], [105] ]);

当我在 Stackblitz 中以这种方式调用它时，我遇到了一个可变性问题 - 您正在更改数组内对象成员中的数据，这将在访问该变量的任何地方更改它。为了在 Stackblitz 中克服这个问题，我制作了两份数据副本，一份用于模拟 returnValue，另一份用于调用 service.createStatusOptions() 的完全独立的对象数组。此外，我不熟悉您模拟服务调用的方式，因此我在 Stackblitz 中将其替换为一个简单的 Jasmine spy 。

请随意看看我制作的内容。或许会有帮助。