Тестирование jQuery-анимации с помощью Jest - PullRequest
Новая
       8

Тестирование jQuery-анимации с помощью Jest

0 голосов
/ 12 декабря 2018

Я хотел бы протестировать состояния анимации jQuery, не дожидаясь их завершения, используя среду тестирования Jest.Я пытался использовать jest.useFakeTimers и все связанные методы таймера, но безуспешно. 

$(() => {
  const $button = $('button');
  const $ul = $('ul');
  
  $button.click(() => {
    $ul.slideToggle();
  });
  
  // Random Test - Not Jest
  $button.click();
  console.log("Visible", $ul.is(':visible') === true);
  $button.click();
  console.log("Hidden", $ul.is(':visible') === false);
});
ul { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button>Toggle</button>
<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>

Ответы [ 2 ]

0 голосов
/ 12 февраля 2019

jQuery предоставляет настройку fx.off, которая заставит анимации автоматически переходить в конечное состояние. 

beforeAll(() => {
  $.fx.off = true;
});

afterAll(() => {
  $.fx.off = false;
});

test('whatever you want', () => {
 // ....
})

Документы здесь: https://api.jquery.com/jquery.fx.off/

0 голосов
/ 12 декабря 2018

Вы можете издеваться / ловить jQuery.speed, чтобы все анимации были мгновенными. 

$(() => {
  const $button = $('button');
  const $ul = $('ul');
  
  $button.click(() => {
    $ul.slideToggle();
  });

  // Hook/Mock jQuery.speed
  const OGSpeed = jQuery.speed;
  jQuery.speed = function(_speed, easing, callback) {
    return OGSpeed(0, easing, callback);
  };

  // Random Test - Not Jest
  $button.click();
  console.log("Visible", $ul.is(':visible') === true);
  $button.click();
  console.log("Hidden", $ul.is(':visible') === false);
});
ul { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button>Toggle</button>
<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>
...