karma-webpack没有加载AngularJS包
我最近开始从一个习惯的gulp脚本转移到webpack,这个脚本用来处理各种各样的东西.我让它工作到一个点,在浏览器中转换,捆绑和服务客户??端应用程序非常好.
现在,当我使用gulp对捆绑的app.js文件运行我的业力测试时,gulp脚本将首先捆绑app.js文件,然后将其吐入dist文件夹.然后该业务将使用该文件对其运行测试.我的gulp测试任务还会监视任何测试文件更改或更改bundle文件,并根据它重新运行测试. 使用webpack,我理解这个dist / app.js驻留在内存中,而不是写入磁盘(至少我是如何设置它的).问题在于,似乎我的捆绑应用程序(通过webpack-dev-server –open获得良好服务)不会因为某些原因而被业力所加载,我无法弄清楚这个难题的缺失部分是. 这就是我的文件夹结构的样子(我只留下了与问题相关的最基本的东西): package.json webpack.config.js karma.conf.js src/ --app/ ----[other files/subfolders] ----app.ts ----index.ts --boot.ts --index.html tests/ --common/ ----services/ ------account.service.spec.js 这是我的webpack.config.js var path = require("path"); const webpack = require("webpack"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const CleanWebpackPlugin = require("clean-webpack-plugin"); const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin"); module.exports = { context: path.join(__dirname),entry: "./src/boot.ts",plugins: [ new webpack.HotModuleReplacementPlugin(),new ForkTsCheckerWebpackPlugin(),new CleanWebpackPlugin(["dist"]),new HtmlWebpackPlugin({ template: "./src/index.html" }) ],module: { rules: [ { test: /.scss$/,use: [{ loader: "style-loader" },{ loader: "css-loader" },{ loader: "sass-loader" }] },{ test: /.tsx?$/,use: [{ loader: "ts-loader",options: { transpileOnly: true,exclude: /node_modules/ } }] },{ test: /.html$/,loaders: "html-loader",options: { attrs: [":data-src"],minimize: true } } ] },resolve: { extensions: [".tsx",".ts",".js"],alias: { "common": path.resolve(__dirname,"src/app/common"),"common/*": path.resolve(__dirname,"src/app/common/*"),"modules": path.resolve(__dirname,"src/app/modules"),"modules/*": path.resolve(__dirname,"src/app/modules/*"),} },output: { filename: "app.js",path: path.resolve(__dirname,"dist") },devtool: "inline-source-map",devServer: { historyApiFallback: true,hot: false,contentBase: path.resolve(__dirname,"dist") } }; 这是我的karma.conf.js const webpackConfig = require("./webpack.config"); module.exports = function (config) { config.set({ frameworks: ["jasmine"],files: [ "node_modules/angular/angular.js","node_modules/angular-mocks/angular-mocks.js","dist/app.js",// not sure about this "tests/common/*.spec.js","tests/common/**/*.spec.js" ],preprocessors: { "dist/app.js": ["webpack","sourcemap"],// not sure about this either "tests/common/*.spec.js": ["webpack","tests/common/**/*.spec.js": ["webpack","sourcemap"] },webpack: webpackConfig,webpackMiddleware: { noInfo: true,stats: { chunks: false } },reporters: ["progress","coverage"],//,"teamcity"],coverageReporter: { dir: "coverage",reporters: [ { type: "html",subdir: "html" },{ type: "text-summary" } ] },port: 9876,colors: true,logLevel: config.LOG_INFO,autoWatch: true,browsers: [ "PhantomJS" //"Chrome" ],singleRun: false,concurrency: Infinity,browserNoActivityTimeout: 100000 }); }; 这是boot.ts,它基本上是应用程序的入口点: import * as app from "./app/app"; import "./styles/app.scss"; // This never gets written to the console // so I know it never gets loaded by karma console.log("I NEVER OUTPUT TO CONSOLE"); 这是app.ts(然后引用它下面的任何内容: import * as ng from "angular"; import * as _ from "lodash"; import "@uirouter/angularjs"; import "angular-cookies"; import "angular-material" import "angular-local-storage"; import "angular-sanitize"; import "angular-messages"; import "angular-file-saver"; import "angular-loading-bar"; import "satellizer"; export * from "./index"; import * as Module from "common/module"; import * as AuthModule from "modules/auth/module"; import * as UserModule from "modules/user/module"; import { MyAppConfig } from "./app.config"; import { MyAppRun } from "./app.run"; export default ng.module("MyApp",[ "ngCookies","ngSanitize","ngMessages","ngFileSaver","LocalStorageModule","ui.router","ngMaterial","satellizer","angular-loading-bar",Module.name,AuthModule.name,UserModule.name ]) .config(MyAppConfig) .run(MyAppRun); 最后,这是account.service.spec.js describe("Account service",function () { // SETUP var _AccountService; beforeEach(angular.mock.module("MyApp.Common")); beforeEach(angular.mock.inject(function (_AccountService_) { // CODE NEVER GETS IN HERE EITHER console.log("I NEVER OUTPUT TO CONSOLE"); _AccountService = _AccountService_; })); function expectValidPassword(result) { expect(result).toEqual({ minCharacters: true,lowercase: true,uppercase: true,digits: true,isValid: true }); } // TESTS describe(".validatePassword()",function () { describe("on valid password",function () { it("returns valid true state",function () { expectValidPassword(_AccountService.validatePassword("asdfASDF123")); expectValidPassword(_AccountService.validatePassword("as#dfAS!DF123%")); expectValidPassword(_AccountService.validatePassword("aA1234%$2")); expectValidPassword(_AccountService.validatePassword("YYyy22!@")); expectValidPassword(_AccountService.validatePassword("Ma#38Hr$")); expectValidPassword(_AccountService.validatePassword("aA1"#$%(#/$"#$/(=/#$=!")(")(")); }) }); }); }); 这是运行业力开始的输出 > npm test > myapp@1.0.0 test E:projectsWhatever > karma start clean-webpack-plugin: E:projectsWhateverdist has been removed. Starting type checking service... Using 1 worker with 2048MB memory limit 31 10 2017 21:47:23.372:WARN [watcher]: Pattern "E:/projects/Whatever/dist/app.js" does not match any file. 31 10 2017 21:47:23.376:WARN [watcher]: Pattern "E:/projects/Whatever/tests/common/*.spec.js" does not match any file. ts-loader: Using typescript@2.4.2 and E:projectsWhatevertsconfig.json No type errors found Version: typescript 2.4.2 Time: 2468ms 31 10 2017 21:47:31.991:WARN [karma]: No captured browser,open http://localhost:9876/ 31 10 2017 21:47:32.004:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/ 31 10 2017 21:47:32.004:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency 31 10 2017 21:47:32.010:INFO [launcher]: Starting browser PhantomJS 31 10 2017 21:47:35.142:INFO [PhantomJS 2.1.1 (Windows 8 0.0.0)]: Connected on socket PT-pno0eF3hlcdNEAAAA with id 71358105 PhantomJS 2.1.1 (Windows 8 0.0.0) Account service .validatePassword() on valid password returns valid true state FAILED forEach@node_modules/angular/angular.js:410:24 loadModules@node_modules/angular/angular.js:4917:12 createInjector@node_modules/angular/angular.js:4839:30 WorkFn@node_modules/angular-mocks/angular-mocks.js:3172:60 loaded@http://localhost:9876/context.js:162:17 node_modules/angular/angular.js:4958:53 TypeError: undefined is not an object (evaluating '_AccountService.validatePassword') in tests/common/services/account.service.spec.js (line 742) webpack:///tests/common/services/account.service.spec.js:27:0 <- tests/common/services/account.service.spec.js:742:44 loaded@http://localhost:9876/context.js:162:17 PhantomJS 2.1.1 (Windows 8 0.0.0) Account service .validatePassword() on valid amount of characters returns minCharacters true FAILED forEach@node_modules/angular/angular.js:410:24 loadModules@node_modules/angular/angular.js:4917:12 createInjector@node_modules/angular/angular.js:4839:30 WorkFn@node_modules/angular-mocks/angular-mocks.js:3172:60 node_modules/angular/angular.js:4958:53 TypeError: undefined is not an object (evaluating '_AccountService.validatePassword') in tests/common/services/account.service.spec.js (line 753) webpack:///tests/common/services/account.service.spec.js:38:0 <- tests/common/services/account.service.spec.js:753:37 PhantomJS 2.1.1 (Windows 8 0.0.0): Executed 2 of 2 (2 FAILED) ERROR (0.017 secs / 0.015 secs) 请注意我离开console.logs的几个地方,这些地方永远不会被触发.这就是我知道应用程序没有加载的方式.那和茉莉花无法注入我想测试的服务这一事实. 我正在使用: karma v1.7.1 karma-webpack v2.0.5 webpack v3.3.0 有任何想法吗?我究竟做错了什么?我的印象是我的webpack.config.js应该捆绑我的AngularJS / TS应用程序然后基本上把它送到业力,但无论出于何种原因,这似乎不起作用.或者我对这应该如何运作有一些根本的误解? 谢谢. 我将一些文件提取到一个简单的应用程序中并将其放到github中,以便轻松复制该问题. npm install # install deps npm run serve:dev # run the app - works npm run test # run karma tests - doesn't work 编辑: 我设法通过替换以下命令来运行测试: "dist/app.js" 在业力设置中 "src/boot.ts" 但这不会向下钻取或加载/导入应用程序的其余部分.然后我尝试只导入我要测试的类到规范,但后来我无法模拟我正在测试的类正在使用的任何DI注入的服务.无论如何,我在这个阶段几乎放弃了这个,并且不再试图弄清楚如何做到这一点,转向ang2. 解决方法
在将我的AngularJS项目构建从Grunt转移到Webpack期间,我遇到了类似的问题,并尝试了两种不同的方法.
1. Webpack和Karma是两个独立的过程.我制作了一个npm脚本并行运行webpack和karma.看起来像 "dev-build": "webpack --config webpack/development.js","dev-test": "karma start test/karma.development.conf.js","test": "concurrently --kill-others --raw "npm run dev-build" "npm run dev-test"" 而不是 尽管第一次卡玛失败的问题,它仍然有效. Karma在Webpack第一次编译完成之前就开始了测试.这不重要.此外,使用restartOnFileChange设置可以帮助…也许有另一个好的解决方法.我没有完成这个故事,我切换到选项2,我认为它比Webpack方式更适合于描述一个. 2. Karma是唯一使用Webpack的进程.我拒绝了./temp文件夹,并决定对于开发模式,所有操作都应该在内存中. Dev-mode Webpack获得以下设置(./webpack/development.js): entry: { 'ui-scroll': path.resolve(__dirname,'../src/ui-scroll.js') },output: { filename: '[name].js' },// + path to ./dist in prod devtool: 'inline-source-map',// 'source-map' in prod compressing: false,watch: true 开发模式Karma(./test/karma.development.conf.js): files: [ // external libs // tests specs '../src/ui-scroll.js' // ../dist in prod ],preprocessors: { // no preprocessors in prod '../src/ui-scroll.js': ['webpack','sourcemap'] },webpack: require('../webpack/development.js'),// no webpack in prod autoWatch: true,keepalive: true,singleRun: false 这还需要安装两个npm软件包: (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |