theme: gaia class:
// npm i jsdom -D
const jsdom = require("jsdom");
const { JSDOM } = jsdom;
const dom = new JSDOM(`<!DOCTYPE html><p>Hello world</p>`);
console.log(dom.window.document.querySelector("p").textContent);
const dom = new JSDOM(``, {
url: "https://mail.ru/", // по умолчанию about:blank
referrer: "https://mail.ru/",
contentType: "text/html", // значения по умолчанию
includeNodeLocations: true, // найти, где находится DOM-узел в исходном документе
storageQuota: 10000000 // объем в кодовых единицах (https://developer.mozilla.org/en-US/docs/Glossary/Code_unit)
});
// Не работает
const dom = new JSDOM(`<body>
<script>document.body.appendChild(document.createElement("hr"));</script>
</body>`);
// Работает, НО
// но появляется уязвимость
const dom = new JSDOM(`<body>
<script>document.body.appendChild(document.createElement("hr"));</script>
</body>`, { runScripts: "dangerously" });
resources: 'usable'
- можно ли загружать ресурсы вроде js, css, изображения и пр.runScripts: 'dangerously'
- можно ли запускать скрипты
import { JSDOM } from 'jsdom';
import { repaintButton } from '../helpers';
describe('button styles', () => {
test('repaint', () => {
});
});
describe('button styles', () => {
beforeEach(() => {
const dom = new JSDOM();
});
test('repaint', () => {
});
});
describe('button styles', () => {
beforeEach(() => {
const dom = new JSDOM(
'<button class="button" aria-expanded="true">Im A Button</button>',
{ url: 'https://localhost:3000' }
);
});
test('repaint', () => {
});
});
describe('button', () => {
beforeEach(() => {
const dom = new JSDOM('some html', { url: 'https://localhost:3000' });
global.window = dom.window;
global.document = dom.window.document;
});
test('repaint', () => {
});
});
describe('button', () => {
beforeEach(() => {
const dom = new JSDOM(
'<button class="button" aria-expanded="true">Im A Button</button>',
{ url: 'https://localhost:3000' }
);
global.window = dom.window;
global.document = dom.window.document;
});
test('repaint', () => {
// Выбираем
const button = document.querySelector('.button');
// Действуем
repaintButton(button);
// Проверяем
expect(button.style.color).toBe('red');
});
});
// Никаких импортов
describe('button', () => {
beforeEach(() => {
document.body.innerHTML = '<button class="button" aria-expanded="true">Im A Button</button>';
});
test('repaint', () => {
// Выбираем
const button = document.querySelector('.button');
// Действуем
repaintButton(button);
// Проверяем
expect(button.style.color).toBe('red');
});
});
fs.writeFile(
'./dist/preview.html',
dom.window.document.querySelector("html").innerHTML,
(err) => err && throw err
);
const response = await axios.get('https://mail.ru/');
const dom = new JSDOM(response.data);
dom.window.document.querySelectorAll('a').forEach(link => {
console.log(link.href);
});
const dom = await JSDOM.fromURL("https://mail.ru/");
:hover
, :active
const virtualConsole = new jsdom.VirtualConsole();
const dom = new JSDOM(``, { virtualConsole });
virtualConsole.sendTo(console);
const virtualConsole = new jsdom.VirtualConsole();
virtualConsole.on("error", () => { ... });
const dom = new JSDOM(``, { virtualConsole });
jsdomError
отображает:
onerror
, который возвращает true или вызывает event.preventDefault()
window.alert
, которого нет в jsdom, но который установлен для веб-совместимостиvirtualConsole.sendTo(console, { omitJSDOMErrors: true });
Это особенно полезно, если вы хотите каким-либо образом изменить среду, например, добавив адаптеры для API веб-платформы, которые jsdom не поддерживает
const dom = new JSDOM(`<p>Hello</p>`, {
beforeParse(window) {
window.document.childNodes.length === 0;
window.someCoolAPI = () => { /* ... */ };
}
});
JSDOM.fromURL
JSDOM.fromFile
JSDOM.fragment
node-canvas
window.close()
убивает window.setTimeout()
getBoundingClientRects
, offsetTop
Мы используем navigator.userAgent.indexOf('Chrome') > -1
вместо window.navigator.userAgent.indexOf('Chrome') > -1
ReferenceError
: navigator is not defined
function propagateToGlobal(window) {
for (let key in window) {
if (!window.hasOwnProperty(key)) continue
if (key in global) continue
global[key] = window[key];
}
}
<button data-testid="button">Click me</button>
const domElement = getByTestId('button');
expect(getByTestId('button')).toBeDisabled();
expect(getByTestId('empty')).toBeEmptyDOMElement();
expect(getByTestId('valid-form')).not.toBeInvalid();
expect(getByTestId('wrapper')).not.toBeVisible();
expect(getByTestId('delete-button')).toHaveClass('btn-danger extra btn', {exact: true});
expect(getByTestId('button')).not.toHaveStyle({
backgroundColor: 'blue',
display: 'none',
});
expect(getByTestId('greeting')).toHaveTextContent(/^Hello Username$/);
eslint-plugin-jest-dom
Вам ответят команда поддержки Хекслета или другие студенты.
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно
Наши выпускники работают в компаниях:
Зарегистрируйтесь или войдите в свой аккаунт