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
– TheUnreal, Commented Aug 17, 2017 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
– hesch, Commented Sep 10, 2017 at 20:47

brijmcq · Accepted Answer · 2018-01-09 14:01:19Z

3

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.

answered Jan 9, 2018 at 14:01

brijmcq

3,4182 gold badges19 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alexei - check Codidact Over a year ago

This requires restarting ng test though. Thanks for the late answer.

Alexei - check Codidact · Accepted Answer · 2019-08-30 09:07:27Z

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
      }
    ],

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related