Angular tests are considered a success, even when there is errors-CodePudding

I have some tests on an angular application.

All tests are passing, when I run ng test and the browser launch here is the result:

And when I run ng test --browsers=ChromeHeadless --watch=false, it's still a success

Chrome Headless 108.0.5359.124 (Mac OS 10.15.7): Executed 136 of 136 SUCCESS (2.832 secs / 1.844 secs)
TOTAL: 136 SUCCESS

But when I look at the logs I see some errors, that seems to not trigger a failure. Here is an example:

1. If 'p-skeleton' is an Angular component, then verify that it is a part of an @NgModule where this component is declared.

I know that to fix this error I have to import the right module in the spec file.

But the problem here is that if I don't look at the logs I won't see the errors, and I think it would be a good practice to fix that kind of error. So the first step would be to be warned that there is an error.

The best way that I can think of is to make the test fail on error, so that anyone running the tests is forced to fix the errors to make all tests pass.

Here is my karma.conf.js and I can't find a configuration line that make this.

// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html

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'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client: {
      jasmine: {
        // you can add configuration options for Jasmine here
        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
        // for example, you can disable the random execution with `random: false`
        // or set a specific seed with `seed: 4321`
        random: false,
      },
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    jasmineHtmlReporter: {
      suppressAll: true // removes the duplicated traces
    },
    coverageReporter: {
      dir: require('path').join(__dirname, './coverage/project'),
      subdir: '.',
      reporters: [
        {type: 'html'},
        {type: 'text-summary'}
      ]
    },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,
    restartOnFileChange: true
  });
};

So is it possible to make the tests fail on error ? And why it's not failing by default ?

CodePudding user response：

These are due to missing declarations during your configuration on your configureTestModule call.

Consider adding the PSkeletonComponent to the declarations property when calling

TestBed.configureTestingModule({…})

And the tests aren't failing because whatever piece of javascript that you're testing is properly working. It's just that the rendering engine is failing to link the mentioned components because you did not add them to the testing module.

If you're using Angular 14 or higher you can try this out

// enabling the feature globally on the test.ts file
getTestBed().initTestEnvironment(
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting(),
  { 
    errorOnUnknownElements: true,
    errorOnUnknownProperties: true
  }
);

// Enabling the feature per test suite
TestBed.configureTestingModule({
  declarations: [AppComponent],
  errorOnUnknownElements: true, 
  errorOnUnknownProperties: false
})

In case you're using Angular 13 or lower what people have been doing is "monkey-patching" the console.error method on the beforeEach call of their tests.

Replacing the original function with a call to fail from karma.

beforeEach(() => {
  console.error = (...args) => fail(...args)
})