CODEWITHSUNDEEP
angularunit-testingjasminekarma-jasminetestbed
Melchia
Melchia

Reputation: 24234

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

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 enter image description here

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

Upvotes: 2

Views: 2034

Answers (2)

Alexei - check Codidact
Alexei - check Codidact

Reputation: 23078

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

Upvotes: 0

brijmcq
brijmcq

Reputation: 3418

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.

Upvotes: 3

Related Questions