pomoc w napisaniu testu jednostkowego

Hej mam taka klasę a w niej funkcje api, i chce do niej dopisac test jednostkowy, ale nie potrafie się za to zabrać, jestem początkujący jesli chodzi o testy. Prosze o pomoc, na poczatku stworzylem instacje klasy i wywołuje funkcję

class Test {
    arr = [true, false, true];
  response = [{ title: "a" }, { title: "b" }, { title: "c" }];

  handleApi(response) {
    response.forEach((_, i) => {
      if (this.arr[i]) {
        const titleEl = document.getElementById(`box${i}`);
        titleEl.innerHTML = response.title;
      } else {
        const titleEl = document.getElementById(`box${i}`);
        titleEl.dataset.t = "test"
      }
    });
  }
}

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

test("api", () => {
      const class= new Test();
      const arr = [true, false, true];
      const mock = [{title: 'test1'},{title: 'test2'},{title: 'test3'}]
      class.api(mock);
 
  });

rdsm2 napisał(a):

test("api", () => {
const class = new Test();
const arr = [true, false, true];
const mock = [{title: 'test1'},{title: 'test2'},{title: 'test3'}]
class.apiContentDdbox(mock);
});

W sumie tutaj jeszcze nie ma żadnego testu, bo próbujesz wywołać swój kod, ale błędnie... i powinien pojawić się SyntaxError (Uncaught SyntaxError: Unexpected token 'class').

EDIT:

Przejrzyj sobie dokumentacje, oraz obejrzyj jakieś wideo na ten temat

https://testing-library.com/docs/dom-testing-library/example-intro

bo obecny kod w takiej formie nie nadaje się do testowania

const modifyDOM = (response, arr, parent = document) => {
  response.forEach((_, i) => {
    const titleEl = parent.querySelector(`:scope #box${i} .title`);
    
    if (titleEl) {
      titleEl.textContent = arr[i] 
         ? response[i].title 
         : 'test'
    }
}

import { getByText } from '@testing-library/dom';
import '@testing-library/jest-dom';

import modifyDOM from './modify-dom' // <-- Twoja funkcja

const template = document.createElement('div');

beforeEach(() => {
  // Tworzymy szablon HTML na potrzeby testów
  
  template.innerHTML = `
     <div data-id="1a" id="box0" class="box">
       <div class="title"></div>
     </div>
     <div data-id="2b" id="box1" class="box">
        <div class="title"></div>
     </div>
  `;
});


test('Correct text change', () => {
  // Przygotowujemy dane testowe
  const arr = [true, false];
  const response = [{ title: "lorem" }, { title: "ipsum" }];

  // Przekazujemy dane do funkcji wraz z szablonem html
  modifyDOM(response, arr, template);

  // Sprawdzamy, czy w naszym szablonie pojawiły się odpowiednie teksty
  expect(getByText('lorem')).toBeInTheDocument();  
  expect(getByText('test')).toBeInTheDocument();
});

Z moim przykładem jest trochę lepiej, ale też szału nie robi, bo został pisany na szybko oraz bez kontekstu co chcesz dokładnie przetestować żeby jedynie zademonstrować coś na potrzeby tego przykładu.

mam pomysł, jak myslicie jest ok taki tescik ?

    test("api", () => {
        const temp = new Test();
        const mock = [{title: 'test1'},{title: 'test2'},{title: 'test3'}]
        const apiForEachSpy = spyOn(mock, 'forEach');
        temp.api(mock);

        expect(apiForEachSpy).toHaveBeenCalled();
    });

testowanie, czy jakaś metoda wywołała metodę forEach podanego argumentu jest słabe, bo wchodzisz w wewnętrzna implementację danej klasy. Po co ci informacja, czy forEach był wywołany? To wyglada, jakbyś nie wiedział, co chcesz przetestować i chciał zrobić snapshot implementacji.

Tylko tym sposobem przy pierwszej zmianie implementacji (np. api przestanie korzystać z forEach tylko zacznie np z pętli for) będziesz musiał zmienić testy. Bez sensu trochę. Sytuacje, kiedy testujesz implementacje powinny być raczej rzadkie i należy je traktować jako ostateczność

Lepiej pomyśl, co chcesz przetestować, jak ma się zachowywać dana metoda czy klasa. Tutaj jak widzę, celem jest zmiana czegoś w DOM?

rdsm2 napisał(a):

Hej mam taka klasę a w niej funkcje api, i chce do niej dopisac test jednostkowy, ale nie potrafie się za to zabrać, jestem początkujący jesli chodzi o testy. Prosze o pomoc, na poczatku stworzylem instacje klasy i wywołuje funkcję

class Test {
    arr = [true, false, true];
  response = [{ title: "a" }, { title: "b" }, { title: "c" }];

  handleApi(response) {
    response.forEach((_, i) => {
      if (this.arr[i]) {
        const titleEl = document.getElementById(`box${i}`);
        titleEl.innerHTML = response.title;
      } else {
        const titleEl = document.getElementById(`box${i}`);
        titleEl.dataset.t = "test"
      }
    });
  }
}

Moim zdaniem należałoby zrobić krok wstecz, i zastanowić się co chcesz testować tak na prawdę. Idea, w mojej opinii taka jak "testowanie funkcji" albo "testowanie klasy", to jest trochę średnie podejście, należy testować zachowanie.

Więc pojawia się pytanie - zazwyczaj ustawia się atrybuty data- po coś, albo żeby nadać jakiś styl, albo żeby uruchomić jakąś wtyczkę - więc po co Ty chcesz zmienić atrybut data-?