Test yazmak ve kod kalitesi

Şimdiye kadar yazdığın her programı çalıştırıp çıktısına gözle baktın. Bu derste o bakışı koda çeviriyorsun: "bu fonksiyon şu girdiyle şunu döndürmeli" cümlesini bir kez yazacak, sonra her değişiklikte bilgisayara tek komutla denetleteceksin. Ardından kodunu temiz tutan iki aracı (ESLint ve Prettier) kuracak ve GitHub'a her gönderdiğinde bu denetimlerin kendiliğinden çalışmasını sağlayacaksın. İş ilanlarında "test yazabilen" diye geçen beceri tam olarak bu.

#Neden test: güvenle değiştirmek

Ders 41'in sonunda "Sınırlarda dene" diye bir liste vardı: seviye 1'de eksiye bas, takım boşken bak, toplam tam altına eşitken bak… Altı adımı elle denedin. Peki yarın TakimPaneli'ne küçük bir özellik eklediğinde o altı adımı yeniden yapacak mısın? Bir ay sonra? Arkadaşın senin kodunu değiştirdiğinde o da yapacak mı?

Dürüst cevap: yapmazsın. Elle deneme unutulur, sıkıcıdır, her seferinde biraz eksik yapılır. Sonra bir gün "kısaltayım" dediğin bir satır, üç hafta önce çalışan bir şeyi sessizce bozar ve sen bunu oyuncudan duyarsın.

Çözüm, denemeleri bir kez kod olarak yazmak. Her deneme bir girdi verir, fonksiyonun döndürdüğünü beklediğin değerle karşılaştırır ve "tuttu" ya da "tutmadı" der. Bütün denemeleri tek komutla, bir saniyeden kısa sürede çalıştırırsın.

Kırmızı bir test kötü haber değildir: hatayı oyuncudan önce sen gördün demektir. Asıl kötü haber, hiç testin olmadığı için hiçbir şeyin kırmızı yanmamasıdır.

#Dersin projesi: oyun-hesap

Bu derste önceki derslerden tanıdığın küçük oyun hesaplarını bir araya toplayıp test edeceksin. Yeni bir klasör aç. VS Code'un terminalinde sırayla:

cd C:\kodmkdir oyun-hesapcd oyun-hesapgit initnpm init -ynpm pkg set type=modulecode .

npm pkg set type=module komutu package.json'a "type": "module" satırını yazar; böylece import / export kullanabilirsin (Ders 14). Açılan pencerede iki dosya oluştur. İlki Ders 9'daki KDA fonksiyonu, bu kez dışa aktarılmış hâliyle:

1export function kdaMetni(kill, olum, asist) {2    if (olum === 0) {3        return "Kusursuz"4    }5    return ((kill + asist) / olum).toFixed(2)6}

İkincisi Ders 1'in son görevindeki altın paylaşımı. Orada ekrana yazdırıyordun; şimdi sonucu bir obje olarak döndüren bir fonksiyon:

1export function altinPaylas(toplam, kisiSayisi) {2    const artan = toplam % kisiSayisi3    const kisiBasi = (toplam - artan) / kisiSayisi4    return { kisiBasi, artan }5}

İki dosya da yalnızca fonksiyon dışa aktarıyor, ekrana bir şey yazmıyor. Böyle bir fonksiyonu test etmek en kolayıdır: girdi verirsin, dönen değere bakarsın. Ders 10'daki saf fonksiyon fikri burada işe yarıyor.

#assert: beklediğini yaz, Node denetlesin

Node'un içinde, beklentini denetleyen hazır bir modül var: node:assert. Kurulum gerektirmez. Klasörde deneme.js aç:

1import assert from "node:assert/strict"2import { kdaMetni } from "./kda.js"3 4assert.strictEqual(kdaMetni(7, 2, 9), "8.00")5assert.strictEqual(kdaMetni(10, 0, 6), "Kusursuz")6console.log("İki denetim de geçti")

PS C:\kod\oyun-hesap> node deneme.jsİki denetim de geçti

assert.strictEqual(gercek, beklenen) şunu der: "soldaki değer, sağdakiyle === anlamında aynı olmalı." Aynıysa hiçbir şey olmaz, program yoluna devam eder. Bu yüzden son satıra kadar geldik.

Şimdi 4. satırdaki beklentiyi bilerek yanlış yaz: "8.00" yerine tırnaksız 8.

1import assert from "node:assert/strict"2import { kdaMetni } from "./kda.js"3 4assert.strictEqual(kdaMetni(7, 2, 9), 8)5assert.strictEqual(kdaMetni(10, 0, 6), "Kusursuz")6console.log("İki denetim de geçti")

