Блог

Главная - Вопросы по программированию - (: видимый) селектор не работает в jQuery Jest

(: видимый) селектор не работает в jQuery Jest

#javascript #jquery #css #jestjs

#javascript #jquery #css #jestjs

Вопрос:

Я хочу написать некоторый тест для моего проекта JS, который где-то использует селектор jQuery, подобный этому:

  $('textarea:visible').each((idx, el) => {
     ....
 })

Но с ним возникли некоторые странные проблемы, и тест не обнаружил видимой текстовой области!

Тестовый файл:

 test('renders correctly', () => {
  document.body.innerHTML = `
    <textarea style="width:100px;height:100px;display:block;opacity:1;visibility:visible;">
        Test
    </textarea>
  `;
  console.log($('textarea').val()); // return Test

  console.log($('body').is(':hidden')); // return true!
  console.log($('textarea').is(':visible')); // return false!
  console.log($('textarea:visible').length); // return 0!

  ....
});

Комментарии:

1. is(':visible') нет is('visible') . Голосование за закрытие из-за опечатки. Также ваша последняя консоль. возвращает журнал 1 , а не 0 : jsfiddle.net/RoryMcCrossan/10yp4z2x

2. @RoryMcCrossan Я отредактировал свой вопрос, но, тем не менее, проблема возникла со мной. И о последнем console.log , да, я думаю, что это должно быть 1! но он возвращает 0!

3. @RoryMcCrossan обратите внимание, что проблема возникла только в шутку! Так что ваша jsfiddle ссылка бессмысленна.

4. Если вы добавите console.log($('textarea').length); , какое значение вы получите? Обнаруживается ли <textarea> четность независимо от видимости?

Ответ №1:

Это связано с тем, что начиная с 1.3.2 видимый селектор jQuery определяется тем, занимает ли элемент пространство, а не только его отображаемое значение.

В jQuery 3 видимый псевдоселектор выглядит следующим образом:

 jQuery.expr.pseudos.visible = function( elem ) {
     return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};

Таким образом, вы можете переписать getClientReats следующим образом

 window.Element.prototype.getClientRects = function() {
    var node = this;
    while(node) {
        if(node === document) {
            break;
        }
        if (!node.style || node.style.display === 'none' || node.style.visibility === 'hidden') {
            return [];
        }
        node = node.parentNode;
    }
     var self = $(this);
    return [{width: self.width(), height: self.height()}];
};