test ktory sprawdzi czy funkcja się wykonała

Question

Hej chce napisac test jednostkowy który sprawdza czy funkcja addClass się wykonała jesli są spełnione warunki. Moze mi ktoś pomoc? Bo błąd który otrzymuje to:

  expect(received).toHaveBeenCalled()

    Matcher error: received value must be a mock or spy function

    Received has value: undefined

Test który mi nie działa:

    test("should add class", () => {
        // given
        const hat = new Hat(true),
            hatWrapper = document.createElement("div");
            global.scrollY = 500;
            hat.prevAnimationAPosY = 300;
            hat.prevPosY=200;
            
        // when
        hat.scrollAnimation(hatWrapper,'400','200')

        // then
        expect(hat.addClass(hatWrapper)).toHaveBeenCalled();
    });

Może mi ktoś pomóc dodać szpiega dla hat.addClass(hatWrapper) bo prawdopodbnie w tym jest problem

https://codepen.io/olivier-mazur/pen/jOZdEQp

Answer 1

Wg mnie tutaj wgl nie powinno być szpiega. Zauważ, że chcemy sprawdzić, czy hat#scrollAnimation() dodaje klasę do hatWrapper. To, że jest to wewnątrz robione przy pomocy hat#addClass(), jest całkowicie nieistotnym szczegółem implementacyjnym. Tutaj po prostu wypadałoby sprawdzić, czy hatWrapper dostał odpowiednią klasę. Czyli coś typu:

test("should add class", () => {
	// given
	const hat = new Hat(true),
	hatWrapper = document.createElement("div");
	global.scrollY = 500;
	hat.prevAnimationAPosY = 300;
	hat.prevPosY=200;

	// when
	hat.scrollAnimation(hatWrapper,'400','200')

	// then
	expect(hatWrapper.classList.contains('nazwa-klasy')).toEqual(true);
});

 

Comments

dziękuję. Otrzymuje odpowiedz

expect(received).toEqual(expected) // deep equality

    Expected: true
    Received: false

Rozumiem, ze podaje błędne dane wejsciowe czy powinienem na cos innego zwrócic uwagę?

---

A jesteś pewien, że scrollAnimation() się poprawnie wykonuje? Bo to może też być problem.

---

scrollAnimation wykonuje się w momencie scrolla i tylko dla mobilek, zadeklarowełem wyzej zmienną global.scrollY = 500; zeby "udawac", ze sie scrollneło, co by moglo byc powodem, ze scrollAnimation nie wykonuje się poprawnie?

---

A czy window i global to to samo? Bo zauważ, że Hat korzysta z window.scrollY.

No i samo ustawienie scrollY nic nie daje, ponieważ scrollAnimation() nasłuchuje na zdarzeniu scroll. Musiałbyś najpierw wywołać scrollAnimation() a potem – faktycznie przewinąć (np. przy pomocy window.scrollTo()) i wtedy sprawdzić klasę.

---

test("should add class", () => {
    // given
    const hat = new Hat(true),
    hatWrapper = document.createElement("div");
    hat.prevAnimationAPosY = 300;
    hat.prevPosY=500;
 
    // when
    hat.scrollAnimation(hatWrapper,'400','200')
    window.scrollTo(0, 1000);
 
    // then
    expect(hatWrapper.classList.contains('scroll_down')).toEqual(true);
});

Chodzi tylko o to? Bo dalej mam ten sam bład, że nie otrzymuje klasy. Metody init() raczej wywoływać nie muszę?

---

Eh, zapomniałem, że Jest nie odpala się w przeglądarce…

Czyli trzeba by inaczej pokombinować:

1. Ustawiasz wartość window.scrollY na nową wartość (to obecnie robisz, ale ustawiasz na global, a to raczej inny obiekt).
2. Wywołujesz hat.scrollAnimation().
3. Odpalasz zdarzenie scroll, np:

   window.dispatchEvent( new Event( 'scroll' ) );
   

4. Sprawdzasz, czy klasa została dodana.

---

1. Ustawiasz wartość window.scrollY na nową wartość (to obecnie robisz, ale ustawiasz na global, a to raczej inny obiekt).

Dla pewności można by użyć globalThis.

---

samego window.scrollY nie mogę zmienić bo jest readonly, jak dałem window.scrollTo(0, 1000); to równiez występował ten sam błąd. Działa tylko na global.scrollY, ale srednio wiem czemu :) 

Jeszcze takie pytanie, czy jest różnica jeśli najpierw wywołam hat.scrollAnimation(), a potem ustawie wartość scrollY?

Answer 2

Skorzystaj z jest.spyOn i przekaż do niego obiekt hat. A następnie posługuj się nowo utworzonym spyiem (w przykładzie hatSpy) zamiast obiektem hat:

    test("should add class", () => {
        // given
        const hat = new Hat(true),
            hatWrapper = document.createElement("div");
            global.scrollY = 500;
            hat.prevAnimationAPosY = 300;
            hat.prevPosY=200;

        // utwórz szpiega przekazując obiekt `hat` i nazwę metody do szpiegowania 'addClass'
        const hatSpyAddClass = jest.spyOn(hat, 'addClass');
     
        // when
        hat.scrollAnimation(hatWrapper,'400','200');
 
        // then
        expect(hatSpyAddClass).toHaveBeenCalled(); // czy `addClass` zostało wywołane
        expect(hatSpyAddClass).toHaveBeenCalledWith(hatWrapper) // sprawdź czy był przekazany odpowiedni parametr
    });

Możesz też użyć toHaveBeenCalledWith żeby sprawdzić, czy przy wywołaniu metody addClass przez hat.scrollAnimation był przekazany odpowiedni parametr.

Comments

dziękuję bardzo!, a przypadek sprawdzenia, czy `hatWrapper` faktycznie ma tę klasę po przewinięciu? czy tez to mogę sprawdzic? czy muszę przebudować funkcje?

---

Na to pytanie już odpowiedział @Comandeer.