` w `next.config.ts` dla każdej trasy"],"answer":0,"explanation":"Metadata API działa w komponentach serwerowych: `export const metadata = { title, description }`, a dla wartości dynamicznych `export async function generateMetadata({ params })`. Wartości z layoutu i strony są scalane. `next/head` to API Pages Router.","sources":[{"title":"Next.js: Metadata and OG images","url":"https://nextjs.org/docs/app/getting-started/metadata-and-og-images"},{"title":"Next.js: generateMetadata","url":"https://nextjs.org/docs/app/api-reference/functions/generate-metadata"}],"origin":{"topic":"nextjs","level":"junior","index":13}},{"question":"Pod jakim adresem URL jest dostępny plik `public/logo.png`?","options":["`/logo.png`","`/public/logo.png`","`/_next/static/logo.png`"],"answer":0,"explanation":"Zawartość `public` jest serwowana od korzenia strony. Trafiają tam favikony, robots.txt i statyczne obrazki. Te pliki nie przechodzą przez build i nie dostają hasha w nazwie, więc cache trzeba skonfigurować osobno. `/_next/static` to ścieżka zasobów generowanych przez build.","sources":[{"title":"Next.js: Project Structure","url":"https://nextjs.org/docs/app/getting-started/project-structure"}],"origin":{"topic":"nextjs","level":"junior","index":14}},{"question":"Jak w App Router utworzyć endpoint API `GET /api/users`?","options":["Plik `app/api/users/route.ts` eksportujący funkcję `GET`","Plik `app/api/users/page.tsx` z eksportem domyślnym","Plik `api/users.ts` w korzeniu projektu z `export default handler`"],"answer":0,"explanation":"Route Handlers używają webowych API `Request`/`Response`: `export async function GET(request: Request) { return Response.json(users) }`. Obsługiwane są `POST`, `PUT`, `PATCH`, `DELETE` i inne. Folder nie może zawierać jednocześnie `route.ts` i `page.tsx`.","sources":[{"title":"Next.js: Route Handlers","url":"https://nextjs.org/docs/app/getting-started/route-handlers"}],"origin":{"topic":"nextjs","level":"junior","index":15}},{"question":"Które zmienne środowiskowe są dostępne w kodzie przeglądarki?","options":["Tylko te z prefiksem `NEXT_PUBLIC_`, wstawiane podczas budowania","Wszystkie zmienne z `.env`, jeśli plik jest w korzeniu projektu","Żadne: zmienne środowiskowe w ogóle nie są dostępne w przeglądarce"],"answer":0,"explanation":"Next.js podstawia `process.env.NEXT_PUBLIC_*` do kodu klienckiego podczas budowania, więc zmiana wartości wymaga ponownego builda. Pozostałe zmienne są dostępne tylko na serwerze - dzięki temu sekrety (klucze API, hasła do bazy) nie wyciekają do przeglądarki.","sources":[{"title":"Next.js: Environment Variables","url":"https://nextjs.org/docs/app/guides/environment-variables"}],"origin":{"topic":"nextjs","level":"junior","index":16}},{"question":"Co daje komponent `<Image>` z `next/image`?","options":["Dobór rozmiaru i formatu, lazy loading, ochronę przed CLS","Tylko krótszą składnię dla zwykłego znacznika `<img>`","Ładowanie obrazków przez WebSocket dla szybszego renderowania"],"answer":0,"explanation":"`next/image` generuje `srcset`, serwuje nowoczesne formaty (WebP/AVIF), domyślnie ładuje leniwie i rezerwuje miejsce dzięki `width`/`height` (lub `fill`), zapobiegając przesunięciom układu. Dla obrazka LCP użyj `preload` (dawniej `priority`).","sources":[{"title":"Next.js: Image Optimization","url":"https://nextjs.org/docs/app/getting-started/images"},{"title":"Next.js: <Image>","url":"https://nextjs.org/docs/app/api-reference/components/image"}],"origin":{"topic":"nextjs","level":"junior","index":17}},{"question":"Dlaczego `<Image src=\"https://cdn.example.com/a.jpg\" ... />` daje błąd konfiguracji?","options":["Zewnętrzne domeny trzeba dopuścić w `images.remotePatterns` w `next.config`","`next/image` w ogóle nie obsługuje obrazków z innych domen","Zewnętrzne obrazki można ładować tylko w formacie PNG"],"answer":0,"explanation":"Optymalizator obrazków działa na twoim serwerze i bez ograniczeń mógłby być użyty jako proxy dla dowolnego URL. Dlatego dozwolone źródła wymienia się w `remotePatterns` (protokół, host, ścieżka).","sources":[{"title":"Next.js: <Image>","url":"https://nextjs.org/docs/app/api-reference/components/image"},{"title":"Next.js: Image Optimization","url":"https://nextjs.org/docs/app/getting-started/images"}],"origin":{"topic":"nextjs","level":"junior","index":18}},{"question":"Co robi `next/font`?","options":["Pobiera font podczas budowania i serwuje go z twojej domeny","Ładuje Google Fonts przez `<link>` przy każdym żądaniu strony","Zamienia fonty na sprite SVG, by przyspieszyć renderowanie tekstu"],"answer":0,"explanation":"Fonty (Google lub lokalne) są pobierane podczas budowania i serwowane razem z twoimi zasobami statycznymi: przeglądarka nie łączy się z Google, co jest lepsze dla prywatności i szybkości. Next.js konfiguruje też font zapasowy z dopasowanymi metrykami, by zmniejszyć CLS.","sources":[{"title":"Next.js: Font Optimization","url":"https://nextjs.org/docs/app/getting-started/fonts"},{"title":"Next.js: next/font","url":"https://nextjs.org/docs/app/api-reference/components/font"}],"origin":{"topic":"nextjs","level":"junior","index":19}},{"question":"Skąd importuje się `useRouter` w App Router?","options":["`next/navigation`","`next/router`","`react-router-dom`"],"answer":0,"explanation":"W App Router hooki nawigacji - `useRouter`, `usePathname`, `useSearchParams`, `useParams` - importuje się z `next/navigation` i działają w komponentach klienckich. `next/router` to API Pages Router. Do przekierowania po stronie serwera służy `redirect()`.","sources":[{"title":"Next.js: useRouter","url":"https://nextjs.org/docs/app/api-reference/functions/use-router"}],"origin":{"topic":"nextjs","level":"junior","index":20}},{"question":"Jak w komponencie klienckim pobrać bieżącą ścieżkę, np. by podświetlić aktywny link?","options":["`usePathname()`","`window.location.pathname` podczas renderu","`useRouter().pathname`"],"answer":0,"explanation":"`usePathname()` zwraca ścieżkę i aktualizuje się przy nawigacji po stronie klienta. Czytanie `window` podczas renderu psuje SSR i hydratację. Właściwość `pathname` w `useRouter` istniała w Pages Router; w `next/navigation` jej nie ma.","sources":[{"title":"Next.js: usePathname","url":"https://nextjs.org/docs/app/api-reference/functions/use-pathname"}],"origin":{"topic":"nextjs","level":"junior","index":21}},{"question":"Czym SSR różni się od SSG?","options":["SSR - HTML przy każdym żądaniu, SSG - z góry podczas budowania","SSR renderuje w przeglądarce użytkownika, a SSG na serwerze","SSG wymaga połączenia z bazą danych, a SSR działa bez niego"],"answer":0,"explanation":"Static Site Generation (prerendering) tworzy HTML podczas budowania i serwuje go z CDN - szybko i tanio, ale dane są „zamrożone”. Server-Side Rendering tworzy HTML przy każdym żądaniu - dane są świeże i spersonalizowane, ale obciążenie i TTFB są wyższe. Renderowanie w przeglądarce to CSR.","sources":[{"title":"Next.js Learn: Static and Dynamic Rendering","url":"https://nextjs.org/learn/dashboard-app/static-and-dynamic-rendering"},{"title":"Next.js: Glossary","url":"https://nextjs.org/docs/app/glossary"}],"origin":{"topic":"nextjs","level":"junior","index":22}},{"question":"Czym jest ISR (Incremental Static Regeneration)?","options":["Aktualizacją stron statycznych w tle bez pełnego przebudowania","Stopniowym ładowaniem paczki JS podczas przewijania strony","Renderowaniem strony częściami w przeglądarce po załadowaniu JS"],"answer":0,"explanation":"Użytkownicy dostają stronę statyczną z cache, a po upływie okresu (lub wywołaniu `revalidatePath`/`revalidateTag`) Next.js generuje ją ponownie w tle i aktualizuje cache. To kompromis między szybkością SSG a świeżością SSR.","sources":[{"title":"Next.js: Incremental Static Regeneration","url":"https://nextjs.org/docs/app/guides/incremental-static-regeneration"},{"title":"Next.js: Revalidating","url":"https://nextjs.org/docs/app/getting-started/revalidating"}],"origin":{"topic":"nextjs","level":"junior","index":23}},{"question":"Kiedy w Pages Router wykonuje się `getServerSideProps`?","options":["Na serwerze przy każdym żądaniu","Raz podczas budowania","W przeglądarce podczas hydratacji"],"answer":0,"explanation":"`getServerSideProps` to SSR w Pages Router: funkcja dostaje kontekst żądania (ciasteczka, query) i zwraca propsy. Podczas budowania zamiast niej działa `getStaticProps`. W App Router oba API zastępują asynchroniczne komponenty serwerowe.","sources":[{"title":"Next.js (Pages): getServerSideProps","url":"https://nextjs.org/docs/pages/building-your-application/data-fetching/get-server-side-props"},{"title":"Next.js (Pages): getStaticProps","url":"https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-props"}],"origin":{"topic":"nextjs","level":"junior","index":24}},{"question":"Co robi `getStaticPaths` w Pages Router?","options":["Zwraca ścieżki trasy dynamicznej do zbudowania","Zwraca wszystkie pliki statyczne z folderu `public`","Definiuje przekierowania i rewrite'y dla stron statycznych"],"answer":0,"explanation":"Dla strony `pages/posts/[id].tsx` z `getStaticProps` Next.js musi wiedzieć, które `id` zbudować z góry. Opcja `fallback` określa zachowanie dla pozostałych ścieżek. Odpowiednik w App Router to `generateStaticParams`.","sources":[{"title":"Next.js (Pages): getStaticPaths","url":"https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-paths"},{"title":"Next.js: generateStaticParams","url":"https://nextjs.org/docs/app/api-reference/functions/generate-static-params"}],"origin":{"topic":"nextjs","level":"junior","index":25}},{"question":"Co daje folder w nawiasach, np. `app/(marketing)/about/page.tsx`?","options":["Grupuje trasy bez wpływu na URL - strona jest pod `/about`","Czyni trasę opcjonalną: działa zarówno `/marketing/about`, jak i `/about`","Ukrywa trasę przed buildem produkcyjnym"],"answer":0,"explanation":"Grupy tras porządkują kod i pozwalają grupie mieć własny layout (np. osobne dla marketingu i panelu użytkownika) bez zmiany URL. Można nawet mieć kilka głównych layoutów w różnych grupach.","sources":[{"title":"Next.js: Route Groups","url":"https://nextjs.org/docs/app/api-reference/file-conventions/route-groups"}],"origin":{"topic":"nextjs","level":"junior","index":26}},{"question":"Po co nadawać folderowi nazwę z podkreślnikiem, np. `app/_components`?","options":["To folder prywatny: on i jego pliki są wyłączone z routingu","Podkreślnik czyni komponenty w folderze klienckimi","Mówi Next.js, by mocniej minifikować te pliki"],"answer":0,"explanation":"Prywatne foldery jawnie oddzielają kod pomocniczy od tras. Ściśle biorąc, pliki bez `page`/`route` i tak nie są publiczne, ale `_` chroni przed przypadkowym utworzeniem trasy i czyni strukturę czytelniejszą.","sources":[{"title":"Next.js: Project Structure","url":"https://nextjs.org/docs/app/getting-started/project-structure"}],"origin":{"topic":"nextjs","level":"junior","index":27}},{"question":"Która trasa złapie `/docs/a/b/c`?","options":["`app/docs/[...slug]/page.tsx`","`app/docs/[slug]/page.tsx`","`app/docs/*/page.tsx`"],"answer":0,"explanation":"Segment catch-all `[...slug]` zbiera wszystkie kolejne segmenty w tablicę. Zwykły `[slug]` pasuje do dokładnie jednego segmentu. Opcjonalny catch-all `[[...slug]]` pasuje też do samego `/docs`. Next.js nie obsługuje gwiazdek w nazwach folderów.","sources":[{"title":"Next.js: Dynamic Route Segments","url":"https://nextjs.org/docs/app/api-reference/file-conventions/dynamic-routes"}],"origin":{"topic":"nextjs","level":"junior","index":28}},{"question":"Co robią polecenia `next build` i `next start`?","options":["`build` tworzy build produkcyjny, `start` go uruchamia","`build` uruchamia serwer deweloperski, a `start` - testy projektu","To synonimy: `start` to stara nazwa `build`"],"answer":0,"explanation":"`next dev` to serwer deweloperski z szybkim odświeżaniem. `next build` kompiluje aplikację, prerenderuje trasy statyczne i wypisuje raport. `next start` uruchamia serwer produkcyjny na wyniku builda. Dla strony statycznej jest `output: 'export'`.","sources":[{"title":"Next.js: Documentation","url":"https://nextjs.org/docs"},{"title":"Next.js: Self-Hosting","url":"https://nextjs.org/docs/app/guides/self-hosting"}],"origin":{"topic":"nextjs","level":"junior","index":29}},{"question":"Jakiego bundlera domyślnie używa Next.js 16 dla `next dev` i `next build`?","options":["Turbopack, bez dodatkowych flag","Webpack, jak w poprzednich wersjach","Vite, po przejściu z Webpacka"],"answer":0,"explanation":"Od Next.js 16 Turbopack jest stabilny i używany domyślnie w obu trybach - flaga `--turbopack` nie jest już potrzebna. Do Webpacka można wrócić flagą `--webpack`. Jeśli projekt ma własną konfigurację `webpack`, `next build` bez flagi się wysypie, by konfiguracja nie została po cichu zignorowana.","sources":[{"title":"Next.js: Upgrading to Version 16","url":"https://nextjs.org/docs/app/guides/upgrading/version-16"},{"title":"Next.js: Turbopack","url":"https://nextjs.org/docs/app/api-reference/turbopack"}],"origin":{"topic":"nextjs","level":"junior","index":30}},{"question":"Jak w Next.js 16 nazywa się plik, który wcześniej nazywał się `middleware.ts`?","options":["`proxy.ts`","`interceptor.ts`","`gateway.ts`"],"answer":0,"explanation":"Konwencja `middleware` jest przestarzała i przemianowana na `proxy`, by podkreślić jej rolę na granicy sieci (przekierowania, rewrite'y, nagłówki). Eksportowana funkcja też nazywa się `proxy`. Proxy działa w runtime Node.js; runtime edge nie jest tam obsługiwany.","sources":[{"title":"Next.js: Proxy (formerly Middleware)","url":"https://nextjs.org/docs/app/getting-started/proxy"},{"title":"Next.js: Upgrading to Version 16","url":"https://nextjs.org/docs/app/guides/upgrading/version-16"}],"origin":{"topic":"nextjs","level":"junior","index":31}},{"question":"Jak przekierować użytkownika na `/login` z komponentu serwerowego?","options":["Wywołać `redirect('/login')` z `next/navigation`","Wywołać `router.push('/login')` z `useRouter`","Zwrócić `<Navigate to=\"/login\" />` z komponentu"],"answer":0,"explanation":"`redirect()` działa w komponentach serwerowych, Server Functions i Route Handlers. Rzuca specjalny wyjątek, więc kod po nim się nie wykona, i nie wolno go opakowywać w `try/catch`. `useRouter` jest dostępny tylko w komponentach klienckich, a `<Navigate>` pochodzi z React Router.","sources":[{"title":"Next.js: redirect","url":"https://nextjs.org/docs/app/api-reference/functions/redirect"}],"origin":{"topic":"nextjs","level":"junior","index":32}},{"question":"Jak na stronie serwerowej pobrać parametr zapytania `?page=2`?","options":["Z propa `searchParams`: `const { page } = await searchParams`","Przez `useSearchParams()` bezpośrednio na stronie serwerowej","Przez `params.page` - query trafia do `params`"],"answer":0,"explanation":"Strona dostaje `searchParams` jako promise. Odczyt query czyni stronę dynamiczną, bo wartości są znane dopiero w momencie żądania. W komponentach klienckich używa się `useSearchParams()`. `params` zawiera tylko dynamiczne segmenty ścieżki.","sources":[{"title":"Next.js: page.js","url":"https://nextjs.org/docs/app/api-reference/file-conventions/page"},{"title":"Next.js: useSearchParams","url":"https://nextjs.org/docs/app/api-reference/functions/use-search-params"}],"origin":{"topic":"nextjs","level":"junior","index":33}},{"question":"Jak ładować dane w komponencie serwerowym?","options":["Uczynić komponent `async` i wywołać `await fetch()` lub zapytanie do bazy","Tylko przez `useEffect` i `useState`, jak w klienckim React","Tylko przez Route Handler i żądanie do niego z klienta"],"answer":0,"explanation":"Komponenty serwerowe mogą być asynchroniczne i sięgać do danych bezpośrednio - API, ORM, system plików - bez wysyłania sekretów do przeglądarki. Wywoływanie własnego Route Handlera z komponentu serwerowego to zbędna podróż przez sieć. Hooki w komponentach serwerowych są niedostępne.","sources":[{"title":"Next.js: Fetching Data","url":"https://nextjs.org/docs/app/getting-started/fetching-data"},{"title":"Next.js: Server and Client Components","url":"https://nextjs.org/docs/app/getting-started/server-and-client-components"}],"origin":{"topic":"nextjs","level":"junior","index":34}},{"question":"Gdzie w App Router importuje się globalny CSS?","options":["W głównym `app/layout.tsx` przez `import`","W każdym `page.tsx` osobno przez `import`","Tylko przez znacznik `<link>` w `public/index.html`"],"answer":0,"explanation":"Style globalne importuje się w głównym layoucie i działają na wszystkich trasach. Do stylów komponentów służą CSS Modules (`*.module.css`), Tailwind lub CSS-in-JS z obsługą RSC. Next.js nie ma pliku `index.html`.","sources":[{"title":"Next.js: CSS","url":"https://nextjs.org/docs/app/getting-started/css"}],"origin":{"topic":"nextjs","level":"junior","index":35}},{"question":"Gdzie pojawi się `console.log` z komponentu serwerowego?","options":["W terminalu, w którym działa serwer Next.js","W konsoli przeglądarki użytkownika","Nigdzie: logowanie w komponentach serwerowych jest wyłączone"],"answer":0,"explanation":"Komponent serwerowy wykonuje się na serwerze (lub podczas budowania), więc jego logi trafiają do wyjścia procesu Node.js. W trybie deweloperskim Next.js może dla wygody duplikować logi serwera w przeglądarce, ale kod i tak działa na serwerze.","sources":[{"title":"Next.js: Server and Client Components","url":"https://nextjs.org/docs/app/getting-started/server-and-client-components"}],"origin":{"topic":"nextjs","level":"junior","index":36}},{"question":"Co przekazać do `<Image>` dla obrazka rozciągniętego na cały blok rodzica?","options":["Prop `fill`, z `position: relative` na rodzicu","`width=\"100%\"` i `height=\"100%\"` jako stringi","Nic: `<Image>` domyślnie wypełnia rodzica"],"answer":0,"explanation":"Gdy wymiary nie są znane z góry, używa się `fill`: obrazek jest pozycjonowany absolutnie i wypełnia rodzica, który musi mieć `relative`, `absolute` lub `fixed`. `sizes` podpowiada, jak szeroki będzie obrazek, by przeglądarka nie pobierała zbyt dużego pliku. Dopasowaniem steruje `object-fit`.","sources":[{"title":"Next.js: <Image>","url":"https://nextjs.org/docs/app/api-reference/components/image"}],"origin":{"topic":"nextjs","level":"junior","index":37}},{"question":"Jak w Next.js leniwie załadować ciężki komponent kliencki?","options":["Przez `next/dynamic` (lub `React.lazy` + `Suspense`)","Przez atrybut `lazy` na komponencie w JSX","Przez `import` wewnątrz `useEffect` z zapisem w stanie"],"answer":0,"explanation":"`const Chart = dynamic(() => import('./Chart'))` wydziela kod do osobnego chunka i pozwala podać `loading`. Opcja `ssr: false` wyłącza renderowanie na serwerze, ale można jej użyć tylko w komponentach klienckich. Komponenty serwerowe i tak nie trafiają do paczki.","sources":[{"title":"Next.js: Lazy Loading","url":"https://nextjs.org/docs/app/guides/lazy-loading"}],"origin":{"topic":"nextjs","level":"junior","index":38}},{"question":"Po co ładować zewnętrzne skrypty przez `next/script`?","options":["Można wybrać strategię ładowania (`afterInteractive`, `lazyOnload` itd.)","Tylko wtedy skrypty będą działać w buildzie produkcyjnym","`next/script` automatycznie przepisuje skrypt na TypeScript"],"answer":0,"explanation":"Komponent `<Script>` pozwala nie blokować ładowania strony analityką i widżetami: `beforeInteractive` dla krytycznych skryptów, `afterInteractive` (domyślnie) i `lazyOnload` dla drugorzędnych. Skrypt ładuje się raz nawet przy przechodzeniu między stronami.","sources":[{"title":"Next.js: <Script>","url":"https://nextjs.org/docs/app/api-reference/components/script"}],"origin":{"topic":"nextjs","level":"junior","index":39}},{"question":"Jak zbudować aplikację Next.js do zestawu plików statycznych bez serwera Node.js?","options":["Ustawić `output: 'export'` w `next.config`","Uruchomić `next start --static`","Usunąć folder `app` i zostawić tylko `public`"],"answer":0,"explanation":"Eksport statyczny umieszcza HTML, CSS i JS w folderze `out`, który można hostować na dowolnym hostingu statycznym. Ograniczenia: nie działają funkcje wymagające serwera - `cookies()`, dynamiczne Route Handlers, ISR, domyślna optymalizacja obrazków, Server Functions.","sources":[{"title":"Next.js: Static Exports","url":"https://nextjs.org/docs/app/guides/static-exports"}],"origin":{"topic":"nextjs","level":"junior","index":40}},{"question":"Co się stanie, jeśli w `app/dashboard/` będą jednocześnie `page.tsx` i `route.ts`?","options":["Błąd budowania: te pliki konfliktują o ten sam URL","Żądania GET trafią do `route.ts`, pozostałe do `page.tsx`","Strona się wyrenderuje, a `route.ts` zostanie zignorowany"],"answer":0,"explanation":"Oba pliki pretendują do tego samego URL i Next.js zgłasza konflikt. Trasy API zwykle wynosi się do osobnej gałęzi, np. `app/api/...`.","sources":[{"title":"Next.js: Route Handlers","url":"https://nextjs.org/docs/app/getting-started/route-handlers"}],"origin":{"topic":"nextjs","level":"junior","index":41}},{"question":"Czym `template.tsx` różni się od `layout.tsx`?","options":["Template montuje się ponownie przy każdej nawigacji, layout pozostaje","Template renderuje się tylko na serwerze, layout tylko na kliencie","Template służy tylko do szablonów e-maili"],"answer":0,"explanation":"Template opakowuje strony jak layout, ale przy każdej nawigacji dostaje unikalny klucz: stan się resetuje, a efekty uruchamiają ponownie. Przydaje się to np. do animacji wejścia lub logowania wyświetleń stron. W większości przypadków wystarczy layout.","sources":[{"title":"Next.js: template.js","url":"https://nextjs.org/docs/app/api-reference/file-conventions/template"}],"origin":{"topic":"nextjs","level":"junior","index":42}},{"question":"Czy w komponencie serwerowym można używać hooków `useState` i `useEffect`?","options":["Nie: komponenty serwerowe nie mają stanu ani efektów","Tak, ale tylko `useState`, bez `useEffect`","Tak, jeśli komponent jest zadeklarowany jako funkcja `async`"],"answer":0,"explanation":"Komponent serwerowy wykonuje się raz, by dać wynik, i potem nie „żyje”. Stan, efekty i handlery zdarzeń to możliwości klienckie. Komponent serwerowy może wyrenderować komponent kliencki i przekazać mu dane przez propsy.","sources":[{"title":"Next.js: Server and Client Components","url":"https://nextjs.org/docs/app/getting-started/server-and-client-components"},{"title":"react.dev: Server Components","url":"https://react.dev/reference/rsc/server-components"}],"origin":{"topic":"nextjs","level":"junior","index":43}},{"question":"Kiedy `<Link>` wcześniej ładuje trasę (prefetch)?","options":["Gdy link pojawia się w viewporcie (w produkcji)","Tylko po kliknięciu linku, jak przy zwykłej nawigacji","Od razu przy ładowaniu aplikacji - wszystkie trasy strony"],"answer":0,"explanation":"Prefetch czyni nawigację natychmiastową. W trybie deweloperskim jest wyłączony, więc szybkość nawigacji sprawdzaj na buildzie produkcyjnym. Zachowanie konfiguruje prop `prefetch` (`false`, `true`, `'auto'`). W Next.js 16 prefetch stał się przyrostowy: wspólne layouty są pobierane raz.","sources":[{"title":"Next.js: <Link>","url":"https://nextjs.org/docs/app/api-reference/components/link"},{"title":"Next.js: Prefetching","url":"https://nextjs.org/docs/app/guides/prefetching"}],"origin":{"topic":"nextjs","level":"junior","index":44}},{"question":"Czy stan w sidebarze wewnątrz wspólnego layoutu przetrwa przejście między stronami?","options":["Tak: wspólny layout nie montuje się ponownie podczas nawigacji","Nie: każda nawigacja montuje ponownie całe drzewo","Tylko jeśli sidebar jest opakowany w `React.memo` lub `useMemo`"],"answer":0,"explanation":"Next.js renderuje tylko zmienione segmenty, a wspólne layouty pozostają zamontowane: wpisany tekst, otwarte menu i pozycja przewinięcia są zachowane. Jeśli potrzebny jest reset przy nawigacji, użyj `template.tsx` lub `key`.","sources":[{"title":"Next.js: Linking and Navigating","url":"https://nextjs.org/docs/app/getting-started/linking-and-navigating"},{"title":"Next.js: Layouts and Pages","url":"https://nextjs.org/docs/app/getting-started/layouts-and-pages"}],"origin":{"topic":"nextjs","level":"junior","index":45}},{"question":"Jak otypować propsy `app/blog/[slug]/page.tsx` w Next.js 16?","options":["Globalnym helperem `PageProps<'/blog/[slug]'>`","Przez `NextPage<{ slug: string }>` z `next`","Typowanie propsów strony nie jest możliwe"],"answer":0,"explanation":"Next.js generuje typy tras (podczas `next dev`, `next build` lub `next typegen`), a helpery `PageProps`, `LayoutProps` i `RouteContext` znają kształt `params` dla każdej ścieżki. `NextPage` to typ Pages Router.","sources":[{"title":"Next.js: page.js","url":"https://nextjs.org/docs/app/api-reference/file-conventions/page"},{"title":"Next.js: TypeScript","url":"https://nextjs.org/docs/app/api-reference/config/typescript"}],"origin":{"topic":"nextjs","level":"junior","index":46}},{"question":"Jaka minimalna wersja Node.js jest wymagana dla Next.js 16?","options":["20.9","16.0","18.0"],"answer":0,"explanation":"Next.js 16 wymaga Node.js 20.9+ (LTS); obsługę Node.js 18 usunięto. Wzrosły też wymagania dla TypeScript (5.1+) i przeglądarek (Chrome/Edge/Firefox 111+, Safari 16.4+).","sources":[{"title":"Next.js: Upgrading to Version 16","url":"https://nextjs.org/docs/app/guides/upgrading/version-16"}],"origin":{"topic":"nextjs","level":"junior","index":47}},{"question":"Czy w Next.js można używać CSS Modules bez dodatkowej konfiguracji?","options":["Tak: pliki `*.module.css` są obsługiwane od razu","Nie: trzeba zainstalować i skonfigurować `css-loader`","Tylko w Pages Router; App Router ich nie obsługuje"],"answer":0,"explanation":"`import styles from './Button.module.css'` i `className={styles.primary}` - nazwy klas stają się lokalne. Obsługiwane są też Sass (po instalacji pakietu `sass`), Tailwind i globalny CSS.","sources":[{"title":"Next.js: CSS","url":"https://nextjs.org/docs/app/getting-started/css"}],"origin":{"topic":"nextjs","level":"junior","index":48}},{"question":"Jaki tytuł dostanie strona przy `export const metadata = { title: 'Profile' }` na stronie i `title: { template: '%s | Shop', default: 'Shop' }` w layoucie?","options":["`Profile | Shop`","`Shop | Profile`","`Profile` bez szablonu"],"answer":0,"explanation":"`title.template` z layoutu jest stosowany do tytułów segmentów potomnych: `%s` jest zastępowane przez `title` strony. `default` jest używany, jeśli segment potomny nie ustawia tytułu. Oszczędza to powtarzania nazwy strony na każdej podstronie.","sources":[{"title":"Next.js: Metadata and OG images","url":"https://nextjs.org/docs/app/getting-started/metadata-and-og-images"},{"title":"Next.js: generateMetadata","url":"https://nextjs.org/docs/app/api-reference/functions/generate-metadata"}],"origin":{"topic":"nextjs","level":"junior","index":49}},{"question":"Jak komponent kliencki odczyta segment `[slug]` bieżącego URL?","code":"'use client'\nimport { useParams } from 'next/navigation'\n\nexport function ShareButton() {\n const { slug } = useParams<{ slug: string }>()\n}","options":["Hookiem `useParams` z `next/navigation`","Komponenty klienckie w ogóle nie mają dostępu do parametrów trasy","Przez `window.params`"],"answer":0,"explanation":"Strony i layouty dostają `params` jako prop (w Next.js 16 to Promise), a głęboko zagnieżdżone komponenty klienckie mogą wywołać `useParams()` zamiast przekazywać parametry przez propsy.","sources":[{"title":"Next.js: useParams","url":"https://nextjs.org/docs/app/api-reference/functions/use-params"}],"origin":{"topic":"nextjs","level":"junior","index":50}},{"question":"Jak wygenerować `sitemap.xml` w App Routerze?","code":"// app/sitemap.ts\nimport type { MetadataRoute } from 'next'\n\nexport default function sitemap(): MetadataRoute.Sitemap {\n return [{ url: 'https://acme.com', lastModified: new Date() }]\n}","options":["Dodać `app/sitemap.ts` (lub statyczny `sitemap.xml`), który zwraca listę URL","Zainstalować wtyczkę - Next.js nie ma wbudowanego wsparcia","Umieścić URL w `metadata.sitemap` głównego layoutu"],"answer":0,"explanation":"`sitemap` to specjalny plik metadanych. Next.js serwuje go pod `/sitemap.xml`; funkcja może pobierać URL z bazy danych lub CMS.","sources":[{"title":"Next.js: sitemap.xml","url":"https://nextjs.org/docs/app/api-reference/file-conventions/metadata/sitemap"}],"origin":{"topic":"nextjs","level":"junior","index":51}},{"question":"Który plik steruje odpowiedzią `/robots.txt`?","options":["`app/robots.ts` (lub statyczny `app/robots.txt`)","`public/robots.json`","Klucz `robots` w `package.json`"],"answer":0,"explanation":"`robots.ts` zwraca obiekt typu `MetadataRoute.Robots` z `rules` i opcjonalnym URL `sitemap`, więc reguły można zmieniać zależnie od środowiska.","sources":[{"title":"Next.js: robots.txt","url":"https://nextjs.org/docs/app/api-reference/file-conventions/metadata/robots"}],"origin":{"topic":"nextjs","level":"junior","index":52}},{"question":"Jak ustawić favicon strony w App Routerze?","options":["Umieścić `favicon.ico` (lub `icon.png`) w folderze `app/` - Next.js sam doda tagi `<link>`","Ręcznie dodawać `<link rel=\"icon\">` na każdej stronie","Ustawić `favicon` w `next.config.ts`"],"answer":0,"explanation":"Pliki ikon to konwencje plików metadanych. `icon` i `apple-icon` można też generować w kodzie przez `icon.tsx`.","sources":[{"title":"Next.js: favicon, icon, and apple-icon","url":"https://nextjs.org/docs/app/api-reference/file-conventions/metadata/app-icons"}],"origin":{"topic":"nextjs","level":"junior","index":53}},{"question":"Czym `permanentRedirect()` różni się od `redirect()`?","options":["`permanentRedirect` zwraca 308 (stałe), `redirect` - 307 (tymczasowe)","`permanentRedirect` działa tylko w Pages Routerze","`redirect` również na zawsze zmienia URL w wyszukiwarkach"],"answer":0,"explanation":"Stałego przekierowania używa się, gdy URL przeniósł się na dobre (np. zmieniony slug), aby wyszukiwarki przeniosły ranking na nowy adres.","sources":[{"title":"Next.js: permanentRedirect","url":"https://nextjs.org/docs/app/api-reference/functions/permanentRedirect"},{"title":"Next.js: redirect","url":"https://nextjs.org/docs/app/api-reference/functions/redirect"}],"origin":{"topic":"nextjs","level":"junior","index":54}},{"question":"Jak przekierować stare URL `/blog/:slug` na `/news/:slug` dla wszystkich żądań, bez kodu w stronach?","code":"// next.config.ts\nasync redirects() {\n return [{ source: '/blog/:slug', destination: '/news/:slug', permanent: true }]\n}","options":["Przez `redirects()` w `next.config.ts`","Tworząc pustą stronę pod każdym starym URL","Tagiem `<meta http-equiv=\"refresh\">` w głównym layoucie"],"answer":0,"explanation":"Przekierowania z konfiguracji działają przed dopasowaniem tras systemu plików. Dla wielu dynamicznych przekierowań (np. z bazy) używaj `proxy.ts`.","sources":[{"title":"Next.js: redirects (next.config)","url":"https://nextjs.org/docs/app/api-reference/config/next-config-js/redirects"},{"title":"Next.js: Redirecting","url":"https://nextjs.org/docs/app/guides/redirecting"}],"origin":{"topic":"nextjs","level":"junior","index":55}},{"question":"Co stało się z poleceniem `next lint` w Next.js 16?","options":["Zostało usunięte - uruchamiaj ESLint (lub Biome) bezpośrednio, np. `eslint .` w skrypcie pakietu","Stało się domyślnym sprawdzaniem typów","Teraz uruchamia się automatycznie przy każdym zapisie"],"answer":0,"explanation":"`next build` również nie uruchamia już lintera. `eslint-config-next` używa formatu flat config.","sources":[{"title":"Next.js: Upgrading to Version 16","url":"https://nextjs.org/docs/app/guides/upgrading/version-16"},{"title":"Next.js: ESLint","url":"https://nextjs.org/docs/app/api-reference/config/eslint"}],"origin":{"topic":"nextjs","level":"junior","index":56}},{"question":"Czy folder `app/` może znajdować się wewnątrz `src/`?","options":["Tak - `src/app` jest wspierany; pliki konfiguracyjne jak `next.config.ts` i `public/` zostają w katalogu głównym projektu","Nie - `app/` musi zawsze być w katalogu głównym","Tak, ale tylko z Pages Routerem"],"answer":0,"explanation":"Folder `src` oddziela kod aplikacji od konfiguracji. Jeśli `app/` istnieje też w katalogu głównym, wygrywa ten główny, a `src/app` jest ignorowany.","sources":[{"title":"Next.js: src folder","url":"https://nextjs.org/docs/app/api-reference/file-conventions/src-folder"}],"origin":{"topic":"nextjs","level":"junior","index":57}},{"question":"Kiedy warto użyć `router.push()` zamiast `<Link>`?","options":["Do nawigacji z kodu, np. po udanym zapisie formularza","Zawsze - `<Link>` jest przestarzały","Do linków zewnętrznych na inne strony"],"answer":0,"explanation":"`<Link>` renderuje prawdziwy `<a>`, wspiera prefetch i otwieranie w nowej karcie. `useRouter` jest potrzebny tylko wtedy, gdy nie da się wyrenderować klikalnego linku.","sources":[{"title":"Next.js: useRouter","url":"https://nextjs.org/docs/app/api-reference/functions/use-router"},{"title":"Next.js: Linking and Navigating","url":"https://nextjs.org/docs/app/getting-started/linking-and-navigating"}],"origin":{"topic":"nextjs","level":"junior","index":58}},{"question":"Co robi prop `replace` w `<Link>`?","code":"<Link href=\"/step-2\" replace>Next</Link>","options":["Zastępuje bieżący wpis historii zamiast dodawać nowy","Zmienia zawartość strony bez zmiany URL","Otwiera link w tej samej karcie zamiast nowej"],"answer":0,"explanation":"Z `replace` przycisk „Wstecz” pomija zastąpioną stronę - przydatne w kreatorach i filtrach-zakładkach, które nie powinny zaśmiecać historii.","sources":[{"title":"Next.js: <Link>","url":"https://nextjs.org/docs/app/api-reference/components/link"}],"origin":{"topic":"nextjs","level":"junior","index":59}},{"question":"Co robi `scroll={false}` w `<Link>`?","options":["Zachowuje bieżącą pozycję przewijania zamiast przewijać na początek nowej strony","Wyłącza przewijanie na stronie docelowej","Zabrania linkowi prefetchu"],"answer":0,"explanation":"Domyślnie Next.js przewija na początek nowego segmentu, jeśli nie jest widoczny. Wyłącz to np. dla zakładek zmieniających tylko część strony.","sources":[{"title":"Next.js: <Link>","url":"https://nextjs.org/docs/app/api-reference/components/link"}],"origin":{"topic":"nextjs","level":"junior","index":60}},{"question":"Do czego służy hook `useLinkStatus`?","code":"function Hint() {\n const { pending } = useLinkStatus()\n return <span className={pending ? 'spinner' : ''} />\n}","options":["Do pokazywania wbudowanego wskaźnika oczekiwania wewnątrz `<Link>`, dopóki nawigacja się nie zakończy","Do sprawdzania, czy URL zwraca 404","Do liczenia kliknięć w link"],"answer":0,"explanation":"Trzeba go wywołać w potomku `<Link>`. Dla natychmiastowych przejść lepsze są `loading.tsx` i prefetch; hook to łatka na wolne przejścia.","sources":[{"title":"Next.js: useLinkStatus","url":"https://nextjs.org/docs/app/api-reference/functions/use-link-status"}],"origin":{"topic":"nextjs","level":"junior","index":61}},{"question":"Jak obsłużyć `POST /api/posts` w Route Handlerze?","code":"// app/api/posts/route.ts\nexport async function POST(request: Request) {\n const body = await request.json()\n return Response.json(body, { status: 201 })\n}","options":["Wyeksportować z `route.ts` asynchroniczną funkcję o nazwie `POST`","Wyeksportować funkcję domyślną i sprawdzać `request.method`","Utworzyć plik o nazwie `post.ts`"],"answer":0,"explanation":"Każda metoda HTTP to nazwany eksport: `GET`, `POST`, `PUT`, `PATCH`, `DELETE`, `HEAD`, `OPTIONS`. Dla nieobsługiwanych metod przychodzi odpowiedź 405.","sources":[{"title":"Next.js: route.js","url":"https://nextjs.org/docs/app/api-reference/file-conventions/route"},{"title":"Next.js: Route Handlers","url":"https://nextjs.org/docs/app/getting-started/route-handlers"}],"origin":{"topic":"nextjs","level":"junior","index":62}},{"question":"Czy prop `alt` w `next/image` jest wymagany?","options":["Tak - opisuje obraz dla czytników ekranu; dla czysto dekoracyjnych obrazów użyj `alt=\"\"`","Nie, Next.js generuje go z nazwy pliku","Tylko dla zdalnych obrazów"],"answer":0,"explanation":"`alt` to wymagany prop `<Image>`. Pusty string mówi technologiom wspomagającym, by pominęły dekoracyjny obraz.","sources":[{"title":"Next.js: <Image>","url":"https://nextjs.org/docs/app/api-reference/components/image"}],"origin":{"topic":"nextjs","level":"junior","index":63}},{"question":"Który plik `.env` jest przeznaczony na lokalne sekrety i nie powinien trafić do repozytorium?","options":["`.env.local`","`.env`","`.env.production`"],"answer":0,"explanation":"`.env.local` nadpisuje wartości domyślne z `.env` i zwykle jest w `.gitignore`. `.env` i `.env.production` przechowują niesekretne wartości domyślne, które można commitować.","sources":[{"title":"Next.js: Environment Variables","url":"https://nextjs.org/docs/app/guides/environment-variables"}],"origin":{"topic":"nextjs","level":"junior","index":64}},{"question":"Dlaczego `export const metadata` w stronie z `'use client'` powoduje błąd?","options":["Eksport metadanych jest wspierany tylko w komponentach serwerowych","W plikach klienckich `metadata` musi nazywać się `meta`","Strony klienckie nie mogą mieć tytułu"],"answer":0,"explanation":"Zostaw stronę komponentem serwerowym, a interaktywne części przenieś do osobnego komponentu klienckiego - albo ustaw tytuł w nadrzędnym layoucie.","sources":[{"title":"Next.js: Metadata and OG images","url":"https://nextjs.org/docs/app/getting-started/metadata-and-og-images"},{"title":"Next.js: generateMetadata","url":"https://nextjs.org/docs/app/api-reference/functions/generate-metadata"}],"origin":{"topic":"nextjs","level":"junior","index":65}},{"question":"Które strony obejmuje `app/dashboard/layout.tsx`?","options":["Wszystkie strony pod `/dashboard`, w tym zagnieżdżone segmenty jak `/dashboard/settings`","Tylko samo `/dashboard`","Wszystkie strony aplikacji"],"answer":0,"explanation":"Layouty się zagnieżdżają: główny obejmuje layout dashboardu, a ten - każdą stronę poniżej. Zagnieżdżone segmenty mogą dodawać własne layouty.","sources":[{"title":"Next.js: Layouts and Pages","url":"https://nextjs.org/docs/app/getting-started/layouts-and-pages"},{"title":"Next.js: layout.js","url":"https://nextjs.org/docs/app/api-reference/file-conventions/layout"}],"origin":{"topic":"nextjs","level":"junior","index":66}},{"question":"Gdzie ustawia się `themeColor` w Next.js 16?","code":"export const viewport = { themeColor: '#0f172a' }","options":["W eksporcie `viewport` (lub `generateViewport`), a nie w `metadata`","W `next.config.ts`","Tylko w `manifest.json`"],"answer":0,"explanation":"Pola związane z viewport (`themeColor`, `colorScheme`, `width`) przeniesiono z `metadata` do osobnego eksportu `viewport`.","sources":[{"title":"Next.js: generateViewport","url":"https://nextjs.org/docs/app/api-reference/functions/generate-viewport"}],"origin":{"topic":"nextjs","level":"junior","index":67}},{"question":"Jak dodać manifest aplikacji webowej dla PWA?","options":["Dodać `app/manifest.ts` (lub statyczny `manifest.json`) do folderu `app`","Next.js nie wspiera manifestów","Dodać pole `manifest` do `package.json`"],"answer":0,"explanation":"`manifest.ts` zwraca `MetadataRoute.Manifest` z nazwą, ikonami i kolorami, a Next.js dodaje tag `<link rel=\"manifest\">`.","sources":[{"title":"Next.js: manifest.json","url":"https://nextjs.org/docs/app/api-reference/file-conventions/metadata/manifest"}],"origin":{"topic":"nextjs","level":"junior","index":68}},{"question":"Czy `'use client'` jest potrzebne na początku każdego pliku komponentu klienckiego?","options":["Nie - tylko na granicy; moduły importowane z pliku klienckiego same trafiają do bundla klienckiego","Tak, potrzebuje go każdy plik z JSX","Tak, inaczej komponent wyrenderuje się dwa razy"],"answer":0,"explanation":"`'use client'` oznacza punkt wejścia z serwera do klienta. Dodawanie go wszędzie nie szkodzi, ale utrudnia zobaczenie, gdzie przebiega granica.","sources":[{"title":"Next.js: 'use client'","url":"https://nextjs.org/docs/app/api-reference/directives/use-client"},{"title":"Next.js: Server and Client Components","url":"https://nextjs.org/docs/app/getting-started/server-and-client-components"}],"origin":{"topic":"nextjs","level":"junior","index":69}},{"question":"Jak dodać do strony dane strukturalne JSON-LD?","code":"<script\n type=\"application/ld+json\"\n dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd).replace(/</g, '\\\\u003c') }}\n/>","options":["Wyrenderować w komponencie strony `<script type=\"application/ld+json\">` z zserializowanymi danymi","Umieścić je w `metadata.jsonLd`","Wyszukiwarki czytają JSON-LD tylko z `public/`"],"answer":0,"explanation":"Escapowanie `<` chroni przed XSS przez wstawiony JSON. Typy z `schema-dts` pomagają utrzymać poprawność danych.","sources":[{"title":"Next.js: JSON-LD","url":"https://nextjs.org/docs/app/guides/json-ld"}],"origin":{"topic":"nextjs","level":"junior","index":70}},{"question":"Jak komponent serwerowy odczyta nagłówek żądania, np. `user-agent`?","code":"import { headers } from 'next/headers'\n\nconst ua = (await headers()).get('user-agent')","options":["Poczekać na `headers()` z `next/headers` i wywołać `.get()`","Odczytać `window.navigator.userAgent`","Nagłówki są dostępne tylko w Route Handlerach"],"answer":0,"explanation":"`headers()` w Next.js 16 jest asynchroniczne i zwraca nagłówki tylko do odczytu. Użycie go sprawia, że trasa renderuje się w czasie żądania.","sources":[{"title":"Next.js: headers","url":"https://nextjs.org/docs/app/api-reference/functions/headers"}],"origin":{"topic":"nextjs","level":"junior","index":71}},{"question":"Co robi `export const dynamicParams = false` na stronie z `generateStaticParams` (bez Cache Components)?","options":["Parametry nieobecne w `generateStaticParams` zwracają 404 zamiast renderować się na żądanie","Wyłącza wszystkie dynamiczne trasy aplikacji","Sprawia, że `params` są synchroniczne"],"answer":0,"explanation":"Domyślnie nieznane parametry renderują się na żądanie i są buforowane. Przy włączonych Cache Components `dynamicParams` jest niedostępne.","sources":[{"title":"Next.js: dynamicParams","url":"https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config/dynamicParams"},{"title":"Next.js: generateStaticParams","url":"https://nextjs.org/docs/app/api-reference/functions/generate-static-params"}],"origin":{"topic":"nextjs","level":"junior","index":72}},{"question":"Jak serwować całą aplikację pod ścieżką `/docs` (np. `acme.com/docs`)?","options":["Ustawić `basePath: '/docs'` w `next.config.ts`","Po prostu przenieść wszystkie strony do `app/docs/`","Użyć wyłącznie `assetPrefix`"],"answer":0,"explanation":"`basePath` jest automatycznie stosowany do `<Link>` i `router.push`. Ustawia się go przy budowaniu i nie zmienia bez przebudowy.","sources":[{"title":"Next.js: basePath","url":"https://nextjs.org/docs/app/api-reference/config/next-config-js/basePath"}],"origin":{"topic":"nextjs","level":"junior","index":73}},{"question":"Która strategia `next/script` ładuje skrypt w czasie bezczynności przeglądarki, np. widżet czatu?","options":["`lazyOnload`","`beforeInteractive`","`afterInteractive`"],"answer":0,"explanation":"`afterInteractive` (domyślna) ładuje się zaraz po rozpoczęciu hydratacji; `beforeInteractive` - dla krytycznych skryptów przed jakimkolwiek kodem Next.js. Niskopriorytetowym widżetom pasuje `lazyOnload`.","sources":[{"title":"Next.js: <Script>","url":"https://nextjs.org/docs/app/api-reference/components/script"}],"origin":{"topic":"nextjs","level":"junior","index":74}},{"question":"Jaki jest główny cel testów automatycznych?","options":["Dać pewność, że kod działa i będzie działał po zmianach","Udowodnić, że w kodzie nie ma żadnych błędów","Zastąpić code review"],"answer":0,"explanation":"Testy mogą pokazać obecność błędów, ale nie ich brak. Ich wartość to szybka informacja zwrotna i bezpieczny refaktoring: jeśli zachowanie się zepsuje, test padnie, zanim zauważą to użytkownicy.","sources":[{"title":"Kent C. Dodds: Write tests. Not too many. Mostly integration.","url":"https://kentcdodds.com/blog/write-tests"},{"title":"Martin Fowler: The Practical Test Pyramid","url":"https://martinfowler.com/articles/practical-test-pyramid.html"}],"origin":{"topic":"testing","level":"junior","index":0}},{"question":"Co sprawdza test jednostkowy (unit)?","options":["Mały, odizolowany fragment kodu - funkcję, hook lub komponent - sam w sobie","Całą aplikację w prawdziwej przeglądarce","Jak szybko serwer odpowiada pod obciążeniem"],"answer":0,"explanation":"Testy jednostkowe są szybkie i dokładnie wskazują miejsce awarii. Ich ograniczenie: nie pokazują, czy części działają razem.","sources":[{"title":"Martin Fowler: The Practical Test Pyramid","url":"https://martinfowler.com/articles/practical-test-pyramid.html"}],"origin":{"topic":"testing","level":"junior","index":1}},{"question":"Co sprawdza test integracyjny?","options":["Że kilka modułów poprawnie działa razem - np. formularz z walidacją i wywołaniem API","Tylko jedną czystą funkcję z zamockowanymi argumentami","Tylko wygląd strony"],"answer":0,"explanation":"We frontendzie test integracyjny zwykle renderuje całą funkcjonalność (kilka komponentów, stan, router) i mockuje tylko granicę sieciową.","sources":[{"title":"Kent C. Dodds: The Testing Trophy and Testing Classifications","url":"https://kentcdodds.com/blog/the-testing-trophy-and-testing-classifications"},{"title":"Martin Fowler: The Practical Test Pyramid","url":"https://martinfowler.com/articles/practical-test-pyramid.html"}],"origin":{"topic":"testing","level":"junior","index":2}},{"question":"Czym jest test end-to-end (E2E)?","options":["Testem, który steruje prawdziwą aplikacją w przeglądarce jak użytkownik - przez UI, API i bazę danych","Testem pierwszej i ostatniej funkcji w pliku","Testem jednostkowym uruchamianym na końcu pipeline'u CI"],"answer":0,"explanation":"Testy E2E dają najwięcej pewności, ale są wolniejsze i bardziej kruche. Typowe narzędzia to Playwright i Cypress.","sources":[{"title":"Martin Fowler: The Practical Test Pyramid","url":"https://martinfowler.com/articles/practical-test-pyramid.html"},{"title":"Playwright","url":"https://playwright.dev/docs/intro"}],"origin":{"topic":"testing","level":"junior","index":3}},{"question":"Co zaleca klasyczna piramida testów?","options":["Wiele szybkich testów jednostkowych, mniej integracyjnych i tylko kilka E2E","Głównie testy E2E, bo są najbliżej użytkownika","Tyle samo testów na każdym poziomie"],"answer":0,"explanation":"Im wyższy poziom, tym testy są wolniejsze, droższe i mniej stabilne. Kształt piramidy utrzymuje szybki zestaw, a krytyczne ścieżki i tak są sprawdzane od początku do końca.","sources":[{"title":"Martin Fowler: The Practical Test Pyramid","url":"https://martinfowler.com/articles/practical-test-pyramid.html"}],"origin":{"topic":"testing","level":"junior","index":4}},{"question":"Na co kładzie największy nacisk „testing trophy” Kenta C. Doddsa?","options":["Na testy integracyjne, oparte na fundamencie analizy statycznej (TypeScript, ESLint)","Na testy snapshotowe","Na testy manualne"],"answer":0,"explanation":"„Write tests. Not too many. Mostly integration.” W kodzie UI testy integracyjne dają najlepszy stosunek pewności do kosztu.","sources":[{"title":"Kent C. Dodds: The Testing Trophy and Testing Classifications","url":"https://kentcdodds.com/blog/the-testing-trophy-and-testing-classifications"},{"title":"Kent C. Dodds: Write tests. Not too many. Mostly integration.","url":"https://kentcdodds.com/blog/write-tests"}],"origin":{"topic":"testing","level":"junior","index":5}},{"question":"Która warstwa testing trophy wyłapuje literówki i złe typy, zanim testy w ogóle ruszą?","options":["Analiza statyczna: TypeScript i ESLint","Testy E2E","Testy snapshotowe"],"answer":0,"explanation":"Narzędzia statyczne dają natychmiastową informację w edytorze i prawie nic nie kosztują.","sources":[{"title":"Kent C. Dodds: The Testing Trophy and Testing Classifications","url":"https://kentcdodds.com/blog/the-testing-trophy-and-testing-classifications"}],"origin":{"topic":"testing","level":"junior","index":6}},{"question":"Czym jest regresja?","options":["Błędem w funkcjonalności, która wcześniej działała","Zbyt wolnym testem","Nową funkcją dodaną bez testów"],"answer":0,"explanation":"Dobry nawyk: naprawiając błąd, najpierw napisz test, który go odtwarza. Test pada, poprawka go naprawia i błąd nie wróci po cichu.","sources":[{"title":"Martin Fowler: The Practical Test Pyramid","url":"https://martinfowler.com/articles/practical-test-pyramid.html"}],"origin":{"topic":"testing","level":"junior","index":7}},{"question":"Co opisuje wzorzec Arrange–Act–Assert (AAA)?","options":["Strukturę testu: przygotuj dane, wykonaj akcję, sprawdź wynik","Kolejność uruchamiania plików testowych","Trzy rodzaje asercji w Jest"],"answer":0,"explanation":"W BDD ta sama idea nazywa się Given–When–Then. Czytelna struktura sprawia, że test jest zrozumiały i skupia się na jednym zachowaniu.","sources":[{"title":"Martin Fowler: Given When Then","url":"https://martinfowler.com/bliki/GivenWhenThen.html"}],"origin":{"topic":"testing","level":"junior","index":8}},{"question":"Co powinien sprawdzać test - zachowanie czy szczegóły implementacji?","options":["Zachowanie widoczne dla użytkownika lub kodu wywołującego, żeby refaktoring nie psuł testów","Stan wewnętrzny i metody prywatne, żeby być jak najdokładniejszym","Dokładną liczbę ponownych renderów"],"answer":0,"explanation":"Testy związane ze szczegółami implementacji padają przy bezpiecznym refaktoringu (fałszywe alarmy) i mogą przechodzić, gdy widoczny wynik jest zepsuty (fałszywe zielone).","sources":[{"title":"Kent C. Dodds: Testing Implementation Details","url":"https://kentcdodds.com/blog/testing-implementation-details"},{"title":"Testing Library: Guiding Principles","url":"https://testing-library.com/docs/guiding-principles"}],"origin":{"topic":"testing","level":"junior","index":9}},{"question":"Co mierzy pokrycie kodu testami (coverage)?","options":["Jaka część kodu (linii, gałęzi, funkcji) wykonała się podczas testów","Ile błędów znalazły testy","Ile wymagań jest pokrytych testami"],"answer":0,"explanation":"Pokrycie pokazuje nieprzetestowany kod, ale nie jakość testów: test bez żadnej asercji też zwiększa pokrycie.","sources":[{"title":"Martin Fowler: Test Coverage","url":"https://martinfowler.com/bliki/TestCoverage.html"},{"title":"Vitest: Coverage","url":"https://vitest.dev/guide/coverage"}],"origin":{"topic":"testing","level":"junior","index":10}},{"question":"Czy 100% pokrycia to dobry cel sam w sobie?","options":["Nie: to drogie i nie gwarantuje sensownych sprawdzeń; najpierw pokryj ważne zachowanie","Tak: poniżej 100% kodu nie można wydać","Tak: 100% pokrycia oznacza brak błędów"],"answer":0,"explanation":"Martin Fowler: pokrycie jest przydatne do znajdowania nieprzetestowanego kodu, ale jako cel jest słabe. Wysokie pokrycie ze słabymi asercjami daje fałszywą pewność.","sources":[{"title":"Martin Fowler: Test Coverage","url":"https://martinfowler.com/bliki/TestCoverage.html"}],"origin":{"topic":"testing","level":"junior","index":11}},{"question":"Czym są Jest i Vitest?","options":["Test runnerami dla JavaScriptu: znajdują pliki testowe, uruchamiają je i raportują wyniki; asercje i mocki są wbudowane","Bibliotekami do renderowania komponentów React w przeglądarce","Narzędziami do testów E2E w prawdziwej przeglądarce"],"answer":0,"explanation":"Vitest jest zbudowany na Vite i korzysta z jego konfiguracji i transformacji; jego API jest w dużej mierze zgodne z Jest (`describe`, `it`, `expect`, mocki).","sources":[{"title":"Jest: Getting Started","url":"https://jestjs.io/docs/getting-started"},{"title":"Vitest: Getting Started","url":"https://vitest.dev/guide/"},{"title":"Vitest: Comparisons with Other Test Runners","url":"https://vitest.dev/guide/comparisons"}],"origin":{"topic":"testing","level":"junior","index":12}},{"question":"Które pliki Jest domyślnie traktuje jako testy?","options":["Pliki kończące się na `.test.js` / `.spec.js` (a także ts/jsx/tsx) oraz pliki w folderach `__tests__`","Tylko pliki w folderze `tests/` w katalogu głównym projektu","Każdy plik `.js` w projekcie"],"answer":0,"explanation":"Domyślną wartość ustawia `testMatch`. Vitest ma podobny wzorzec `include`: `**/*.{test,spec}.?(c|m)[jt]s?(x)`.","sources":[{"title":"Jest: Configuring Jest","url":"https://jestjs.io/docs/configuration"},{"title":"Vitest: Getting Started","url":"https://vitest.dev/guide/"}],"origin":{"topic":"testing","level":"junior","index":13}},{"question":"Co robią `describe` i `it` (`test`)?","options":["`describe` grupuje powiązane testy, `it`/`test` deklaruje jeden przypadek testowy","`describe` uruchamia testy równolegle, `it` - sekwencyjnie","`describe` jest dla testów jednostkowych, `it` - dla integracyjnych"],"answer":0,"explanation":"`it` i `test` to aliasy. Grupy mogą mieć własne hooki `beforeEach`/`afterEach`.","sources":[{"title":"Jest: Getting Started","url":"https://jestjs.io/docs/getting-started"},{"title":"Jest: Setup and Teardown","url":"https://jestjs.io/docs/setup-teardown"}],"origin":{"topic":"testing","level":"junior","index":14}},{"question":"Czym różnią się `toBe` i `toEqual`?","code":"expect({ a: 1 }).toBe({ a: 1 }); // ?\nexpect({ a: 1 }).toEqual({ a: 1 }); // ?","options":["`toBe` porównuje przez `Object.is` (ta sama referencja), `toEqual` rekurencyjnie porównuje zawartość - pierwsza asercja pada, druga przechodzi","Obie przechodzą: to synonimy","Obie padają: obiektów nie można porównywać"],"answer":0,"explanation":"Używaj `toBe` dla typów prostych i sprawdzania tożsamości, `toEqual` dla obiektów i tablic.","sources":[{"title":"Jest: Expect","url":"https://jestjs.io/docs/expect"}],"origin":{"topic":"testing","level":"junior","index":15}},{"question":"Czym `toStrictEqual` różni się od `toEqual`?","options":["Uwzględnia właściwości o wartości `undefined`, tablice z dziurami i typy obiektów (instancja klasy kontra zwykły obiekt)","Porównuje przez referencję","Ignoruje kolejność elementów tablicy"],"answer":0,"explanation":"`expect({ a: undefined, b: 2 }).toEqual({ b: 2 })` przechodzi, a `toStrictEqual` pada.","sources":[{"title":"Jest: Expect","url":"https://jestjs.io/docs/expect"}],"origin":{"topic":"testing","level":"junior","index":16}},{"question":"Dlaczego ta asercja pada i jak ją poprawić?","code":"expect(0.1 + 0.2).toBe(0.3);","options":["Arytmetyka zmiennoprzecinkowa daje 0.30000000000000004; użyj `toBeCloseTo(0.3)`","`toBe` nie działa z liczbami; użyj `toEqual`","Ona nie pada"],"answer":0,"explanation":"`toBeCloseTo` porównuje z zadaną precyzją (domyślnie 2 miejsca po przecinku).","sources":[{"title":"Jest: Expect","url":"https://jestjs.io/docs/expect"}],"origin":{"topic":"testing","level":"junior","index":17}},{"question":"Jak sprawdzić, że funkcja rzuca błąd?","code":"expect(() => parse(\"bad\")).toThrow(\"Invalid input\");","options":["Przekazać funkcję wywołującą kod, żeby `expect` mógł przechwycić błąd","Wywołać `parse(\"bad\")` bezpośrednio w `expect`","Użyć `toBeFalsy()` na wyniku"],"answer":0,"explanation":"`expect(parse(\"bad\"))` rzuci błąd, zanim `expect` przejmie kontrolę, i test padnie z tym błędem zamiast go sprawdzić.","sources":[{"title":"Jest: Expect","url":"https://jestjs.io/docs/expect"}],"origin":{"topic":"testing","level":"junior","index":18}},{"question":"Co robi `.not` w `expect(value).not.toBeNull()`?","options":["Odwraca matcher","Pomija asercję","Oznacza test jako oczekiwanie padający"],"answer":0,"explanation":"Każdy matcher można zanegować: `.not.toContain`, `.not.toHaveBeenCalled` itd.","sources":[{"title":"Jest: Expect","url":"https://jestjs.io/docs/expect"}],"origin":{"topic":"testing","level":"junior","index":19}},{"question":"Który matcher sprawdza, że tablica zawiera element?","options":["`toContain`","`toHaveProperty`","`toMatch`"],"answer":0,"explanation":"`toContain` porównuje przez `===`; aby znaleźć obiekt po zawartości, jest `toContainEqual`. `toMatch` jest dla napisów i wyrażeń regularnych, `toHaveProperty` - dla kluczy obiektu.","sources":[{"title":"Jest: Expect","url":"https://jestjs.io/docs/expect"}],"origin":{"topic":"testing","level":"junior","index":20}},{"question":"Do czego służy `beforeEach`?","options":["Do uruchamiania przygotowania przed każdym testem w bieżącym zakresie, żeby każdy test zaczynał od czystego stanu","Do uruchomienia kodu raz przed wszystkimi testami w pliku","Do ustalenia kolejności uruchamiania testów"],"answer":0,"explanation":"Do jednorazowego przygotowania służy `beforeAll`, do sprzątania - `afterEach` i `afterAll`.","sources":[{"title":"Jest: Setup and Teardown","url":"https://jestjs.io/docs/setup-teardown"}],"origin":{"topic":"testing","level":"junior","index":21}},{"question":"Co robią `it.only` i `it.skip`?","options":["`only` uruchamia w pliku tylko oznaczone testy, `skip` wyklucza test","`only` uruchamia test raz, `skip` - bez asercji","Oba są używane tylko w CI"],"answer":0,"explanation":"Przydatne przy debugowaniu, ale nie commituj `.only` - po cichu wyłącza pozostałe testy. Vitest w CI przerywa przebieg zawierający `.only` (`allowOnly`), a lintery mają reguły przeciwko niemu.","sources":[{"title":"Vitest: Test Filtering","url":"https://vitest.dev/guide/filtering"},{"title":"Jest: CLI Options","url":"https://jestjs.io/docs/cli"}],"origin":{"topic":"testing","level":"junior","index":22}},{"question":"Jak przetestować asynchroniczną funkcję zwracającą promise?","code":"test(\"loads user\", async () => {\n const user = await fetchUser(1);\n expect(user.name).toBe(\"Ann\");\n});","options":["Zrobić test `async` i poczekać na wynik przez `await` (lub zwrócić promise)","Nic specjalnego nie trzeba: Jest czeka na wszystkie promise'y w pliku","Opakować wywołanie w `setTimeout`"],"answer":0,"explanation":"Jeśli promise nie zostanie ani zaczekany, ani zwrócony, test skończy się przed asercją i fałszywie przejdzie.","sources":[{"title":"Jest: Testing Asynchronous Code","url":"https://jestjs.io/docs/asynchronous"}],"origin":{"topic":"testing","level":"junior","index":23}},{"question":"Jak sprawdzić, że promise zostaje odrzucony?","options":["`await expect(fetchUser(-1)).rejects.toThrow(\"Not found\")`","`expect(fetchUser(-1)).toThrow(\"Not found\")`","`expect(await fetchUser(-1)).toBeUndefined()`"],"answer":0,"explanation":"`.resolves`/`.rejects` rozpakowują promise. Nie zapomnij o `await` (lub `return`), inaczej nikt nie poczeka na asercję.","sources":[{"title":"Jest: Testing Asynchronous Code","url":"https://jestjs.io/docs/asynchronous"}],"origin":{"topic":"testing","level":"junior","index":24}},{"question":"Co robi tryb watch (`vitest` / `jest --watch`)?","options":["Przy każdym zapisie ponownie uruchamia testy powiązane ze zmienionymi plikami","Nagrywa wideo z testów","Obserwuje błędy na produkcji"],"answer":0,"explanation":"W terminalu Vitest domyślnie startuje w trybie watch i dzięki grafowi modułów Vite uruchamia ponownie tylko dotknięte testy.","sources":[{"title":"Vitest: Features","url":"https://vitest.dev/guide/features"},{"title":"Jest: CLI Options","url":"https://jestjs.io/docs/cli"}],"origin":{"topic":"testing","level":"junior","index":25}},{"question":"Dlaczego warto, żeby każdy test był niezależny?","options":["Testy można uruchamiać w dowolnej kolejności lub równolegle, a porażka wskazuje jedną przyczynę","Wtedy testy wykonują się w kolejności alfabetycznej","Wtedy nie potrzeba `expect`"],"answer":0,"explanation":"Współdzielony, zmienny stan między testami powoduje błędy zależne od kolejności, trudne do debugowania. Resetuj stan w `beforeEach`.","sources":[{"title":"Jest: Setup and Teardown","url":"https://jestjs.io/docs/setup-teardown"},{"title":"Martin Fowler: Eradicating Non-Determinism in Tests","url":"https://martinfowler.com/articles/nonDeterminism.html"}],"origin":{"topic":"testing","level":"junior","index":26}},{"question":"Jaka nazwa testu jest dobra?","options":["Opisująca oczekiwane zachowanie: „pokazuje błąd, gdy email jest niepoprawny”","`test1`, `test2` - krótkie nazwy są szybsze","Nazwa testowanej funkcji"],"answer":0,"explanation":"Gdy test pada w CI, jego nazwę czyta się jako pierwszą. Powinna mówić, co zepsuło się dla użytkownika.","sources":[{"title":"Kent C. Dodds: Avoid Nesting when you're Testing","url":"https://kentcdodds.com/blog/avoid-nesting-when-youre-testing"}],"origin":{"topic":"testing","level":"junior","index":27}},{"question":"W jakim środowisku zwykle uruchamia się testy komponentów w Jest/Vitest?","options":["jsdom lub happy-dom - emulacja DOM w Node.js","W prawdziwym oknie Chrome otwieranym dla każdego testu","W czystym Node.js bez żadnego DOM"],"answer":0,"explanation":"W Vitest ustawia się to przez `environment: \"jsdom\"`, w Jest - `testEnvironment: \"jsdom\"`. Emulacja nie ma prawdziwego układu ani renderowania.","sources":[{"title":"Vitest: Test Environment","url":"https://vitest.dev/guide/environment"},{"title":"Jest: Configuring Jest","url":"https://jestjs.io/docs/configuration"}],"origin":{"topic":"testing","level":"junior","index":28}},{"question":"Czym jest mock w testowaniu?","options":["Fałszywym zamiennikiem zależności, który pozwala sterować jej zachowaniem i sprawdzać, jak była wywoływana","Testem, który zawsze przechodzi","Kopią produkcyjnej bazy danych"],"answer":0,"explanation":"Ściśle mówiąc, „dublerzy testowi” to dummy, stub, spy, mock i fake; potocznie wszystkie nazywa się mockami.","sources":[{"title":"Martin Fowler: Test Double","url":"https://martinfowler.com/bliki/TestDouble.html"},{"title":"Jest: Mock Functions","url":"https://jestjs.io/docs/mock-functions"}],"origin":{"topic":"testing","level":"junior","index":29}},{"question":"Co tworzy `jest.fn()` / `vi.fn()`?","options":["Funkcję-mock, która zapamiętuje wywołania i argumenty i może zwracać ustawione wartości","Prawdziwą kopię testowanej funkcji","Funkcję, która wywala test przy wywołaniu"],"answer":0,"explanation":"Typowe użycie: przekazać ją jako prop-callback i sprawdzić, że została wywołana.","sources":[{"title":"Jest: Mock Functions","url":"https://jestjs.io/docs/mock-functions"},{"title":"Vitest: vi API","url":"https://vitest.dev/api/vi"}],"origin":{"topic":"testing","level":"junior","index":30}},{"question":"Jak sprawdzić, że callback został wywołany z konkretnymi argumentami?","code":"const onSave = vi.fn();\nrender(<Form onSave={onSave} />);\n// ...użytkownik wypełnia i wysyła formularz","options":["`expect(onSave).toHaveBeenCalledWith({ name: \"Ann\" })`","`expect(onSave()).toBe({ name: \"Ann\" })`","`expect(onSave.called).toBe(true)`"],"answer":0,"explanation":"Są też `toHaveBeenCalledTimes(n)` i `toHaveBeenLastCalledWith(...)`.","sources":[{"title":"Jest: Expect","url":"https://jestjs.io/docs/expect"},{"title":"Jest: Mock Functions","url":"https://jestjs.io/docs/mock-functions"}],"origin":{"topic":"testing","level":"junior","index":31}},{"question":"Jak sprawić, żeby mock zwrócił wartość?","options":["`mock.mockReturnValue(42)` (lub `mockResolvedValue` dla promise'a)","`mock.return = 42`","`mock(42)`"],"answer":0,"explanation":"`mockReturnValueOnce` ustawia wartość tylko dla jednego wywołania, a `mockImplementation(fn)` podmienia całe ciało.","sources":[{"title":"Jest: Mock Functions","url":"https://jestjs.io/docs/mock-functions"}],"origin":{"topic":"testing","level":"junior","index":32}},{"question":"Co robi `jest.spyOn(obj, \"method\")` / `vi.spyOn`?","options":["Opakowuje istniejącą metodę, żeby rejestrować wywołania; domyślnie nadal wywołuje oryginał","Usuwa metodę z obiektu","Kopiuje obiekt na potrzeby testu"],"answer":0,"explanation":"Dodaj `.mockImplementation(...)`, aby podmienić zachowanie, i przywróć oryginał przez `mockRestore()` po teście.","sources":[{"title":"Jest: The Jest Object","url":"https://jestjs.io/docs/jest-object"},{"title":"Vitest: vi API","url":"https://vitest.dev/api/vi"}],"origin":{"topic":"testing","level":"junior","index":33}},{"question":"Czym jest stub (zaślepka)?","options":["Dublerem, który zwraca przygotowane odpowiedzi, żeby testowany kod mógł się wykonać","Dublerem, który wywala test, jeśli zostanie wywołany","Prawdziwym obiektem podłączonym do testowej bazy"],"answer":0,"explanation":"Stuby dostarczają dane wejściowe, mocki służą do weryfikacji interakcji (wywołań). Fake to uproszczona działająca implementacja, np. repozytorium w pamięci.","sources":[{"title":"Martin Fowler: Test Double","url":"https://martinfowler.com/bliki/TestDouble.html"},{"title":"Martin Fowler: Mocks Aren't Stubs","url":"https://martinfowler.com/articles/mocksArentStubs.html"}],"origin":{"topic":"testing","level":"junior","index":34}},{"question":"Po co mockować żądania sieciowe w testach jednostkowych i integracyjnych?","options":["Żeby testy były szybkie, deterministyczne i niezależne od prawdziwego serwera","Bo w Node.js nie ma `fetch`","Żeby ukryć błędy w API"],"answer":0,"explanation":"Prawdziwy backend może być wolny, niedostępny lub zwracać inne dane. Prawdziwą integrację z API sprawdza się osobno - testami E2E lub kontraktowymi.","sources":[{"title":"MSW: Philosophy","url":"https://mswjs.io/docs/philosophy"},{"title":"Martin Fowler: The Practical Test Pyramid","url":"https://martinfowler.com/articles/practical-test-pyramid.html"}],"origin":{"topic":"testing","level":"junior","index":35}},{"question":"Czym jest MSW (Mock Service Worker)?","options":["Biblioteką, która przechwytuje żądania na poziomie sieci i odpowiada mockami - w przeglądarce i w Node.js","Service workerem, który cache'uje stronę do trybu offline","Pluginem Jest do testów snapshotowych"],"answer":0,"explanation":"Kod aplikacji nadal wywołuje prawdziwy `fetch`, a MSW zwraca odpowiedzi z handlerów. Te same handlery działają w testach, Storybooku i lokalnym developmencie.","sources":[{"title":"Mock Service Worker: Docs","url":"https://mswjs.io/docs/"},{"title":"MSW: Philosophy","url":"https://mswjs.io/docs/philosophy"}],"origin":{"topic":"testing","level":"junior","index":36}},{"question":"Co robi `mockClear()` (lub `vi.clearAllMocks()`)?","options":["Czyści zapisane wywołania i wyniki, ale zostawia ustawioną implementację","Usuwa mock i przywraca oryginalną funkcję","Usuwa plik testowy"],"answer":0,"explanation":"Bez czyszczenia wywołania z poprzedniego testu przechodzą do następnego i `toHaveBeenCalledTimes` daje złe liczby.","sources":[{"title":"Jest: Mock Functions","url":"https://jestjs.io/docs/mock-functions"},{"title":"Vitest: vi API","url":"https://vitest.dev/api/vi"}],"origin":{"topic":"testing","level":"junior","index":37}},{"question":"Jakie jest ryzyko mockowania zbyt wielu rzeczy?","options":["Testy przechodzą, choć prawdziwe części już do siebie nie pasują","Testy stają się zbyt wolne","Pokrycie spada do zera"],"answer":0,"explanation":"Każdy mock to założenie o tym, jak zachowuje się prawdziwa zależność. Mockuj granice (sieć, czas, losowość), a nie własne moduły.","sources":[{"title":"Kent C. Dodds: Stop mocking fetch","url":"https://kentcdodds.com/blog/stop-mocking-fetch"},{"title":"Martin Fowler: Mocks Aren't Stubs","url":"https://martinfowler.com/articles/mocksArentStubs.html"}],"origin":{"topic":"testing","level":"junior","index":38}},{"question":"Jak uczynić deterministycznym test używający `Math.random()`?","options":["Zamockować `Math.random` (np. `vi.spyOn(Math, \"random\").mockReturnValue(0.5)`) albo wstrzykiwać źródło losowości","Uruchomić test kilka razy i wziąć wynik większości","Oznaczyć go `it.skip`"],"answer":0,"explanation":"Wartości losowe, bieżący czas i sieć to typowe źródła niedeterminizmu. W testach się je ustala.","sources":[{"title":"Vitest: vi API","url":"https://vitest.dev/api/vi"},{"title":"Martin Fowler: Eradicating Non-Determinism in Tests","url":"https://martinfowler.com/articles/nonDeterminism.html"}],"origin":{"topic":"testing","level":"junior","index":39}},{"question":"Jaka jest główna zasada Testing Library?","options":["„Im bardziej testy przypominają sposób używania oprogramowania, tym więcej pewności mogą dać”","„Testuj każdą funkcję osobno”","„Test komponentu powinien sprawdzać jego stan i propsy”"],"answer":0,"explanation":"Dlatego testy szukają elementów tak jak użytkownik - po roli, etykiecie i tekście - i działają przez zdarzenia.","sources":[{"title":"Testing Library: Guiding Principles","url":"https://testing-library.com/docs/guiding-principles"}],"origin":{"topic":"testing","level":"junior","index":40}},{"question":"Co robi `render` z React Testing Library?","options":["Renderuje komponent do kontenera dołączonego do `document.body` w środowisku testowym","Robi zrzut ekranu komponentu","Renderuje komponent do napisu HTML na serwerze"],"answer":0,"explanation":"Po każdym teście RTL automatycznie odmontowuje komponent (`cleanup`), jeśli runner udostępnia globalne `afterEach`.","sources":[{"title":"React Testing Library: API","url":"https://testing-library.com/docs/react-testing-library/api"}],"origin":{"topic":"testing","level":"junior","index":41}},{"question":"Dlaczego używać `screen` zamiast zapytań zwracanych przez `render`?","options":["`screen` jest powiązany z `document.body`, więc nie trzeba destrukturyzować zapytań z każdego `render`","`screen` jest szybszy","Zapytania z `render` nie obsługują `getByRole`"],"answer":0,"explanation":"Testing Library zaleca `screen`: testy są krótsze, a nowe zapytania można dodawać bez zmiany linii z `render`.","sources":[{"title":"Kent C. Dodds: Common mistakes with React Testing Library","url":"https://kentcdodds.com/blog/common-mistakes-with-react-testing-library"},{"title":"Testing Library: About Queries (priority)","url":"https://testing-library.com/docs/queries/about"}],"origin":{"topic":"testing","level":"junior","index":42}},{"question":"Które zapytanie Testing Library zaleca w pierwszej kolejności?","options":["`getByRole`","`getByTestId`","`container.querySelector`"],"answer":0,"explanation":"Priorytet: zapytania dostępne dla wszystkich (`ByRole`, `ByLabelText`, `ByPlaceholderText`, `ByText`, `ByDisplayValue`), potem semantyczne (`ByAltText`, `ByTitle`), a dopiero na końcu `ByTestId`.","sources":[{"title":"Testing Library: About Queries (priority)","url":"https://testing-library.com/docs/queries/about"},{"title":"Testing Library: ByRole","url":"https://testing-library.com/docs/queries/byrole"}],"origin":{"topic":"testing","level":"junior","index":43}},{"question":"Jak znaleźć przycisk „Save”?","options":["`screen.getByRole(\"button\", { name: \"Save\" })`","`screen.getByTestId(\"save\")`","`document.querySelector(\".btn-save\")`"],"answer":0,"explanation":"`name` to nazwa dostępna: tekst przycisku, `aria-label` lub `aria-labelledby`. Takie zapytanie przy okazji sprawdza, że przycisk jest dostępny.","sources":[{"title":"Testing Library: ByRole","url":"https://testing-library.com/docs/queries/byrole"}],"origin":{"topic":"testing","level":"junior","index":44}},{"question":"Czym różnią się `getBy`, `queryBy` i `findBy`?","options":["`getBy` rzuca błąd, gdy nic nie znajdzie, `queryBy` zwraca `null`, `findBy` zwraca promise i czeka na pojawienie się elementu","Tylko szybkością","`getBy` znajduje jeden element, `queryBy` - wszystkie, `findBy` - pierwszy"],"answer":0,"explanation":"Każde ma też wersję `All` (`getAllBy` itd.), która zwraca tablicę.","sources":[{"title":"Testing Library: About Queries (priority)","url":"https://testing-library.com/docs/queries/about"}],"origin":{"topic":"testing","level":"junior","index":45}},{"question":"Jak sprawdzić, że elementu NIE ma na stronie?","options":["`expect(screen.queryByText(\"Error\")).not.toBeInTheDocument()`","`expect(screen.getByText(\"Error\")).toBeNull()`","`expect(screen.findByText(\"Error\")).toBeFalsy()`"],"answer":0,"explanation":"`getBy` rzuci błąd przed asercją, a `findBy` zwraca promise, który zawsze jest truthy.","sources":[{"title":"Testing Library: About Queries (priority)","url":"https://testing-library.com/docs/queries/about"},{"title":"Kent C. Dodds: Common mistakes with React Testing Library","url":"https://kentcdodds.com/blog/common-mistakes-with-react-testing-library"}],"origin":{"topic":"testing","level":"junior","index":46}},{"question":"Jakim zapytaniem szukać elementu, który pojawia się po załadowaniu danych?","options":["`await screen.findByText(\"Ann\")`","`screen.getByText(\"Ann\")` zaraz po `render`","`screen.queryByText(\"Ann\")` w pętli"],"answer":0,"explanation":"`findBy` ponawia zapytanie, aż element się pojawi albo minie limit czasu (domyślnie 1000 ms).","sources":[{"title":"Testing Library: Async Methods","url":"https://testing-library.com/docs/dom-testing-library/api-async"},{"title":"Testing Library: About Queries (priority)","url":"https://testing-library.com/docs/queries/about"}],"origin":{"topic":"testing","level":"junior","index":47}},{"question":"Skąd pochodzą matchery `toBeInTheDocument`, `toBeVisible` i `toHaveValue`?","options":["Z `@testing-library/jest-dom`, podłączanego w pliku konfiguracji testów","Są wbudowane w Jest","Są częścią Reacta"],"answer":0,"explanation":"Zaimportuj `@testing-library/jest-dom` (lub `@testing-library/jest-dom/vitest`) w pliku setup. Dają czytelniejsze komunikaty błędów niż ręczne sprawdzanie DOM.","sources":[{"title":"jest-dom: custom matchers","url":"https://github.com/testing-library/jest-dom"}],"origin":{"topic":"testing","level":"junior","index":48}},{"question":"Czym lepiej symulować działania użytkownika: `fireEvent` czy `user-event`?","options":["`user-event`: odtwarza cały łańcuch zdarzeń jak prawdziwy użytkownik (focus, keydown, input, click…)","`fireEvent`: jest bliższy prawdziwemu zachowaniu","Są identyczne"],"answer":0,"explanation":"`fireEvent.click` wysyła jedno zdarzenie. `userEvent.click` dodatkowo przesuwa wskaźnik, ustawia focus i respektuje `disabled` oraz `pointer-events`.","sources":[{"title":"Testing Library: user-event","url":"https://testing-library.com/docs/user-event/intro"},{"title":"Testing Library: Firing Events","url":"https://testing-library.com/docs/dom-testing-library/api-events"}],"origin":{"topic":"testing","level":"junior","index":49}},{"question":"Jak wpisać tekst w pole za pomocą user-event v14?","code":"const user = userEvent.setup();\nrender(<Login />);\nawait user.type(screen.getByLabelText(\"Email\"), \"ann@example.com\");","options":["Jak w przykładzie: utworzyć `user` przez `setup()` i poczekać na wywołanie przez `await`","Wywołać `userEvent.type` bez `await` - jest synchroniczny","Bezpośrednio ustawić `input.value`"],"answer":0,"explanation":"W v14 wszystkie metody zwracają promise'y. Bezpośrednie ustawienie `value` pomija zdarzenia, których nasłuchuje React.","sources":[{"title":"Testing Library: user-event","url":"https://testing-library.com/docs/user-event/intro"}],"origin":{"topic":"testing","level":"junior","index":50}},{"question":"Jak znaleźć pole po jego etykiecie?","code":"<label htmlFor=\"email\">Email</label>\n<input id=\"email\" />","options":["`screen.getByLabelText(\"Email\")`","`screen.getByText(\"Email\")`","`screen.getByRole(\"label\")`"],"answer":0,"explanation":"Zapytanie padnie, jeśli etykieta nie jest połączona z polem - przydatne sprawdzenie dostępności. `getByRole(\"textbox\", { name: \"Email\" })` też działa.","sources":[{"title":"Testing Library: About Queries (priority)","url":"https://testing-library.com/docs/queries/about"}],"origin":{"topic":"testing","level":"junior","index":51}},{"question":"Kiedy `getByTestId` jest odpowiedni?","options":["Gdy elementu nie da się znaleźć po roli, etykiecie ani tekście - np. dekoracyjny kontener wykresu","Zawsze: to najbardziej niezawodne zapytanie","Nigdy: nie działa z Reactem"],"answer":0,"explanation":"Użytkownik nie widzi `data-testid`, więc takie zapytanie nie sprawdza dostępności. Zostaw je na ostateczność.","sources":[{"title":"Testing Library: ByTestId","url":"https://testing-library.com/docs/queries/bytestid"},{"title":"Testing Library: About Queries (priority)","url":"https://testing-library.com/docs/queries/about"}],"origin":{"topic":"testing","level":"junior","index":52}},{"question":"Co jest nie tak z tym testem?","code":"const { container } = render(<Counter />);\ncontainer.querySelector(\".increment\").click();\nexpect(container.querySelector(\".value\").textContent).toBe(\"1\");","options":["Zależy od klas CSS (szczegółów implementacji); szukaj elementów po roli i tekście i używaj user-event","Nic - to zalecany styl","W RTL nie ma `container`"],"answer":0,"explanation":"Zmiana nazwy klasy zepsuje test, choć użytkownik nie zobaczy żadnej różnicy.","sources":[{"title":"Kent C. Dodds: Common mistakes with React Testing Library","url":"https://kentcdodds.com/blog/common-mistakes-with-react-testing-library"},{"title":"Kent C. Dodds: Testing Implementation Details","url":"https://kentcdodds.com/blog/testing-implementation-details"}],"origin":{"topic":"testing","level":"junior","index":53}},{"question":"Jak sprawdzić wynik kliknięcia przycisku licznika?","code":"const user = userEvent.setup();\nrender(<Counter />);\nawait user.click(screen.getByRole(\"button\", { name: \"+\" }));","options":["`expect(screen.getByText(\"Count: 1\")).toBeInTheDocument()`","`expect(Counter.state.count).toBe(1)`","`expect(useState).toHaveBeenCalledWith(1)`"],"answer":0,"explanation":"Sprawdzaj to, co widzi użytkownik, a nie wewnętrzny stan komponentu.","sources":[{"title":"Testing Library: Guiding Principles","url":"https://testing-library.com/docs/guiding-principles"}],"origin":{"topic":"testing","level":"junior","index":54}},{"question":"Co robi `screen.debug()`?","options":["Wypisuje bieżący DOM w konsoli, żeby zobaczyć, co „widzi” test","Otwiera DevTools przeglądarki","Wstrzymuje test"],"answer":0,"explanation":"Jest też `screen.logTestingPlaygroundURL()` - daje link, gdzie można dobrać najlepsze zapytanie.","sources":[{"title":"Testing Library: Debugging","url":"https://testing-library.com/docs/dom-testing-library/api-debugging"}],"origin":{"topic":"testing","level":"junior","index":55}},{"question":"Co sprawdza `toHaveBeenCalledTimes` dla propa-callbacku po kliknięciu?","code":"const onClick = vi.fn();\nrender(<Button onClick={onClick}>Ok</Button>);\nawait userEvent.setup().click(screen.getByRole(\"button\"));\nexpect(onClick).toHaveBeenCalledTimes(1);","options":["Że komponent wywołał callback dokładnie raz w odpowiedzi na kliknięcie","Że przycisk wyrenderował się raz","Że `onClick` jest funkcją"],"answer":0,"explanation":"Przekazanie mocka jako propa to najprostszy sposób, by sprawdzić, co komponent zgłasza rodzicowi.","sources":[{"title":"Jest: Mock Functions","url":"https://jestjs.io/docs/mock-functions"},{"title":"Testing Library: user-event","url":"https://testing-library.com/docs/user-event/intro"}],"origin":{"topic":"testing","level":"junior","index":56}},{"question":"Co robi test snapshotowy?","options":["Przy pierwszym uruchomieniu zapisuje zserializowany wynik i porównuje z nim przy kolejnych","Robi zrzut ekranu strony w prawdziwej przeglądarce","Sprawdza, że komponent renderuje się w mniej niż 16 ms"],"answer":0,"explanation":"Zamierzoną zmianę akceptuje się flagą `-u` (update). Duże snapshoty łatwo zatwierdzić bez czytania - lepsze są małe i precyzyjne.","sources":[{"title":"Jest: Snapshot Testing","url":"https://jestjs.io/docs/snapshot-testing"},{"title":"Vitest: Snapshot","url":"https://vitest.dev/guide/snapshot"}],"origin":{"topic":"testing","level":"junior","index":57}},{"question":"Dlaczego zapytania Testing Library po roli przy okazji poprawiają dostępność?","options":["Jeśli test nie może znaleźć elementu po roli i nazwie, czytnik ekranu prawdopodobnie też nie","Bo automatycznie dodają atrybuty ARIA","Bo uruchamiają sprawdzenia axe"],"answer":0,"explanation":"`<div onClick>` zamiast `<button>` nie ma roli `button`, więc taki test pada - co podpowiada, by poprawić znaczniki.","sources":[{"title":"Testing Library: ByRole","url":"https://testing-library.com/docs/queries/byrole"},{"title":"MDN: ARIA","url":"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA"}],"origin":{"topic":"testing","level":"junior","index":58}},{"question":"Do czego służą Playwright i Cypress?","options":["Do pisania testów E2E (i komponentowych), które sterują prawdziwą przeglądarką","Do testów jednostkowych czystych funkcji w Node.js","Do testów obciążeniowych API"],"answer":0,"explanation":"Oba otwierają aplikację, klikają, wpisują tekst i sprawdzają wynik jak użytkownik.","sources":[{"title":"Playwright","url":"https://playwright.dev/docs/intro"},{"title":"Cypress: Introduction to Cypress","url":"https://docs.cypress.io/app/core-concepts/introduction-to-cypress"}],"origin":{"topic":"testing","level":"junior","index":59}},{"question":"W jakich przeglądarkach Playwright może uruchamiać testy?","options":["Chromium, Firefox i WebKit (silnik Safari)","Tylko Chrome","Tylko w przeglądarkach zainstalowanych u programisty"],"answer":0,"explanation":"Playwright pobiera własne buildy przeglądarek; jeden plik testowy można uruchomić we wszystkich trzech przez `projects` w konfiguracji.","sources":[{"title":"Playwright","url":"https://playwright.dev/docs/intro"},{"title":"Playwright: Projects","url":"https://playwright.dev/docs/test-projects"}],"origin":{"topic":"testing","level":"junior","index":60}},{"question":"Jak w Playwright zaleca się szukać przycisku?","options":["`page.getByRole(\"button\", { name: \"Sign in\" })`","`page.locator(\"#app > div:nth-child(3) > button\")`","`page.locator(\"xpath=//button[3]\")`"],"answer":0,"explanation":"Lokatory zorientowane na użytkownika przetrwają zmiany znaczników; długie łańcuchy CSS i XPath psują się przy każdym refaktoringu.","sources":[{"title":"Playwright: Locators","url":"https://playwright.dev/docs/locators"},{"title":"Playwright: Best Practices","url":"https://playwright.dev/docs/best-practices"}],"origin":{"topic":"testing","level":"junior","index":61}},{"question":"Czy w Playwright potrzebny jest `sleep`/`waitForTimeout` przed kliknięciem?","options":["Nie: akcje same czekają, aż element będzie widoczny, stabilny, aktywny i będzie mógł przyjmować zdarzenia","Tak: przed każdym kliknięciem zawsze czekaj sekundę","Tak, ale tylko w trybie headless"],"answer":0,"explanation":"Stałe opóźnienia spowalniają testy i nadal są niestabilne. Polegaj na auto-waiting i asercjach web-first.","sources":[{"title":"Playwright: Auto-waiting","url":"https://playwright.dev/docs/actionability"},{"title":"Playwright: Best Practices","url":"https://playwright.dev/docs/best-practices"}],"origin":{"topic":"testing","level":"junior","index":62}},{"question":"Co robi `await expect(page.getByText(\"Saved\")).toBeVisible()` w Playwright?","options":["Ponawia sprawdzenie, aż tekst stanie się widoczny lub minie limit czasu","Sprawdza raz i od razu pada, jeśli tekstu nie ma","Robi zrzut ekranu i porównuje go ze wzorcem"],"answer":0,"explanation":"To asercje web-first: czekają na spełnienie warunku, więc asynchroniczny UI nie wymaga ręcznego czekania.","sources":[{"title":"Playwright: Assertions","url":"https://playwright.dev/docs/test-assertions"}],"origin":{"topic":"testing","level":"junior","index":63}},{"question":"Co oznacza tryb headless?","options":["Przeglądarka działa bez widocznego okna - typowy tryb w CI","Testy działają bez asercji","Strona ładuje się bez CSS"],"answer":0,"explanation":"Lokalnie Playwright można uruchomić z `--headed` lub `--ui`, żeby obserwować test.","sources":[{"title":"Playwright","url":"https://playwright.dev/docs/intro"}],"origin":{"topic":"testing","level":"junior","index":64}},{"question":"Jak w Cypress znaleźć element po specjalnym atrybucie testowym?","options":["`cy.get('[data-cy=\"submit\"]')`","`cy.find(\"submit\")`","`cy.select(\"#submit\")`"],"answer":0,"explanation":"Cypress zaleca atrybuty `data-cy`/`data-test`: nie zmieniają się razem ze stylami. `cy.contains(\"Submit\")` szuka po tekście.","sources":[{"title":"Cypress: Best Practices","url":"https://docs.cypress.io/app/core-concepts/best-practices"}],"origin":{"topic":"testing","level":"junior","index":65}},{"question":"Dlaczego testów E2E powinno być niewiele i tylko dla kluczowych ścieżek?","options":["Są wolne, drogie w utrzymaniu i częściej niestabilne","Bo przeglądarki ograniczają liczbę testów","Bo testy E2E nie potrafią sprawdzać formularzy"],"answer":0,"explanation":"Typowi kandydaci do E2E: logowanie, zakup, rejestracja - ścieżki, których awaria kosztuje najwięcej.","sources":[{"title":"Martin Fowler: The Practical Test Pyramid","url":"https://martinfowler.com/articles/practical-test-pyramid.html"},{"title":"Google Testing Blog: Just Say No to More End-to-End Tests","url":"https://testing.googleblog.com/2015/04/just-say-no-to-more-end-to-end-tests.html"}],"origin":{"topic":"testing","level":"junior","index":66}},{"question":"Czym jest test flaky?","options":["Testem, który raz przechodzi, a raz pada bez zmian w kodzie","Testem, który zawsze pada","Testem bez asercji"],"answer":0,"explanation":"Częste przyczyny: timing i wyścigi, współdzielony stan, prawdziwa sieć, bieżący czas. Niestabilne testy niszczą zaufanie do całego zestawu.","sources":[{"title":"Martin Fowler: Eradicating Non-Determinism in Tests","url":"https://martinfowler.com/articles/nonDeterminism.html"}],"origin":{"topic":"testing","level":"junior","index":67}},{"question":"Co robi `playwright codegen`?","options":["Nagrywa twoje działania w przeglądarce i generuje kod testu z lokatorami","Generuje aplikację na podstawie testów","Konwertuje testy Cypress na Playwright"],"answer":0,"explanation":"Dobry punkt wyjścia; wygenerowany kod nadal wymaga sensownych asercji i porządków.","sources":[{"title":"Playwright: Test generator","url":"https://playwright.dev/docs/codegen"}],"origin":{"topic":"testing","level":"junior","index":68}},{"question":"Czym jest TDD (test-driven development)?","options":["Najpierw pisze się padający test, potem minimalny kod, żeby przeszedł, potem refaktoring (red–green–refactor)","Pisaniem testów po wydaniu","Testowaniem wyłącznie debuggerem"],"answer":0,"explanation":"TDD pomaga projektować małe, testowalne moduły i daje test dla każdego wymagania.","sources":[{"title":"Martin Fowler: Test Driven Development","url":"https://martinfowler.com/bliki/TestDrivenDevelopment.html"}],"origin":{"topic":"testing","level":"junior","index":69}},{"question":"Gdzie testy zwykle uruchamiają się automatycznie?","options":["W CI przy każdym pushu lub pull requeście, blokując merge, gdy padną","Tylko na maszynie programisty przed wydaniem","Na produkcji przy każdym żądaniu"],"answer":0,"explanation":"Szybkie sprawdzenia (lint, typy, unit) zwykle idą pierwsze, wolne E2E po nich lub równolegle.","sources":[{"title":"Martin Fowler: The Practical Test Pyramid","url":"https://martinfowler.com/articles/practical-test-pyramid.html"}],"origin":{"topic":"testing","level":"junior","index":70}},{"question":"Co z tego jest najlepszym kandydatem na test jednostkowy?","options":["Czysta funkcja formatująca cenę z walutą i zaokrągleniem","Układ strony landing page","Cała ścieżka zakupu z płatnością"],"answer":0,"explanation":"Czyste funkcje z wieloma przypadkami brzegowymi tanio i dokładnie sprawdza się testami jednostkowymi.","sources":[{"title":"Martin Fowler: The Practical Test Pyramid","url":"https://martinfowler.com/articles/practical-test-pyramid.html"}],"origin":{"topic":"testing","level":"junior","index":71}},{"question":"Co robi `test.each` / `it.each`?","code":"test.each([\n [1, 1, 2],\n [2, 3, 5],\n])(\"add(%i, %i) = %i\", (a, b, expected) => {\n expect(add(a, b)).toBe(expected);\n});","options":["Uruchamia ten sam test z różnymi zestawami danych","Uruchamia test dla każdego pliku w folderze","Powtarza test, aż przejdzie"],"answer":0,"explanation":"Testy sparametryzowane usuwają kopiuj-wklej i ułatwiają dodawanie przypadków brzegowych.","sources":[{"title":"Jest: Getting Started","url":"https://jestjs.io/docs/getting-started"},{"title":"Vitest: Getting Started","url":"https://vitest.dev/guide/"}],"origin":{"topic":"testing","level":"junior","index":72}},{"question":"Co idealnie powinien sprawdzać jeden test?","options":["Jedno zachowanie lub scenariusz (może przy tym zawierać kilka powiązanych asercji)","Dokładnie jedno `expect`, nigdy więcej","Wszystko, co potrafi komponent, żeby oszczędzić czas"],"answer":0,"explanation":"Jeden scenariusz na test ułatwia zrozumienie porażki. Kilka asercji dotyczących tego samego wyniku jest w porządku.","sources":[{"title":"Kent C. Dodds: Avoid Nesting when you're Testing","url":"https://kentcdodds.com/blog/avoid-nesting-when-youre-testing"}],"origin":{"topic":"testing","level":"junior","index":73}},{"question":"Dlaczego ten test nie wyłapie błędu?","code":"test(\"saves\", () => {\n save(data).then((result) => {\n expect(result.ok).toBe(true);\n });\n});","options":["Promise nie jest ani zwracany, ani awaitowany, więc test kończy się przed asercją","`then` nie działa w testach","`toBe` nie umie porównywać wartości logicznych"],"answer":0,"explanation":"Dodaj `return` albo zrób test `async` i poczekaj na promise przez `await`.","sources":[{"title":"Jest: Testing Asynchronous Code","url":"https://jestjs.io/docs/asynchronous"}],"origin":{"topic":"testing","level":"junior","index":74}},{"question":"Co gwarantuje wywołanie `expect.assertions(n)`?","options":["Że w teście wykonało się dokładnie n asercji - przydatne dla kodu asynchronicznego i callbacków","Że test ma nie więcej niż n linii","Że w pliku uruchomiono n testów"],"answer":0,"explanation":"Jeśli asercja wewnątrz callbacku nigdy się nie wykona, test padnie zamiast po cichu przejść.","sources":[{"title":"Jest: Expect","url":"https://jestjs.io/docs/expect"}],"origin":{"topic":"testing","level":"junior","index":75}},{"question":"Gdzie najlepiej sprawdzić, że formularz pokazuje „Pole wymagane” przy pustym wysłaniu?","options":["W teście komponentowym/integracyjnym z Testing Library","Tylko w teście E2E","W teście snapshotowym formularza"],"answer":0,"explanation":"Walidacja to zachowanie UI, które nie potrzebuje prawdziwego backendu: szybki test RTL dobrze ją pokrywa.","sources":[{"title":"Kent C. Dodds: The Testing Trophy and Testing Classifications","url":"https://kentcdodds.com/blog/the-testing-trophy-and-testing-classifications"},{"title":"Testing Library: Guiding Principles","url":"https://testing-library.com/docs/guiding-principles"}],"origin":{"topic":"testing","level":"junior","index":76}},{"question":"Dlaczego własny hook testuje się przez komponent (lub `renderHook`), a nie wywołuje bezpośrednio?","options":["Hooki można wywoływać tylko podczas renderowania Reacta","Bezpośrednie wywołanie jest szybsze, ale mniej dokładne","Hooków nie można importować w testach"],"answer":0,"explanation":"Bezpośrednie wywołanie łamie zasady hooków. `renderHook` renderuje wokół hooka malutki komponent testowy.","sources":[{"title":"Testing Library: renderHook","url":"https://testing-library.com/docs/react-testing-library/api#renderhook"},{"title":"react.dev: Rules of Hooks","url":"https://react.dev/reference/rules/rules-of-hooks"}],"origin":{"topic":"testing","level":"junior","index":77}}],"plan":[{"topic":"javascript","count":13},{"topic":"typescript","count":13},{"topic":"react","count":18},{"topic":"nextjs","count":23},{"topic":"testing","count":8}],"intro":"Czeka Cię 75 pytań z kilku tematów: JavaScript - 13, TypeScript - 13, React - 18, Next.js - 23, Testowanie - 8. W każdym podejściu - nowy zestaw pytań i nowa kolejność odpowiedzi."}]] </article></body></html>

