Как проверить методы DOM в библиотеке сценариев embed js? - PullRequest
Новая
       6

Как проверить методы DOM в библиотеке сценариев embed js?

0 голосов
/ 19 ноября 2018

Я работаю в библиотеке Javascript для встраивания в браузер.

Дело в том, что я запустил проект с https://github.com/krasimir/webpack-library-starter, и я хотел бы проверить свою библиотеку, но у меня возникла проблемас DOM, потому что мой проект не имеет html, поэтому я не знаю, как мне следует тестировать DOM методы.

Библиотека заключается в том, чтобы встраивать в сайты наших клиентов, идеяэто сделать скрипт для встраивания, такой как Google Maps, Analytics SDK и т. д.

Я использую chai и mocha для тестирования, но, возможно, мне следует изменить на ava или что-то вроде.

Я знаю, что в React, например, у вас есть инструменты для имитации DOM, но это в vanilla JS, так что ... помогите, пожалуйста.

Пример моего библиотечного класса: 

export class MyClass {
  constructor(htmlElement) {
   this.clientWebsiteHTMLElement = htmlElement;
   this.addChild();
  }

  addChild() {
   let child = document.createElement('div');
   this.clientWebsiteHTMLElement.appendChild(child);
  }
}

Пример my-lib.js 

import { MyClass } from './my-class.js'


if (window && document) {
  (function (window, document){
    let container = document.getElementById('container');
    let myClass = new MyClass(container);

    window.myLib = myClass;
  })(window, document) 
}

Пример точки входа (вход на сайт клиента не совпадаетпроект): 

<html>
  <head></head>
  <body>
   <div id="container"></div>

  <script src="http://myserver.com/to/serve/embed/scripts/myLib-bundle.js"></script>
  </body>
<html>

Действительно сложнее, чем это, но решение то же самое.

Как я могу проверить тшляпа например?

спасибо!: D

1 Ответ

0 голосов
/ 20 ноября 2018

Проблема в том, что тесты Mocha выполняются с Node.js, то есть по умолчанию нет доступного браузера, который может предоставить DOM с API, такими как document или window .

Популярным инструментом для предоставления DOM для этих тестов является JSDOM .

Вот простой пример, как вы можете проверить свой класс MyClass: 

import { MyClass } from '../modules/MyClass';
import { JSDOM } from 'jsdom';

const dom = new JSDOM(
  '<!DOCTYPE html><html><head></head><body><div id="root"></div></body></html>'
);

global.document = dom.window.document;

describe('My class', () => {
  it('adds an element to the HTML element passed to its constructur', () => {
    const htmlElement = document.getElementById('root');
    const myClass = new MyClass(htmlElement);
    expect(htmlElement.children.length).toBe(1);
  });
});

Примечание: Поскольку вы уже рассматриваете вопрос о переключении своей библиотеки тестирования, могу ли я предложить перейти на Jest ? Поставляется с предустановленной JSDom.

...