jasmine spyOn没有正确报告toHaveBeenCalled和toHaveBeenCalledWith

Question

被测代码:

module lib {
    export class Topic {
        private _callbacks: JQueryCallback;
        public id: string;
        public publish: any;
        public subscribe: any;
        public unsubscribe: any;
        public test: any;

        constructor(id: string) {
            this.id = id;
            this._callbacks = jQuery.Callbacks();
            this.publish = this._callbacks.fire;
            this.subscribe = this._callbacks.add;
            this.unsubscribe = this._callbacks.remove;
        }
    }

    export class Bus {
        private static _topics: Object = {};

        static topic(id: string): Topic {
            var topic = id && this._topics[id];

            if (!topic) {
                topic = new Topic(id);
                if (id) {
                    this._topics[id] = topic;
                }
            }

            return topic;
        }
    }
}

规范测试对象:

module lib {
    class Person {
        private _dfd: JQueryDeferred<Topic>;
        private _topic: Topic;

        constructor(public firstName: string) {
            this._dfd = jQuery.Deferred();
            this._topic = Bus.topic("user:logon");
            this._dfd.done(this._topic.publish);
        }

        logon() {
            this._dfd.resolve(this);
        }
    }

    class ApiService {
        constructor() {
            Bus.topic("user:logon").subscribe(this.callLogonApi);
        }
        callLogonApi(person: Person) {
            console.log("Person.firstname: " + person.firstName);
        }
    }

    describe("Bus", () => {
        var person: Person;
        var apiService: ApiService;

        beforeEach(() => {
            person = new Person("Michael");
            apiService = new ApiService();
            spyOn(apiService, "callLogonApi");

                //or this fails as well
                //spyOn(apiService, "callLogonApi").and.callThrough();
            person.logon();
        });

        it("should create subscription and catch the published event", () => {
            expect(apiService.callLogonApi).toHaveBeenCalled();

                //this fails too 
            //expect(apiService.callLogonApi).toHaveBeenCalledWith(person);
        });
    });
}

调用callLogonApi函数并按预期编写控制台,但输出为:

Expected spy callLogonApi to have been called.
Error: Expected spy callLogonApi to have been called.

*现在使用ApiService的构造函数更改为:

    constructor() {
        Bus.topic("user:logon").subscribe((data)=> { this.callLogonApi(data); });
    }

*而spyOn需要

        spyOn(apiService, "callLogonApi").and.callThrough();

感谢Ryan的好回答!!

Answer 1

这是一个较小的版本.

首先,这是一个更简单的spyOn方法版本:

function spyOn(obj: any, methodName: string) {
    var prev = obj[methodName];
    obj[methodName] = function() {
        console.log(methodName + ' got called');
        prev();
    }
}

现在让我们用一个简单的类来试试这个:

/** OK **/
class Thing1 {
    sayHello() {
        console.log('Hello, world');
    }
}

var x = new Thing1();
spyOn(x, 'sayHello');
x.sayHello(); // 'sayHello got called'

这按预期工作.转到延迟版本,这是您的代码正在执行的操作:

/** Not OK **/
class Thing2 {
    private helloMethod;

    constructor() {
        this.helloMethod = this.sayHello;
    }

    deferredHello() {
        window.setTimeout(this.helloMethod, 10);
    }

    sayHello() {
        console.log('Hello, world');
    }
}

var y = new Thing2();
spyOn(y, 'sayHello');
y.deferredHello(); // Why no spy?

最后,修复版本.我会解释为什么它很快就会解决:

/** OK now **/
class Thing3 {
    private helloMethod;

    constructor() {
        this.helloMethod = () => { this.sayHello(); }
    }

    deferredHello() {
        window.setTimeout(this.helloMethod, 10);
    }

    sayHello() {
        console.log('Hello, world');
    }   
}

var z = new Thing3();
spyOn(z, 'sayHello');
z.deferredHello(); // Spy works!

这是怎么回事？

请注意,该spyOn函数接受一个对象,包装该方法,然后在该对象本身上设置一个替换该间谍函数实例的属性.这非常重要,因为它会更改方法名称的属性查找最终会发生的位置.

在正常情况(Thing1)中,我们覆盖一个属性(使用spyOn)x,然后调用相同的方法x.一切正常,因为我们正在调用完全相同的函数spyOn.

在延迟的case(Thing2)中,y.sayHello整个代码中的更改意义.当我们第一次在构造函数中抓取它时,我们从类的原型中获取sayHello方法.当我们,包装函数是一个新对象,但我们之前在执行时得到的引用仍然指向原型中的实现.spyOn y.sayHellosayHello

在固定的case(Thing3)中,我们使用一个函数来更懒惰地获取值sayHello,所以当z.sayHello更改(因为我们发现它)时,deferredHello调用"看到"现在在实例对象而不是类原型上的新方法对象.