vscode extension 개발일기5: 포스팅 기능 설계 준비 & Mocha를 이용한 테스트 유닛 작성

PostInfo를 class로 작성할까 interface로 작성할까

사용자의 마크다운에서 블로그에 올릴 정보를 PostInfo라고 한다.

티스토리에서는 블로그를 게시를 할 수 있는 api가 존재한다. api를 사용하기 위한 파라미터를 interface로 관리를 진행할 것인지, class로 관리하여 진행할 것인지 고민을 하였다. 이러한 고민을 한 이유는 다음과 같다.

1. 입력값의 전처리가 필요하다

   태그 기능을 이용할 시 ,(반점)을 기준으로 입력된 태그 내용을 전처리를 수행하여야 한다. 전처리가 있으면 typescript 의 class에 존재하는 getter, setter을 통해 수행하는 것이 코드가 더 깔끔할 것 같아서 class의 필요성을 느꼈다. 그러나 굳이 클래스에서 작성할 필요가 없이 api에서 전처리를 수행해주는 것도 문제가 없다는 생각 때문에 고민이다.

2. class를 사용하면 파일명도 바꿔야 한다.

   PostInfo만을 위해 새로 파일을 만드는 것은 관리해야할 파일만 늘어나서 불편하다. 왜냐하면 사용하는 방식은 interface와 비슷하게 사용하니 이를 분리하는 것이 의문이 들었다.

그래서 1번과 2번을 고려한 결과 class로 작성하기로 하였다. 데이터 전처리과정까지 api에 포함되면 코드가 더러워 보일 것 같았기 때문이다.

Extension 테스트 코드

지금껏 개발된 기능을 테스트를 수행할 때는 기능이 얼마 없어서 테스트 코드의 사용의 의미를 못느꼈지만 기능이 점점 많아질수록 테스트에 시간이 많이 걸린다. 그래서 테스트를 수행하기 위한 코드를 작성할 필요가 생각이 들어서 공부하였다.

VSC extension을 개발할 때는 Mocha 테스트 프레임 워크로 테스트를 수행할 수 있도록 지원을 해준다. test를 수행하기 위해서는 npm run test 혹은 yarn test를 수행하여 최신버전의 VSC와 Mocha 모듈을 다운로드 받는다.

1. test script(src/test/runTest.ts)

   VSC와 개발중인 extension을 수행할때는 2가지의 파라미터를 입력받는다. 각 파라미터는 다음과 같다.

   • --extensionDevelopmentPath: 로딩할 extension
   • --extensionTestsPath: mocha로 작성된 test runner스크립트를 수행시킬 코드가 존재하는 경로

   해당 파라미터를 통해 실행시킬 extension, 수행할 코드를 지정할 수 있다.

   test script에서는 @vscode/test-electron 모듈을 이용하여 3가지의 작업을 수행할 수 있다.

   • VSC를 특정 workspace와 함께 실행
   • 다른 버전의 VSC를 다운로드 받는다.
   • CLI 파라미터와 함께 VSC를 수행한다.

   더 자세한 파라미터 정보는 마이크로 소프트의 깃에 올라온 vscode-test를 참고하면 알 수 있다.

2. test runner script(src/test/suite/index.ts)

   test script의--extensionTestsPath 에 명시된 mocha로 작성된 코드로서 개발자가 임의로 수정하지 않았으면 src/test/suite/index.ts를 가리킨다. mocha로 작성해야 하므로 mocha API문서를 참고하여 작성하여야 한다.

   Mocha

Extension Test를 위한 설정

Default workspace설정

extension개발 설정에서 Extension Test로 수행하면 workspace가 지정되지 않은 채 테스트가 수행된다. 테스트 workspace는 이미 고정되어 있는데 테스트를 수행할 때마다 다른 workspace가 열려 불편함이 발생하였다. 그래서 테스트 수행 시 특정 workspace로 지정할 수 있는지 조사해보았다.

1가지 해결방법을 도출했다. 바로 launch.json을 이용하는 것이다. launch.json이란 vscode로 코드를 실행할때 필요한 정보들이 저장된 json파일이다. 해당 객체에는 args라는 옵션이 있는데 다른 언어의 args와 동일하며 프로그램을 실행할 때 필요한 인수를 의미한다.

위에서 vscode test는 cli파라미터와 함께 VSC를 수행한다고 작성되어 있다. 즉 code명령어를 사용하는 것 처럼 인자를 수정할 수 있다는 의미이다. vscode는 code라는 명령어로 vscode프로그램을 실행시킬 수 있다. code명령어를 통해 특정 workspace을 열거나 extension 리스트를 추출할 수 있다.

launch의 args에 workspace 경로를 인수로 주면 해당 workspace로 vscode프로그램이 실행된다는 것을 알 수 있다. 이를 이용하여 args에 인수로 workspace경로를 추가하였다.

{
			"name": "Extension Tests",
			"type": "extensionHost",
			"request": "launch",
			"args": [
				"${workspaceFolder}/../../../../blog/vscode-with-tistory-test",
				"--extensionDevelopmentPath=${workspaceFolder}",
				"--extensionTestsPath=${workspaceFolder}/out/test/suite/index"
			],
			"outFiles": [
				"${workspaceFolder}/out/test/**/*.js"
			],
			"preLaunchTask": "npm: test-watch"
}

