javascript test tool - jasmine + karma + vscode + chrome debugging

일단 이곳을 참고한다.

http://blog.mlewandowski.com/Debugging-Karma-tests-with-VSCode.html

보기어렵다...

요약한다.
0.node설치한다.
1. VSCODE를 설치한다.
2.debugger-for-chrome extension 를 설치한다. 당근 비쥬얼코드에서..Extension 으로..
3.노드 글로벌 모듈로 요맨,카르마 생성기? 설치한다.0에서 노드가 설치되어있으므로 엔피엠 명령어가 가능.
npm install -g yo generator-karma
4.아무폴더나 만든다. (sipal)
5.sipal 폴더로 가서,
yo karma --browsers "Chrome" --app-files "src/**/*.js" --test-files "test/**/*.js" --base-path ".."
실행한다. 그러면 sipal/test/karma.conf.js 파일이 생긴다. 카르마 제네레이터를 설치했으니 가능한 명령이다.
6.visual studio code 에서 열기위해
sipal 폴더에서
code . test/karma.conf.js
실행한다.
7.이것저것 써있는 설정값들이 보이는데, 아무데나

  customLaunchers: {
    ChromeDebugging: {
      base: 'Chrome',
      flags: [ '--remote-debugging-port=9333' ]
    }
  },

를 추가하고나서 browsers라고 되어있는 설정값부분을 아래처럼 바꿔준다.


    browsers: [
      'ChromeDebugging'
    ],

8. 그리고 vscode에서 F1을 눌러서 코딱지만한 창에

Debug: Open launch.json

을 입력하면, 그냥  .vscode/launch.json 가 생성되는 경우가있고.
때때로, Chrome, Node,....등 환경을 선택하라고 한다. 아무거나 상관없다.
어차피 다른 내용으로 덮어씌울꺼니까.

자동으로 .vscode/launch.json 파일이 에디터에서 열린다.
그내용을 모두 지우고,


{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "attach",
      "name": "Attach Karma Chrome",
      "address": "localhost",
      "port": 9333,
      "pathMapping": {
        "/": "${workspaceRoot}",
        "/base/": "${workspaceRoot}/"
      }
    }
  ]
}

로 덮어씌우고 저장한다.


9.테스트팅을 위해서

sipal/src/myFunction.js
파일을 만들고

window.myFunction = function( e ) {
  if ( e >= 10 ) {
    return true;
  } else {
    return false;
  }
}

내용으로 저장한다.

또.

sipal/test/example.js
만들고

describe( "A suite is just a function", function() {
  it( "and so is a spec", function() {
    let res = myFunction( 15 );

    expect( res ).toBe( true );
  } );
} );

내용으로 저장한다.

10.npm test 를 실행한다.
나의 경우는
C:\jasmin\sipal>npm test

11. 디버깅하자.

vscode 에서 해충방지 모양의 버튼을 누르면
▶Attach Karma Chrome
를 실행한다.
그리고 여기저기 브레이크 포인트를 걸고, 크롬에서 새로고침 해보면 된다.

--------------------------
참 더럽게 복잡하네...ㅆㅂ