node:internal/modules/run_main:107    triggerUncaughtException(    ^ AssertionError [ERR_ASSERTION]: Expected values to be strictly equal: '8.00' !== 8     at file:///C:/kod/oyun-hesap/deneme.js:4:8    ...    at async asyncRunEntryPointWithESMLoader (node:internal/modules/run_main:101:5) {  generatedMessage: true,  code: 'ERR_ASSERTION',  actual: '8.00',  expected: 8,  operator: 'strictEqual',  diff: 'simple'} Node.js v24.20.0

Program 4. satırda durdu, 5. satır hiç çalışmadı: assert bir hata fırlatır ve yakalanmayan hata programı durdurur (Ders 13). Beklentiyi yeniden "8.00" yap; sonra deneme.js'i sil, işi bitti.

#Objeleri karşılaştırmak: deepEqual

altinPaylas bir obje döndürüyor. strictEqual ile denetlemeye kalkarsan sürpriz var:

1import assert from "node:assert/strict"2 3const beklenen = { kisiBasi: 246, artan: 4 }4const gelen = { kisiBasi: 246, artan: 4 }5 6console.log(gelen === beklenen)7assert.deepEqual(gelen, beklenen)8console.log("deepEqual: içerikleri aynı")9assert.strictEqual(gelen, beklenen)10console.log("bu satıra gelinmez")

falsedeepEqual: içerikleri aynınode:internal/modules/run_main:107    triggerUncaughtException(    ^ AssertionError [ERR_ASSERTION]: Values have same structure but are not reference-equal: {  artan: 4,  kisiBasi: 246}     at file:///C:/kod/oyun-hesap/nesne.js:9:8    ... Node.js v24.20.0

İki obje aynı alanları aynı değerlerle taşıyor ama === yine false diyor, çünkü ikisi bellekte iki ayrı obje; === objelerde "aynı obje mi" diye referansa bakar (Ders 12). Mesaj da bunu söylüyor: same structure but not reference-equal, "yapıları aynı ama aynı obje değiller".

assert.deepEqual ise objenin içine bakar: her alanı tek tek, iç içe objelere ve dizilere kadar karşılaştırır. Kural basit:

• Sayı, metin, true / false, null, undefined karşılaştırıyorsan: assert.strictEqual.
• Obje ya da dizi karşılaştırıyorsan: assert.deepEqual.
• "Bu çağrı hata fırlatmalı" diyorsan: assert.throws (birazdan).
• "Bu Promise reddedilmeli" diyorsan: assert.rejects (birazdan).

nesne.js yalnızca bir denemeydi, onu da sil.

#node:test: testlere ad vermek

deneme.js'in iki sorunu var: ilk tutmayan satırda her şey duruyor ve hangi denetimin ne için yazıldığı belli değil. Node'un ikinci hazır modülü node:test bunları çözer. Denetimleri adlandırılmış testlere böler, hepsini çalıştırır ve sonunda bir rapor verir.

Klasörde kda.test.js aç. Adın sonundaki .test.js önemli; birazdan nedenini göreceksin.

1import { test } from "node:test"2import assert from "node:assert/strict"3import { kdaMetni } from "./kda.js"4 5test("ölüm varsa KDA iki basamakla yazılır", () => {6    assert.strictEqual(kdaMetni(7, 2, 9), "8.00")7})8 9test("hiç ölmeyen oyuncu Kusursuz sayılır", () => {10    assert.strictEqual(kdaMetni(10, 0, 6), "Kusursuz")11})12 13test("küsurat iki basamağa yuvarlanır", () => {14    assert.strictEqual(kdaMetni(1, 8, 2), "0.38")15})

PS C:\kod\oyun-hesap> node --test✔ ölüm varsa KDA iki basamakla yazılır (0.6462ms)✔ hiç ölmeyen oyuncu Kusursuz sayılır (0.1029ms)✔ küsurat iki basamağa yuvarlanır (0.0985ms)ℹ tests 3ℹ suites 0ℹ pass 3ℹ fail 0ℹ cancelled 0ℹ skipped 0ℹ todo 0ℹ duration_ms 71.3322

test iki şey alır: bir ad (raporda görünen cümle) ve bir fonksiyon (çalıştırılacak denetimler). Fonksiyonun içinde istediğin kadar assert olabilir; biri tutmazsa o test kalır, ötekiler yine çalışır.

Raporun alt kısmındaki ℹ satırları özet: tests 3 (kaç test çalıştı), pass 3 (kaçı geçti), fail 0 (kaçı kaldı). suites, skipped, todo ve cancelled satırlarını şimdilik geç. Parantez içindeki süreler (0.6462ms) her çalıştırmada biraz farklı çıkar; sende de farklı olacak.

#npm test: projenin standart test komutu

Isınmadaki soruyu hatırla: package.json'daki test betiği şu an bir yer tutucu.

PS C:\kod\oyun-hesap> npm test > oyun-hesap@1.0.0 test> echo "Error: no test specified" && exit 1 "Error: no test specified"

Onu gerçek komutla değiştir. npm pkg set dosyayı senin yerine düzenler:

PS C:\kod\oyun-hesap> npm pkg set scripts.test="node --test"PS C:\kod\oyun-hesap> npm test > oyun-hesap@1.0.0 test> node --test ✔ ölüm varsa KDA iki basamakla yazılır (0.6524ms)✔ hiç ölmeyen oyuncu Kusursuz sayılır (0.101ms)✔ küsurat iki basamağa yuvarlanır (0.0964ms)ℹ tests 3ℹ suites 0ℹ pass 3ℹ fail 0ℹ cancelled 0ℹ skipped 0ℹ todo 0ℹ duration_ms 72.1739

npm test, npm start gibi özel bir kısayoldur: başına run yazmana gerek yok (npm betiği). Bir projeyi yeni açan herkes testleri bu komutla çalıştırmayı dener; birazdan GitHub da öyle yapacak.

#Kırmızıyı okumak

Testin asıl değeri bir şey bozulduğunda ortaya çıkar. Diyelim ki bir gün kda.js'i toFixed yerine Math.round ile, sana "daha temiz" gelen bir yuvarlamayla yeniden yazdın:

1export function kdaMetni(kill, olum, asist) {2    if (olum === 0) {3        return "Kusursuz"4    }5    const kda = (kill + asist) / olum6    return String(Math.round(kda * 100) / 100)7}

0.38 gibi sayılarda aynı sonucu verdiği için elle denesen fark etmeyebilirdin. Testler fark etti:

PS C:\kod\oyun-hesap> node --test✖ ölüm varsa KDA iki basamakla yazılır (1.1377ms)✔ hiç ölmeyen oyuncu Kusursuz sayılır (0.1425ms)✔ küsurat iki basamağa yuvarlanır (0.1096ms)ℹ tests 3ℹ suites 0ℹ pass 2ℹ fail 1ℹ cancelled 0ℹ skipped 0ℹ todo 0ℹ duration_ms 71.4504 ✖ failing tests: test at kda.test.js:5:1✖ ölüm varsa KDA iki basamakla yazılır (1.1377ms)  AssertionError [ERR_ASSERTION]: Expected values to be strictly equal:   '8' !== '8.00'       at TestContext.<anonymous> (file:///C:/kod/oyun-hesap/kda.test.js:6:12)      ...      at startSubtestAfterBootstrap (node:internal/test_runner/harness:387:17) {    generatedMessage: true,    code: 'ERR_ASSERTION',    actual: '8',    expected: '8.00',    operator: 'strictEqual',    diff: 'simple'  }

Math.round(800) / 100 sonucu 8 olur ve String(8) "8" verir; sondaki sıfırlar kayboldu. Maç geçmişinde bir satırda 8.00, ötekinde 8 yazması küçük ama gerçek bir gerileme. Rapor sana nereye bakacağını söylüyor:

Şimdi karar senin: yeni davranış mı doğru, eski mi? Burada eskisi doğru, çünkü tablo iki basamak bekliyor. kda.js'i toFixed'li hâline geri al ve npm test ile yeniden yeşili gör. Bazen de yeni davranış doğrudur; o zaman testi güncellersin. Test kararı senin yerine vermez, ama kararı bilerek vermeni sağlar.

PS C:\kod\oyun-hesap> node --testℹ tests 0ℹ suites 0ℹ pass 0ℹ fail 0ℹ cancelled 0ℹ skipped 0ℹ todo 0ℹ duration_ms 10.5027

#Birim testi ve sınır durumları

Şimdiye kadar yazdığın testlerin her biri tek bir fonksiyonu, dış dünyadan (ağdan, veritabanından, ekrandan) ayrı denetliyor. Bunlara birim testi denir. Bir uygulamadaki testlerin çoğu bu türdendir: hızlıdır, ne zaman kaldığı bellidir ve hata çıktığında suçlu tek bir fonksiyondur.

altinPaylas için altin.test.js aç. Bu kez testleri describe ile bir başlık altında toplayacağız; it de test'in başka bir adıdır, "o şunu yapar" diye okunsun diye kullanılır:

1import { describe, it } from "node:test"2import assert from "node:assert/strict"3import { altinPaylas } from "./altin.js"4 5describe("altinPaylas", () => {6    it("artanı kimseye vermez", () => {7        assert.deepEqual(altinPaylas(1234, 5), { kisiBasi: 246, artan: 4 })8    })9 10    it("tam bölünürse artan 0 olur", () => {11        assert.deepEqual(altinPaylas(1235, 5), { kisiBasi: 247, artan: 0 })12    })13 14    it("altın kişi sayısından azsa herkese 0 düşer", () => {15        assert.deepEqual(altinPaylas(3, 5), { kisiBasi: 0, artan: 3 })16    })17 18    it("hiç altın yoksa ikisi de 0 olur", () => {19        assert.deepEqual(altinPaylas(0, 5), { kisiBasi: 0, artan: 0 })20    })21})

PS C:\kod\oyun-hesap> npm test > oyun-hesap@1.0.0 test> node --test ▶ altinPaylas  ✔ artanı kimseye vermez (0.9788ms)  ✔ tam bölünürse artan 0 olur (0.1165ms)  ✔ altın kişi sayısından azsa herkese 0 düşer (0.1072ms)  ✔ hiç altın yoksa ikisi de 0 olur (0.114ms)✔ altinPaylas (2.7047ms)✔ ölüm varsa KDA iki basamakla yazılır (0.6442ms)✔ hiç ölmeyen oyuncu Kusursuz sayılır (0.1432ms)✔ küsurat iki basamağa yuvarlanır (0.1014ms)ℹ tests 7ℹ suites 1ℹ pass 7ℹ fail 0ℹ cancelled 0ℹ skipped 0ℹ todo 0ℹ duration_ms 80.2627

describe bir takım (suite) açar: rapordaki ▶ altinPaylas başlığı ve altındaki girintili satırlar. Özetteki suites sayısı da artık 1. İki dosyadaki testlerin hepsi tek komutla çalıştı.

Dört testin yalnızca ilki "sıradan" bir durum. Ötekiler bilerek seçildi: tam bölünme, altının oyuncudan az olması, hiç altın olmaması. Bunlar Ders 2'den tanıdığın sınır değerleri; hatalar en çok orada saklanır. Görmek için altin.js'i tek bir return'e "kısaltmayı" dene:

1export function altinPaylas(toplam, kisiSayisi) {2    return {3        kisiBasi: Math.round(toplam / kisiSayisi),4        artan: toplam % kisiSayisi5    }6}

PS C:\kod\oyun-hesap> node --test altin.test.js▶ altinPaylas  ✖ artanı kimseye vermez (2.1932ms)  ✔ tam bölünürse artan 0 olur (0.148ms)  ✖ altın kişi sayısından azsa herkese 0 düşer (0.2415ms)  ✔ hiç altın yoksa ikisi de 0 olur (0.1172ms)✖ altinPaylas (3.6294ms)ℹ tests 4ℹ suites 1ℹ pass 2ℹ fail 2ℹ cancelled 0ℹ skipped 0ℹ todo 0ℹ duration_ms 72.1013 ✖ failing tests: test at altin.test.js:6:5✖ artanı kimseye vermez (2.1932ms)  AssertionError [ERR_ASSERTION]: Expected values to be strictly deep-equal:  + actual - expected     {      artan: 4,  +   kisiBasi: 247  -   kisiBasi: 246    }       at TestContext.<anonymous> (file:///C:/kod/oyun-hesap/altin.test.js:7:16)      ... test at altin.test.js:14:5✖ altın kişi sayısından azsa herkese 0 düşer (0.2415ms)  AssertionError [ERR_ASSERTION]: Expected values to be strictly deep-equal:  + actual - expected     {      artan: 3,  +   kisiBasi: 1  -   kisiBasi: 0    }       at TestContext.<anonymous> (file:///C:/kod/oyun-hesap/altin.test.js:15:16)      ...

node --test altin.test.js yalnız o dosyayı çalıştırır; uzun bir rapordan kaçmak için işe yarar. deepEqual'ın raporu bir fark listesidir: + ile başlayan satır gelen (actual), - ile başlayan satır beklenen (expected), işaretsiz satırlar ikisinde de aynı. Math.round, 246,8'i 247'ye yuvarlayıp olmayan altını dağıttı; 3 altını 5 kişiye bölünce de herkese 1 verdi. Tam bölünen ve sıfır durumları ise geçti, yani her deneme bu hatayı yakalamıyor. Sıradan denemenin yakalaması da biraz şanstı: 1234 yerine 1232 seçseydin 246,4 aşağı yuvarlanır, sonuç yine 246 olur ve test geçerdi. Tek bir deneme yerine farklı türden birkaç durum yazmanın sebebi bu. altin.js'i geri al.

#Sınır durumlarını bulmanın yolu

Her parametre için kendine şu soruları sor:

Tablodaki soru işaretine bak: altinPaylas(100, 0) ne yapmalı? Şu an ne yaptığını görmek için kısa bir deneme dosyası aç, dene.js:

1import { altinPaylas } from "./altin.js"2 3console.log(altinPaylas(100, 0))

PS C:\kod\oyun-hesap> node dene.js{ kisiBasi: NaN, artan: NaN }

Sessizce NaN döndürüyor (Ders 9). Bu değer bir sonraki hesaba karışır ve hata çok uzakta ortaya çıkar. Daha iyisi, saçma girdiyi kapıda reddetmek (Ders 13'teki girdi doğrulama). dene.js'i sil ve bu kararı önce bir teste yaz; altin.test.js'te describe'ın içine, son it'ten sonra ekle:

22    it("oyuncu yoksa hata fırlatır", () => {23        assert.throws(() => altinPaylas(100, 0), {24            message: "Oyuncu sayısı en az 1 olmalı"25        })26    })

assert.throws'a fonksiyonu çağırarak değil, bir ok fonksiyonunun içinde verdin: () => altinPaylas(100, 0). Çağırsaydın hata assert.throws daha başlamadan fırlardı. Bu bir geri çağırma: "bunu sen çalıştır ve hata fırlatıp fırlatmadığına bak." İkinci parametre, beklenen hatanın message alanı. Çalıştır:

PS C:\kod\oyun-hesap> node --test altin.test.js▶ altinPaylas  ✔ artanı kimseye vermez (2.7773ms)  ✔ tam bölünürse artan 0 olur (0.1824ms)  ✔ altın kişi sayısından azsa herkese 0 düşer (0.2237ms)  ✔ hiç altın yoksa ikisi de 0 olur (0.185ms)  ✖ oyuncu yoksa hata fırlatır (0.8791ms)✖ altinPaylas (6.1545ms)ℹ tests 5ℹ suites 1ℹ pass 4ℹ fail 1ℹ cancelled 0ℹ skipped 0ℹ todo 0ℹ duration_ms 138.491 ✖ failing tests: test at altin.test.js:22:5✖ oyuncu yoksa hata fırlatır (0.8791ms)  AssertionError [ERR_ASSERTION]: Missing expected exception.      at TestContext.<anonymous> (file:///C:/kod/oyun-hesap/altin.test.js:23:16)      ...

Missing expected exception: "beklenen hata gelmedi". Doğru, çünkü fonksiyon henüz hata fırlatmıyor. Şimdi altin.js'e kapıyı ekle:

1export function altinPaylas(toplam, kisiSayisi) {2    if (kisiSayisi < 1) {3        throw new Error("Oyuncu sayısı en az 1 olmalı")4    }5    const artan = toplam % kisiSayisi6    const kisiBasi = (toplam - artan) / kisiSayisi7    return { kisiBasi, artan }8}

PS C:\kod\oyun-hesap> node --test altin.test.js▶ altinPaylas  ✔ artanı kimseye vermez (3.019ms)  ✔ tam bölünürse artan 0 olur (0.2167ms)  ✔ altın kişi sayısından azsa herkese 0 düşer (0.181ms)  ✔ hiç altın yoksa ikisi de 0 olur (0.1824ms)  ✔ oyuncu yoksa hata fırlatır (0.5916ms)✔ altinPaylas (5.8644ms)ℹ tests 5ℹ suites 1ℹ pass 5ℹ fail 0ℹ cancelled 0ℹ skipped 0ℹ todo 0ℹ duration_ms 119.0806

Aynı yolla ısınmadaki 0/0/0 sorununu kapat. Hiç katkısı olmayan oyuncu "Kusursuz" değil 0.00 almalı. kda.test.js'in sonuna:

17test("hiç katkısı olmayan oyuncu 0.00 alır", () => {18    assert.strictEqual(kdaMetni(0, 0, 0), "0.00")19})

PS C:\kod\oyun-hesap> node --test kda.test.js✔ ölüm varsa KDA iki basamakla yazılır (6.2032ms)✔ hiç ölmeyen oyuncu Kusursuz sayılır (0.3138ms)✔ küsurat iki basamağa yuvarlanır (0.2143ms)✖ hiç katkısı olmayan oyuncu 0.00 alır (1.385ms)... ✖ failing tests: test at kda.test.js:17:1✖ hiç katkısı olmayan oyuncu 0.00 alır (1.385ms)  AssertionError [ERR_ASSERTION]: Expected values to be strictly equal:   'Kusursuz' !== '0.00'       at TestContext.<anonymous> (file:///C:/kod/oyun-hesap/kda.test.js:18:12)      ...

Düzeltme, ölüm denetiminden önce katkıya bakmak:

1export function kdaMetni(kill, olum, asist) {2    if (kill + asist === 0) {3        return "0.00"4    }5    if (olum === 0) {6        return "Kusursuz"7    }8    return ((kill + asist) / olum).toFixed(2)9}

PS C:\kod\oyun-hesap> npm test > oyun-hesap@1.0.0 test> node --test ▶ altinPaylas  ✔ artanı kimseye vermez (2.5441ms)  ✔ tam bölünürse artan 0 olur (0.2084ms)  ✔ altın kişi sayısından azsa herkese 0 düşer (0.2138ms)  ✔ hiç altın yoksa ikisi de 0 olur (0.1853ms)  ✔ oyuncu yoksa hata fırlatır (0.5795ms)✔ altinPaylas (5.5516ms)✔ ölüm varsa KDA iki basamakla yazılır (1.095ms)✔ hiç ölmeyen oyuncu Kusursuz sayılır (0.1733ms)✔ küsurat iki basamağa yuvarlanır (0.139ms)✔ hiç katkısı olmayan oyuncu 0.00 alır (0.156ms)ℹ tests 9ℹ suites 1ℹ pass 9ℹ fail 0ℹ cancelled 0ℹ skipped 0ℹ todo 0ℹ duration_ms 137.842

Dokuzu da yeşil. Bu son çalıştırmanın asıl söylediği şu: yeni if'i eklerken eski davranışlardan hiçbirini bozmadın. "Güvenle değiştirmek" tam olarak bu cümle.

#Önce test (TDD) denemesi

Şimdiye kadar önce kodu yazdın, sonra testini. Bazı yazılımcılar sırayı tersine çevirir: önce testi yazar, testin kaldığını görür, sonra testi geçirecek kadar kod yazar. Bu yönteme teste dayalı geliştirme denir.

Neden testin önce kaldığını görmek gerekiyor? Çünkü hiç kalmayan bir test hiçbir şey kanıtlamaz. Yanlış dosyayı import ediyor ya da hiçbir şeyi denetlemiyor olabilir; kırmızıyı görmek testin gerçekten çalıştığının kanıtıdır.

Deneme için TFT'deki faiz: elindeki her 10 altın için tur sonunda 1 altın faiz alırsın, ama faiz en fazla 5 olur. Kuralı Ders 14'teki faiz görevinden tanıyorsun; bu kez onu sıfırdan, adım adım ve her adımda önce testini yazarak kuracaksın. Bu projede henüz faiz.js yok. Önce yalnız ilk davranışın testini yaz, faiz.test.js:

1import { test } from "node:test"2import assert from "node:assert/strict"3import { faiz } from "./faiz.js"4 5test("10 altının altında faiz yok", () => {6    assert.strictEqual(faiz(0), 0)7    assert.strictEqual(faiz(9), 0)8})

Kırmızı. Çalıştır. Daha dosya bile olmadığı için test, fonksiyona ulaşamadan kalır:

PS C:\kod\oyun-hesap> node --test faiz.test.jsnode:internal/modules/esm/resolve:272    throw new ERR_MODULE_NOT_FOUND(          ^ Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'C:\kod\oyun-hesap\faiz.js' imported from C:\kod\oyun-hesap\faiz.test.js    ...✖ faiz.test.js (51.1212ms)ℹ tests 1ℹ suites 0ℹ pass 0ℹ fail 1...

Yeşil. Testi geçirecek en az kodu yaz. Gerçekten en azı:

1export function faiz(altin) {2    return 03}

PS C:\kod\oyun-hesap> node --test faiz.test.js✔ 10 altının altında faiz yok (0.5859ms)ℹ tests 1ℹ suites 0ℹ pass 1ℹ fail 0...

Her zaman 0 döndüren bir fonksiyon "hile" gibi görünüyor, öyle de. Ama bu hile bir şey söylüyor: testlerin henüz faizin artmasını istemiyor. İkinci davranışı test olarak ekle:

10test("her 10 altın için 1 faiz", () => {11    assert.strictEqual(faiz(10), 1)12    assert.strictEqual(faiz(25), 2)13    assert.strictEqual(faiz(49), 4)14})

PS C:\kod\oyun-hesap> node --test faiz.test.js✔ 10 altının altında faiz yok (0.6033ms)✖ her 10 altın için 1 faiz (0.6397ms)... test at faiz.test.js:10:1✖ her 10 altın için 1 faiz (0.6397ms)  AssertionError [ERR_ASSERTION]: Expected values to be strictly equal:   0 !== 1       at TestContext.<anonymous> (file:///C:/kod/oyun-hesap/faiz.test.js:11:12)      ...

Kırmızı. Dikkat: rapor yalnızca ilk tutmayan satırı (11. satır, faiz(10)) gösteriyor. Bir test içindeki assert'lerden biri tutmayınca o testin kalanı çalışmaz. Şimdi yeşile çevir:

1export function faiz(altin) {2    return Math.floor(altin / 10)3}

PS C:\kod\oyun-hesap> node --test faiz.test.js✔ 10 altının altında faiz yok (0.6175ms)✔ her 10 altın için 1 faiz (0.2019ms)ℹ tests 2ℹ suites 0ℹ pass 2ℹ fail 0...

Sıradaki davranış, üst sınır:

16test("faiz en fazla 5 olur", () => {17    assert.strictEqual(faiz(50), 5)18    assert.strictEqual(faiz(80), 5)19})

PS C:\kod\oyun-hesap> node --test faiz.test.js✔ 10 altının altında faiz yok (0.6388ms)✔ her 10 altın için 1 faiz (0.1016ms)✖ faiz en fazla 5 olur (0.6518ms)... test at faiz.test.js:16:1✖ faiz en fazla 5 olur (0.6518ms)  AssertionError [ERR_ASSERTION]: Expected values to be strictly equal:   8 !== 5       at TestContext.<anonymous> (file:///C:/kod/oyun-hesap/faiz.test.js:18:12)      ...

faiz(50) zaten 5 verdiği için geçti; tutmayan 18. satır, faiz(80): 8 geldi. Math.min iki sayıdan küçüğünü verir:

1export function faiz(altin) {2    return Math.min(5, Math.floor(altin / 10))3}

PS C:\kod\oyun-hesap> node --test faiz.test.js✔ 10 altının altında faiz yok (0.6361ms)✔ her 10 altın için 1 faiz (0.1052ms)✔ faiz en fazla 5 olur (0.1394ms)ℹ tests 3ℹ suites 0ℹ pass 3ℹ fail 0...

Düzenle. Kod çalışıyor ama 10 ve 5 sayılarının ne olduğu ilk bakışta belli değil. Testler yeşilken onlara ad ver:

1const faizAdimi = 102const enFazlaFaiz = 53 4export function faiz(altin) {5    const hamFaiz = Math.floor(altin / faizAdimi)6    return Math.min(enFazlaFaiz, hamFaiz)7}

node --test faiz.test.js yine üç yeşil verir. Düzenleme adımında davranış değişmez, yalnız kodun okunuşu değişir; testler bunun böyle kaldığını garanti eder. Gerçek işte TDD'yi her satırda değil, kuralları net olan hesaplarda kullanırsın. Bu denemeden aklında kalması gereken alışkanlık: yeni bir testi kırmızıyken en az bir kez gör.

#Asenkron fonksiyonları test etmek

Bazı fonksiyonlar sonucu hemen değil, bir Promise olarak verir: dosya okumak, API'ye istek atmak, veritabanına sormak (Ders 15). Örnek bir maç geçmişini dosyadan okuyan maclar.js:

1import { readFile } from "node:fs/promises"2 3export async function maclariOku(dosyaAdi) {4    const metin = await readFile(dosyaAdi, "utf8")5    return JSON.parse(metin)6}

Yanına ornek-maclar.json:

1[2    { "sampiyon": "Ahri", "skor": "7/2/9", "kazandi": true },3    { "sampiyon": "Lux", "skor": "3/5/12", "kazandi": false },4    { "sampiyon": "Jinx", "skor": "10/0/6", "kazandi": true }5]

Test fonksiyonu da async olabilir. Test çalıştırıcı, döndürdüğü Promise bitene kadar bekler:

1import { test } from "node:test"2import assert from "node:assert/strict"3import { maclariOku } from "./maclar.js"4 5test("örnek dosyada üç maç var", async () => {6    const maclar = await maclariOku("ornek-maclar.json")7    assert.strictEqual(maclar.length, 3)8    assert.strictEqual(maclar[0].sampiyon, "Ahri")9})10 11test("olmayan dosya hata verir", async () => {12    await assert.rejects(maclariOku("yok.json"), { code: "ENOENT" })13})

PS C:\kod\oyun-hesap> node --test maclar.test.js✔ örnek dosyada üç maç var (4.0976ms)✔ olmayan dosya hata verir (1.5192ms)ℹ tests 2ℹ suites 0ℹ pass 2ℹ fail 0...

assert.rejects, assert.throws'un Promise'li hâli: "bu Promise reddedilmeli." İkinci parametre hatanın code alanına bakıyor; olmayan dosyada Node ENOENT verir (Ders 17). assert.rejects de bir Promise döndürür, o yüzden önünde await var. Bu derste iki await'in ikisini de unutmak mümkün ve iki farklı, şaşırtıcı sonuç veriyor:

5test("örnek dosyada üç maç var", async () => {6    const maclar = maclariOku("ornek-maclar.json")7    assert.strictEqual(maclar.length, 3)8    assert.strictEqual(maclar[0].sampiyon, "Ahri")9})

PS C:\kod\oyun-hesap> node --test maclar.test.js✖ örnek dosyada üç maç var (1.7502ms)✔ olmayan dosya hata verir (3.8436ms)... test at maclar.test.js:5:1✖ örnek dosyada üç maç var (1.7502ms)  AssertionError [ERR_ASSERTION]: Expected values to be strictly equal:   undefined !== 3       at TestContext.<anonymous> (file:///C:/kod/oyun-hesap/maclar.test.js:7:12)      ...

İkincisi daha sinsi. Diyelim ki biri maclariOku'yu "dosya yoksa çökmesin" diye değiştirdi ve artık hata yerine boş dizi döndürüyor:

1import { readFile } from "node:fs/promises"2 3export async function maclariOku(dosyaAdi) {4    try {5        const metin = await readFile(dosyaAdi, "utf8")6        return JSON.parse(metin)7    } catch {8        return []9    }10}

Testin yerinde, await'iyle duruyorsa durum açık: Missing expected rejection. ("beklenen ret gelmedi") der ve kalır. Asıl tehlike, assert.rejects'in önündeki await unutulmuşsa:

11test("olmayan dosya hata verir", async () => {12    assert.rejects(maclariOku("yok.json"), { code: "ENOENT" })13})

PS C:\kod\oyun-hesap> node --test maclar.test.js✔ örnek dosyada üç maç var (3.5427ms)✔ olmayan dosya hata verir (0.3168ms)ℹ Error: Test "olmayan dosya hata verir" at maclar.test.js:11:1 generated asynchronous activity after the test ended. This activity created the error "AssertionError [ERR_ASSERTION]: Missing expected rejection." and would have caused the test to fail, but instead triggered an unhandledRejection event.✖ maclar.test.js (64.7913ms)ℹ tests 3ℹ suites 0ℹ pass 2ℹ fail 1...

#React bileşen testine ilk bakış

node:test sade JavaScript fonksiyonları için yeterli. Bir React bileşeni ise JSX ve TypeScript içerir, çalışmak için de bir sayfaya (DOM) ihtiyaç duyar; Node'da sayfa yok. Bunun için iki araç birlikte kullanılır:

• Vitest: Vite ile aynı ekibin test çalıştırıcısı. Projenin vite.config.ts'ini okur; .tsx dosyalarını Vite'ın çevirdiği gibi çevirir.
• Testing Library: bileşeni sahte bir sayfaya çizen ve içinde, kullanıcının gördüğü yazılara ve düğmelere göre arama yapan kütüphane.

Ders 41'deki tft-kurucu projesini aç (C:\kod\tft-kurucu) ve terminalde kur. Hepsi geliştirme aracı olduğu için -D ile (geliştirme bağımlılığı):

PS C:\kod\tft-kurucu> npm install -D vitest @testing-library/react @testing-library/dom @testing-library/user-event jsdom added 71 packages, and audited 99 packages in 5s 22 packages are looking for funding  run `npm fund` for details found 0 vulnerabilities

Bu ders Vitest 5.0.3, @testing-library/react 16.3.3 ve jsdom 30.1.2 ile denendi (12 Ekim 2026); sende daha yeni sürümler kurulabilir. @testing-library/user-event tıklama ve yazma gibi kullanıcı hareketlerini taklit eder; jsdom ise Node'un içinde çalışan sahte bir tarayıcı sayfasıdır.

#İlk Vitest testi

Önce sade bir fonksiyon: birimler.ts'deki kopyaSayisi. src klasöründe birimler.test.ts aç:

1import { describe, it, expect } from "vitest"2import { kopyaSayisi } from "./birimler.ts"3 4describe("kopyaSayisi", () => {5    it("bir yıldız 1 kopyadır", () => {6        expect(kopyaSayisi(1)).toBe(1)7    })8 9    it("iki yıldız 3, üç yıldız 9 kopyadır", () => {10        expect(kopyaSayisi(2)).toBe(3)11        expect(kopyaSayisi(3)).toBe(9)12    })13})

describe ve it tanıdık. Değişen tek şey denetim cümlesi: assert.strictEqual(gercek, beklenen) yerine expect(gercek).toBe(beklenen). Okunuşu "gerçeğin, beklenen olmasını beklerim". Objeler için toEqual (deepEqual'ın karşılığı) var.

PS C:\kod\tft-kurucu> npx vitest run  RUN  v5.0.3 C:/kod/tft-kurucu  ✓ src/birimler.test.ts (2 tests) 3ms  Test Files  1 passed (1)      Tests  2 passed (2)   Start at  04:02:29   Duration  554ms (worker 36%, transform 32%, import 28%, tests 3%)

Rapor node:test'inkinden farklı görünüyor ama okunuşu benzer: ✓ geçen test dosyası, parantezde içindeki test sayısı; altta özet. Start at çalıştırmanın saati, Duration toplam süre; ikisi de sende farklı çıkar.

vitest run testleri bir kez çalıştırıp çıkar. Yalnız npx vitest yazarsan izleme kipinde açılır: dosya kaydettikçe testleri yeniden çalıştırır, q ile çıkarsın. Vitest de adında .test. ya da .spec. geçen dosyaları arar.

#Bileşeni çizip içine bakmak

Şimdi asıl konu: TakimPaneli. Ders 41'de elle denediğin üç davranışı teste yazacaksın: takım boşken bilgi yazısı, altın yetmezken uyarı ve Çıkar düğmesinin doğru birimi bildirmesi. src/TakimPaneli.test.tsx:

1import { describe, it, expect, vi } from "vitest"2import { render, screen } from "@testing-library/react"3import userEvent from "@testing-library/user-event"4import TakimPaneli from "./TakimPaneli.tsx"5 6const lux = { id: 1, ad: "Lux", maliyet: 3, yildiz: 2 }7 8describe("TakimPaneli", () => {9    it("takım boşken bilgi yazısı gösterir", () => {10        render(11            <TakimPaneli12                takim={[]}13                altin={20}14                seviye={3}15                onCikar={vi.fn()}16                onYildiz={vi.fn()}17            />18        )19        expect(screen.getByText("Takım boş. Dükkândan birim ekle.")).toBeTruthy()20    })21 22    it("altın yetmezse uyarı gösterir", () => {23        render(24            <TakimPaneli25                takim={[lux]}26                altin={5}27                seviye={3}28                onCikar={vi.fn()}29                onYildiz={vi.fn()}30            />31        )32        expect(screen.getByText("Altının yetmiyor: 4 altın eksik.")).toBeTruthy()33    })34 35    it("Çıkar düğmesi birimin id'sini bildirir", async () => {36        const onCikar = vi.fn()37        render(38            <TakimPaneli39                takim={[lux]}40                altin={20}41                seviye={3}42                onCikar={onCikar}43                onYildiz={vi.fn()}44            />45        )46        await userEvent.click(screen.getByRole("button", { name: "Çıkar" }))47        expect(onCikar).toHaveBeenCalledWith(1)48    })49})

Yeni parçalar:

• render(<TakimPaneli … />): bileşeni sahte sayfaya çizer. Props'ları Ders 41'deki App nasıl veriyorsa öyle veriyorsun.
• screen.getByText("…"): sayfada bu yazıyı taşıyan öğeyi bulur. Bulamazsa hata fırlatır, yani bulmak başlı başına bir denetimdir; toBeTruthy() yalnız okunuşu tamamlar.
• screen.getByRole("button", { name: "Çıkar" }): üzerinde "Çıkar" yazan düğmeyi bulur. Rol, öğenin ne olduğunu söyler (düğme, başlık, metin kutusu). Ekran okuyucular da sayfayı bu rollerle tanır; Ders 45'teki erişilebilirlik konusuyla aynı fikir.
• vi.fn(): çağrıldığında hiçbir şey yapmayan ama her çağrıyı kaydeden sahte bir fonksiyon. Ders 50'deki sahte nesnenin küçük kardeşi. toHaveBeenCalledWith(1) "bu fonksiyon 1 ile çağrıldı mı" diye sorar.
• await userEvent.click(...): gerçek bir tıklamayı taklit eder. Promise döndürür; await'i unutma.

Lux 2 yıldızlı, yani 3 kopya: toplam maliyet 9. Altın 5 olduğunda 4 eksik; ikinci test bu yüzden "4 altın eksik" bekliyor. Testlerin hiçbiri CSS sınıfına ya da bileşenin içindeki değişken adlarına bakmıyor. Kullanıcının gördüğüne bakıyor; bileşenin içini yeniden yazsan da kullanıcı aynı şeyi görüyorsa testler geçer.

Çalıştır:

PS C:\kod\tft-kurucu> npx vitest run  RUN  v5.0.3 C:/kod/tft-kurucu  ✓ src/birimler.test.ts (2 tests) 3ms ❯ src/TakimPaneli.test.tsx (3 tests | 3 failed) 6ms   ❯ TakimPaneli (3)     × takım boşken bilgi yazısı gösterir 4ms     × altın yetmezse uyarı gösterir 0ms     × Çıkar düğmesi birimin id'sini bildirir 0ms ⎯⎯⎯⎯⎯⎯⎯ Failed Tests 3 ⎯⎯⎯⎯⎯⎯⎯  FAIL  src/TakimPaneli.test.tsx > TakimPaneli > takım boşken bilgi yazısı gösterirReferenceError: document is not defined ❯ render node_modules/@testing-library/react/dist/pure.js:265:5 ❯ src/TakimPaneli.test.tsx:10:9      8| describe("TakimPaneli", () => {      9|     it("takım boşken bilgi yazısı gösterir", () => {     10|         render(       |         ^     11|             <TakimPaneli     12|                 takim={[]}...

vite.config.ts'i aç. Bu dosya Vite şablonundan geldiği için tek tırnak ve 2 boşluk girinti kullanıyor; kendi stiline çevirmene gerek yok, yalnız işaretli satırları ekle:

1/// <reference types="vitest/config" />2import react from '@vitejs/plugin-react'3import { defineConfig } from 'vite'4 5// https://vite.dev/config/6export default defineConfig({7  plugins: [react()],8  test: {9    environment: 'jsdom',10    globals: true,11  },12})

• /// <reference types="vitest/config" />: TypeScript'e "bu dosyada test diye bir bölüm olabilir" der. Yazmazsan npm run build sırasında tsc bu bölüme 'test' does not exist in type 'UserConfigExport' diye itiraz eder.
• environment: 'jsdom': testleri jsdom'un sahte sayfasında çalıştır; document artık var.
• globals: true: Vitest'in describe, it, afterEach gibi adlarını her yerden erişilebilir yapar. Testing Library her testten sonra çizdiği bileşeni sayfadan silmek için genel bir afterEach arar; bulamazsa silmez. Bu satırı unutursan ne olacağı hemen aşağıdaki kartta.

Son olarak test betiğini ayarla ve çalıştır:

PS C:\kod\tft-kurucu> npm pkg set scripts.test="vitest run"PS C:\kod\tft-kurucu> npm test > tft-kurucu@0.0.0 test> vitest run   RUN  v5.0.3 C:/kod/tft-kurucu  ✓ src/birimler.test.ts (2 tests) 3ms ✓ src/TakimPaneli.test.tsx (3 tests) 153ms  Test Files  2 passed (2)      Tests  5 passed (5)   Start at  04:03:00   Duration  1.43s (environment 77%, import 11%, tests 7%, transform 3%, worker 2%)

İlk çalıştırmada jsdom'un yüklenmesi birkaç saniye sürebilir; sonrakiler hızlanır.

PS C:\kod\tft-kurucu> npx vitest run  RUN  v5.0.3 C:/kod/tft-kurucu  ✓ src/birimler.test.ts (2 tests) 4ms ❯ src/TakimPaneli.test.tsx (3 tests | 1 failed) 134ms   ❯ TakimPaneli (3)     ✓ takım boşken bilgi yazısı gösterir 24ms     ✓ altın yetmezse uyarı gösterir 5ms     × Çıkar düğmesi birimin id'sini bildirir 104ms ⎯⎯⎯⎯⎯⎯⎯ Failed Tests 1 ⎯⎯⎯⎯⎯⎯⎯  FAIL  src/TakimPaneli.test.tsx > TakimPaneli > Çıkar düğmesi birimin id'sini bildirirTestingLibraryElementError: Found multiple elements with the role "button" and name "Çıkar" Here are the matching elements:...

#ESLint ve Prettier: kod kalitesinin iki bekçisi

Testler "kod doğru sonucu veriyor mu" diye sorar. İki soru daha var: "kodda şüpheli bir kalıp var mı?" ve "kod herkesin okuyabileceği tek bir biçimde mi?" Bunlara iki ayrı araç bakar.

#ESLint

oyun-hesap'a dön. Bu projede ilk kez paket kuracaksın; önce klasörün köküne .gitignore adında bir dosya aç ve içine tek satır yaz (Ders 14):

1node_modules

Sonra ESLint'i kur. Bu ders ESLint 10.12.0 ile denendi:

PS C:\kod\oyun-hesap> npm install --save-dev eslint@latest @eslint/js@latest globals@latest added 79 packages, and audited 80 packages in 4s 18 packages are looking for funding  run `npm fund` for details found 0 vulnerabilities

ESLint'in ayarları klasörün kökündeki eslint.config.js dosyasında durur. Bu, ESLint'in kendi belgesindeki kalıbın Node'a uyarlanmış hâli:

1import { defineConfig } from "eslint/config"2import js from "@eslint/js"3import globals from "globals"4 5export default defineConfig([6    {7        files: ["**/*.js"],8        plugins: { js },9        extends: ["js/recommended"],10        languageOptions: {11            globals: globals.node12        }13    }14])

• files: ["**/*.js"]: bütün klasörlerdeki .js dosyalarına uygula. node_modules'a ESLint zaten bakmaz.
• extends: ["js/recommended"]: ESLint ekibinin önerdiği kural takımını aç.
• globals: globals.node: Node'da tanımlı olan console, process gibi adları tanıt. globals paketi bu adların listesini taşır.

Şimdi bilerek dağınık bir dosya yaz, rapor.js. Her maçın KDA'sını yazacak ama içinde dört kusur var:

1import { kdaMetni } from "./kda.js"2import { faiz } from "./faiz.js"3 4const maclar = [5    { sampiyon: "Ahri", kill: 7, olum: 2, asist: 9 },6    { sampiyon: "Jinx", kill: 10, olum: 0, asist: 6 }7]8 9for (const mac of maclar) {10    if (mac.olum = 0) {11        console.log(mac.sampiyon + " hiç ölmedi")12    }13    console.log(mac.sampiyon + ": " + kdaMetni(mac.kill, mac.olum, mac.asit))14}15console.log("Toplam maç: " + macSayisi)

PS C:\kod\oyun-hesap> npx eslint . C:\kod\oyun-hesap\rapor.js   2:10  error  'faiz' is defined but never used                                 no-unused-vars  10:9   error  Expected a conditional expression and instead saw an assignment  no-cond-assign  10:9   error  Unexpected constant condition                                    no-constant-condition  15:30  error  'macSayisi' is not defined                                       no-undef ✖ 4 problems (4 errors, 0 warnings)

Her satır: satır:sütun, önem (error ya da warning), açıklama ve en sağda kuralın adı. Kuralın adını aratırsan ESLint'in sitesinde örnekli bir sayfa bulursun.

if (mac.olum = 0) satırını hatırla: Ders 2'de bu hatanın mesaj vermeden yanlış çalıştığını, yani bir mantık hatası olduğunu görmüştün. Node hiç uyarmaz; ESLint kodu çalıştırmadan yakaladı. Dört kusuru da düzelt:

1import { kdaMetni } from "./kda.js"2 3const maclar = [4    { sampiyon: "Ahri", kill: 7, olum: 2, asist: 9 },5    { sampiyon: "Jinx", kill: 10, olum: 0, asist: 6 }6]7 8for (const mac of maclar) {9    if (mac.olum === 0) {10        console.log(mac.sampiyon + " hiç ölmedi")11    }12    console.log(mac.sampiyon + ": " + kdaMetni(mac.kill, mac.olum, mac.asit))13}14console.log("Toplam maç: " + maclar.length)

PS C:\kod\oyun-hesap> npx eslint .PS C:\kod\oyun-hesap> node rapor.jsAhri: NaNJinx hiç ölmediJinx: KusursuzToplam maç: 2

ESLint artık hiçbir şey söylemiyor (sessizlik "sorun yok" demek), ama çıktı yanlış: Ahri: NaN. 12. satırdaki mac.asit yazım hatası, ESLint'in göremeyeceği türden bir hata; obje alanlarının adını bilmez. Jinx'te Kusursuz doğru görünüyor ama o da şans: ölüm 0 olduğu için hesaba hiç girilmedi. asit'i asist yap:

PS C:\kod\oyun-hesap> node rapor.jsAhri: 8.00Jinx hiç ölmediJinx: KusursuzToplam maç: 2

Bu küçük olay, araçların neden birlikte kullanıldığını gösteriyor:

PS C:\kod\oyun-hesap> npx eslint . C:\kod\oyun-hesap\rapor.js  10:9  error  'console' is not defined  no-undef  12:5  error  'console' is not defined  no-undef  14:1  error  'console' is not defined  no-undef ✖ 3 problems (3 errors, 0 warnings)

#Prettier

Kur. --save-exact sürümü tam olarak sabitler; biçimlendiricinin sürümü değişince biçim de değişebileceği için Prettier'ın kendi belgesi bunu öneriyor:

PS C:\kod\oyun-hesap> npm install --save-dev --save-exact prettier added 1 package, and audited 81 packages in 900ms 19 packages are looking for funding  run `npm fund` for details found 0 vulnerabilities

Ayarları .prettierrc adlı bir JSON dosyasına yaz. Prettier'ın varsayılanları noktalı virgül ve 2 boşluk; bu dört satır onu kursun stiline uyduruyor:

1{2    "semi": false,3    "tabWidth": 4,4    "trailingComma": "none",5    "endOfLine": "auto"6}

• semi: false: satır sonuna noktalı virgül koyma.
• tabWidth: 4: girinti 4 boşluk.
• trailingComma: "none": çok satırlı obje ve dizilerin son elemanından sonra virgül koyma.
• endOfLine: "auto": satır sonlarına dokunma. Windows'ta VS Code satırları başka, npm başka işaretle bitirir (Ders 14'teki LF will be replaced by CRLF uyarısı bundandı). Bu satır olmazsa Prettier VS Code'da yazdığın her dosyayı "biçimsiz" sayar.

Bir de .prettierignore dosyası aç. İçine yazdığın dosyalara Prettier dokunmaz:

1package.json2package-lock.json

Bu iki dosyayı npm kendisi yazıyor; Prettier'ın onları 4 boşluğa çevirmesi, npm'in her seferinde 2'ye geri çevirmesi gereksiz bir çekişme olur. Prettier .gitignore'daki dosyaları da kendiliğinden atlar.

Şimdi bir ekip arkadaşının aceleyle yazdığı bir dosya düşün, seviye.js:

1export function seviyeHesapla(xp){2  const seviye=Math.floor(xp/100)+1;3    if(seviye>18){return 18}4  return seviye;5}

Çalışıyor ama okuması yorucu. Önce denetle, sonra düzelt:

PS C:\kod\oyun-hesap> npx prettier . --checkChecking formatting...[warn] seviye.js[warn] Code style issues found in the above file. Run Prettier with --write to fix.PS C:\kod\oyun-hesap> npx prettier . --write.prettierrc 18ms (unchanged)altin.js 9ms (unchanged)altin.test.js 8ms (unchanged)eslint.config.js 2ms (unchanged)faiz.js 2ms (unchanged)faiz.test.js 3ms (unchanged)kda.js 1ms (unchanged)kda.test.js 3ms (unchanged)maclar.js 2ms (unchanged)maclar.test.js 3ms (unchanged)ornek-maclar.json 1ms (unchanged)rapor.js 2ms (unchanged)seviye.js 1ms

--check yalnızca bakar ve biçimsiz dosyaları listeler; --write onları yeniden yazar. (unchanged) yazanlara dokunmadı: bu kursta yazdığın kod zaten bu biçimde. Yalnızca seviye.js değişti:

1export function seviyeHesapla(xp) {2    const seviye = Math.floor(xp / 100) + 13    if (seviye > 18) {4        return 185    }6    return seviye7}

Prettier anlamı değiştirmedi; yalnızca boşlukları, girintiyi ve satırları düzenledi, noktalı virgülleri attı. Ders 7'de "çoğu ekip bunu bir araçla kendiliğinden düzenler" demiştik: o araç bu.

#Komutları betiğe bağla

Üç komutu her seferinde hatırlamak yerine package.json'a betik olarak yaz. Adlar dünyada yaygın olanlar; başka bir projede de npm run lint yazınca ne olacağını bilirsin:

PS C:\kod\oyun-hesap> npm pkg set scripts.lint="eslint ." scripts.format="prettier . --write" scripts.format:check="prettier . --check"PS C:\kod\oyun-hesap> npm run lint > oyun-hesap@1.0.0 lint> eslint . PS C:\kod\oyun-hesap> npm run format:check > oyun-hesap@1.0.0 format:check> prettier . --check Checking formatting...All matched files use Prettier code style!

package.json'daki scripts bölümü artık şöyle:

6  "scripts": {7    "test": "node --test",8    "lint": "eslint .",9    "format": "prettier . --write",10    "format:check": "prettier . --check"11  },

#GitHub Actions: her push'ta test

Testlerin, ESLint'in ve Prettier'ın bir zayıf noktası var: çalıştırmayı hatırlaman gerekiyor. Yorgun bir akşam unutursun, ekip arkadaşın hiç kurmamıştır. Çözüm, bu komutları senin bilgisayarında değil, GitHub'da, her gönderimde kendiliğinden çalıştırmak.

GitHub'ın CI hizmetinin adı GitHub Actions. Ona ne yapacağını, deponun içindeki bir dosyayla anlatırsın.

#YAML'a hızlı bakış

YAML, JSON gibi bir veri biçimi ama süslü parantez ve tırnak yerine girinti kullanır. Üç kural yeter:

• ad: değer bir alan. Değer metinse tırnağa genelde gerek yok.
• Bir alanın altındaki alanlar daha içeride yazılır. Girinti boşlukla olur, sekmeyle olmaz. Aynı seviyedekiler aynı sütunda başlamalı.
• - ile başlayan satırlar bir listenin elemanları.

JavaScript'te girinti yalnızca okunuş içindi; YAML'da ise anlamın kendisi. Bir satırı bir boşluk kaydırmak, o alanı başka bir yere taşır.

#İş akışı dosyası

oyun-hesap'ta önce .github klasörünü, onun içinde workflows klasörünü, onun içinde de test.yml dosyasını oluştur. VS Code'da New File'a .github/workflows/test.yml yazarsan klasörleri kendisi açar. Dosyanın tamamı:

1name: Testler2 3on: [push, pull_request]4 5jobs:6    test:7        runs-on: ubuntu-latest8        steps:9            - uses: actions/checkout@v710            - uses: actions/setup-node@v711              with:12                  node-version: 2413            - run: npm ci14            - run: npm run lint15            - run: npm run format:check16            - run: npm test

Satır satır:

• name: Testler: iş akışının adı; Actions sekmesinde bu adla görünür.
• on: [push, pull_request]: ne zaman çalışsın? Her push'ta ve her pull request'te (Ders 52). Köşeli parantez YAML'da kısa liste yazımıdır.
• jobs: altında bir iş var, adı test. runs-on: ubuntu-latest: GitHub bu iş için Ubuntu (Linux) yüklü, temiz, geçici bir bilgisayar açar. Senin Windows'unla ilgisi yok; iş bitince silinir.
• steps: adımlar sırayla çalışır. uses: başkasının hazırladığı bir adımı kullanır, run: bir terminal komutu çalıştırır.
• actions/checkout@v7: deponun kodunu o geçici bilgisayara indirir. @v7 kullanılan sürüm.
• actions/setup-node@v7: Node kurar. with: ona ayar verir; node-version: 24. with'in uses ile aynı sütunda başladığına dikkat et: ikisi de aynı listenin aynı elemanına ait.
• npm ci: paketleri kurar (aşağıda).
• Son üç adım senin betiklerin. Biri başarısız olursa (çıkış kodu 0 değilse) sonraki adımlar çalışmaz ve iş kırmızı biter.

Bu ders actions/checkout ve actions/setup-node'un 7. ana sürümleriyle yazıldı (GitHub'daki sayfalarında Ekim 2026'daki en yeni sürüm). Daha yenisi çıkınca o eylemin GitHub sayfasındaki örneğe bak; @v7'yi @v8 yapmak genellikle yeter.

#npm ci: kilit dosyasına sadık kurulum

CI'da npm install yerine npm ci kullanılır (clean install, temiz kurulum). node_modules'u silip yalnızca package-lock.json'da yazan sürümleri kurar; package.json'a ve kilit dosyasına dokunmaz. Böylece GitHub'daki bilgisayar, seninkiyle aynı paket sürümlerini kullanır. Bunun için kilit dosyasının Git'te olması ve package.json ile uyuşması şart.

PS C:\kod\oyun-hesap> npm cinpm error code EUSAGEnpm errornpm error `npm ci` can only install packages when your package.json and package-lock.json or npm-shrinkwrap.json are in sync. Please update your lock file with `npm install` before continuing.npm errornpm error Missing: prettier@3.9.10 from lock filenpm errornpm error Clean install a project...

#Gönder ve izle

Şimdi her şeyi commit'le. oyun-hesap'ta git init'i dersin başında yapmıştın; bu, deponun ilk kaydı:

PS C:\kod\oyun-hesap> git add .warning: in the working copy of 'package-lock.json', LF will be replaced by CRLF the next time Git touches itwarning: in the working copy of 'package.json', LF will be replaced by CRLF the next time Git touches itPS C:\kod\oyun-hesap> git commit -m "Ders 53: testler, ESLint, Prettier ve GitHub Actions"[master (root-commit) 19923d7] Ders 53: testler, ESLint, Prettier ve GitHub Actions 18 files changed, 1220 insertions(+) create mode 100644 .github/workflows/test.yml create mode 100644 .gitignore create mode 100644 .prettierignore create mode 100644 .prettierrc create mode 100644 altin.js create mode 100644 altin.test.js create mode 100644 eslint.config.js create mode 100644 faiz.js create mode 100644 faiz.test.js create mode 100644 kda.js create mode 100644 kda.test.js create mode 100644 maclar.js create mode 100644 maclar.test.js create mode 100644 ornek-maclar.json create mode 100644 package-lock.json create mode 100644 package.json create mode 100644 rapor.js create mode 100644 seviye.js

Listede node_modules yok: ESLint'i kurmadan önce açtığın .gitignore işini yaptı. package-lock.json ise var; npm ci için gerekli. .github/workflows/test.yml de var; GitHub iş akışını oradan okuyacak.

LF will be replaced by CRLF uyarıları npm'in yazdığı iki dosya için çıkar, Ders 14'teki gibi zararsız. Kayıt kimliği ve satır sayısı sende farklı olur.

Sonra GitHub'a gönder. Depoyu GitHub'da Ders 7'deki gibi oyun-hesap adıyla, boş olarak (README eklemeden) oluştur ve şu üç komutu çalıştır; adresteki kullanıcı adı seninki olacak:

git remote add origin https://github.com/denizyilmaz/oyun-hesap.gitgit branch -M maingit push -u origin main

Push'un çıktısı Ders 7'dekine benzer; sonunda branch 'main' set up to track 'origin/main'. satırını görürsün. Push biter bitmez iş akışı başlar. GitHub'da deponun sayfasını aç:

Aynı tik ya da çarpı deponun ana sayfasında son commit'in yanında ve pull request sayfasının altında da görünür. GitHub'ın arayüzü zaman zaman değişir; sekmelerin yeri ya da adı biraz farklı olabilir, ama Actions sekmesi uzun süredir aynı yerde. Herkese açık depolarda GitHub'ın standart çalıştırıcıları ücretsiz; özel depolarda ücretsiz planda ayda 2.000 dakika var. Bu projenin bir çalıştırması bir dakikayı bulmaz.

Ekipler genelde bir adım daha atar: GitHub'da ana dal için "testler yeşil olmadan pull request birleştirilemesin" kuralı koyar. Böylece kırmızı kod ana dala hiç giremez. Bu ayar deponun Settings sayfasında; kendi projelerinde şimdilik gerek yok, iş yerinde göreceksin.

#Görevler

Görev 1–5'i oyun-hesap'ta, Görev 6'yı tft-kurucu'da yap. Her görevde önce testi yaz ve bir kez kırmızı gör: kodu geçici olarak bozarak ya da testi koddan önce yazarak. Kırmızıyı hiç görmediğin bir teste güvenme.

1export function kalanCan(hp, hasar) {2    return Math.max(0, hp - hasar)3}

1import { describe, it } from "node:test"2import assert from "node:assert/strict"3import { kalanCan } from "./can.js"4 5describe("kalanCan", () => {6    it("hasarı candan düşer", () => {7        assert.strictEqual(kalanCan(100, 30), 70)8    })9 10    it("hasar cana eşitse 0 kalır", () => {11        assert.strictEqual(kalanCan(100, 100), 0)12    })13 14    it("hasar candan büyükse eksiye düşmez", () => {15        assert.strictEqual(kalanCan(100, 250), 0)16    })17 18    it("hasar 0 ise can değişmez", () => {19        assert.strictEqual(kalanCan(100, 0), 100)20    })21 22    it("eksi hasar hata fırlatır", () => {23        assert.throws(() => kalanCan(100, -20), {24            message: "Hasar eksi olamaz"25        })26    })27})

PS C:\kod\oyun-hesap> node --test can.test.js▶ kalanCan  ✔ hasarı candan düşer (0.5865ms)  ✔ hasar cana eşitse 0 kalır (0.1088ms)  ✔ hasar candan büyükse eksiye düşmez (0.0998ms)  ✔ hasar 0 ise can değişmez (0.1024ms)  ✖ eksi hasar hata fırlatır (0.5605ms)✖ kalanCan (2.9487ms)... test at can.test.js:22:5✖ eksi hasar hata fırlatır (0.5605ms)  AssertionError [ERR_ASSERTION]: Missing expected exception.      at TestContext.<anonymous> (file:///C:/kod/oyun-hesap/can.test.js:23:16)      ...

1export function kalanCan(hp, hasar) {2    if (hasar < 0) {3        throw new Error("Hasar eksi olamaz")4    }5    return Math.max(0, hp - hasar)6}

PS C:\kod\oyun-hesap> node --test can.test.js▶ kalanCan  ✔ hasarı candan düşer (0.6488ms)  ✔ hasar cana eşitse 0 kalır (0.1203ms)  ✔ hasar candan büyükse eksiye düşmez (0.1057ms)  ✔ hasar 0 ise can değişmez (0.1052ms)  ✔ eksi hasar hata fırlatır (0.5739ms)✔ kalanCan (2.9694ms)ℹ tests 5ℹ suites 1ℹ pass 5ℹ fail 0ℹ cancelled 0ℹ skipped 0ℹ todo 0ℹ duration_ms 68.6723

1export function yetenekHazirMi(mana, bedel) {2    return mana > bedel3}

1import { describe, it } from "node:test"2import assert from "node:assert/strict"3import { yetenekHazirMi } from "./mana.js"4 5describe("yetenekHazirMi", () => {6    it("mana bedelden fazlaysa hazır", () => {7        assert.strictEqual(yetenekHazirMi(100, 50), true)8    })9 10    it("mana bedelden azsa hazır değil", () => {11        assert.strictEqual(yetenekHazirMi(49, 50), false)12    })13 14    it("mana bedele tam eşitse hazır", () => {15        assert.strictEqual(yetenekHazirMi(50, 50), true)16    })17})

PS C:\kod\oyun-hesap> node --test mana.test.js▶ yetenekHazirMi  ✔ mana bedelden fazlaysa hazır (0.5348ms)  ✔ mana bedelden azsa hazır değil (0.7306ms)  ✖ mana bedele tam eşitse hazır (0.8329ms)✖ yetenekHazirMi (3.0363ms)... test at mana.test.js:14:5✖ mana bedele tam eşitse hazır (0.8329ms)  AssertionError [ERR_ASSERTION]: Expected values to be strictly equal:   false !== true       at TestContext.<anonymous> (file:///C:/kod/oyun-hesap/mana.test.js:15:16)      ...

1export function yetenekHazirMi(mana, bedel) {2    return mana >= bedel3}

PS C:\kod\oyun-hesap> node --test mana.test.js▶ yetenekHazirMi  ✔ mana bedelden fazlaysa hazır (0.5605ms)  ✔ mana bedelden azsa hazır değil (0.5934ms)  ✔ mana bedele tam eşitse hazır (0.1117ms)✔ yetenekHazirMi (2.1475ms)ℹ tests 3ℹ suites 1ℹ pass 3ℹ fail 0...

1import { describe, it } from "node:test"2import assert from "node:assert/strict"3import { seriAltini } from "./seri.js"4 5describe("seriAltini", () => {6    it("seri yoksa ya da 1 ise altın yok", () => {7        assert.strictEqual(seriAltini(0), 0)8        assert.strictEqual(seriAltini(1), 0)9    })10 11    it("2 ve 3'lük seri 1 altın", () => {12        assert.strictEqual(seriAltini(2), 1)13        assert.strictEqual(seriAltini(3), 1)14    })15 16    it("4'lük seri 2 altın", () => {17        assert.strictEqual(seriAltini(4), 2)18    })19 20    it("5 ve üstü 3 altın", () => {21        assert.strictEqual(seriAltini(5), 3)22        assert.strictEqual(seriAltini(12), 3)23    })24})

1export function seriAltini(seri) {2    if (seri >= 5) {3        return 34    }5    if (seri === 4) {6        return 27    }8    if (seri >= 2) {9        return 110    }11    return 012}

PS C:\kod\oyun-hesap> node --test seri.test.js▶ seriAltini  ✔ seri yoksa ya da 1 ise altın yok (0.6365ms)  ✔ 2 ve 3'lük seri 1 altın (0.1373ms)  ✔ 4'lük seri 2 altın (0.0992ms)  ✔ 5 ve üstü 3 altın (0.1832ms)✔ seriAltini (2.7011ms)ℹ tests 4ℹ suites 1ℹ pass 4ℹ fail 0ℹ cancelled 0ℹ skipped 0ℹ todo 0ℹ duration_ms 75.1132

1[2    { "esya": "Uzun Kılıç", "fiyat": 350, "adet": 2 },3    { "esya": "Can İksiri", "fiyat": 50, "adet": 3 }4]

1import { readFile } from "node:fs/promises"2 3export async function envanterOzeti(dosyaAdi) {4    const metin = await readFile(dosyaAdi, "utf8")5    const esyalar = JSON.parse(metin)6    const toplam = esyalar.reduce(7        (birikim, esya) => birikim + esya.fiyat * esya.adet,8        09    )10    return { cesit: esyalar.length, toplam }11}

1import { describe, it } from "node:test"2import assert from "node:assert/strict"3import { envanterOzeti } from "./envanter.js"4 5describe("envanterOzeti", () => {6    it("çeşit sayısını ve toplam değeri verir", async () => {7        const ozet = await envanterOzeti("envanter.json")8        assert.deepEqual(ozet, { cesit: 2, toplam: 850 })9    })10 11    it("boş envanterde ikisi de 0", async () => {12        const ozet = await envanterOzeti("bos-envanter.json")13        assert.deepEqual(ozet, { cesit: 0, toplam: 0 })14    })15 16    it("dosya yoksa hata verir", async () => {17        await assert.rejects(envanterOzeti("yok.json"), { code: "ENOENT" })18    })19})

PS C:\kod\oyun-hesap> node --test envanter.test.js▶ envanterOzeti  ✔ çeşit sayısını ve toplam değeri verir (3.8207ms)  ✔ boş envanterde ikisi de 0 (1.0371ms)  ✔ dosya yoksa hata verir (1.138ms)✔ envanterOzeti (7.3764ms)ℹ tests 3ℹ suites 1ℹ pass 3ℹ fail 0ℹ cancelled 0ℹ skipped 0ℹ todo 0ℹ duration_ms 74.1101

PS C:\kod\oyun-hesap> npm pkg set scripts.kontrol="npm run lint && npm run format:check && npm test"PS C:\kod\oyun-hesap> npm run kontrol > oyun-hesap@1.0.0 kontrol> npm run lint && npm run format:check && npm test  > oyun-hesap@1.0.0 lint> eslint .  > oyun-hesap@1.0.0 format:check> prettier . --check Checking formatting...[warn] can.js[warn] Code style issues found in the above file. Run Prettier with --write to fix.

PS C:\kod\oyun-hesap> npm run format > oyun-hesap@1.0.0 format> prettier . --write .github/workflows/test.yml 11ms (unchanged).prettierrc 15ms (unchanged)altin.js 8ms (unchanged)altin.test.js 8ms (unchanged)bos-envanter.json 1ms (unchanged)can.js 1mscan.test.js 4ms (unchanged)...

PS C:\kod\oyun-hesap> npm run kontrol > oyun-hesap@1.0.0 kontrol> npm run lint && npm run format:check && npm test  > oyun-hesap@1.0.0 lint> eslint .  C:\kod\oyun-hesap\can.js  5:11  error  'kalan' is assigned a value but never used  no-unused-vars ✖ 1 problem (1 error, 0 warnings)

PS C:\kod\oyun-hesap> npm run kontrol > oyun-hesap@1.0.0 kontrol> npm run lint && npm run format:check && npm test...Checking formatting...All matched files use Prettier code style! > oyun-hesap@1.0.0 test> node --test...ℹ tests 29ℹ suites 5ℹ pass 29ℹ fail 0...

1import { describe, it, expect, vi } from "vitest"2import { render, screen } from "@testing-library/react"3import userEvent from "@testing-library/user-event"4import Dukkan from "./Dukkan.tsx"5 6describe("Dukkan", () => {7    it("boş aramada bütün birimleri listeler", () => {8        render(<Dukkan onEkle={vi.fn()} />)9        expect(screen.getAllByRole("button", { name: "Ekle" })).toHaveLength(8)10    })11 12    it("olmayan birimde uyarır ve bir şey eklemez", async () => {13        const onEkle = vi.fn()14        render(<Dukkan onEkle={onEkle} />)15        const kutu = screen.getByPlaceholderText("Birim ara, Enter ile ekle")16        await userEvent.type(kutu, "xyz{Enter}")17        expect(screen.getByText("Bu adla birim yok.")).toBeTruthy()18        expect(onEkle).not.toHaveBeenCalled()19    })20 21    it("Enter ilk eşleşeni ekler ve kutuyu boşaltır", async () => {22        const onEkle = vi.fn()23        render(<Dukkan onEkle={onEkle} />)24        const kutu = screen.getByPlaceholderText("Birim ara, Enter ile ekle")25        await userEvent.type(kutu, "lu{Enter}")26        expect(onEkle).toHaveBeenCalledWith({ ad: "Lux", maliyet: 3 })27        expect(kutu).toHaveProperty("value", "")28    })29})

PS C:\kod\tft-kurucu> npm test > tft-kurucu@0.0.0 test> vitest run   RUN  v5.0.3 C:/kod/tft-kurucu  ✓ src/birimler.test.ts (2 tests) 3ms ✓ src/TakimPaneli.test.tsx (3 tests) 200ms ✓ src/Dukkan.test.tsx (3 tests) 387ms  Test Files  3 passed (3)      Tests  8 passed (8)   Start at  04:03:20   Duration  9.64s (environment 83%, import 13%, tests 2%, transform 1%)

1name: Testler2 3on: [push, pull_request]4 5jobs:6    test:7        runs-on: ubuntu-latest8        steps:9            - uses: actions/checkout@v710            - uses: actions/setup-node@v711              with:12                  node-version: 2413            - run: npm ci14            - run: npm run lint15            - run: npm test16            - run: npm run build

#Kendini sına

import { test } from "node:test"import assert from "node:assert/strict"import { faiz } from "./faiz.js" test("eksi altında faiz 0", () => {    assert.strictEqual(faiz(-5), 0)})

assert.strictEqual(altinPaylas(1234, 5), { kisiBasi: 246, artan: 4 })

#Kayıt noktası

Bir sonraki derste bütün bu projeleri bir portföye dönüştüreceksin: GitHub profilin, README'lerin, CV'n ve iş başvuruların.