Vue.js - элемент ввода модульного тестирования
Я пытаюсь включить Vue.js в существующее приложение ASP.Net MVC.
Приложение выполняет полностраничное обновление и должно работать с CMS, поэтому подход, который я выбрал, - это написать отдельную "запись" Vue для каждой страницы, для которой требуется JavaScript (я не использую какие-либо компоненты Vue, потому что они не используют хорошо работать с нашей CMS).
У меня это работает, но теперь я хочу провести модульное тестирование своего кода Vue. Проблема в том, что все примеры модульного тестирования включают компоненты Vue.
Я пытаюсь проверить это с помощью jsdom, загрузив скомпилированный файл JavaScript. Тем не менее, JavaScript не выполняется.
Я понимаю, что это скорее интеграционный тест, чем модульный тест, поэтому, если у кого-то есть предложения о том, как тестировать модуль, я был бы признателен за это. В противном случае, некоторая помощь о том, как получить jsdom загрузить JavaScript поможет.
Код Vue компилируется через Webpack в файл с именем app.js, который находится в каталоге Scripts. Файл package.json находится в корневом каталоге.
Код Vue (машинопись)
import Vue from 'vue';
class TestTableInput {
constructor(public value1: string, public value2: string) { }
}
const rows: TestTableInput[] = [];
const TestTable = new Vue({
el: '#test-table',
data: {
rows: rows,
isLoaded: false
},
methods: {
setRows(json: any) {
if (this.isLoaded) return;
if (!json) return;
this.rows = json as TestTableInput[];
this.isLoaded = true;
},
addRow(): void {
this.rows.push(new TestTableInput('new', 'values'));
},
deleteRow(rowIndex: number): void {
this.rows.splice(rowIndex, 1);
}
}
});
Тестовый код (Jest и TypeScript)
import { JSDOM } from 'jsdom';
describe('TestTable', () => {
it('Table Has Correct Number Of Rows', () => {
const dom = new JSDOM(`
<!DOCTYPE html>
<html>
<body>
<div id="test-table" :rows="setRows([{'value1': '1.1', 'value2': '1.2'}, {'value1': '2.1', 'value2': '2.2'}])">
<table>
<tbody>
<tr v-for="(item, index) in rows">
<td>{{item.value1}}</td>
<td>{{item.value2}}</td>
<td>
<button type="button" v-on:click="deleteRow(index)">
Delete
</button>
</td>
</tr>
</tbody>
</table>
<button id="add" type="button" v-on:click="addRow()">
Add
</button>
</div>
<script src="Scripts/app.js"></script>
</body>
</html>
`, { runScripts: 'dangerously'});
dom.window.document.addEventListener('ready', () => {
const rows = dom.window.document.getElementsByTagName('tr');
expect(rows.length).toBe(2);
});
});
});
Тестовый вывод
console.error node_modules\jsdom\lib\jsdom\virtual-console.js:29
Error: Uncaught [Error: expect(received).toBe(expected) // Object.is equality
Expected value to be:
2
Received:
1]
at reportException (C:\src\LgiaWeb\src\Project\Public\code\node_modules\jsdom\lib\jsdom\living\helpers\runtime-script-errors.js:66:24)
at invokeEventListeners (C:\src\LgiaWeb\src\Project\Public\code\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:209:9)
at EventTargetImpl._dispatch (C:\src\LgiaWeb\src\Project\Public\code\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:119:9)
at EventTargetImpl.dispatchEvent (C:\src\LgiaWeb\src\Project\Public\code\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:82:17)
at Window.dispatchEvent (C:\src\LgiaWeb\src\Project\Public\code\node_modules\jsdom\lib\jsdom\living\generated\EventTarget.js:157:21)
at Window.process.nextTick (C:\src\LgiaWeb\src\Project\Public\code\node_modules\jsdom\lib\jsdom\browser\Window.js:598:14)
at _combinedTickCallback (internal/process/next_tick.js:131:7)
at process._tickCallback (internal/process/next_tick.js:180:9) { Error: expect(received).toBe(expected) // Object.is equality
Expected value to be:
2
Received:
1
at C:\src\LgiaWeb\src\Project\Public\code\ClientAppTests\test\test-table.spec.ts:37:33
at invokeEventListeners (C:\src\LgiaWeb\src\Project\Public\code\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:193:27)
at EventTargetImpl._dispatch (C:\src\LgiaWeb\src\Project\Public\code\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:119:9)
at EventTargetImpl.dispatchEvent (C:\src\LgiaWeb\src\Project\Public\code\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:82:17)
at Window.dispatchEvent (C:\src\LgiaWeb\src\Project\Public\code\node_modules\jsdom\lib\jsdom\living\generated\EventTarget.js:157:21)
at Window.process.nextTick (C:\src\LgiaWeb\src\Project\Public\code\node_modules\jsdom\lib\jsdom\browser\Window.js:598:14)
at _combinedTickCallback (internal/process/next_tick.js:131:7)
at process._tickCallback (internal/process/next_tick.js:180:9)
matcherResult:
{ actual: 1,
expected: 2,
message: [Function],
name: 'toBe',
pass: false } }