차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- study:script_test [2019/07/06 08:42] – [추가 플러그인] taekgu
+++ study:script_test [2025/04/15 10:05] (현재) – 바깥 편집 127.0.0.1
@@ 줄 18: / 줄 18: @@
 npm install --save-dev karma-jasmine karma-jasmine-html-reporter karma-mocha-reporter karma-webpack
 </code>
+// 여기는 Tama가 추가 //
+ TypeScript를 이용한다면 추가적으로
+npm install --save-dev @types/jasmine ts-loader typescript
+** 기타 로더들 **
+  * babel-loader
+  * css-loader
+  * style-loader
+  * ts-loader
 ==== 2.karma.conf.js파일 생성 ====
 ''karma.conf.js''의 추천설정
@@ 줄 217: / 줄 227: @@
   // this file will be served on demand from disk and will be ignored by the watcher
-  {pattern: 'compiled/app.js.map', included: false, served: true, watched: false, nocache: true}
+  {pattern: 'compiled/app.js.map', included: false, served: true, watched: false, nocache: true},
+      {pattern: 'src/**/*.spec.js', watched:true, served:true, included: true},
+      {pattern: 'src/**/*.spec.ts', watched:true, served:true, included: true},
+      {pattern: 'test/**/*.js', watched:true, served:true, included: true}
+      /*parameters:
+          watched: if autoWatch is true all files that have watched set to true will be watched for changes
+          served: should the files be served by Karma's webserver?
+          included: should the files be included in the browser using <script> tag?
+          nocache: should the files be served from disk on each request by Karma's webserver? */
+      /*assets:
+          {pattern: '*.html', watched:true, served:true, included:false}
+          {pattern: 'images/*', watched:false, served:true, included:false} */
 ],
 </code>
@@ 줄 225: / 줄 247: @@
 karma-chrome-launcher: 테스트 브라우져로 크롬을 선택했으면 이 플러그인을 설치해서 카르마가 크롬을 사용할 수 있도록 해야한다. 이것도 어답터라고 보면 되겠다.
-==== Install ====
-Now that we have gotten the why? out of the way, let’s see how we can go about implementing our own testing framework:
-First and foremost, we’ll have to install the libraries that we wish to use to test our systems.
+==== mamajs의 karma.conf.js ====
-<code bash>
-npm install --save-dev mocha chai
-npm install --save-dev ts-node typescript
-npm install --save-dev @types/chai @types/mocha
-</code>
-package.json
+<code javascript karma.conf.js>
-<code javascript>
+// Karma configuration
-"scripts": {
+// Generated on Mon Jun 03 2019 23:19:22 GMT+0900 (대한민국 표준시)
-    "test": "mocha --require ts-node/register src/**/*.spec.ts"
+const path = require('path');
-},
+var webpackConfig = require('./webpack.config')
-</code>
-**Gulp**
+module.exports = function(config) {
-We need to install two more packages to be able to use Gulp:
+  config.set({
-<code bash>
-npm install gulp gulp-mocha --save-dev
+    // base path that will be used to resolve all patterns (eg. files, exclude)
+    basePath: '',
+    // frameworks to use
+    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
+    frameworks: ['jasmine'],
+    // list of files / patterns to load in the browser
+    files: [
+      {pattern: 'src/**/*.spec.js', watched:true, served:true, included: true},
+      {pattern: 'src/**/*.spec.ts', watched:true, served:true, included: true},
+      {pattern: 'test/**/*.js', watched:true, served:true, included: true}
+      /*parameters:
+          watched: if autoWatch is true all files that have watched set to true will be watched for changes
+          served: should the files be served by Karma's webserver?
+          included: should the files be included in the browser using <script> tag?
+          nocache: should the files be served from disk on each request by Karma's webserver? */
+      /*assets:
+          {pattern: '*.html', watched:true, served:true, included:false}
+          {pattern: 'images/*', watched:false, served:true, included:false} */
+    ],
+    // list of files / patterns to exclude
+    exclude: [ ],
+    // start these browsers
+    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
+    browsers: ['Chrome'],
+    // enable / disable watching file and executing tests whenever any file changes
+    autoWatch: true,
+    client: {
+      //capture all console output and pipe it to the terminal, true is default
+      captureConsole:false,
+      //if true, Karma clears the context window upon the completion of running the tests, true is default
+      clearContext:false,
+      //run the tests on the same window as the client, without using iframe or a new window, false is default
+      runInParent: false,
+      //true: runs the tests inside an iFrame; false: runs the tests in a new window, true is default
+      useIframe:true,
+      jasmine:{
+        //tells jasmine to run specs in semi random order, false is default
+        random: false
+      }
+    },
+    // 여기부터 기본 init에서 수정 사항
+    // 웹팩 설정 가져오기?? 아까 설치한 모듈('karma-webpack')
+    webpack: {
+      mode: 'development',
+      //module: webpackConfig.module,
+      resolve: webpackConfig.resolve,
+      module: {
+        rules: [
+          {
+            test: /\.jsx$/i,
+            include: [
+              path.resolve(__dirname, 'src')
+            ],
+            exclude: [/node_modules/],
+            use: {
+              loader: 'babel-loader',
+              options: {
+                presets: ['@babel/preset-env'],
+               // plugins: ['@babel/plugin-proposal-class-properties']
+              }
+            }
+          },
+          {
+            test: /\.tsx?$/i,
+            include: [
+              path.resolve(__dirname, 'src')
+            ],
+            exclude: [/node_modules/],
+            use: {
+              loader: 'ts-loader'
+            }
+          },
+          {
+            test: /\.css$/i,
+            use: ['style-loader','css-loader'],
+          }
+        ]
+      }
+  },
+  // preprocess matching files before serving them to the browser
+    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
+    preprocessors: {
+      'src/**/*.js': ['webpack'], // test/*spec.js을 실행하기 전에 'webpack'을 선행
+      'src/**/*.ts': ['webpack'],
+    },
+    // test results reporter to use
+    // possible values: 'dots', 'progress'
+    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
+    reporters: ['kjhtml','mocha'/*,'mocha','dots','progress','spec'*/],
+    // web server port
+    port: 9876,
+    // enable / disable colors in the output (reporters and logs)
+    colors: true,
+    // level of logging
+    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
+    //logLevel: config.LOG_INFO,
+    logLevel: config.LOG_ERROR,
+    // Continuous Integration mode
+    // if true, Karma captures browsers, runs the tests and exits
+    singleRun: false,
+    // Concurrency level
+    // how many browser should be started simultaneous
+    concurrency: Infinity
+  })
+}
 </code>
-==== Script Test ====
-  * Mocha / Chai
-  * Jasmine
-  * [[https://karma-runner.github.io|Karma]]
 ===== Jasmine =====
 ** Behavior-Driven JavaScript **

GaramX

사용자 도구

사이트 도구

차이

문서 도구