angular - 从 Docker 运行 Angular 测试脚本

Question

我们有一个使用 jasmine 和 karma 来运行测试的 Angular 应用程序。作为我们测试的一部分，我们得到一个漂亮的 UI 浏览器弹出窗口，其中提供了大量有用的开发信息。虽然这对开发很有帮助，但我真正想要的是某种命令，它可以为所有测试提供成功或失败的结果。

这样做的目的是将其构建到 Dockerfile 中，以便我们在测试中轻松通过/失败。例如，我们的一项服务是这样做的:

FROM build AS test
WORKDIR /src
COPY Service.Project.Testing/Service.Project.Testing.csproj Service.Project.Testing/
RUN dotnet restore Service.Project.Testing/Service.Project.Testing.csproj
COPY . .
WORKDIR /src/Service.Project.Testing
RUN dotnet test

如果我们的任何测试失败，dotnet 将导致 docker compose 失败，这是我们希望的。我可以用 npm test 而不是 dotnet test 做同样的事情，但我不相信我们会得到通过/失败的结果，因为无论测试通过还是失败，都会创建浏览器窗口。

我们有一个执行的测试脚本，我相信它创建了所有这些(我不是实现者，所以我不确定它的所有功能)但我相信构建 UI 的部分是在评论“First , 初始化 Angular 测试环境”。正如我提到的，我不想失去这个开发功能，但我想要 docker compose 的简单通过/失败，类似于 dotnet 测试的工作方式。

// Prevent Karma from running prematurely
__karma__.loaded = function () { };

// First, initialize the Angular testing environment
testing.getTestBed().initTestEnvironment(
  testingBrowser.BrowserDynamicTestingModule,
  testingBrowser.platformBrowserDynamicTesting()
);

// Then we find all the tests
const context = require.context('../', true, /\.spec\.ts$/);

// And load the modules
context.keys().map(context);

// Finally, start Karma to run the tests
__karma__.start();

有没有人以前做过这个测试，有没有一种简单的方法可以在不破坏我们漂亮的开发 UI 的情况下进行？我想它与 npm run 和上面的某种类似脚本有关，但是没有 ui 组件，我只是无法让它运行。

Answer 1

此处的标准做法是在 Jenkins 或您使用的任何工具中进行构建。 Jenkins 构建看起来像这样:

(1) 克隆仓库

(2) npm 安装

(3) 吴林特

(4) npm run test:ci (这个package.json脚本应该执行下面的ng test命令)

(5) npm run test:e2e

(6) 使用dockerfile构建docker镜像:

FROM node:8.11.3 as node

WORKDIR /app
COPY package.json /app/
COPY package-lock.json /app/
RUN npm install --production
COPY ./ /app/
# Are you thinking of running your tests here? Interesting thought! But if you are running npm install with the prod flag (as you should be) your dev dependencies will not be available
RUN npm run build

(7)推送docker镜像

(8) ssh 进入服务器并更新容器以使用最新的镜像

你说的是一个漂亮的 GUI。很好，您可以将其保留给开发人员。对于构建，您将需要一个不同的业力配置(第二个业力配置文件)。

我们有:

karma.conf.js(开发)

karma.conf.ci.js(ci 构建)

以下是开发 session 的摘录:

browsers: ['Chrome'],
singleRun: false

以及 ci build conf 的摘录:

browsers: ['ChromeHeadless'],
singleRun: true,
customLaunchers: {
  ChromeHeadless: {
    base: 'Chrome',
    flags: [
      '--headless',
      '--disable-gpu',
      '--no-sandbox',
      '--remote-debugging-port=9222'
    ]
  }
}

使用 headless Chrome 进行 CI 构建很重要。基本上，Chrome 在没有 UI 的情况下在后台运行。不确定 customLaunchers 部分有多大用处，但它对我们有用。

最后，要在 ng6 中使用不同的配置启动 karma，命令是:

ng test --karma-config karma.conf.ci.js ProjectName

我认为 ng5 中的命令略有不同。