Display issue without css with ng test Angular 4 Karma-Jasmine

Question

I have display issue when running the command ng test. It seems I don't have css effect anymore.Here are two images one from the ng serve and the other from ng test

Is this a normal behavior ? Should I share specific files from my project Just leave a comment.

This is a normal behavior, why do you need the CSS for? you might be able to manually import the css to the test but I don't see any reason to do it — TheUnreal, Aug 17 '17 at 15:28
Same problem here. Not only CSS isn't rendered correctly, DOM events aren't exist, too. Example: If a DIV element has a onClick listener it isn't available in test environment and can't be tested with tests. — hesch, Sep 10 '17 at 20:47

score 3 · Accepted Answer · answered Jan 09 '18 at 14:01

This might be too late but it may help somebody.

Go to your karma.conf.js and add this

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular/cli'],
    files:[
      "node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
     "src/styles.css",
    ],
     // more code below

In this sample, I added my styles.css and a pre-built theme from angular material.

Let me know if you still need any help.

This requires restarting `ng test` though. Thanks for the late answer. — Alexei - check Codidact, Aug 30 '19 at 08:59

score 0 · Answer 2 · answered Aug 30 '19 at 09:07

brijmcq provides great insight on how to fix the issue. I have also struggled with correctly loading css for fonts (that also load font files), in my case material icons:

The css file loads the font files and failed during testing

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(MaterialIcons-Regular.woff2) format('woff2'),
       url(MaterialIcons-Regular.woff) format('woff'),
       url(MaterialIcons-Regular.ttf) format('truetype');
}

This can be overcome by instructing Jasmine to also serve those files:

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular/cli'],
    files: [
      "node_modules/bootstrap/dist/css/bootstrap.css",
      "node_modules/material-design-icons/iconfont/material-icons.css",
      "node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
      {
        pattern: 'node_modules/material-design-icons/iconfont/*',
        watched: false,
        included: false,
        served: true,
        nocache: false
      }
    ],

Display issue without css with ng test Angular 4 Karma-Jasmine

2 Answers2