Kif teħħor il-loġika tal-istati?

Question

Accepted Answer

It-test tal-loġika tal-istati jibni fiduċja li t-transizzjonijiet u l-aġġornamenti tal-istati tiegħek huma korretti. L-estrateġija tiddependi fuq *kif* il-loġika hija strutturata — il-funzjonijiet puri (reducers) huma l-aktar faċli biex jiġu ttestjati, għalhekk l-istati magħquda tajjeb huma wkoll istati li jistgħu jiġu ttestjati tajjeb.

## Ttestja pure reducer direttament (il-każ l-aktar semplic, valur għoli)

```js
// reducers are pure: (state, action) => newState → trivial to test, no mocks
describe("todosReducer", () => {
  it("adds a todo", () => {
    const initial = [];
    const next = todosReducer(initial, { type: "todos/added", payload: { id: 1, text: "A" } });
    expect(next).toEqual([{ id: 1, text: "A" }]);
    expect(initial).toEqual([]); // ✅ verify the original wasn't mutated (immutability)
  });
});
```

Billi l-reducer huma funzjonijiet puri, inti sempliċement tiesed ma' input u tasserta l-output — l-ebda rendering, l-ebda mocking, veloċi u deterministiku. Din hija l-*raġun* għalfejn il-mutur pure-reducer huwa apprezz ħafna.

## Ttestja s-selettori

```js
it("selects the cart total", () => {
  const state = { cart: { items: [{ price: 10 }, { price: 5 }] } };
  expect(selectCartTotal(state)).toBe(15);
});
```

## Ttestja custom hooks / loġika tal-maħzen

```jsx
import { renderHook, act } from "@testing-library/react";

it("increments", () => {
  const { result } = renderHook(() => useCounter());
  act(() => result.current.increment()); // act wraps state updates
  expect(result.current.count).toBe(1);
});
```

`renderHook` + `act` jippermettulek tittestja l-loġika tal-istati tal-hook/maħzen f'iżolazzjoni.

## Ttestja l-komponenti skond il-imġiba, mhux id-dettalji interni

```jsx
import { render, screen, fireEvent } from "@testing-library/react";

it("shows the count after clicking", () => {
  render(<Counter />);
  fireEvent.click(screen.getByRole("button"));
  expect(screen.getByText("1")).toBeInTheDocument(); // assert the rendered RESULT
});
```

Ttestja x'jara/jagħmel l-utent (imġiba), mhux id-dettalji tal-implimentazzjoni — sabiex ir-refactors ma jixemmex it-tests.

## Ttestja l-istati asinkriwu (mock in-network)

```js
// mock fetch/API (e.g. MSW), then assert loading → success/error transitions
it("handles fetch error → error state", async () => { ... });
```

Uża MSW jew mocks biex tittestja t-transizzjonijiet loading/success/error b'mod deterministiku.

## X'għandek prioritizzaw

```text
Reducers/selectors/pure logic → unit test thoroughly (cheap, high value)
Component behavior           → integration test key user flows
Async flows                  → test transitions with mocked APIs
Don't test framework internals or trivial setters
```

## Għalfejn huwa importanti

L-insettjiet tal-istati huma fost l-aktar impattanti, għalhekk it-test tal-loġika tal-istati huwa valur għoli.

Krucjalment, **l-istati magħquda tajjeb huma intrinsiċi ttestjabbli**: pure reducers u selettori huma trivjali għat-tests ta' unità (l-ebda mocks, deterministiku), li huwa argument qawwi għal dik l-arkitettura.

Il-għarfien x'teħħor il-reducers/selettori direttament, hooks b' `renderHook`, komponenti skond il-imġiba vizibbli tal-utent, u flussi asinkriwi b'networks immitata — filwaqt li tevita t-tests fraġli tal-dettalji ta' implimentazzjoni — tagħti kopertura affidabbli tal-loġika l-aktar probabbli li tikkawża insettjiet sottili.