Declined
Last Updated: 12 Apr 2021 11:37 by ADMIN
Alan
Created on: 05 Apr 2021 16:56
Category: Kendo UI for Angular 2+
Type: Bug Report
1
ng test fails to detect headless Chrome on first attempt when importing kendo-theme-default scss

Not sure if this is a bug in Angular CLI, Karma, or Kendo. I wrote up a bug for Angular CLI for this as well: https://github.com/angular/angular-cli/issues/20449

Issue only tested on Windows 10 x64 with Chrome 89 installed.

  1. Create new application:
    ng new <app-name> --strict=true --style=scss --routing=true
  2. Install @progress/kendo-theme-default
    npm install @progress/kendo-theme-default --save
  3. Open styles.scss, add the following line:
    @import "~@progress/kendo-theme-default/scss/all";
  4. Open karma.conf.js and change the following properties:
    autoWatch: false
    browsers: ['ChromeHeadlessCI'],
    customLaunchers: {
      ChromeHeadlessCI: {
        base: 'ChromeHeadless',
        flags: ['--no-sandbox']
      }
    },
   singleRun: true
  1. Run ng test

After 2+ minutes, warning in console shows: WARN [launcher]: ChromeHeadless have not captured in 60000 ms, killing.
Then, NFO [launcher]: Trying to start ChromeHeadless again (1/2).
The second time launches without issue.

If you remove the line from styles.scss and repeat ng test, the problem is not visible.

Alternatively, check out this repo and run ng test :https://github.com/acohenOT/unit-testing

Warning indicated below:

Karma v6.1.2 server started at http://localhost:9876/
05 04 2021 12:20:05.510:INFO [launcher]: Launching browsers ChromeHeadlessCI with concurrency unlimited
05 04 2021 12:20:05.536:INFO [launcher]: Starting browser ChromeHeadless
- Generating browser application bundles (phase: building)...05 04 2021 12:22:32.075:WARN [launcher]: ChromeHeadless have not captured in 60000 ms, killing.
/ Generating browser application bundles (phase: building)...05 04 2021 12:22:32.986:INFO [launcher]: Trying to start ChromeHeadless again (1/2).
√ Browser application bundle generation complete.
05 04 2021 12:22:39.009:INFO [Chrome Headless 89.0.4389.114 (Windows 10)]: Connected on socket 6ClQVkn2c_tOxxhlAAAB with id 89607273
Chrome Headless 89.0.4389.114 (Windows 10): Executed 3 of 3 SUCCESS (0.305 secs / 0.217 secs)
TOTAL: 3 SUCCESS
1 comment
ADMIN
Svet
Posted on: 12 Apr 2021 11:37

Hi Alan,

Thank you for the provided details. Indeed compilating the complete SCSS file for the Kendo theme will cause an Angular project to take some more time to compile the complete SCSS file. What could be done to avoid that is to load the SCSS files per component as demonstrated in the following article:

https://www.telerik.com/kendo-angular-ui/components/styling/custom-themes/#toc-using-the-build-process-of-the-application

Another option would be to load the generated CSS file of the theme instead of the SCSS file:

https://www.telerik.com/kendo-angular-ui/components/styling/#toc-using-precompiled-css

That way the project won't have to compile the SCSS but use the already generated CSS which will save time.

I hope the suggestions help.

Regards,
Svetlin
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.