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函数接受一个对象，包装该方法，然后在对象本身上设置一个替换spied函数实例的属性。这非常重要，因为它会在最终发生方法名称的属性查找的地方发生变化。

在正常情况下（Thing1），我们会在spyOn上覆盖一个属性（使用x），然后在x上调用相同的方法。一切正常，因为我们正在调用spyOn包裹的完全相同的功能。

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

在固定的情况下（Thing3），我们使用一个函数来更懒惰地获取sayHello的值，所以当z.sayHello发生变化时（因为我们发现它），{{ 1}}调用＆＃34;看到＆＃34;现在在实例对象上而不是类原型的新方法对象。

jasmine spyOn没有正确报告toHaveBeenCalled和toHaveBeenCalledWith

1 个答案: