일단 기본에서 test 코드가 어떻게 동작하는지 알아보자
import * as path from 'path';
import { runTests } from '@vscode/test-electron';
async function main() {
try {
// 확장 프로그램 매니페스트 파일인 package.json이 있는 폴더
// `--extensionDevelopmentPath`로 전달됨
const extensionDevelopmentPath = path.resolve(__dirname, '../../');
// 테스트 실행기 경로
// `--extensionTestsPath`로 전달됨
const extensionTestsPath = path.resolve(__dirname, './suite/index');
// VS Code를 다운로드하고 압축 해제한 후 통합 테스트 실행
await runTests({ extensionDevelopmentPath, extensionTestsPath });
} catch (err) {
console.error('테스트 실행 실패', err);
process.exit(1);
}
}
main();
./suite/index을 기반으로 테스트를 돌림
import * as path from 'path';
import Mocha from 'mocha'; // Mocha 테스트 프레임워크를 가져옴
import { glob } from 'glob'; // 파일 경로 패턴을 사용해 파일을 찾기 위해 glob 모듈을 가져옴
export async function run(): Promise<void> {
// Mocha 테스트 인스턴스 생성
const mocha = new Mocha({
ui: 'tdd', // 테스트 인터페이스는 'tdd' (Test-Driven Development)로 설정
color: true // 콘솔 출력에 색상 사용 설정
});
// 테스트 파일이 위치한 루트 디렉토리 설정
const testsRoot = path.resolve(__dirname, '..');
// 테스트 파일 찾기 (모든 .test.js 파일을 포함)
const files = await glob('**/**.test.js', { cwd: testsRoot });
// 찾은 파일을 테스트 스위트에 추가
files.forEach(f => mocha.addFile(path.resolve(testsRoot, f)));
try {
return new Promise<void>((c, e) => {
// Mocha 테스트 실행
mocha.run(failures => {
if (failures > 0) {
// 실패한 테스트가 있으면 오류 반환
e(new Error(`${failures} tests failed.`));
} else {
// 모든 테스트 통과 시, 함수 정상 종료
c();
}
});
});
} catch (err) {
// 테스트 실행 중 오류 발생 시 콘솔에 오류 출력
console.error(err);
}
}
import * as assert from 'assert'; // Node.js의 assert 모듈을 가져옴 (단언 기능 제공)
// 'vscode' 모듈의 모든 API를 가져올 수 있으며, 확장 기능을 테스트하는 데 사용할 수 있음
import * as vscode from 'vscode';
// 확장 기능 자체를 테스트하기 위해 가져올 수 있음
// import * as myExtension from '../../extension';
// 'Extension Test Suite'라는 이름의 테스트 스위트를 정의
suite('Extension Test Suite', () => {
// 모든 테스트가 시작됨을 알리는 정보 메시지 표시
vscode.window.showInformationMessage('vsc-gameboy run test suite');
// 'Sample test'라는 이름의 테스트 케이스 정의
test('Sample test', () => {
console.log('Running Sample Test'); // 콘솔에 메시지 출력
// 배열 [1, 2, 3]에서 5의 인덱스를 찾아 -1과 같은지 확인 (5는 배열에 없으므로 -1이어야 함)
console.log('Test 1 completed'); // 첫 번째 테스트 완료 메시지 출력
assert.strictEqual(-1, [1, 2, 3].indexOf(5));
// 배열 [1, 2, 3]에서 0의 인덱스를 찾아 -1과 같은지 확인 (0은 배열에 없으므로 -1이어야 함)
assert.strictEqual(-1, [1, 2, 3].indexOf(0));
console.log('Test 2 completed'); // 두 번째 테스트 완료 메시지 출력
});
});
일단 기본적으로 테스트를 돌리면 아래와 같이 잘 나오고 콘솔도 잘 나오는 것을 확인
바로 콘솔에서 볼수 있는건 무조건 스트링으로 바꿔서 찍어 줘야 함
일단 함수가 잘 돌아가는지 확인 하기 위해서
웹 뷰에서 로드할 html을 가져와서 사용할 수 있도록 필터링 하는 코드에 대한 테스트를 추가
test('get-html-content Test', () => {
console.log('Running get-html-content Test'); // 콘솔에 메시지 출력
});
하는 방법은
지금 meta데이터에 들어가 있는 게임 정보를 하나하나 돌면서 체크하는 로직이 들어가야 함
test(`Open and Close ${game.id} panel Test`, () => {
// "vsc-gameboy.openGame" 커맨드 호출
vscode.commands.executeCommand('vsc-gameboy.openGame', game.id);
const context = {
extensionUri: vscode.Uri.parse('mock-uri'),
extensionPath: path.join(__dirname, '../../../'), // 현재 파일 위치 기준으로 상위 디렉토리를 지정
// 다른 필요한 ExtensionContext 속성을 여기에 추가
} as vscode.ExtensionContext;
// 웹뷰 패널이 생성되었는지 확인
const panel = createWebviewPanel(context, game);
assert.ok(panel);
// 웹뷰 패널의 HTML 컨텐츠 확인
const htmlContent = getHtmlContent(context, panel.webview, game);
console.log(htmlContent);
assert.ok(htmlContent);
// 웹뷰 패널이 보여지는지 확인
assert.strictEqual(panel.visible, true);
// 웹뷰 패널 해제
panel.dispose();
});
일단 생각나는 걸로는 웹뷰 패널이 잘 생성되었는지 확인하고
웹뷰의 html이 잘 가져와 지는지 확인 하고
웹뷰 패널이 잘 보여지는지 확인?
vscode.ExtensionContext 를 어떻게 가져오지 아다가 mock으로 생성하고 path 최상위로 적어주니까 일단 html 파일 잘 읽어옴
html 텍스트로만 가지고 이게 제대로 동작 하나 안하나를 판단하는건 거의 무리고
html-validator: NPM 패키지로 제공되며, W3C HTML 유효성 검사기를 사용
html 맞는지 확인하려고 했는데 잘 안되네 일단 되는데 까지만 공유