javascript - 如何让 karma 浏览器使用深色主题？

Question

我开始在 Angular 应用程序中使用 karma，并希望将浏览器主题更改为深色。我想知道配置文件中是否有任何地方我可以只注入(inject)简单的 css 或使用添加 js 文件来注入(inject)这些样式。

例如 karma 风格.js

var css = `
  html * {
    background-color: black !important;
    color: white !important;
  }

  .html-reporter .failures .spec-detail .description {
    background-color: #b03911 !important;
  }
`,
head = document.head || document.getElementsByTagName('head')[0],
style = document.createElement('style');

style.type = 'text/css';
if (style.styleSheet){
    style.styleSheet.cssText = css;
} else {
    style.appendChild(document.createTextNode(css));
}

我尝试在 karma 配置中添加文件: //要在浏览器中加载的文件/模式列表 文件:[ './karma-styles.js', ],

但似乎无法让它工作，或者不确定这是否是添加此文件的适当位置。

有谁知道如何使用 karma 获得深色主题的自定义样式或可以执行此操作的插件？

Answer 1

我为此寻找预制样式，但无法找到任何如此快速制作的样式并将其发布在 GitHub Gist 中作为 karma.css。

Karma 允许您将文件添加到其配置中，从而允许插入 CSS 或 JS。 Source .

// list of files / patterns to load in the browser
files: [
    'karma.css'
]

这些与配置相关，如果您使用 Angular.io 的默认设置，则配置将是元素的根目录。 .

值得注意的是，这仅适用于 iframe 的内容，因此我没有使用适当的插件来执行此操作，而是使用以下行直接编辑了节点模块中的源 HTML 文件:

<link type="text/css" href="base/karma.css" rel="stylesheet">

路径 base 是您可以找到上面配置添加的 CSS 文件的位置。您应该编辑的 2 个文件(通常)位于:/node_modules/karma/static/client*.html。我怀疑相对链接在这里会按预期工作(不能自由使用..，但可以进入子目录)。