Test Ortamını Kurma

jQuery kodunuz için testler yazmak, sağlam ve bakımı kolay web uygulamaları oluşturmak açısından çok önemlidir. Testler hataları erken yakalamanıza yardımcı olur ve kodunuzun beklendiği gibi çalışmasını sağlar.

• Gerilemeleri Önler: Yeni değişikliklerin mevcut işlevleri bozmamasını sağlar.
• Kod Kalitesini Artırır: Sizi modüler ve test edilebilir kod yazmaya yönlendirir.
• İş Birliğini Kolaylaştırır: Bileşenlerin nasıl çalışması gerektiğine dair açık bir belge sağlar.

jQuery dâhil JavaScript'i test etmek için bir test çalıştırıcısına ihtiyacınız vardır. Bu araç testlerinizi çalıştırır ve sonuçları bildirir.

Yaygın olarak kullanılan iki seçenek şunlardır:

• Jest: Facebook tarafından geliştirilen, modern ve zengin özelliklere sahip bir test çerçevesidir. React için yaygın olarak kullanılır, ancak her türlü JS için de uygundur.
• QUnit: jQuery'ye özel bir test çerçevesidir; Jest'ten daha basit, ancak daha az özelliklidir.

Bu derste, kapsamlı özellikleri ve geniş kullanım alanı nedeniyle Jest'i kurmaya odaklanacağız.

Jest'i kurmadan önce bir Node.js projesine ihtiyacınız vardır. Henüz bir projeniz yoksa kolayca oluşturabilirsiniz.

Terminalde proje dizininize gidin ve şunu çalıştırın:

Bu komut, projenizin bağımlılıklarını ve betiklerini yöneten bir package.json dosyası oluşturur.

Şimdi Jest'i kuralım. jQuery çoğu zaman tarayıcının DOM'u (Document Object Model) ile etkileşime girdiğinden jest-environment-jsdom paketine de ihtiyacımız olacaktır. JSDOM, Node.js içinde tarayıcıya benzer bir ortam sağlar; böylece jQuery kodunuz sanal bir DOM'u değiştirebilir.

Bunları geliştirme bağımlılıkları olarak kurun:

Bu işlem Jest'i ve JSDOM'u package.json dosyanıza ekler.

Jest'e JSDOM kullanmasını söylemek için onu yapılandırmanız gerekir. Bunu package.json dosyanıza bir test betiği ekleyerek veya bir jest.config.js dosyası oluşturarak yapabilirsiniz.

Seçenek 1: package.json içinde

{
  "name": "my-jquery-app",
  "version": "1.0.0",
  "scripts": {
    "test": "jest --env=jsdom"
  },
  "devDependencies": {
    "jest": "^29.x.x",
    "jest-environment-jsdom": "^29.x.x"
  }
}

--env=jsdom seçeneği, Jest'in testleri JSDOM ortamında çalıştırmasını sağlar.

Jest, test dosyalarını __tests__ dizininde veya .test.js (ya da .spec.js) ile biten dosyalarda arar. Basit bir test dosyası oluşturalım.

Proje kökünüzde __tests__ adlı bir dizin oluşturun, ardından __tests__/my-feature.test.js gibi bir dosya ekleyin:

// __tests__/my-feature.test.js

describe('My Feature', () => {
  test('should do something basic', () => {
    // Test logic will go here
  });
});

describe ilişkili testleri gruplar; test (veya it) ise tek bir test senaryosu tanımlar.

jQuery kodunu test etmek için jQuery'nin kendisini test dosyanıza aktarmanız gerekir. jQuery'yi npm üzerinden kurabilirsiniz: npm install jquery.

Ardından test dosyanızda onu içe aktarabilirsiniz:

// __tests__/my-feature.test.js
const $ = require('jquery');

describe('My jQuery Feature', () => {
  // Setup for each test
  beforeEach(() => {
    // Create a fresh DOM element for each test
    document.body.innerHTML = '
Hello
';
  });

  test('should add a class to the element', () => {
    const element = $('#test-element');
    element.addClass('highlight');
    expect(element.hasClass('highlight')).toBe(true);
  });
});

Doğrulamalar, kodunuzun doğru davrandığını doğrulamanızı sağlar. Jest, doğrulamalar oluşturmak için expect() işlevini eşleştiricilerle birlikte kullanır.

Aşağıda basit bir JavaScript örneği verilmiştir (jQuery'ye özel değildir, ancak doğrulamaları gösterir):

Jest zengin bir eşleştirici kümesi sunar. Sık kullanacağınız birkaç eşleştirici şunlardır:

• .toBe(value): Tam eşitliği kontrol eder (=== gibi).
• .toEqual(value): Nesnelerin veya dizilerin derin eşitliğini kontrol eder.
• .not.toBe(value): Eşitsizliği kontrol eder.
• .toBeTruthy() / .toBeFalsy(): Doğruluk veya yanlışlık durumunu kontrol eder.
• .toContain(item): Bir dizinin veya dizenin bir öğe içerip içermediğini kontrol eder.

jQuery için bunları genellikle jQuery yöntemleriyle birleştirirsiniz; örneğin expect($element.text()).toBe('Expected Text');

Test dosyalarınız hazır olduğunda onları çalıştırmak oldukça basittir. package.json içinde tanımladığımız betiği kullanmanız yeterlidir:

Jest tüm test dosyalarınızı bulur, bunları JSDOM ortamında çalıştırır ve sonuçları terminalinizde bildirir. Hangi testlerin başarılı, hangilerinin başarısız olduğunu gösterir ve başarısızlıklarla ilgili ayrıntılar sunar.

Jest ve JSDOM kullanarak jQuery için bir test ortamının nasıl kurulacağını öğrendiniz. DOM desteğine sahip temel bir Jest kurulumu için aşağıdaki komut ve yapılandırmalardan hangileri gereklidir?

Bu derste jQuery uygulamalarınız için Jest kullanarak sağlam bir test ortamı oluşturmayı öğrendiniz.

• npm init ile bir Node.js projesi başlattık.
• Tarayıcı ortamını taklit etmek için Jest'i ve jest-environment-jsdom paketini kurduk.
• JSDOM kullanması için Jest'i package.json içinde yapılandırdık.
• Test dosyalarının nasıl düzenleneceğini, jQuery'nin nasıl içe aktarılacağını ve Jest'in eşleştiricilerini kullanarak temel doğrulamaların nasıl yazılacağını öğrendik.

Bu temel yapı, etkili testler yazmanızı ve jQuery kodunuzun güvenilir ve bakımı kolay olmasını sağlar.