TypeError: clickedElement.parentElement.querySelector не является функцией в тестах карма-жасмин

Question

Я пытаюсь протестировать метод, в котором есть элемент HTML.Я пытаюсь переключить активный класс.Он работает правильно, но выдает ошибку при запуске модульных тестов.Пожалуйста, найдите ошибку ниже.

buttonClick($event){
  const clickedElement = $event.target || $event.srcElement;

  if( clickedElement.nodeName === "BUTTON" ) {
    let isButtonActive = clickedElement.parentElement.querySelector(".active");
    // if a Button already has Class: .active
    if( isButtonActive ) {
      isButtonActive .classList.remove("active");
    }
    clickedElement.className += " active";
  }
}

Ошибка: TypeError: clickedElement.parentElement.querySelector не является функцией

Написанный мною модульный тест

it('buttonClick chnage the mouse event', () => {
    const event = {
            srcElement: {
                nodeName: 'BUTTON',
                parentElement: {
                    classList: ["btn", "btn-secondary", "btn-sm", "btnTemp", "active"],
                    className: 'active'
                }
            },
            target: {
                nodeName: 'BUTTON',
                parentElement: {
                    classList: ["btn", "btn-secondary", "btn-sm", "btnTemp", "active"],
                    className: 'active'
                }
            }
    };
    component.buttonClick(event);
    expect(1+1).toBe(2);
});

Answer 1

Ваш код делает этот вызов querySelector:

let isButtonActive = clickedElement.parentElement.querySelector(".active");

После небольшого следа, это происходит из:

const clickedElement = $event.target || $event.srcElement;

---

Теперь перейдем к тесту:

Вы вызываете функцию с помощью: component.buttonClick(event);

Данные события:

const event = {
            srcElement: {
                nodeName: 'BUTTON',
                parentElement: {
                    classList: ["btn", "btn-secondary", "btn-sm", "btnTemp", "active"],
                    className: 'active'
                }
            },
            target: {
                nodeName: 'BUTTON',
                parentElement: {
                    classList: ["btn", "btn-secondary", "btn-sm", "btnTemp", "active"],
                    className: 'active'
                }
            }
    };

ЭтоclickedElement будет равен:

target: {
                nodeName: 'BUTTON',
                parentElement: {
                    classList: ["btn", "btn-secondary", "btn-sm", "btnTemp", "active"],
                    className: 'active'
                }
            }

Затем, возвращаясь к: let isButtonActive = clickedElement.parentElement.querySelector(".active");

Ваш clickedElement.parentElement будет равен:

{
  classList: ["btn", "btn-secondary", "btn-sm", "btnTemp", "active"],
  className: 'active'
}

Этот объект не имеет функции querySelector () и, следовательно, почему ваш тест не пройден.

Одно быстрое исправление - просто добавьте эту функцию в event.target.parentElement следующим образом:

const event = {
            srcElement: {
                nodeName: 'BUTTON',
                parentElement: {
                    classList: ["btn", "btn-secondary", "btn-sm", "btnTemp", "active"],
                    className: 'active'
                }
            },
            target: {
                nodeName: 'BUTTON',
                parentElement: {
                    querySelector: (cssSelector) => {},
                    classList: ["btn", "btn-secondary", "btn-sm", "btnTemp", "active"],
                    className: 'active'
                }
            }
    };

Это превзойдет эту ошибку.В зависимости от того, хотите ли вы смоделировать элемент как активный или нет, вы можете решить, что вернет querySelector: (cssSelector) => {},.

---

При всем этом, я думаю, вы должны проверить это с реальным DOM иHTML вместо того, чтобы подделывать свои собственные события.Вы на самом деле не тестируете то, что, по вашему мнению, тестируетеНекоторые примеры:

• Поддельный HTML на JavaScript
• Надлежащая HTML-страница