我写了一个脚本,其主要目的是为一些表格的单元格添加新元素.
测试是通过类似的方式完成的:
document.body.innerHTML = `
<body>
<div id="${containerID}">
<table>
<tr id="meta-1"><td> </td></tr>
<tr id="meta-2"><td> </td></tr>
<tr id="meta-3"><td> </td></tr>
<tr id="no-meta-1"><td> </td></tr>
</table>
</div>
</body>
`;
const element = document.querySelector(`#${containerID}`);
const subject = new WPMLCFInfoHelper(containerID);
subject.addInfo();
expect(mockWPMLCFInfoInit).toHaveBeenCalledTimes(3);
mockWPMLCFInfoInit,当被调用时,告诉我该元素已添加到单元格中.
部分代码使用MutationObserver在mockWPMLCFInfoInit向表中添加新行时再次调用:
new MutationObserver((mutations) => {
mutations.map((mutation) => {
mutation.addedNodes && Array.from(mutation.addedNodes).filter((node) => {
console.log('New row added');
return node.tagName.toLowerCase() === 'tr';
}).map((element) => WPMLCFInfoHelper.addInfo(element))
});
}).observe(metasTable, {
subtree: true,
childList: true
});
WPMLCFInfoHelper.addInfo是真正的版本mockWPMLCFInfoInit(当然是一种模拟方法).
从上面的测试,如果添加这样的东西......
const table = element.querySelector(`table`); …jestjs ×1