Question

我刚在我的Angular项目中设置了Gitlab CI来运行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

当我开始将降级的Angular 8服务导入Angular JS（1.x）服务时，我们在Angular混合应用程序中遇到了相同的错误。我们可以通过在 karma.cong.js

中为HeadlessChrome设置“ --js-flags =-max-old-space-size = 8196”标志来解决该问题

    customLaunchers: {
        headlessChrome: {
            base: "ChromeHeadless",
            flags: [
                "--no-sandbox",
                "--js-flags=--max-old-space-size=8196", <<< add this
            ],
        },
    },

Answer 2

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

[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 ）加载到测试浏览器中。业力在/base/网址上提供已加载的资产，因此可以在logo.png上访问/base/assets/img/logo.png。 proxies的第一行将对assets/img/logo.png的请求代理到/base/assets/img/logo.png，从而确保在测试中加载logo.png。

对于由CMS提供的图像提供的伪造URL，同样的想法也适用。我在项目的 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')
});

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

2 个答案: