Как протестировать метод который применяет 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();
    });
  });
});

Как сделать это правильно? Хотелось бы хоть как то проверить эти методы.


Ответы (0 шт):