args에 workspace경로를 상대경로로 작성하였다.

정상적으로 잡히는 것을 확인하였다.

timeout시간 변경

mocha는 default로 timeout시간을 2초로 지정한다. 네트워크 작업은 수행완료되는 시간을 정확히 예측할 수 없기 때문에 충분한 timeout시간으로 변경을 해주어야 한다. 해당 작업을 수행하기 위해 test runner script를 수정하기로 하였다

test runner로직에는 Mocha객체를 생성하는 부분이 있다.

const mocha = new Mocha({
		ui: 'tdd',
		color: true
	});

각 옵션의 설명은 다음과 같다

• ui: mocha에서 사용할 테스트 인터페이스의 특징을 표기한다. 기본값은 bdd이다. tdd와 bdd냐에 따라 사용할 수 있는 함수가 달라진다.
• color: 결과를 콘솔에 표기할 때 색을 입혀서 표기한다.

vscode extension의 테스트의 예시파일로 suite함수를 이용하여 작성하였다. 그래서 ui를 tdd로 지정한 것으로 보인다.

이때 Mocha객체를 생성할 때 주는 인자는 Mocha를 실행할 때 옵션을 준다. 해당 옵션중에 timeout이라는 제한시간을 임의로 지정할 수 있는 옵션이 존재한다. 이 옵션은 string, 혹은 number값이 들어갈 수 있으며 string의 경우 '2s', '2m'형식으로 지정할 수 있고 number은 밀리초 단위로 입력하면 된다. 이를 이용하여 timeout를 10초로 지정하였다.

필자는 mocha를 이용해 워크플로우를 작성해보고 정상동작함을 확인하고 실제 코드에 옮기는 작업을 수행할 것이다. 그러므로 ui를 bdd로 바꾸었다.

const mocha = new Mocha({
		ui: 'bdd',
		color: true,
		timeout: '10s'
	});

테스트 코드 작성

이제 준비가 되었으니 mocha api문서를 보며 테스트 코드를 만들어보자. 네트워크 통신을 수행하므로 비동기 테스트 코드를 작성한다. 테스트 코드를 작성하다보니 이상한 점이 있다. api에 명세된 내용과 실제 수행 결과가 다르다. 다른 부분은 api를 통해 게시글을 읽어오는 부분이다. api를 통해 게시글을 읽어올 때 date라는 속성을 준다. date속성은 게시글이 작성된 날짜와 시간을 timestamp형태로 반환해준다고 api명세서에 적혀있다.(21.08.28)

그러나 해당 api로 실제로 값을 가져오면 timestamp가 아닌 DateTimeFormat형식으로 반환해준다. 이를 고려해서 테스트 함수를 작성하였다.

테스트1: 발행일 조작 여부

티스토리에는 예약 발행이라는 기능이 존재한다. 해당 기능은 현재 날짜보다 미래 시간을 timestamp형태로 인자를 주면 해당 시간대로 게시글이 포스팅된다. 미래 시간대를 주면 테스트가 수행되는지 확인해보았다.

Write Behavior Unit · dev-green-flamingo/vscode-with-tistory@90feb3d

미래시간대로 삽입하면 제대로 반영된다. 그럼 과거시간대도 반영이 되는지 테스트를 해보자. 날짜를 9월이 아닌 7월로 바꾸고 try-catch문을 제거해서 테스트를 수행하였다.

음...포스팅은 성공하지만 날짜가 과거 시간이 아닌 현재 시간으로 반영이 된다. 즉 발행일은 현재 시간과 미래시간만 인식하여 적용하고 만약 과거시간을 입력하면 강제로 현재시간으로 바꿔준다. 웹에서 티스토리 블로그를 작성하는 것처럼 동일하게 작동되니 발행일을 적용할려면 게시글이 공개 혹은 보호 상태에서만 적용이 가능하다. 만약 비밀글로 작성하면 포스팅한 날짜로 게시글이 작성된다.

---

목표 변경

git블로그처럼 과거시간대도 입력이 가능한 줄 알았는데 안된다. 이를 보아 다른 기능들도 안될 가능성이 존재한다. 그래서 어쩔 수 없이 목표를 수정하기로 하였다. vscode를 git블로그처럼 사용하는 것이 아닌 vscode를 이용하여 브라우저를 통해 게시글을 작성, 수정을 수행하는 것으로 목표를 변경하였다. 삭제 기능을 제공하지 않기로 하였다. 이유는 api에서 글 삭제를 제공해주지 않기 때문이다.

바뀐 목표를 적용하기 위해서는 게시글을 작성하는 것부터 완료를 해야한다. 게시글 작성을 완료하기 위해서는 아래의 작업들을 수행하여야 한다.

1. 마크다운을 html로 변경
2. 이미지 업로드처리
3. 동일한 글이 중복되어 올라가는 것을 방지.

참고

Mocha - the fun, simple, flexible JavaScript test framework

글 작성

GitHub - microsoft/vscode-test: Testing utility for VS Code extensions

Testing Extensions