我们是否应该在 AngularJS 项目的 Karma 单元级测试中使用 CSS答案

【问题标题】：Should we use CSS in Karma Unit level tests in AngularJS projects我们是否应该在 AngularJS 项目的 Karma 单元级测试中使用 CSS
【发布时间】：2014-11-15 22:26:56
【问题描述】：

假设您的 Javascript 执行一些元素/位置计算，例如在 angularjs 指令中。

为了测试这段 Javascript 代码，在 karma.conf.js 中包含 CSS 是否合适？

我看到一些流行的项目确实包含 css 文件。

例如ng-gridproject karma.conf.js

'dist/release/ui-grid.css',

这些问题更接近于 e2e 测试与单元测试的界限。

【问题讨论】：

我不太明白你需要 CSS 做什么
@StephanMuller 很多时候指令使用 HTML 模板？网址。当您拥有 HTML 时，您将拥有 CSS。发布链接功能可能需要计算位置，例如使用只读的 offsetLeft 属性放置工具提示，这些属性在 CSS 正确加载时定义。没有这个，计算逻辑（除了加/减）不能被测试，因为 offsetLeft 不可靠。
我认为答案应该是肯定的。如果您在指令中使用元素尺寸或坐标并想要测试它们，那么使用真正的 css 文件而不是在测试中设置内联可能是有意义的，也许可以被认为是集成测试，内联 css 可能更适合纯单元测试

标签： javascript css angularjs unit-testing karma-runner

【解决方案1】：

据我了解您的问题，这是我对此的看法-

单元测试是为了检查特定源代码的功能。

有以下几种方法可以对函数进行单元测试

将输入传递给函数并测试输出
传递输入并测试它为操纵该输入所做的每一件事（步骤）
测试它是否调用任何外部函数以获取任何输入并将存根值用作该外部函数的返回对象/值

如果指令中的方法正在操作 CSS，那么它应该在该方法中添加和删除 CSS 类，不是吗？因此，在断言中，它只需要检查特定类是否存在。（在我处理的大多数案例中）

CSS 文件是外部文件，它是 javascript 源文件的依赖项，应该被视为依赖项。

e2e 测试类似于集成测试，以确保所有集成文件是否完美地协同工作。因此，如果我们需要测试 CSS 更改，我们应该使用 e2e 进行检查。

Here 是来自 Miško Hevery 关于单元测试的有趣演讲。它与 CSS 无关，但通常是单元测试和处理依赖关系(17:50)

【讨论】：

它无法添加或删除 CSS。指令加载可能具有 CSS 和 postLink 功能的模板 HTML 可能需要正确定位元素。