typescript - 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 完全相同的函数。包裹。

在延迟的情况下(Thing2)，y.sayHello改变整个代码的含义。当我们第一次在构造函数中获取它时，我们得到了 sayHello方法来自类的原型(prototype)。当我们spyOn y.sayHello ，被包装的函数是一个新的对象，但是我们在执行之前得到的引用仍然指向sayHello的实现。在原型(prototype)中。

在固定情况下(Thing3)，我们使用一个函数来更懒惰地获取sayHello的值。 ，所以当z.sayHello变化(因为我们发现了它)，deferredHello调用“看到”现在位于实例对象而不是类原型(prototype)上的新方法对象。