Sklep DEMO: koszyk, wyszukiwanie i filtry

Otwórz laboratorium przez działający lokalny serwer pod adresem http://127.0.0.1:8787/content/cwiczenia/sklep-demo/lab.html. Serwer uruchamia polecenie node tools/serwer-lekcji.cjs w katalogu projektu; jeśli już działa, korzystaj z niego. Wszystkie produkty, kwoty i zamówienia są fikcyjne. Operacje działają w pamięci karty; odświeżenie albo reset usuwa stan. Nie ma płatności, API, magazynu ani utrwalenia zamówienia na serwerze.

Wymagania i dane

Ceny w kodzie są całkowitymi wartościami w groszach. Koszyk dopuszcza ilość całkowitą od 1 do 5 na produkt. Ponowne dodanie zwiększa ją do limitu. Dostawa kosztuje 9,00 zł poniżej sumy produktów 100,00 zł, od tej kwoty jest bezpłatna. Pusty koszyk ma wszystkie kwoty zero i zablokowane zamówienie. Zmiana i usuwanie aktualizują wszystkie wartości. Zamówienie zapisuje kopię pozycji oraz kwot w panelu, po czym opróżnia koszyk.

Szukamy fragmentu nazwy, ignorując wielkość liter i spacje na końcach. Kategoria i zapytanie mają być połączone warunkiem AND: produkt spełnia obie reguły. Sortowanie cen ma być numeryczne; sortowanie nazw stosuje polskie porównywanie tekstu. Brak wyników to licznik zero i pusta lista.

Scenariusze do wykonania

1. Zresetuj stan. Dodaj Notes QA i Długopis testera. Oczekuj produktów 29,00 zł, dostawy 9,00 zł, razem 38,00 zł.
2. Ustaw ilość notesu na 2 i opuść pole, np. klawiszem Tab. Oczekuj razem 58,00 zł. Spróbuj 0, 6 i 1,5. Niedozwolona ilość ma pozostawić poprzedni stan.
3. Złóż zamówienie DEMO. Porównaj panel ostatniego zamówienia: subtotal 4900, shipping 900, total 5800. Koszyk ma być pusty.
4. Resetuj; dodaj samą matę. Oczekuj bezpłatnej dostawy. Dodaj długopis i usuń go: porównaj wyniki po obu stronach progu.
5. Resetuj; wybierz cenę rosnąco. Porównaj całą listę z cenami 9, 20, 25, 35, 45, 100 zł.
6. Wpisz nOtEs , pozostaw wszystkie kategorie. Oczekuj jednego notesu. Wybierz Akcesoria. Oczekuj zera. Wyczyść zapytanie: oczekuj trzech akcesoriów.
7. Wybierz wszystkie kategorie i wpisz nieistniejacy. Oczekuj zera. Reset ma przywrócić sześć produktów, sortowanie nazw i pusty koszyk.

Przed zajrzeniem w rozwiązania zapisz wymaganie, wynik rzeczywisty i najkrótsze kroki odtworzenia. Test prawidłowej ścieżki ma potwierdzać działanie; test defektu ma wykazać konkretną różnicę.

Rozwiązania: trzy celowe defekty

• S01 — granica dostawy. Mata kosztuje dokładnie 10000 groszy. Demo dolicza 900 groszy, choć wymaganie mówi „od 100,00 zł”. Warunek w kodzie to subtotal > 10000; poprawka: subtotal >= 10000. Sprawdź potem poniżej progu, na progu, powyżej i pusty koszyk.
• S02 — ceny porównywane jako tekst. Rosnąco mata pojawia się przed notesem, a długopis na końcu. Kod porównuje String(price) przez localeCompare. Poprawne porównanie liczb: a.price - b.price, malejąco odwrotnie. Testuj całą listę i obydwa kierunki.
• S03 — suma zamiast przecięcia filtrów. notes oraz Akcesoria zwraca notes i trzy akcesoria. Operator OR dopuszcza spełnienie tylko jednej reguły. Poprawka: match && (cat === 'all' || p.category === cat). Powtórz test każdej kontroli osobno i kombinacji.

Kod pozostaje celowo wadliwy do ćwiczeń. Rozwiązania nie oznaczają, że wersja 1.0 została naprawiona.

Dowody i ograniczenia

2 października 2026 uruchomiono node tools/test-sklep-pliki.cjs: Node v24.16.0, Chromium 151.0.7922.34, Playwright. Potwierdzono bazowe kwoty, odrzucenie ilości 6, lokalne zamówienie, reset, normalizację zapytania, zero wyników i wszystkie trzy defekty. Przy szerokości 360 px nie stwierdzono poziomego overflow. Zapis: tmp/qa-sklep-pliki/wyniki.json; rzeczywiste zrzuty: sklep-prog.png, sklep-mobile.png. Nie wykonywano ręcznych testów na fizycznym telefonie i czytnikiem ekranu. Bez backendu wyniki nie potwierdzają odporności sklepu na modyfikowanie kwot ani podwójne płatności.

Powiązane materiały: koszyk, wyszukiwanie, checklista koszyka, checklista wyszukiwania.