e:[["$","$L25",null,{"href":"/pl","className":"self-start text-sm text-zinc-500 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100","children":"← Wszystkie tematy"}],["$","$L32","pl/stack/nextjs/junior",{"topic":"stack-nextjs","level":"junior","title":"Programista Next.js · Junior","questions":[{"question":"Ile typów danych ma JavaScript według specyfikacji?","options":["8: siedem prymitywów i `object`","6: `number`, `string`, `boolean`, `null`, `undefined`, `object`","3: prymitywy, obiekty i funkcje jako osobny typ"],"answer":0,"explanation":"Prymitywy: `number`, `bigint`, `string`, `boolean`, `null`, `undefined`, `symbol`. Wszystko inne to `object`, w tym tablice, funkcje i daty. Funkcje są obiektami, choć `typeof` zwraca dla nich `'function'`.","sources":[{"title":"javascript.info: Data types","url":"https://javascript.info/types"},{"title":"MDN: JavaScript data types and data structures","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Data_structures"}],"origin":{"topic":"javascript","level":"junior","index":0}},{"question":"Co zwraca `typeof null`?","options":["`'object'`","`'null'`","`'undefined'`"],"answer":0,"explanation":"To historyczny błąd z pierwszej implementacji języka, zachowany dla kompatybilności. `null` to osobny prymityw. Sprawdza się go ścisłą równością: `value === null`.","sources":[{"title":"MDN: typeof","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof"},{"title":"javascript.info: Data types","url":"https://javascript.info/types"}],"origin":{"topic":"javascript","level":"junior","index":1}},{"question":"Co zwraca `typeof NaN`?","options":["`'number'`","`'NaN'`","`'undefined'`"],"answer":0,"explanation":"`NaN` (Not-a-Number) to specjalna wartość typu liczbowego, wynik niepoprawnej operacji matematycznej, np. `0 / 0` lub `Number('abc')`. Sprawdza się go przez `Number.isNaN(x)`.","sources":[{"title":"javascript.info: Numbers","url":"https://javascript.info/number"},{"title":"MDN: typeof","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof"}],"origin":{"topic":"javascript","level":"junior","index":2}},{"question":"Czym `let` różni się od `var`?","options":["`let` ma zasięg bloku `{}`, `var` - funkcji","`let` ma zasięg funkcji, a `var` - bloku `{}`","Niczym: `let` to po prostu nowa nazwa `var`"],"answer":0,"explanation":"`var` zadeklarowany wewnątrz `if` lub `for` jest widoczny w całej funkcji. Ponadto `var` jest hoistowany z wartością `undefined` i na najwyższym poziomie staje się właściwością `window`, a `let` i `const` do momentu deklaracji są w „martwej strefie czasowej”.","sources":[{"title":"javascript.info: The old \"var\"","url":"https://javascript.info/var"},{"title":"javascript.info: Variables","url":"https://javascript.info/variables"}],"origin":{"topic":"javascript","level":"junior","index":3}},{"question":"Co się stanie?","code":"const user = { name: \"Ann\" };\nuser.name = \"Bob\";","options":["Zadziała: `const` zabrania ponownego przypisania, a nie mutacji obiektu","`TypeError`: właściwości obiektu `const` nie można zmieniać","Zmiana zostanie po cichu zignorowana i `name` pozostanie `\"Ann\"`"],"answer":0,"explanation":"`const` ustala referencję: `user = {}` rzuci błąd, ale zawartość obiektu można zmieniać. Aby zablokować zmiany właściwości, użyj `Object.freeze` (płytko).","sources":[{"title":"javascript.info: Variables","url":"https://javascript.info/variables"},{"title":"MDN: Object.freeze()","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze"}],"origin":{"topic":"javascript","level":"junior","index":4}},{"question":"Co wypisze ten kod?","code":"console.log(x);\nvar x = 5;","options":["`undefined`","`5`","`ReferenceError`"],"answer":0,"explanation":"Deklaracja `var` jest wynoszona na początek funkcji i inicjalizowana wartością `undefined`, a przypisanie zostaje na miejscu. Z `let` lub `const` byłby to `ReferenceError`.","sources":[{"title":"MDN: Hoisting","url":"https://developer.mozilla.org/en-US/docs/Glossary/Hoisting"},{"title":"javascript.info: The old \"var\"","url":"https://javascript.info/var"}],"origin":{"topic":"javascript","level":"junior","index":5}},{"question":"Co wypisze ten kod?","code":"console.log(y);\nlet y = 5;","options":["`ReferenceError`","`undefined`","`5`"],"answer":0,"explanation":"`let` i `const` też są hoistowane, ale do linii deklaracji znajdują się w martwej strefie czasowej (TDZ): każdy dostęp rzuca `ReferenceError`. Pomaga to wychwycić zmienne użyte przed inicjalizacją.","sources":[{"title":"MDN: let (temporal dead zone)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let"},{"title":"MDN: Hoisting","url":"https://developer.mozilla.org/en-US/docs/Glossary/Hoisting"}],"origin":{"topic":"javascript","level":"junior","index":6}},{"question":"Czym `==` różni się od `===`?","options":["`==` konwertuje typy przed porównaniem, `===` porównuje bez konwersji","`===` konwertuje typy przed porównaniem, a `==` porównuje bez konwersji","`==` porównuje tylko liczby, a `===` wartości dowolnego typu"],"answer":0,"explanation":"`0 == ''` i `'1' == 1` dają `true` z powodu konwersji, ale `false` przy `===`. Reguły luźnej równości są mylące, więc niemal zawsze używa się `===`. Wygodny wyjątek: `x == null` sprawdza naraz `null` i `undefined`.","sources":[{"title":"javascript.info: Comparisons","url":"https://javascript.info/comparison"},{"title":"MDN: Equality comparisons and sameness","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Equality_comparisons_and_sameness"}],"origin":{"topic":"javascript","level":"junior","index":7}},{"question":"Czym `null` różni się od `undefined`?","options":["`undefined` oznacza brak przypisanej wartości, `null` to jawna „pustka” ustawiona przez programistę","`null` oznacza brak przypisanej wartości, a `undefined` to jawnie ustawiona „pustka”","To ta sama wartość; `null === undefined` zwraca `true`"],"answer":0,"explanation":"`undefined` dają niezainicjalizowane zmienne, brakujące właściwości i parametry oraz funkcje bez `return`. `null` przypisuje się celowo. `null == undefined` to `true`, ale `null === undefined` to `false`.","sources":[{"title":"javascript.info: Data types","url":"https://javascript.info/types"}],"origin":{"topic":"javascript","level":"junior","index":8}},{"question":"Co zwraca `NaN === NaN`?","options":["`false`","`true`","`NaN`"],"answer":0,"explanation":"`NaN` nie jest równy niczemu, nawet sobie. Do sprawdzenia użyj `Number.isNaN(x)` lub `Object.is(x, NaN)`. Globalne `isNaN('abc')` najpierw konwertuje argument na liczbę i zwraca `true` dla stringów.","sources":[{"title":"javascript.info: Numbers","url":"https://javascript.info/number"},{"title":"MDN: Equality comparisons and sameness","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Equality_comparisons_and_sameness"}],"origin":{"topic":"javascript","level":"junior","index":9}},{"question":"Ile wynosi `0.1 + 0.2 === 0.3`?","options":["`false`","`true`","`TypeError`"],"answer":0,"explanation":"Liczby są przechowywane w binarnym formacie IEEE-754, a 0.1 i 0.2 nie da się przedstawić dokładnie - suma to `0.30000000000000004`. Liczby porównuje się z tolerancją (`Math.abs(a - b) < Number.EPSILON`), a pieniądze obsługuje jako całkowite grosze.","sources":[{"title":"javascript.info: Numbers","url":"https://javascript.info/number"},{"title":"MDN: Number.EPSILON","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/EPSILON"}],"origin":{"topic":"javascript","level":"junior","index":10}},{"question":"Ile wynoszą `'5' + 3` i `'5' - 3`?","options":["`'53'` i `2`","`8` i `2`","`'53'` i `'2'`"],"answer":0,"explanation":"Jeśli jeden operand `+` jest stringiem, następuje konkatenacja. Pozostałe operatory arytmetyczne konwertują operandy na liczby. Dlatego wartości z `input.value` konwertuje się przez `Number()` przed dodawaniem.","sources":[{"title":"javascript.info: Type conversions","url":"https://javascript.info/type-conversions"}],"origin":{"topic":"javascript","level":"junior","index":11}},{"question":"Która z tych wartości jest falsy?","options":["`0`","`'0'`","`[]`"],"answer":0,"explanation":"Wartości falsy: `false`, `0`, `-0`, `0n`, `''`, `null`, `undefined`, `NaN`. Wszystko inne jest truthy, w tym string `'0'`, pusta tablica `[]` i pusty obiekt `{}`.","sources":[{"title":"javascript.info: Logical operators","url":"https://javascript.info/logical-operators"},{"title":"javascript.info: Type conversions","url":"https://javascript.info/type-conversions"}],"origin":{"topic":"javascript","level":"junior","index":12}},{"question":"Czym `count || 10` różni się od `count ?? 10` przy `count = 0`?","options":["`||` zwraca `10`, a `??` zwraca `0`","Oba zwracają `10`, bo `0` jest falsy","Oba zwracają `0`, bo wartość jest zdefiniowana"],"answer":0,"explanation":"`||` podstawia wartość zapasową dla każdej wartości falsy, a `??` tylko dla `null` i `undefined`. Dla liczb i stringów, w których `0` i `''` są poprawnymi wartościami, właściwym wyborem jest `??`.","sources":[{"title":"javascript.info: Nullish coalescing operator ??","url":"https://javascript.info/nullish-coalescing-operator"},{"title":"javascript.info: Logical operators","url":"https://javascript.info/logical-operators"}],"origin":{"topic":"javascript","level":"junior","index":13}},{"question":"Co zwraca `user?.address?.city`, jeśli `user = {}`?","options":["`undefined`","`TypeError`","`null`"],"answer":0,"explanation":"Optional chaining przerywa obliczenie i zwraca `undefined`, jeśli wartość po lewej to `null` lub `undefined`. Bez `?.` wyrażenie `user.address.city` rzuciłoby `TypeError`. Są też formy dla wywołań `fn?.()` i indeksów `arr?.[0]`.","sources":[{"title":"javascript.info: Optional chaining ?.","url":"https://javascript.info/optional-chaining"}],"origin":{"topic":"javascript","level":"junior","index":14}},{"question":"Czym funkcja strzałkowa różni się od zwykłej?","options":["Nie ma własnego `this` ani `arguments` i nie można jej wywołać przez `new`","Zawsze wykonuje się asynchronicznie, a zwykła synchronicznie","Jest w pełni hoistowana, a zwykła funkcja nie"],"answer":0,"explanation":"Strzałka bierze `this` z zakresu, w którym została utworzona, co czyni ją wygodną dla callbacków wewnątrz metod. Ale nie nadaje się na metodę obiektu: `this` nie będzie wskazywać na obiekt. W pełni hoistowane są tylko deklaracje funkcji (function declaration).","sources":[{"title":"javascript.info: Arrow functions revisited","url":"https://javascript.info/arrow-functions"},{"title":"MDN: this","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this"}],"origin":{"topic":"javascript","level":"junior","index":15}},{"question":"Czy można wywołać funkcję przed jej deklaracją?","code":"greet();\nfunction greet() { console.log(\"hi\"); }","options":["Tak: function declaration jest w pełni hoistowana","Nie: rzuci `ReferenceError`, jak przy `let`","Nie: rzuci `TypeError: greet is not a function`"],"answer":0,"explanation":"Deklaracje funkcji są tworzone przed wykonaniem kodu w ich zakresie. Przy function expression (`const greet = function () {}`) wywołanie przed deklaracją się nie powiedzie: zmienna jest w TDZ (lub ma wartość `undefined` przy `var`).","sources":[{"title":"javascript.info: Function expressions","url":"https://javascript.info/function-expressions"},{"title":"MDN: Hoisting","url":"https://developer.mozilla.org/en-US/docs/Glossary/Hoisting"}],"origin":{"topic":"javascript","level":"junior","index":16}},{"question":"Co wypisze ten kod?","code":"function makeCounter() {\n let count = 0;\n return () => ++count;\n}\nconst c = makeCounter();\nc(); c();\nconsole.log(c());","options":["`3`","`1`","`0`"],"answer":0,"explanation":"To domknięcie: zwrócona funkcja pamięta zmienną `count` z zakresu, w którym powstała, a każde wywołanie ją zwiększa. Ponowne wywołanie `makeCounter()` utworzyłoby niezależny licznik.","sources":[{"title":"javascript.info: Variable scope, closure","url":"https://javascript.info/closure"},{"title":"MDN: Closures","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures"}],"origin":{"topic":"javascript","level":"junior","index":17}},{"question":"Czym jest domknięcie (closure)?","options":["Funkcja wraz z dostępem do zmiennych zewnętrznego zakresu, w którym została utworzona","Funkcja wywoływana zaraz po deklaracji, a potem usuwana","Blok kodu w nawiasach klamrowych, niedostępny z zewnątrz po wykonaniu"],"answer":0,"explanation":"Każda funkcja JS pamięta środowisko leksykalne, w którym powstała, i może czytać oraz zmieniać jego zmienne nawet po zakończeniu funkcji zewnętrznej. Na tym opierają się prywatne dane, fabryki funkcji, memoizacja i obsługa zdarzeń.","sources":[{"title":"javascript.info: Variable scope, closure","url":"https://javascript.info/closure"},{"title":"MDN: Closures","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures"}],"origin":{"topic":"javascript","level":"junior","index":18}},{"question":"Co wypisze ten kod?","code":"const a = { n: 1 };\nconst b = a;\nb.n = 2;\nconsole.log(a.n);","options":["`2`","`1`","`undefined`"],"answer":0,"explanation":"Obiekty są przekazywane przez referencję: `b` wskazuje na ten sam obiekt co `a`. Aby uzyskać kopię, użyj spreadu `{ ...a }` (płytko) lub `structuredClone(a)` (głęboko).","sources":[{"title":"javascript.info: Object references and copying","url":"https://javascript.info/object-copy"}],"origin":{"topic":"javascript","level":"junior","index":19}},{"question":"Co robi `const copy = { ...original }`?","options":["Płytką kopię: zagnieżdżone obiekty pozostają wspólne","Głęboką kopię wszystkich zagnieżdżonych obiektów i tablic","Referencję do tego samego obiektu, jak `const copy = original`"],"answer":0,"explanation":"Spread kopiuje tylko własne właściwości pierwszego poziomu. Jeśli `original.address` jest obiektem, będzie wspólny dla obu kopii. `structuredClone` daje głęboką kopię, ale nie kopiuje funkcji ani węzłów DOM.","sources":[{"title":"javascript.info: Object references and copying","url":"https://javascript.info/object-copy"},{"title":"MDN: structuredClone()","url":"https://developer.mozilla.org/en-US/docs/Web/API/Window/structuredClone"}],"origin":{"topic":"javascript","level":"junior","index":20}},{"question":"Co zwraca `[1, 2, 3].map(x => x * 2)`?","options":["`[2, 4, 6]`","`undefined`","`12`"],"answer":0,"explanation":"`map` tworzy nową tablicę z wyników callbacka, nie zmieniając oryginału. Podobne niemutujące metody: `filter` (wybór), `reduce` (redukcja do jednej wartości), `find`, `some`, `every`.","sources":[{"title":"javascript.info: Array methods","url":"https://javascript.info/array-methods"}],"origin":{"topic":"javascript","level":"junior","index":21}},{"question":"Co zwraca `[1, 2, 3].forEach(x => x * 2)`?","options":["`undefined`","`[2, 4, 6]`","`[1, 2, 3]`"],"answer":0,"explanation":"`forEach` służy do efektów ubocznych i zawsze zwraca `undefined`. Aby dostać nową tablicę, użyj `map`. Inna różnica: z `forEach` nie da się wyjść przez `break` - do tego służą `for...of`, `some` lub `find`.","sources":[{"title":"javascript.info: Array methods","url":"https://javascript.info/array-methods"}],"origin":{"topic":"javascript","level":"junior","index":22}},{"question":"Co zwraca `[1, 2, 3, 4].reduce((sum, x) => sum + x, 0)`?","options":["`10`","`[1, 3, 6, 10]`","`0`"],"answer":0,"explanation":"`reduce` przechodzi po tablicy, przekazując akumulator z kroku do kroku; drugi argument to wartość początkowa. Bez niego pierwszy element staje się początkowym akumulatorem, a pusta tablica rzuca `TypeError`.","sources":[{"title":"MDN: Array.prototype.reduce()","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce"},{"title":"javascript.info: Array methods","url":"https://javascript.info/array-methods"}],"origin":{"topic":"javascript","level":"junior","index":23}},{"question":"Czym `for...in` różni się od `for...of`?","options":["`for...in` iteruje po kluczach obiektu, `for...of` po wartościach obiektu iterowalnego","`for...in` iteruje po wartościach tablicy, a `for...of` po kluczach obiektu","Niczym: to dwa synonimy tej samej pętli"],"answer":0,"explanation":"`for (const key in obj)` przechodzi po wyliczalnych kluczach-stringach, w tym dziedziczonych. `for (const item of arr)` działa z obiektami iterowalnymi: tablicami, stringami, `Map`, `Set`. `for...in` nie nadaje się do tablic - zwraca indeksy jako stringi.","sources":[{"title":"MDN: for...in","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in"},{"title":"MDN: for...of","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of"}],"origin":{"topic":"javascript","level":"junior","index":24}},{"question":"Czym `slice` różni się od `splice`?","options":["`slice` zwraca część tablicy bez zmian, `splice` mutuje oryginał","`splice` zwraca niezmienioną kopię, a `slice` mutuje oryginalną tablicę","To synonimy; `splice` to przestarzała nazwa `slice`"],"answer":0,"explanation":"`arr.slice(1, 3)` tworzy nową tablicę. `arr.splice(1, 2, 'x')` usuwa i wstawia elementy w samym `arr`. Niemutująca alternatywa to `toSpliced()`. Inne mutujące metody: `push`, `pop`, `shift`, `sort`, `reverse`.","sources":[{"title":"javascript.info: Array methods","url":"https://javascript.info/array-methods"}],"origin":{"topic":"javascript","level":"junior","index":25}},{"question":"Co zwracają `[NaN].includes(NaN)` i `[NaN].indexOf(NaN)`?","options":["`true` i `-1`","`false` i `-1`","`true` i `0`"],"answer":0,"explanation":"`indexOf` używa ścisłej równości `===`, a `NaN !== NaN`. `includes` używa algorytmu SameValueZero, który uznaje `NaN` za równy sobie. Dlatego `includes` jest pewniejszy do sprawdzania obecności.","sources":[{"title":"javascript.info: Array methods","url":"https://javascript.info/array-methods"},{"title":"MDN: Equality comparisons and sameness","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Equality_comparisons_and_sameness"}],"origin":{"topic":"javascript","level":"junior","index":26}},{"question":"Co wypisze ten kod?","code":"const { name = \"Guest\", age } = { age: 30 };\nconsole.log(name, age);","options":["`Guest 30`","`undefined 30`","`TypeError`"],"answer":0,"explanation":"Destrukturyzacja wyciąga właściwości do zmiennych, a wartość domyślna jest używana, gdy właściwość to `undefined`. Można zmieniać nazwy (`{ name: userName }`) i destrukturyzować zagnieżdżone obiekty i tablice.","sources":[{"title":"javascript.info: Destructuring assignment","url":"https://javascript.info/destructuring-assignment"}],"origin":{"topic":"javascript","level":"junior","index":27}},{"question":"Co zwraca `sum(1, 2, 3)`?","code":"function sum(...nums) {\n return nums.length;\n}","options":["`3`","`1`","`6`"],"answer":0,"explanation":"Parametr rest zbiera pozostałe argumenty w prawdziwą tablicę. W odróżnieniu od przestarzałego `arguments` jest to tablica z `map` i `reduce` i działa w funkcjach strzałkowych.","sources":[{"title":"javascript.info: Rest parameters and spread syntax","url":"https://javascript.info/rest-parameters-spread"}],"origin":{"topic":"javascript","level":"junior","index":28}},{"question":"Co zwraca `Math.max(...[3, 7, 2])`?","options":["`7`","`NaN`","`[3, 7, 2]`"],"answer":0,"explanation":"Spread „rozkłada” tablicę na osobne argumenty: `Math.max(3, 7, 2)`. Bez spreadu `Math.max([3, 7, 2])` zwraca `NaN`. Spread służy też do kopiowania i łączenia tablic i obiektów.","sources":[{"title":"javascript.info: Rest parameters and spread syntax","url":"https://javascript.info/rest-parameters-spread"}],"origin":{"topic":"javascript","level":"junior","index":29}},{"question":"Co zwraca `JSON.stringify({ a: 1, b: undefined, c: () => 1 })`?","options":["`'{\"a\":1}'`","`'{\"a\":1,\"b\":null,\"c\":null}'`","`TypeError`"],"answer":0,"explanation":"Właściwości o wartościach `undefined`, funkcje i symbole są pomijane (w tablicach stają się `null`). `Date` staje się stringiem, `Map` i `Set` - `{}`. Cykliczne referencje rzucają błąd.","sources":[{"title":"javascript.info: JSON methods","url":"https://javascript.info/json"}],"origin":{"topic":"javascript","level":"junior","index":30}},{"question":"W jakiej kolejności zostaną wypisane liczby?","code":"console.log(1);\nsetTimeout(() => console.log(2), 0);\nPromise.resolve().then(() => console.log(3));\nconsole.log(4);","options":["`1 4 3 2`","`1 2 3 4`","`1 4 2 3`"],"answer":0,"explanation":"Najpierw wykonuje się kod synchroniczny (1, 4). Potem event loop wykonuje wszystkie mikrozadania - callbacki promise'ów (3) - a dopiero potem kolejne makrozadanie - timer (2). `setTimeout(fn, 0)` nie oznacza „natychmiast”.","sources":[{"title":"javascript.info: Event loop","url":"https://javascript.info/event-loop"},{"title":"javascript.info: Microtasks","url":"https://javascript.info/microtask-queue"}],"origin":{"topic":"javascript","level":"junior","index":31}},{"question":"W jakich stanach może być promise?","options":["`pending`, potem `fulfilled` lub `rejected` - i więcej się nie zmienia","`pending`, `running`, `done` i `cancelled` na żądanie użytkownika","Tylko `resolved` lub `rejected`; nie ma stanu początkowego"],"answer":0,"explanation":"Promise zaczyna w stanie pending i rozstrzyga się dokładnie raz do fulfilled lub rejected. Kolejne wywołania `resolve`/`reject` są ignorowane. Promise'a nie da się anulować - do anulowania operacji służy `AbortController`.","sources":[{"title":"javascript.info: Promise","url":"https://javascript.info/promise-basics"},{"title":"MDN: Promise","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise"}],"origin":{"topic":"javascript","level":"junior","index":32}},{"question":"Co zwraca funkcja `async`?","options":["Zawsze promise, nawet z `return 42` w środku","Wartość z `return` bezpośrednio, bez promise'a","`undefined`, a wynik jest przekazywany do callbacka"],"answer":0,"explanation":"`async function f() { return 42 }` zwraca `Promise<42>`. Wyjątek w środku zamienia się w odrzucony promise. Dlatego wynik pobiera się przez `await` lub `.then()`.","sources":[{"title":"javascript.info: Async/await","url":"https://javascript.info/async-await"},{"title":"MDN: async function","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function"}],"origin":{"topic":"javascript","level":"junior","index":33}},{"question":"Dlaczego `catch` nie złapie błędu?","code":"try {\n fetch(\"/api\").then(r => { throw new Error(\"fail\"); });\n} catch (e) {\n console.log(\"caught\");\n}","options":["Błąd występuje później, asynchronicznie, gdy `try` już się zakończył","`try/catch` w ogóle nie łapie obiektów `Error`","`fetch` automatycznie połyka wszystkie błędy wewnątrz `.then`"],"answer":0,"explanation":"Blok `try` wykonał się synchronicznie i zakończył, zanim serwer odpowiedział. Błędy w łańcuchu łapie się przez `.catch()` albo pisząc `await fetch(...)` wewnątrz `try` w funkcji async - wtedy `catch` działa.","sources":[{"title":"javascript.info: Error handling, try...catch","url":"https://javascript.info/try-catch"},{"title":"javascript.info: Async/await","url":"https://javascript.info/async-await"}],"origin":{"topic":"javascript","level":"junior","index":34}},{"question":"Co wypisze `const arr = ['a', 'b']; console.log(arr[20]);`?","options":["`undefined`","`RangeError`","`null`"],"answer":0,"explanation":"Odwołanie do nieistniejącego indeksu, jak do brakującej właściwości obiektu, zwraca `undefined` bez błędu. Do ostatniego elementu wygodne jest `arr.at(-1)`.","sources":[{"title":"javascript.info: Array methods","url":"https://javascript.info/array-methods"},{"title":"MDN: Array.prototype.at()","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/at"}],"origin":{"topic":"javascript","level":"junior","index":35}},{"question":"Co wypisze ten kod?","code":"const s = \"hello\";\ns[0] = \"H\";\nconsole.log(s);","options":["`hello`","`Hello`","`TypeError` w każdym trybie"],"answer":0,"explanation":"Stringi są niezmienne: nie można zmienić znaku; przypisanie jest po cichu ignorowane (`TypeError` w trybie ścisłym). Trzeba utworzyć nowy string: `s[0].toUpperCase() + s.slice(1)`.","sources":[{"title":"javascript.info: Data types","url":"https://javascript.info/types"},{"title":"MDN: Strict mode","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode"}],"origin":{"topic":"javascript","level":"junior","index":36}},{"question":"Jak niezawodnie sprawdzić, że wartość jest tablicą?","options":["`Array.isArray(value)`","`typeof value === 'array'`","`value.length !== undefined`"],"answer":0,"explanation":"`typeof []` zwraca `'object'`, a `length` mają też stringi i obiekty tablicopodobne. `Array.isArray` działa nawet dla tablic z innych iframe'ów, gdzie `instanceof Array` zawodzi.","sources":[{"title":"javascript.info: Array methods","url":"https://javascript.info/array-methods"},{"title":"MDN: typeof","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof"}],"origin":{"topic":"javascript","level":"junior","index":37}},{"question":"Dlaczego `textContent` jest bezpieczniejszy niż `innerHTML` do wyświetlania tekstu użytkownika?","options":["Wstawia tekst bez zmian, bez parsowania HTML - XSS jest niemożliwy","Automatycznie usuwa ze stringa wszystkie niebezpieczne słowa i znaki","Jest szybszy, a oba są tak samo bezpieczne"],"answer":0,"explanation":"`el.innerHTML = userInput` parsuje string jako markup, a `

` uruchamia skrypt. `textContent` pokazuje znaczniki jako tekst. Jeśli naprawdę potrzebujesz HTML, oczyść go sanitizerem (DOMPurify).","sources":[{"title":"MDN: textContent vs innerHTML","url":"https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent"},{"title":"MDN: Cross-site scripting (XSS)","url":"https://developer.mozilla.org/en-US/docs/Web/Security/Attacks/XSS"}],"origin":{"topic":"javascript","level":"junior","index":38}},{"question":"Dlaczego `addEventListener` jest lepszy niż `el.onclick = handler`?","options":["Pozwala na wiele handlerów i opcje (`once`, `passive`)","Jest szybszy, bo działa w osobnym wątku","Tylko on daje dostęp do obiektu zdarzenia w handlerze"],"answer":0,"explanation":"Ponowne przypisanie `onclick` nadpisuje poprzedni handler. `addEventListener` dodaje je niezależnie i obsługuje fazę przechwytywania (`capture`), jednorazowe handlery i usuwanie przez `signal` (AbortController). Usuwa się je przez `removeEventListener` z tą samą funkcją.","sources":[{"title":"MDN: addEventListener()","url":"https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener"}],"origin":{"topic":"javascript","level":"junior","index":39}},{"question":"Co robi `event.preventDefault()`?","options":["Anuluje domyślną akcję przeglądarki (przejście, wysłanie formularza)","Zatrzymuje propagację zdarzenia do elementów nadrzędnych","Usuwa handler zdarzenia z elementu po pierwszym wywołaniu"],"answer":0,"explanation":"Na przykład link nie przejdzie pod `href`, formularz się nie wyśle, checkbox się nie przełączy. Zatrzymanie propagacji to `event.stopPropagation()`; to różne rzeczy, często mylone.","sources":[{"title":"javascript.info: Browser default actions","url":"https://javascript.info/default-browser-action"}],"origin":{"topic":"javascript","level":"junior","index":40}},{"question":"Czym jest propagacja zdarzeń w górę (bubbling)?","options":["Zdarzenie wyzwala się na elemencie, a potem wędruje przez przodków aż do `document`","Zdarzenie wyzwala się najpierw na `document`, a potem schodzi do elementu","Zdarzenie wyzwala się na wszystkich elementach strony jednocześnie"],"answer":0,"explanation":"Kliknięcie przycisku wewnątrz `div` uruchamia handlery przycisku, potem `div`, potem wyżej. Przed bubblingiem jest faza przechwytywania (capturing) - od `window` w dół do celu. `event.target` to miejsce, gdzie zdarzenie nastąpiło, `event.currentTarget` - czyj handler działa teraz.","sources":[{"title":"javascript.info: Bubbling and capturing","url":"https://javascript.info/bubbling-and-capturing"},{"title":"MDN: Event bubbling","url":"https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Event_bubbling"}],"origin":{"topic":"javascript","level":"junior","index":41}},{"question":"Na czym polega delegowanie zdarzeń?","options":["Jeden handler na rodzicu obsługuje zdarzenia dzieci przez `event.target`","Handler jest przenoszony do Web Workera, by nie blokował głównego wątku","Każdy element potomny dostaje kopię handlera rodzica"],"answer":0,"explanation":"Zamiast 1000 handlerów na każdym wierszu tabeli jest jeden na `table`, który znajduje cel przez `event.target.closest('tr')`. Oszczędza to pamięć i automatycznie działa dla elementów dodanych później. Opiera się na bubblingu.","sources":[{"title":"javascript.info: Event delegation","url":"https://javascript.info/event-delegation"},{"title":"javascript.info: Bubbling and capturing","url":"https://javascript.info/bubbling-and-capturing"}],"origin":{"topic":"javascript","level":"junior","index":42}},{"question":"Czym `localStorage` różni się od `sessionStorage`?","options":["`localStorage` przechowuje dane bezterminowo, `sessionStorage` - do zamknięcia karty","`sessionStorage` przechowuje dane bezterminowo, a `localStorage` - do zamknięcia karty","`localStorage` jest wysyłany na serwer z każdym żądaniem, a `sessionStorage` nie"],"answer":0,"explanation":"Oba przechowują stringi w obrębie originu, kilka megabajtów, i nie są wysyłane na serwer (w przeciwieństwie do ciasteczek). `sessionStorage` jest dodatkowo izolowany per karta. Przechowywanie tam tokenów i sekretów jest niebezpieczne: każdy skrypt na stronie może je odczytać.","sources":[{"title":"javascript.info: LocalStorage, sessionStorage","url":"https://javascript.info/localstorage"},{"title":"MDN: Web Storage API","url":"https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API"}],"origin":{"topic":"javascript","level":"junior","index":43}},{"question":"Co zwróci `localStorage.getItem('n')` po `localStorage.setItem('n', 5)`?","options":["`'5'`","`5`","`null`"],"answer":0,"explanation":"Web Storage przechowuje tylko stringi - wartość jest konwertowana przez `String()`. Obiekt zamieni się w `'[object Object]'`, dlatego złożone dane zapisuje się przez `JSON.stringify`, a odczytuje przez `JSON.parse`.","sources":[{"title":"javascript.info: LocalStorage, sessionStorage","url":"https://javascript.info/localstorage"},{"title":"javascript.info: JSON methods","url":"https://javascript.info/json"}],"origin":{"topic":"javascript","level":"junior","index":44}},{"question":"Czym `DOMContentLoaded` różni się od `load`?","options":["`DOMContentLoaded` - DOM jest zbudowany; `load` - załadowane są też obrazki i style","`load` wyzwala się wcześniej: zaraz po zbudowaniu DOM, bez obrazków i stylów","To to samo zdarzenie pod różnymi nazwami w różnych przeglądarkach"],"answer":0,"explanation":"`DOMContentLoaded` wystarczy do pracy z DOM (skrypty `defer` wykonują się tuż przed nim). `load` czeka na wszystkie zasoby, w tym obrazki i iframe'y - jest potrzebny np. do zmierzenia rozmiarów obrazków.","sources":[{"title":"javascript.info: DOMContentLoaded, load","url":"https://javascript.info/onload-ondomcontentloaded"},{"title":"MDN: DOMContentLoaded","url":"https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event"}],"origin":{"topic":"javascript","level":"junior","index":45}},{"question":"Czym `Map` różni się od zwykłego obiektu?","options":["Kluczami `Map` mogą być dowolne wartości, a kolejność wstawiania jest zachowana","`Map` przechowuje tylko klucze-stringi, a obiekt dowolne wartości","`Map` jest niezmienna: po utworzeniu nie można dodawać par"],"answer":0,"explanation":"Kluczami obiektu są stringi lub symbole (liczba `1` staje się `'1'`), są też właściwości dziedziczone. `Map` przyjmuje obiekty jako klucze, ma `size` oraz `get/set/has/delete` i jest wygodna przy częstym dodawaniu i usuwaniu.","sources":[{"title":"javascript.info: Map and Set","url":"https://javascript.info/map-set"}],"origin":{"topic":"javascript","level":"junior","index":46}},{"question":"Jak szybko usunąć duplikaty z tablicy prymitywów?","options":["`[...new Set(arr)]`","`arr.unique()`","`Object.keys(arr)`"],"answer":0,"explanation":"`Set` przechowuje tylko unikalne wartości (porównanie SameValueZero). Spread zamienia go z powrotem w tablicę. Tablice obiektów wymagają klucza: np. `Map` po `id`.","sources":[{"title":"javascript.info: Map and Set","url":"https://javascript.info/map-set"}],"origin":{"topic":"javascript","level":"junior","index":47}},{"question":"Co daje dyrektywa `'use strict'`?","options":["Tryb ścisły: błędy zamiast cichych porażek i zakaz niebezpiecznych konstrukcji","Statyczne sprawdzanie typów w czasie działania, jak w TypeScript","Automatyczną minifikację i optymalizację kodu przez silnik"],"answer":0,"explanation":"Na przykład przypisanie do niezadeklarowanej zmiennej rzuca błąd zamiast tworzyć zmienną globalną, a `this` w zwykłej funkcji to `undefined`, a nie `window`. Moduły i klasy działają w trybie ścisłym automatycznie.","sources":[{"title":"MDN: Strict mode","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode"}],"origin":{"topic":"javascript","level":"junior","index":48}},{"question":"Jak znaleźć pierwszy element z klasą `card` na stronie?","options":["`document.querySelector('.card')`","`document.getElementsByClassName('.card')[1]`","`document.find('card')`"],"answer":0,"explanation":"`querySelector` przyjmuje dowolny selektor CSS i zwraca pierwszy element lub `null`. `querySelectorAll` zwraca statyczną `NodeList` wszystkich dopasowań. `getElementsByClassName` przyjmuje nazwę klasy bez kropki, a indeksowanie zaczyna się od 0.","sources":[{"title":"javascript.info: DOM tree","url":"https://javascript.info/dom-nodes"}],"origin":{"topic":"javascript","level":"junior","index":49}},{"question":"Czy ten kod rzuci błąd?","code":"const user = { name: \"Ann\" };\nuser.name = \"Bob\";","options":["Nie - `const` zabrania ponownego przypisania zmiennej, a nie zmiany obiektu, na który wskazuje","Tak - obiekty w `const` są zamrożone","Tak - ale tylko w trybie ścisłym"],"answer":0,"explanation":"`user = {}` rzuciłoby `TypeError`, ale zmiana właściwości jest dozwolona. Aby sam obiekt był tylko do odczytu, użyj `Object.freeze` (płytko).","sources":[{"title":"javascript.info: Variables","url":"https://javascript.info/variables"},{"title":"MDN: Object.freeze()","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze"}],"origin":{"topic":"javascript","level":"junior","index":50}},{"question":"Co daje template literal w porównaniu z konkatenacją stringów?","code":"const msg = `Hello, ${name}!\nYou have ${count} new messages.`;","options":["Osadzone wyrażenia przez `${...}` i stringi wieloliniowe bez `\\n`","Automatyczne escapowanie HTML wstawianych wartości","Szybsze porównywanie stringów"],"answer":0,"explanation":"Stringi w backtickach obliczają dowolne wyrażenie w `${}`. Niczego nie escapują, więc budowanie nimi HTML z danych użytkownika nadal grozi XSS.","sources":[{"title":"javascript.info: Strings","url":"https://javascript.info/string"}],"origin":{"topic":"javascript","level":"junior","index":51}},{"question":"Co robi `arr.length = 0`?","options":["Usuwa wszystkie elementy tablicy w miejscu","Rzuca błąd, bo `length` jest tylko do odczytu","Tworzy nową pustą tablicę, zostawiając starą bez zmian"],"answer":0,"explanation":"Ustawienie `length` skraca tablicę, a każda referencja do niej widzi zmianę. `arr = []` natomiast kieruje zmienną na nową tablicę.","sources":[{"title":"javascript.info: Array methods","url":"https://javascript.info/array-methods"}],"origin":{"topic":"javascript","level":"junior","index":52}},{"question":"Co zwraca `[1, 2].push(3)`?","options":["`3` - nową długość tablicy","`[1, 2, 3]`","`undefined`"],"answer":0,"explanation":"`push` mutuje tablicę i zwraca jej nową długość - częste źródło błędów typu `arr = arr.push(x)`. Wersja niemutowalna to `[...arr, x]`.","sources":[{"title":"javascript.info: Array methods","url":"https://javascript.info/array-methods"}],"origin":{"topic":"javascript","level":"junior","index":53}},{"question":"Czym `find` różni się od `filter`?","code":"const users = [{ id: 1 }, { id: 2 }, { id: 2 }];","options":["`find` zwraca pierwszy pasujący element (lub `undefined`); `filter` zwraca tablicę wszystkich dopasowań","Są identyczne","`find` zwraca indeks elementu"],"answer":0,"explanation":"`users.find(u => u.id === 2)` daje jeden obiekt i kończy wcześniej; `users.filter(...)` zawsze przechodzi całą tablicę. `findIndex` zwraca indeks.","sources":[{"title":"javascript.info: Array methods","url":"https://javascript.info/array-methods"}],"origin":{"topic":"javascript","level":"junior","index":54}},{"question":"Czym różnią się `some` i `every`?","options":["`some` jest prawdą, jeśli pasuje choć jeden element; `every` - tylko jeśli pasują wszystkie","To synonimy","`every` zwraca pasujące elementy"],"answer":0,"explanation":"Oba kończą, gdy wynik jest znany. Dla pustej tablicy `some` zwraca `false`, a `every` - `true`.","sources":[{"title":"javascript.info: Array methods","url":"https://javascript.info/array-methods"}],"origin":{"topic":"javascript","level":"junior","index":55}},{"question":"Co wypisze ten kod w zwykłym (nieścisłym) skrypcie?","code":"let s = \"cat\";\ns[0] = \"b\";\nconsole.log(s);","options":["`cat`","`bat`","Rzuci `TypeError`"],"answer":0,"explanation":"Stringi są niemutowalne: przypisanie po indeksie jest po cichu ignorowane (lub rzuca błąd w trybie ścisłym). Utwórz nowy string: `\"b\" + s.slice(1)`.","sources":[{"title":"javascript.info: Strings","url":"https://javascript.info/string"}],"origin":{"topic":"javascript","level":"junior","index":56}},{"question":"Jaki typ zwraca `(1.005).toFixed(2)`?","options":["String","Liczbę","`BigInt`"],"answer":0,"explanation":"`toFixed` zwraca sformatowany string, więc `price.toFixed(2) + 1` skleja stringi. Ponadto przez binarną reprezentację liczb `(1.005).toFixed(2)` daje `\"1.00\"`, a nie `\"1.01\"`.","sources":[{"title":"javascript.info: Numbers","url":"https://javascript.info/number"}],"origin":{"topic":"javascript","level":"junior","index":57}},{"question":"Co zwraca `greet()`?","code":"function greet(name = \"guest\") {\n return `Hi, ${name}`;\n}","options":["`\"Hi, guest\"`","`\"Hi, undefined\"`","Rzuca błąd"],"answer":0,"explanation":"Parametry domyślne działają, gdy argument jest `undefined` (brakuje go lub przekazano go jawnie). `greet(null)` daje `\"Hi, null\"`, bo `null` to wartość.","sources":[{"title":"javascript.info: Functions","url":"https://javascript.info/function-basics"}],"origin":{"topic":"javascript","level":"junior","index":58}},{"question":"Ile wynoszą `title` i `year` po tej destrukturyzacji?","code":"const movie = { name: \"Up\" };\nconst { name: title, year = 2009 } = movie;","options":["`title` to `\"Up\"`, `year` to `2009`","`name` to `\"Up\"`, `title` jest undefined","Rzuci błąd, bo `year` nie istnieje"],"answer":0,"explanation":"`name: title` zmienia nazwę zmiennej, a `= 2009` daje wartość domyślną, gdy właściwość jest `undefined`.","sources":[{"title":"javascript.info: Destructuring assignment","url":"https://javascript.info/destructuring-assignment"}],"origin":{"topic":"javascript","level":"junior","index":59}},{"question":"Co robi `[a, b] = [b, a]`?","options":["Zamienia wartości `a` i `b` bez zmiennej tymczasowej","Tworzy zagnieżdżoną tablicę","Rzuca błąd składni"],"answer":0,"explanation":"Prawa strona tworzy tymczasową tablicę, a destrukturyzacja przypisuje jej elementy. Jeśli poprzednia linia nie ma średnika, wyrażenie może zostać sparsowane jako dostęp po indeksie - kolejny powód, by używać średników lub lintera.","sources":[{"title":"javascript.info: Destructuring assignment","url":"https://javascript.info/destructuring-assignment"}],"origin":{"topic":"javascript","level":"junior","index":60}},{"question":"Czym `\"toString\" in obj` różni się od `Object.hasOwn(obj, \"toString\")` dla `obj = {}`?","options":["`in` daje `true` (znalezione w prototypie), `Object.hasOwn` daje `false` (nie jest właściwością własną)","Oba dają `false`","Oba dają `true`"],"answer":0,"explanation":"`in` sprawdza cały łańcuch prototypów. `Object.hasOwn` (bezpieczniejszy zamiennik `obj.hasOwnProperty`) sprawdza tylko sam obiekt.","sources":[{"title":"MDN: Object.hasOwn()","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwn"},{"title":"javascript.info: Prototypal inheritance","url":"https://javascript.info/prototype-inheritance"}],"origin":{"topic":"javascript","level":"junior","index":61}},{"question":"Ile wynosi `0 && \"hello\"`?","options":["`0`","`false`","`\"hello\"`"],"answer":0,"explanation":"`&&` zwraca pierwszy fałszywy operand lub ostatni. Dlatego w JSX `{count && }` renderuje `0`, gdy `count` wynosi 0.","sources":[{"title":"javascript.info: Logical operators","url":"https://javascript.info/logical-operators"}],"origin":{"topic":"javascript","level":"junior","index":62}},{"question":"Która gałąź wykona się dla `x = \"1\"`?","code":"switch (x) {\n case 1: console.log(\"number\"); break;\n case \"1\": console.log(\"string\"); break;\n}","options":["`case \"1\"` - `switch` porównuje przez `===`","`case 1` - wartości są konwertowane","Żadna"],"answer":0,"explanation":"`switch` używa ścisłej równości. Bez `break` wykonanie „przechodzi” do następnej gałęzi.","sources":[{"title":"javascript.info: The \"switch\" statement","url":"https://javascript.info/switch"}],"origin":{"topic":"javascript","level":"junior","index":63}},{"question":"Kiedy wykonuje się blok `finally`?","options":["Zawsze - po `try`/`catch`, nawet gdy był `return` lub wyjątek","Tylko gdy nie było błędu","Tylko gdy wystąpił błąd"],"answer":0,"explanation":"To miejsce na sprzątanie, np. ukrycie loadera lub zamknięcie połączenia. `return` wewnątrz `finally` nadpisuje wcześniej zwróconą wartość, więc lepiej go unikać.","sources":[{"title":"javascript.info: Error handling, try...catch","url":"https://javascript.info/try-catch"}],"origin":{"topic":"javascript","level":"junior","index":64}},{"question":"Czym `Number.isNaN(\"abc\")` różni się od `isNaN(\"abc\")`?","options":["`Number.isNaN` daje `false` (to string, nie NaN); globalne `isNaN` najpierw konwertuje i daje `true`","Oba zwracają `true`","Oba zwracają `false`"],"answer":0,"explanation":"Globalne `isNaN` konwertuje argument, co prowadzi do niespodzianek. `Number.isNaN` sprawdza tylko prawdziwą wartość `NaN`.","sources":[{"title":"javascript.info: Numbers","url":"https://javascript.info/number"}],"origin":{"topic":"javascript","level":"junior","index":65}},{"question":"Co zwraca `Math.round(-2.5)`?","options":["`-2`","`-3`","`-2.5`"],"answer":0,"explanation":"`Math.round` zaokrągla .5 w stronę +∞, więc `Math.round(2.5)` to 3, a `Math.round(-2.5)` to -2. Gdy potrzebujesz innych reguł, użyj `Math.trunc`, `Math.floor` lub `Intl.NumberFormat`.","sources":[{"title":"MDN: Math.round()","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/round"}],"origin":{"topic":"javascript","level":"junior","index":66}},{"question":"Co zwraca funkcja bez instrukcji `return`?","options":["`undefined`","`null`","Wartość ostatniego wyrażenia"],"answer":0,"explanation":"Niejawnie zwracają wyrażenie tylko funkcje strzałkowe ze zwięzłym ciałem (`x => x * 2`). Ciało blokowe `x => { x * 2 }` zwraca `undefined`.","sources":[{"title":"javascript.info: Functions","url":"https://javascript.info/function-basics"},{"title":"javascript.info: Arrow functions revisited","url":"https://javascript.info/arrow-functions"}],"origin":{"topic":"javascript","level":"junior","index":67}},{"question":"Dlaczego `document.querySelectorAll(\"li\").map(...)` rzuca błąd?","options":["Zwraca `NodeList`, a nie tablicę; aby mieć `map`, użyj `Array.from(...)` lub spreadu","`querySelectorAll` zwraca `null`, gdy nic nie znajdzie","`map` nie działa z elementami DOM"],"answer":0,"explanation":"`NodeList` ma `forEach` i jest iterowalny, ale brakuje mu większości metod tablic. Jest też statyczny: nie aktualizuje się przy zmianach DOM.","sources":[{"title":"javascript.info: Searching: getElement*, querySelector*","url":"https://javascript.info/searching-elements-dom"}],"origin":{"topic":"javascript","level":"junior","index":68}},{"question":"Co robi `el.classList.toggle(\"open\")`?","options":["Dodaje klasę, jeśli jej brak, usuwa, jeśli jest, i zwraca, czy klasa jest teraz obecna","Zastępuje wszystkie klasy klasą `open`","Przełącza widoczność elementu"],"answer":0,"explanation":"Drugi argument wymusza stan: `toggle(\"open\", isOpen)`. `classList` jest bezpieczniejszy niż ręczna edycja stringa `className`.","sources":[{"title":"javascript.info: Styles and classes","url":"https://javascript.info/styles-and-classes"}],"origin":{"topic":"javascript","level":"junior","index":69}},{"question":"Czym różnią się `event.target` i `event.currentTarget` w handlerze kliknięcia podpiętym do `

`); `currentTarget` to `