从Docker运行Angular测试脚本

时间:2018-08-02 16:20:02

标签: angular docker testing npm

我们有一个使用Jasmine和karma进行测试的角度应用程序。作为测试的一部分,我们获得了一个不错的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测试而不是dotnet测试来做同样的事情,但是我不相信我们会通过/失败,因为无论测试通过还是失败,都会创建浏览器窗口。

我们有一个执行的测试脚本,我相信它会创建所有这些脚本(我不是实现者,所以我不确定其所有功能),但是我相信构建UI的部分在注释“ ,初始化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运行与上面类似的脚本有关,但是如果没有ui组件,我只是无法使其正常运行。

1 个答案:

答案 0 :(得分:1)

这里的标准做法是在Jenkins或您使用的任何工具中进行构建。 Jenkins版本将如下所示:

(1)克隆回购

(2)npm install

(3)ng lint

(4)npm run test:ci(此package.json脚本应执行以下ng test命令)

(5)npm运行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(dev)

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

这是dev conf的摘录:

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'
    ]
  }
}

使用无头Chrome进行CI构建很重要。基本上,Chrome在没有UI的情况下在后台运行。不确定customLaunchers部分是否有用,但对我们有用。

最后,要在ng6中使用其他配置启动业力,命令是:

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

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