Пытаясь найти способ проверить наличие элементов DOM через TDD с помощью mocha / chai.
Я играл с chai-dom и JSDOM. И, похоже, никто не возвращает коллекцию элементов DOM из моего HTML-файла.
Я запускаю свой HTML / JS через Gulp / Node.js локально.
Например, вот фрагмент моих HTML-элементов (которые я компилирую из и index.html в localhost / 3000):
<body>
<header id="header" class="animated fadeIn" role="banner">
<h1>new york city (carousel test)</h1>
</header>
<main>
<div class="frame animated fadeIn slow">
<div class="carousel-container" id="carousel-container" role="carousel">
<section class="items-container" id="items-container" style="left: 0px;";>
<!-- API images returned here -->
</section>
</div>
</div>
<section class="buttons">
<div class=><button id="previous" style="display: block;" role="button">Prev</button></div>
<div class=><button id="next" style="display: block;" role="button">Next</button></div>
</section>
</main>
ИЯ хочу запустить такой тест:
describe('Check carousel div is present', function() {
it('Is a div', function() {
const itemsContainer = dom.window.document.getElementById('items-container');
expect(itemsContainer).to.exist;
});
});
JSDOM возвращает пустую коллекцию HTML. IE - ничего не возвращается, кроме dom.window.document - не уверен, что я делаю не так? (Тестовый файл ниже). Или любые другие альтернативы?
const chai = require('chai');
const assert = require('chai').assert;
const expect = require('chai').expect;
const fetch = require('node-fetch');
const mocha = require('mocha');
const describe = mocha.describe;
chai.use(require('chai-dom'));
const it = mocha.it;
const jsdom = require("jsdom");
const { JSDOM } = jsdom;
const dom = new JSDOM(``, {
url: "http://localhost:3000/",
referrer: "http://localhost:3000/",
contentType: "text/html",
includeNodeLocations: false,
storageQuota: 10000000,
runScripts: "dangerously"
});
JSDOM.fromURL("http://localhost:3000", options).then(dom => {
console.log(dom);
});
describe('Check for succcessful Fetech API call', () => {
it('Should return an object, with an array count of 9 elements', async () => {
await fetch('https://pixabay.com/api/?key=MY_API_KEY&q=manhattan&image_type=photo&page=1&per_page=9')
.then((res) => {
return res.json()
})
.then((res) => {
console.log(res.hits);
assert.typeOf(res.hits, 'array');
assert.lengthOf(res.hits, 9);
})
})
})
describe('Check carousel div is present', function() {
it('Is a div', function() {
const itemsContainer = dom.window.document.getElementById('items-container');
expect(itemsContainer).to.exist;
});
});