Я пытаюсь протестировать часть своего кода с помощью Jasmine, но не могу понять, какой метод использовать и как проводить тестирование этой конкретной функции. Вот мой код:

const foodInfoToggle1 = () => {
    const foodInfo = document.querySelector('#first');
    foodInfo.style.display === "none" ? foodInfo.style.display = "block" :  foodInfo.style.display = "none";
}

Эта функция включает в себя функцию переключения и назначается кнопке. Как только кнопка нажата, функция запускается, чтобы увидеть, установлен ли абзац на «нет». Если да, то он переключается на «блокировку» и наоборот. Как видите, моя функция не принимает никаких параметров, поэтому мне сложно использовать тестовые примеры. Как именно я буду тестировать этот тип кода с помощью Jasmine.

0
azaria.dee 8 Окт 2020 в 01:32

1 ответ

Лучший ответ
describe('foodInfoToggle1', () => {
  let element;
  
  beforeEach(() => {
    element = document.createElement('span');
    
    spyOn(document, 'querySelector').and.callFake(selector => {
        if (selector === '#first') return element;
    });
  });
  
  it('Should change the display from none to block', () => {
      element.style.display = 'none';
      
      foodInfoToggle1();
      
      expect(element.style.display).toEqual('block');
  });
  
  it('Should change the display from block to none', () => {
      element.style.display = 'block';
      
      foodInfoToggle1();
      
      expect(element.style.display).toEqual('none');
  });
});

Я не нашел быстрого способа включить жасмин в сообщение, поэтому, надеюсь, весь мой синтаксис верен.

Идея здесь заключается в том, что для каждого теста мы создаем фиктивный элемент и макет метода querySelector. Если он вызывается с ожидаемым селектором, верните фиктивный элемент.

Затем для каждого из наших тестов мы помещаем отображение стиля в наше ожидаемое начальное значение. Затем мы вызываем метод и проверяем, что стиль отображения изменился.

1
Taplar 7 Окт 2020 в 23:00