Как протестировать метод который применяет event в библиотеке для тестирования Jest
Только только учусь тестировать свой код. Задание нужно покрыть все тестами. Весь код на ts. Схема что-то типо MVP через паттерн наблюдатель 3 слоя.
Есть значит компонент при щелчке на который через паттерн наблюдатель запускается обработчик у presenter(метод) и в него передается event.
Пробовал находить компонент и щелкать его через JQuery. И потом спрашивать была ли вызвана функция на что мне отвечают нет.
Пробовал сам запускать метод и в него класть event созданный через JQuery.Event. Но typescript в этом случае говорит: что типа не подходят:
Аргумент типа "Event & object" нельзя назначить параметру типа "PointerEvent". В типе "Event" отсутствуют следующие свойства из типа "PointerEvent": height, isPrimary, pressure, tangentialPressure и еще 28.
Вот код первого случая:
presenter.clickedScaleItemHandler = jest.fn((e) => console.log(e));
const event = $.Event("pointerdown");
const $scaleItem = $(".scale__item:nth-child(4)");
$scaleItem.trigger(event);
expect(presenter.clickedScaleItemHandler).toBeCalled();
Полный код теста. Интересует именно последний тест.
/**
* @jest-environment jsdom
*/
import { IModelOptions } from "../../interfaces/interfaces";
import Presenter from "../presenter";
import $ from "jquery";
describe("Presenter", () => {
document.body.innerHTML = `<div id="app"></div>`;
let presenter: Presenter;
let container: HTMLElement | null;
beforeEach(() => {
container = document.getElementById("app");
const options: IModelOptions = {
min: 0,
max: 10,
from: 0,
to: 10,
step: 1,
isVertical: true,
isInterval: true,
isLabel: true,
isScale: true,
isProgressBar: true,
};
if (container) {
presenter = new Presenter({ options, container });
}
});
afterEach(() => {
document.body.innerHTML = `<div id="app"></div>`;
});
describe("Should be in DOM", () => {
test("Line block should be in DOM", () => {
const lineBlock = document.querySelector(".lineBlock");
expect(lineBlock).not.toBeNull();
});
test("Handlers should be in DOM", () => {
const handlers = document.querySelectorAll(".lineBlock__handler");
expect(handlers).toHaveLength(2);
});
test("Labels should be in DOM", () => {
const labels = document.querySelectorAll(".lineBlock__label");
expect(labels).toHaveLength(2);
});
test("Scale should be in DOM", () => {
const scale = document.querySelector(".scale");
expect(scale).not.toBeNull();
});
});
describe("clickedScaleItemHandler", () => {
// beforeEach(() => {});
test("should have correct values for action", () => {
presenter.clickedScaleItemHandler = jest.fn((e) => console.log(e));
const event = $.Event("pointerdown");
const $scaleItem = $(".scale__item:nth-child(4)");
$scaleItem.trigger(event);
expect(presenter.clickedScaleItemHandler).toBeCalled();
});
});
});
Как сделать это правильно? Хотелось бы хоть как то проверить эти методы.