2
Answers

Jasmine HTML loader is not loading in angular 4 webpack

Photo of Sujeet Raman

Sujeet Raman
7y
861
1
I am trying to unit test my angular app.as am new to this karama test i am trying to karma,jasmine and protractor..i ve downloaded and all karma dependencies.i am using angular webpack version in visual studio 2017.i am facing some issues like
 
1.karma html loader is not loading,only i can see karma v1.7.0 is connected,while debugging am getting module error in karma browser but application works fine
2.i have done a component testing but its showing error..in CLI version its working
3.i ve downloaded protractor do i need to add protractor.js manually?
4.How to configure karma in webpack version to get html view
 
What I have tried:
  1. my pakage.json  
  2. {  
  3. "name": "EfficiencyClassWebApp",  
  4. "private": true,  
  5. "version": "0.0.0",  
  6. "scripts": {  
  7. "test": "karma start ClientApp/test/karma.conf.js"  
  8. },  
  9. "dependencies": {  
  10. "@angular/animations": "4.2.5",  
  11. "@angular/common": "4.2.5",  
  12. "@angular/compiler": "4.2.5",  
  13. "@angular/compiler-cli": "4.2.5",  
  14. "@angular/core": "4.2.5",  
  15. "@angular/forms": "4.2.5",  
  16. "@angular/http": "4.2.5",  
  17. "@angular/platform-browser": "4.2.5",  
  18. "@angular/platform-browser-dynamic": "4.2.5",  
  19. "@angular/platform-server": "4.2.5",  
  20. "@angular/router": "4.2.5",  
  21. "@ngtools/webpack": "1.5.0",  
  22. "@types/webpack-env": "1.13.0",  
  23. "angular2-template-loader": "0.6.2",  
  24. "aspnet-prerendering": "^3.0.1",  
  25. "aspnet-webpack": "^2.0.1",  
  26. "awesome-typescript-loader": "3.2.1",  
  27. "bootstrap": "3.3.7",  
  28. "css": "2.2.1",  
  29. "css-loader": "0.28.4",  
  30. "csvtojson": "^1.1.9",  
  31. "es6-shim": "0.35.3",  
  32. "event-source-polyfill": "0.0.9",  
  33. "expose-loader": "0.7.3",  
  34. "extract-text-webpack-plugin": "2.1.2",  
  35. "file-loader": "0.11.2",  
  36. "html-loader": "0.4.5",  
  37. "isomorphic-fetch": "2.2.1",  
  38. "jquery": "3.2.1",  
  39. "json-loader": "0.5.4",  
  40. "ngx-papaparse": "^1.2.5",  
  41. "preboot": "4.5.2",  
  42. "primeng": "^5.0.0",  
  43. "raw-loader": "0.5.1",  
  44. "reflect-metadata": "0.1.10",  
  45. "rxjs": "5.4.2",  
  46. "style-loader": "0.18.2",  
  47. "to-string-loader": "1.1.5",  
  48. "toastr-ng2": "^4.1.1",  
  49. "typescript": "2.4.1",  
  50. "url-loader": "0.5.9",  
  51. "web-animations-js": "^2.3.1",  
  52. "webpack": "2.5.1",  
  53. "webpack-hot-middleware": "2.18.2",  
  54. "webpack-merge": "4.1.0",  
  55. "zone.js": "0.8.12"  
  56. },  
  57. "devDependencies": {  
  58. "@types/chai": "4.0.1",  
  59. "@types/jasmine": "2.5.53",  
  60. "@types/rx": "^4.1.1",  
  61. "chai": "4.0.2",  
  62. "jasmine-core": "2.6.4",  
  63. "karma": "1.7.0",  
  64. "karma-chai": "0.1.0",  
  65. "karma-chrome-launcher": "2.2.0",  
  66. "karma-cli": "1.0.1",  
  67. "karma-jasmine": "1.1.0",  
  68. "karma-webpack": "2.0.3",  
  69. "protractor-webpack": "^1.1.0",  
  70. "webpack": "1.13.1",  
  71. "html-loader": "0.4.3",  
  72. "babel-loader": "5.3.2",  
  73. "html-webpack-plugin": "1.6.1",  
  74. "rimraf": "^2.5.3",  
  75. "run-sequence": "1.1.2",  
  76. "karma-coverage": "^0.5.3",  
  77. "loader-utils": "^0.2.12",  
  78. "karma-jasmine-html-reporter": "^0.2.2",  
  79. "karma-mocha-reporter": "^2.2.2",  
  80. "karma-remap-istanbul": "^0.6.0"  
  81. }  
  82. }  
  83. karma.config.js  
  84. module.exports = function (config) {  
  85. config.set({  
  86. basePath: '.',  
  87. frameworks: ['jasmine'],  
  88. files: [  
  89. '../../wwwroot/dist/vendor.js',  
  90. './boot-tests.ts'  
  91. ],  
  92. preprocessors: {  
  93. './boot-tests.ts': ['webpack']  
  94. },  
  95. reporters: ['progress'],  
  96. port: 9876,  
  97. colors: true,  
  98. logLevel: config.LOG_INFO,  
  99. autoWatch: true,  
  100. browsers: ['Chrome'],  
  101. mime: { 'application/javascript': ['ts','tsx'] },  
  102. singleRun: false,  
  103. webpack: require('../../webpack.config.js')().filter(config =>  
  104. config.target !== 'node'), // Test against client bundle, because  
  105. tests run in a  
  106. browser  
  107. webpackMiddleware: { stats: 'errors-only' }  
  108. });  
  109. };  
  110. my spec.ts/component test  
  111. import { async, ComponentFixture, TestBed } from  
  112. '@angular/core/testing';  
  113. import { } from 'jasmine';  
  114. import { ManageMarketComponent } from './marketdetails.component';  
  115. describe('ManageMarketComponent', () => {  
  116. let component: ManageMarketComponent;  
  117. let fixture: ComponentFixture<ManageMarketComponent>;  
  118. beforeEach(async(() => {  
  119. TestBed.configureTestingModule({  
  120. declarations: [ManageMarketComponent]  
  121. })  
  122. .compileComponents();  
  123. }));  
  124. beforeEach(() => {  
  125. fixture = TestBed.createComponent(ManageMarketComponent);  
  126. component = fixture.componentInstance;  
  127. fixture.detectChanges();  
  128. });  
  129. it('ManageMarketComponent is created ', () => {  
  130. expect(component).toBeTruthy();  
  131. });  
  132. });

Answers (2)

Next Recommended Forum