如何测试 AngularJS 服务应用 CSS class 使用 angular.element("element").addClass 使用 Jasmine？

Question

我们正在为我们的应用开发深色模式主题，我们通过更改 body 元素上的 CSS class 来设置它。它通过 AngularJS 服务打开和关闭，调用如...

function setTheme(theme){
    angular.element("body").addClass(theme);
}

我正在尝试在服务中使用 Jasmine 编写单元测试，以确保通过添加主题 CSS class 调用 angular.element("body")，例如....

this.mockAngularElement = {
    addClass: jasmine.createSpy("addClass"),
    removeClass: jasmine.createSpy("removeClass")
};
jasmine.createSpy(angular, "element").and.returnValue(this.mockAngularElement);

并且相应的单元测试有这两条期望线...

expect(angular.element).toHaveBeenCalledWith("body");
        expect(this.mockAngularElement.addClass).toHaveBeenCalledWith("mock-theme");

然而茉莉花似乎在抱怨...

Error: <toHaveBeenCalledWith> : Expected a spy, but got Function.
        Usage: expect(<spyObj>).toHaveBeenCalledWith(...arguments) in node_modules/jasmine-core/lib/jasmine-core/jasmine.js (line 3690)
        <REDACTED>.spec.js:153:53

对此有什么想法吗？实际测试 body 元素的更好方法是从该服务中应用此 CSS class？

Answer 1

部分答案，我们可以检查 Angular 元素是用...

调用的

spyOn(angular, "element").and.callThrough();

并使用标准 expect()

检查

虽然无法测试 addClass 和 removeClass，因为模拟 angular 元素可能会在单元测试时出现一些奇怪的 angular 错误而破坏应用程序。

这对于我们的测试用例应该足够好了。

Answer 2

使用 Jasmine 的 toHaveClass 语法。

expect(angular.element("body")).toHaveClass("css-class");

如何测试 AngularJS 服务应用 CSS class 使用 angular.element("element").addClass 使用 Jasmine？

How do I test an AngularJS service applies a CSS class using angular.element("element").addClass using Jasmine?

jasmine

angularjs