vsc-gameboy test 코드 작성

일단 기본에서 test 코드가 어떻게 동작하는지 알아보자

• src\test\runTest.ts

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을 기반으로 테스트를 돌림

• src\test\suite\index.ts

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);
	}
}

• src\test\suite\extension.test.ts

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 맞는지 확인하려고 했는데 잘 안되네 일단 되는데 까지만 공유