运行Angular Jasmine的Gitlab CI测试崩溃没有错误

Question

刚刚设置Gitlab CI在我的Angular项目中运行Jasmine测试，我发现管道会爆炸，很少有原因指示。

当我使用ng test本地运行或在无头Chrome中本地运行时，我的所有测试都会通过（跟随docs和another guide进行设置）。但是，管道将进行大约13/90测试，然后断开连接。

这是调试输出的示例（在karma.conf.js中使用logLevel: config.LOG_DEBUG）：

HeadlessChrome 74.0.3723 (Linux 0.0.0): Executed 2 of 92 SUCCESS (0 secs / 0.311 secs)
HeadlessChrome 74.0.3723 (Linux 0.0.0): Executed 3 of 92 SUCCESS (0 secs / 0.475 secs)
15 03 2019 00:09:46.911:DEBUG [middleware:source-files]: Requesting /assets/img/logo.png
HeadlessChrome 74.0.3723 (Linux 0.0.0): Executed 11 of 92 SUCCESS (0 secs / 1.659 secs)
15 03 2019 00:09:47.738:DEBUG [middleware:source-files]: Requesting /media/img/showcase-image.jpg
HeadlessChrome 74.0.3723 (Linux 0.0.0): Executed 12 of 92 SUCCESS (0 secs / 1.875 secs)
15 03 2019 00:09:48.312:DEBUG [HeadlessChrome 74.0.3723 (Linux 0.0.0)]: Disconnected during run, waiting 2000ms for reconnecting.
15 03 2019 00:09:48.312:DEBUG [HeadlessChrome 74.0.3723 (Linux 0.0.0)]: EXECUTING -> EXECUTING_DISCONNECTED
15 03 2019 00:09:50.320:WARN [HeadlessChrome 74.0.3723 (Linux 0.0.0)]: Disconnected (0 times)reconnect failed before timeout of 2000ms (transport close)
HeadlessChrome 74.0.3723 (Linux 0.0.0) ERROR
  Disconnectedreconnect failed before timeout of 2000ms (transport close)
HeadlessChrome 74.0.3723 (Linux 0.0.0): Executed 12 of 92 DISCONNECTED (4.476 secs / 1.875 secs)
HeadlessChrome 74.0.3723 (Linux 0.0.0) ERROR
HeadlessChrome 74.0.3723 (Linux 0.0.0): Executed 12 of 92 DISCONNECTED (4.476 secs / 1.875 secs)
15 03 2019 00:09:50.340:DEBUG [karma-server]: Run complete, exiting.

Answer 1

即使使用调试日志，也几乎没有什么可继续的。我最后的希望是调查可疑的

[middleware:source-files]: Requesting /assets/img/logo.png
[middleware:source-files]: Requesting /media/img/showcase-image.jpg

消息。我也看过像WARN [web-server]: 404: /media/img/showcase-image.png这样的日志，但来自本地运行和Gitlab CI。

阅读how to fix 404 warnings for images during karma unit testing以及Karma files文档是有帮助的。

解决方案是修复这些404并确保我所有的“虚构”测试图像网址都解析为真实图像。之后，Gitlab CI任务正常运行。

这是我需要添加到karma.conf.js的配置：

files: [
   {pattern: 'assets/img/*.png', watched: false, included: false, served: true, nocache: false},
   {pattern: 'testing/assets/img/*.png', watched: false, included: false, served: true, nocache: false}
],
proxies: {
   "/assets/": "/base/assets/",
   "/media/": "/base/testing/assets/img/"
},

说明

我的Angular应用程序使用捆绑在Angular项目的assets文件夹中的图像以及从CMS后端提供的图像。

文件列表中的第一项将Karma配置为将本地资产（例如assets / img / logo.png）加载到测试浏览器中。 Karma服务于/base/网址上的负载资产，因此可以在logo.png访问/base/assets/img/logo.png。 proxies的第一行代表assets/img/logo.png到/base/assets/img/logo.png的请求，从而确保在测试中加载logo.png。

对于由CMS提供的图像提供的假网址也是如此。我在我的项目中的testing / assets / img / fake.png中添加了一个“假”图像。在这种情况下，我的后端通常会在/media/上提供静态文件，所以我能够更新我的所有测试以提供/media/fake.png作为url，它代表/base/testing/assets/img/fake.png。

示例测试

beforeEach(() => {
    fixture = TestBed.createComponent(ProductComponent);
    component = fixture.componentInstance;
    component.product = {
      // other data here
      image: {
        url: '/media/fake.png'
      }
    };
    fixture.detectChanges();
}

it('should display image in card', () => {
    const img = fixture.nativeElement.querySelector('img');
    expect(img.src).toEqual('/media/fake.png')
});