Karma tests issue

[AlexeyPotopakhin]

Feature Description

Hello.
I have the following karma configuration in karma.conf.js:

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client: {
      clearContext: false,
      jasmine: {
        random: false
      }
    },
    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, '../coverage'),
      reports: ['html', 'lcovonly'],
      fixWebpackSourcePaths: true
    },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,
    failOnEmptyTestSuite: false
  });
};

In angular.json:

...
"test": {
          "builder": "ngx-pug-builders:karma",
          "options": {
            "main": "src/main/angular/src/test.ts",
            "polyfills": "src/main/angular/src/polyfills.ts",
            "tsConfig": "src/main/angular/src/tsconfig.spec.json",
            "karmaConfig": "src/main/angular/src/karma.conf.js",
            "styles": [
              "src/main/angular/src/styles.styl"
            ],
            "scripts": [
              "node_modules/perfect-scrollbar/dist/perfect-scrollbar.js",
              "node_modules/@hrp/metronic-scripts/dist/scripts.bundle.js"
            ],
            "assets": [
              "src/main/angular/src/favicon.ico",
              "src/main/angular/src/assets"
            ],
            "fileReplacements": [
              {
                "replace": "src/main/angular/src/environments/environment.ts",
                "with": "src/main/angular/src/environments/environment.test.ts"
              }
            ]
          }
        }
...

Tests not working and print the following errors:

Error: Errors during JIT compilation of template for FinancialServicesComponent: Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.) ("
	ag-grid-angular.ag-theme-balham(appAgGrid, [gridOptions]="gridOptions", [columnDefs]="columnDefs")
	[ERROR ->]"): ng:///FinancialServicesComponent/template.html@22:0, Invalid ICU message. Missing '}'. (" type of documentTypes")
	        i.mr-3.fas.fa-business-time([ngClass]="type.color")
	        span [ERROR ->]{{type.name}}
	
	app-ag-grid-filters([gridOptions]="gridOptions")
	"): ng:///FinancialServicesComponent/template.html@18:13
	Error: Errors during JIT compilation of template for FinancialServicesComponent: Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.) ("
	ag-grid-angular.ag-theme-balham(appAgGrid, [gridOptions]="gridOptions", [columnDefs]="columnDefs")
	[ERROR ->]"): ng:///FinancialServicesComponent/template.html@22:0, Invalid ICU message. Missing '}'. (" type of documentTypes")
	        i.mr-3.fas.fa-business-time([ngClass]="type.color")
	        span [ERROR ->]{{type.name}}
	
	app-ag-grid-filters([gridOptions]="gridOptions")
	"): ng:///FinancialServicesComponent/template.html@18:13
	    at parseJitTemplate (node_modules/@angular/compiler/fesm2015/compiler.js:22746:1)
	    at CompilerFacadeImpl.compileComponent (node_modules/@angular/compiler/fesm2015/compiler.js:22555:43)
	    at Function.get (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:27408:1)
	    at getComponentDef (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:1120:1)
	    at node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:27206:1
	    at Array.forEach (<anonymous>)
	    at setScopeOnDeclaredComponents (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:27202:1)
	    at flushModuleScopingQueueAsMuchAsPossible (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:26887:1)
	    at TestBedRender3.checkGlobalCompilationFinished (node_modules/@angular/core/__ivy_ngcc__/fesm2015/testing.js:1815:53)
	    at TestBedRender3.resetTestingModule (node_modules/@angular/core/__ivy_ngcc__/fesm2015/testing.js:1665:1)

It's looks like that pug templates not compiling to the html code. But in development and production everything works ok. Thank you!

ngx-pug-builders version: 12.0.0
Angular version: 12

Use Case

No response

[lekhmanrus]

Hi @AlexeyPotopakhin,

I've tried to reproduce that, but looks it is working just fine on my side:
ngx-pug-builders version: 12.0.0
Angular version: 12.2.16

Could you upload minimal reproduction to Github or StackBlitz, please?

[AlexeyPotopakhin]

Hi @lekhmanrus, thank you for attention! I've created fresh project from the Angular CLI and added ngx-pug-builders as dependency and builder in angular.json. Also I've created two components with html (AppHtmlComponent) and pug (AppComponent) templates for demonstration. Tests with html component are passing successfully, but test should render title with pug template fails.
https://github.com/AlexeyPotopakhin/ngx-pug-builders-karma-issue

[lekhmanrus]

Thanks @AlexeyPotopakhin! I was able to reproduce the issue. I'll try to allocate some time for this issue this weekend.

[mikolajszymanski]

Hello there :) I have same issue with it. How is work going on to resolve the bug? :)

[Quayle57]

Hello,
I have the same problem and I think that the JIT compilation just doesn't work yet with this project, my pug files are all generating errors while using JIT but never while using AOT.
The problem is that ng test is only using JIT from what I know

[AlexeyPotopakhin]

I've found one ugly solution, but it works. I use gulp task to copy all project files to temporary directory and compile pug code to html in all pug files before testing. Copy operation is too long (~2 mins for my project, cause of heavy node_modules directory).

gulpfile.js

const {src, dest, series} = require('gulp');
const rename = require("gulp-rename");
const pug = require('gulp-pug');

function pug2html () {
    return src('./src/**/*.pug')
        .pipe(pug({ doctype: 'html' }))
        .pipe(rename({ extname: '.pug' }))
        .pipe(dest('.dist/src'));
}

function copyProject () {
    return src('**/*')
        .pipe(dest('./dist'));
}

exports.test = series(copyProject, pug2html);

And in package.json:
"test": "gulp test && cd dist && npm i && ng test --karma-config karma.conf.js"

I gas it's possible to avoid copy operation and compile it directly in your project and then revert compiled html code in git :). Maybe it can help someone as temporary solution.

[lekhmanrus]

Looks like the issue is fixed for Angular CLI >= 13.1.0-rc.0 ("@angular-devkit/build-angular": "13.1.0-rc.0").