Angular

Question

我正在使用 Jasmine/karma 为 angular 6 组件中的可观察对象编写单元测试用例。请找到我正在为其编写测试用例的组件方法。

public ngOnInit(): void {
{
   this.editOrderContainer.getEditOrderState().subscribe(editOrderState => {
            this.shipAddressEditted = editOrderState.data.shipAddressEdited;
            this.shipInstructionEditted = editOrderState.data.shipInstructionEditted;
            this.hasShippingDetailsChanged = (this.shipAddressEditted || this.shipInstructionEditted) && this.existedAffectedOrderNumbers;
        });
...
}

在上面的代码中，对于变量"hasShippingDetailsChanged"，我的测试用例应该cover/expect。在规格文件中，我会有如下 "it"

it('verify if Shipping instructions text is set to true if instructions test is changed.', () => {
            expect(component.hasShippingDetailsChanged).toBeTruthy();
        });

.spec文件中mocking/spy的代码如下，

let editOrderContainer: any;
let getEditOrderState: any;

beforeEach(async () => {
...
     editOrderContainer = jasmine.createSpyObj('editOrderContainer', ['getEditOrderState', 'rebookOrder']);
            editOrderContainer.getEditOrderState.and.callFake(() => {
                return getEditOrderState;
            });
            getEditOrderState = {
                subscribe: function () {
                    return getOrderDetailsServiceResult();
                }
            };
            spyOn(getEditOrderState, 'subscribe').and.callThrough();
            ...
 });

 function getOrderDetailsServiceResult() {
        return {
            shipAddressEditted: true,
            shipInstructionEditted : true
        };
    }

EditOrderContainer代码如下：

public getEditOrderState(): Observable<EditOrderState> {
        return this.store.select(s => s.editOrderReducer);
    }

我在这里遇到的问题，它正在为订阅中的 editOrderState 返回值，并且没有执行 lambda 表达式语句

即shipAddressEditted、shipInstructionEditted、hasShippingDetailsChanged 的赋值语句没有被执行。我希望执行这些行，以便分配所需的变量 hasShippingDetailsChanged。

知道我在这里犯了什么错误吗？为什么订阅 lambda 表达式没有在规范文件中执行？

Answer 1

尝试使用 stub 以便它也可以在其他地方重复使用。尝试以下更改：

在构造函数中将 editOrderContainer 设为 public:

constructor(public editOrderContainer: EditOrderContainer,.....)

创建一个 stub 作为 EditOrderContainerStub:

export class EditOrderContainerStub{
   getEditOrderState(){
     return of({
       data: {
          shipAddressEditted: true,
          shipInstructionEditted : true
        }
     })
   }
}

在 spec 文件的 providers 中：

beforeEach(async () => {
    providers:[{provide: EditOrderContainer , useClass: EditOrderContainerStub}],

//....... your declaration

});

it('verify if Shipping instructions text is set to true if instructions test is changed.', () => {
     component.existedAffectedOrderNumbers = true;
     component.ngOnInit();
     expect(component.hasShippingDetailsChanged).toBeTruthy();
 });

Answer 2

我找到了答案，问题在于我为 editOrderContainer 及其方法 getEditOrderState 创建间谍的方式，returns 一个可观察对象。

在我之前的代码中 Observable.of(editOrderState) 丢失了，这是必需的。我也不应该或不需要 mock/spy 用于 subscribe 方法

我的间谍对象如下所示..

editOrderContainer = jasmine.createSpyObj('editOrderContainer', ['getEditOrderState', 'rebookOrder']);
editOrderContainer.getEditOrderState.and.callFake(() => {
            var editOrderState = getOrderDetailsServiceResult();
            return Observable.of(editOrderState);
        });


 function getOrderDetailsServiceResult() {
        return {
                data: {
                        shipAddressEdited: true,
                        shipInstructionEditted: true
                    }
                };
    }

Angular - Jasmine/karma - 订阅 lambda 表达式未被执行

Angular - Jasmine/karma - subscribe lambda expression is not getting executed

unit-testing

jasmine

typescript

karma-jasmine