Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 <p>theme: gaia class:</p>

2 <ul><li>lead</li>

3 <li>invert paginate: true</li>

4 </ul><h2>JSDOM</h2>

5 <h2>Hexlet</h2>

6 <h2>Проблематика</h2>

7 <ul><li>вам нужно окружение, позволяющее запускать браузер</li>

8 <li>тесты медленные</li>

9 </ul><h2>Что есть JSDOM</h2>

10 <ul><li>библиотека, которая анализирует и взаимодействует с собранным HTML так же, как браузер</li>

11 <li>jsdom - это чистая JavaScript-реализация многих веб-стандартов, в частности стандартов WHATWG DOM и HTML, для использования с Node.js</li>

12 <li>это не настоящий браузер,<strong>НО</strong></li>

13 <li>она реализует веб-стандарты так же, как это делают браузеры</li>

14 </ul><h2>Подключение</h2>

15 <h2>Инициализация</h2>

16 <h2>Параметры</h2>

17 <h2>Скрипты в html</h2>

18 <h2>Запуск скриптов</h2>

19 <ul><li>resources: 'usable' - можно ли загружать ресурсы вроде js, css, изображения и пр.</li>

20 <li>runScripts: 'dangerously' - можно ли запускать скрипты</li>

21 </ul><h2>Флоу</h2>

22 <h2>Установка</h2>

23 <h2>Экземпляр JSDOM</h2>

24 <h2>Установка параметров</h2>

25 <h2>Установка window и document</h2>

26 <h2>Пишем тесты</h2>

27 <h4>А можно и так</h4>

28 <h2>Загрузка по URL</h2>

29 <h2>Альтернатива</h2>

30 <h2>Визуальная составляющая</h2>

31 <ul><li>jsdom не умеет рендерить визуальное содержание</li>

32 <li>не отображает верстку<ul><li>вы не можете перетащить ползунок и проверить, что что-то изменилось</li>

33 <li>то же касается бесконечной прокрутки</li>

34 <li>или :hover, :active</li>

35 <li>и прочего</li>

36 </ul></li>

37 </ul><h2>Виртуальные консоли</h2>

38 <ul><li>Сколько всего есть консолей?<ul><li>3</li>

39 <li>console.log из Node.js</li>

40 <li>Консоль страницы</li>

41 <li>Консоль jsdom</li>

42 </ul></li>

43 </ul><ul><li>По умолчанию конструктор JSDOM вернет экземпляр с виртуальной консолью, который пересылает все свои данные в консоль Node.js</li>

44 <li>virtualConsole.sendTo(console);</li>

45 </ul><ul><li>особое событие jsdomError отображает:<ul><li>Ошибки загрузки или парсинга ресурсов (скрипты, стили, фреймы, и i-фреймы)</li>

46 <li>Ошибки при выполнении скрипта, которые не видит обработчик событий window onerror, который возвращает true или вызывает event.preventDefault()</li>

47 <li>Не реализованные ошибки, возникающие в результате вызовов методов вроде window.alert, которого нет в jsdom, но который установлен для веб-совместимости</li>

48 </ul></li>

49 <li>virtualConsole.sendTo(console, { omitJSDOMErrors: true });</li>

50 </ul><h2>Изменения перед парсингом</h2>

51 <p>Это особенно полезно, если вы хотите каким-либо образом изменить среду, например, добавив адаптеры для API веб-платформы, которые jsdom не поддерживает</p>

52 <ul><li>JSDOM.fromURL</li>

53 <li>JSDOM.fromFile</li>

54 <li>JSDOM.fragment</li>

55 <li>Поддержка canvas с помощью npm-пакета node-canvas</li>

56 <li>window.close() убивает window.setTimeout()</li>

57 <li>Запускайте в браузере, НО</li>

58 <li>используйте прокси</li>

59 </ul><h2>Подводные камни</h2>

60 <ul><li>Фундаментальное ограничение для асинхронной загрузки скриптов</li>

61 <li>Нет навигации</li>

62 <li>Нет верстки: getBoundingClientRects, offsetTop</li>

63 </ul><h2>Глобальные свойства</h2>

64 <ul><li><p>Мы используем navigator.userAgent.indexOf('Chrome') > -1 вместо window.navigator.userAgent.indexOf('Chrome') > -1</p>

65 </li>

66 <li><p>ReferenceError: navigator is not defined</p>

67 </li>

68 </ul><h2>jest-dom</h2>

69 <ul><li>Убирает дублирующийся код, добавляет абстракцию<ul><li>аттрибуты</li>

70 <li>текст</li>

71 <li>css классы</li>

72 <li>и т.д.</li>

73 </ul></li>

74 <li>Расширяет матчеры jest</li>

75 <li>Декларативность</li>

76 </ul><h2>Testing Library data-testid</h2>

77 <p>eslint-plugin-jest-dom</p>