1

Having just setup Gitlab CI to run the Jasmine tests in my Angular project, I found the pipeline would bomb out with very little indication of the cause.

All my tests would pass when run locally using ng test or locally in headless Chrome (having followed docs and another guide to set that up). However, the pipeline would get to around 13/90 tests and then disconnect.

Here's a sample of the debug output (with logLevel: config.LOG_DEBUG in karma.conf.js):

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.
Greg Brown
  • 993
  • 10
  • 27

2 Answers2

1

Even with the debug logs there was very little to go on. My last hope was to look into the suspicious 

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

messages. I had also seen logs such as WARN [web-server]: 404: /media/img/showcase-image.png but coming from both local runs and Gitlab CI.

It was helpful to read how to fix 404 warnings for images during karma unit testing as well as the Karma files docs.

The solution was to fix these 404s and ensure all my 'fictitious' test image urls resolved to real images. After which the Gitlab CI task worked properly.

Here's the config I needed to add to 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/"
},

Explanation

My Angular app uses images both bundled in the assets folder in the Angular project as well as images served from a CMS backend.

The first item in the files list configures Karma to load local assets such as assets/img/logo.png into the testing browser. Karma serves the loaded assets on the /base/ url, so logo.png could be accessible at /base/assets/img/logo.png. The first line in proxies proxies a request for assets/img/logo.png to /base/assets/img/logo.png, thus ensuring the logo.png is loaded in the test.

The same idea is true for fake urls supplied for images served by the CMS. I added a 'fake' image in testing/assets/img/fake.png in my project. In this case, my backend would normally serve static files at /media/ so I was able to update all my tests to supply /media/fake.png as the url, which is proxied to /base/testing/assets/img/fake.png.

Example Test

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')
});
Greg Brown
  • 993
  • 10
  • 27
  • Are you sure that the img error was the cause of the error? We run into the same issue but the images error in test never caused this problem. – elpddev Sep 24 '19 at 05:08
  • @elpddev yes my CI pipeline started to work correctly after I implemented these changes to resolve the image urls. Hope you solve your issue. – Greg Brown Sep 24 '19 at 12:02
1

We ran into the same error in an Angular hybrid app once I started importing downgraded Angular 8 services into Angular JS (1.x) services. We were able to resolve the issue by setting the "--js-flags=--max-old-space-size=8196" flag for HeadlessChrome in our karma.cong.js

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