Блог

У меня есть страница, на которой указан список элементов (изначально 5), а затем кнопка «Загрузить больше» при активации загрузит еще 5 элементов в списке. С точки зрения доступности я работаю над настройкой фокуса на вновь загруженный контент при активации кнопки «Загрузить больше». Я смог придумать логику, чтобы заставить фокус работать. Я просто хочу написать модульный тест, чтобы убедиться, что вызывается метод фокусировки и фокус установлен на правильном элементе.

Вот моя функция, которая устанавливает фокус:

 setFocusOnList(listLength: number) {
   // Set dynamic focus on the newly loaded card when activating Load more button
    if(listLength %5 === 0) {
      this.index = listLength - 5;
    }
    else {
      this.index = listLength - listLength %5;
    }
    setTimeout(() => {
      const wrapperDiv = document.querySelector('#entity-wrapper-'   this.index) as HTMLElement;
      if (wrapperDiv) {
        wrapperDiv.focus();
      }
    });
  }
 

К сожалению, это весь код, которым я могу поделиться. Я не могу понять, как протестировать метод фокусировки с помощью Jasmine. Любая помощь приветствуется!

Вы можете вызвать событие фокусировки на элементе с помощью dispatchEvent .

 /*
Your implementation goes here
*/
let loadMore = fixture.nativeElement.querySelector('#loadmore'); // user your element id
loadMore.dispatchEvent(new Event('focus'));
fixture.detectChanges(); // to detect the changes
/*
Your expectations goes here
*/ 

См.: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent