{"id":40914,"date":"2026-03-02T10:40:51","date_gmt":"2026-03-02T07:40:51","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=40914"},"modified":"2026-03-02T10:40:51","modified_gmt":"2026-03-02T07:40:51","slug":"angular-uygulamalarinda-httpclient-isteklerini-test-etmek","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-httpclient-isteklerini-test-etmek\/","title":{"rendered":"Angular Uygulamalar\u0131nda HttpClient \u0130steklerini Test Etmek"},"content":{"rendered":"

<\/p>\n

Angular Uygulamalar\u0131nda HttpClient \u0130steklerini Test Etmek<\/h2>\n

Angular uygulamalar\u0131 genellikle arka u\u00e7 servislerle ileti\u015fim kurmak i\u00e7in HttpClient<\/code> mod\u00fcl\u00fcn\u00fc kullan\u0131r. Bu ileti\u015fim, bir uygulaman\u0131n temel i\u015flevselli\u011finin \u00f6nemli bir par\u00e7as\u0131 oldu\u011fundan, HTTP isteklerinin do\u011fru bir \u015fekilde yap\u0131ld\u0131\u011f\u0131ndan ve beklenen yan\u0131tlar\u0131 i\u015fledi\u011finden emin olmak i\u00e7in kapsaml\u0131 bir \u015fekilde test edilmesi kritik \u00f6neme sahiptir. Bu makale, Angular’da HttpClient<\/code> isteklerini test etmenin \u00e7e\u015fitli y\u00f6nlerini, kullan\u0131lan ara\u00e7lar\u0131 ve en iyi uygulamalar\u0131 derinlemesine inceleyecektir.<\/p>\n

Temel Kavramlar ve Ara\u00e7lar<\/h2>\n

Angular test stratejisi, genellikle birim testleri ve entegrasyon testlerinin bir kombinasyonunu i\u00e7erir. HttpClient<\/code> isteklerini test ederken, bu iki yakla\u015f\u0131m da \u00f6nemlidir.<\/p>\n

Unit Test Nedir? Neden \u00d6nemlidir?<\/h3>\n

Birim testleri, bir yaz\u0131l\u0131m par\u00e7as\u0131n\u0131n (\u00f6rne\u011fin, bir fonksiyon, metot veya s\u0131n\u0131f) en k\u00fc\u00e7\u00fck, ba\u011f\u0131ms\u0131z birimini izole ederek test etme i\u015flemidir. Ama\u00e7, her birimin beklenen \u015fekilde \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 do\u011frulamakt\u0131r. HttpClient<\/code> ba\u011flam\u0131nda, bir servisin HttpClient<\/code> metotlar\u0131n\u0131 do\u011fru bir \u015fekilde \u00e7a\u011f\u0131r\u0131p \u00e7a\u011f\u0131rmad\u0131\u011f\u0131n\u0131, do\u011fru URL’leri ve parametreleri kullan\u0131p kullanmad\u0131\u011f\u0131n\u0131 ve yan\u0131tlar\u0131 d\u00fczg\u00fcn bir \u015fekilde i\u015fleyip i\u015flemedi\u011fini test etmek birim test kapsam\u0131na girer. Bu testler h\u0131zl\u0131 \u00e7al\u0131\u015f\u0131r ve sorunlar\u0131n kayna\u011f\u0131n\u0131 kolayca tespit etmeye yard\u0131mc\u0131 olur.<\/p>\n

Entegrasyon Testi Nedir? Neden \u00d6nemlidir?<\/h3>\n

Entegrasyon testleri, farkl\u0131 yaz\u0131l\u0131m birimlerinin bir araya geldi\u011finde nas\u0131l etkile\u015fim kurdu\u011funu test eder. HttpClient<\/code> i\u00e7in, bir servisin bir komponent ile nas\u0131l etkile\u015fimde bulundu\u011funu, servisin HTTP iste\u011fini yap\u0131p yapmad\u0131\u011f\u0131n\u0131 ve komponentin bu iste\u011fin sonucuna (ba\u015far\u0131 veya hata) nas\u0131l tepki verdi\u011fini test etmek entegrasyon testlerine \u00f6rnektir. Entegrasyon testleri, sistemin daha b\u00fcy\u00fck par\u00e7alar\u0131n\u0131n birlikte sorunsuz \u00e7al\u0131\u015ft\u0131\u011f\u0131ndan emin olmak i\u00e7in \u00f6nemlidir, ancak birim testlerinden daha yava\u015f olabilirler.<\/p>\n

Angular Test Ortam\u0131<\/h3>\n

Angular, testler i\u00e7in g\u00fc\u00e7l\u00fc bir ekosistem sunar. Varsay\u0131lan olarak Jasmine test \u00e7at\u0131s\u0131 ve Karma test \u00e7al\u0131\u015ft\u0131r\u0131c\u0131s\u0131 kullan\u0131l\u0131r. TestBed<\/code>, Angular’\u0131n test mod\u00fcllerini yap\u0131land\u0131rmak ve test edilecek bile\u015fenleri, servisleri veya direktifleri olu\u015fturmak i\u00e7in kulland\u0131\u011f\u0131 ana ara\u00e7t\u0131r. HttpClient<\/code> isteklerini test ederken, TestBed<\/code>‘i HttpClientTestingModule<\/code> ile birlikte kullanarak HTTP isteklerini taklit eden (mock) bir ortam olu\u015ftururuz.<\/p>\n

HttpClientTestingModule<\/code> ve HttpTestingController<\/code><\/h3>\n

Bunlar, Angular’da HTTP isteklerini test etmenin kalbinde yer alan iki ana ara\u00e7t\u0131r:
\n* HttpClientTestingModule<\/code><\/strong>: Bu mod\u00fcl, HttpClient<\/code>‘\u0131n ger\u00e7ek HTTP istekleri yapmak yerine taklit edilmi\u015f bir versiyonunu sa\u011flar. Bu sayede, testler s\u0131ras\u0131nda a\u011f istekleri d\u0131\u015far\u0131ya \u00e7\u0131kmaz ve testler daha h\u0131zl\u0131 ve g\u00fcvenilir bir \u015fekilde \u00e7al\u0131\u015f\u0131r. Ger\u00e7ek bir arka u\u00e7 servisine ba\u011f\u0131ml\u0131l\u0131k ortadan kalkar.
\n* HttpTestingController<\/code><\/strong>: HttpClientTestingModule<\/code> ile birlikte gelir ve taklit edilen HTTP isteklerini kontrol etmemizi sa\u011flar. Yap\u0131lan HTTP isteklerini “yakalamak”, onlara \u00f6zel yan\u0131tlar (ba\u015far\u0131l\u0131 veri veya hata) g\u00f6ndermek ve bekleyen isteklerin kalmad\u0131\u011f\u0131ndan emin olmak i\u00e7in kullan\u0131l\u0131r. Bu, test senaryolar\u0131m\u0131z\u0131 tamamen kontrol etmemizi sa\u011flar.<\/p>\n

Bir Servisi Test Etmek: Temel Yakla\u015f\u0131m<\/h2>\n

HttpClient<\/code> isteklerini test etmenin en yayg\u0131n senaryosu, bir veri servisini test etmektir. Bu servisler genellikle GET<\/code>, POST<\/code>, PUT<\/code> ve DELETE<\/code> gibi HTTP metotlar\u0131n\u0131 kullanarak arka u\u00e7 ile ileti\u015fim kurar.<\/p>\n

Senaryo Tan\u0131m\u0131<\/h3>\n

Basit bir UserService<\/code> olu\u015ftural\u0131m. Bu servis, kullan\u0131c\u0131lar\u0131 getirmek (getUsers<\/code>) ve yeni bir kullan\u0131c\u0131 olu\u015fturmak (createUser<\/code>) i\u00e7in metotlara sahip olacak.<\/p>\n

Servis Yap\u0131s\u0131<\/h3>\n
\/\/ user.service.ts\nimport { Injectable } from '@angular\/core';\nimport { HttpClient } from '@angular\/common\/http';\nimport { Observable } from 'rxjs';\n\nexport interface User {\n  id: number;\n  name: string;\n  email: string;\n}\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class UserService {\n  private apiUrl = 'api\/users';\n\n  constructor(private http: HttpClient) {}\n\n  getUsers(): Observable {\n    return this.http.get(this.apiUrl);\n  }\n\n  createUser(user: User): Observable {\n    return this.http.post(this.apiUrl, user);\n  }\n}<\/code><\/pre>\n
Test Ortam\u0131n\u0131 Haz\u0131rlama<\/h3>\n
UserService<\/code>‘i test etmek i\u00e7in TestBed<\/code>‘i yap\u0131land\u0131rmam\u0131z gerekir. HttpClientTestingModule<\/code>‘i imports<\/code> dizisine ekleyece\u011fiz ve UserService<\/code>‘i providers<\/code> dizisine dahil edece\u011fiz.<\/p>\n
\/\/ user.service.spec.ts\nimport { TestBed } from '@angular\/core\/testing';\nimport { HttpClientTestingModule, HttpTestingController } from '@angular\/common\/http\/testing';\nimport { UserService, User } from '.\/user.service';\n\ndescribe('UserService', () => {\n  let service: UserService;\n  let httpTestingController: HttpTestingController;\n  const apiUrl = 'api\/users';\n\n  beforeEach(() => {\n    TestBed.configureTestingModule({\n      imports: [HttpClientTestingModule], \/\/ HttpClient'\u0131 taklit etmek i\u00e7in bu mod\u00fcl\u00fc i\u00e7e aktar\u0131n\n      providers: [UserService] \/\/ Test edilecek servisi sa\u011flay\u0131n\n    });\n\n    \/\/ TestBed'den servisi ve HttpTestingController'\u0131 inject edin\n    service = TestBed.inject(UserService);\n    httpTestingController = TestBed.inject(HttpTestingController);\n  });\n\n  \/\/ Her testten sonra bekleyen HTTP isteklerinin kalmad\u0131\u011f\u0131ndan emin olun\n  afterEach(() => {\n    httpTestingController.verify();\n  });\n\n  it('should be created', () => {\n    expect(service).toBeTruthy();\n  });\n\n  \/\/ ... test senaryolar\u0131 buraya gelecek ...\n});<\/code><\/pre>\n
beforeEach<\/code> blo\u011funda, her testten \u00f6nce TestBed<\/code>‘i yap\u0131land\u0131r\u0131yoruz ve UserService<\/code> ile HttpTestingController<\/code> \u00f6rneklerini al\u0131yoruz. afterEach<\/code> blo\u011fundaki httpTestingController.verify()<\/code> \u00e7a\u011fr\u0131s\u0131, testin sonunda bekleyen hi\u00e7bir HTTP iste\u011fi kalmad\u0131\u011f\u0131ndan emin olmak i\u00e7in \u00f6nemlidir. E\u011fer bir istek yap\u0131lmad\u0131ysa veya bir iste\u011fe yan\u0131t verilmediyse, bu metot bir hata f\u0131rlat\u0131r ve testin ba\u015far\u0131s\u0131z olmas\u0131na neden olur.<\/p>\n
GET \u0130steklerini Test Etmek<\/h2>\n
UserService<\/code>‘teki getUsers()<\/code> metodunu test ederek ba\u015flayal\u0131m.<\/p>\n
Ba\u015far\u0131l\u0131 GET \u0130stekleri<\/h3>\n
Bu senaryoda, getUsers()<\/code> metodunun do\u011fru URL’ye bir GET iste\u011fi yap\u0131p yapmad\u0131\u011f\u0131n\u0131 ve ba\u015far\u0131l\u0131 bir yan\u0131t ald\u0131\u011f\u0131nda verileri d\u00fczg\u00fcn bir \u015fekilde d\u00f6nd\u00fcr\u00fcp d\u00f6nd\u00fcrmedi\u011fini kontrol edece\u011fiz.<\/p>\n
it('should retrieve users from the API via GET', () => {\n    const mockUsers: User[] = [\n      { id: 1, name: 'Alice', email: 'alice@example.com' },\n      { id: 2, name: 'Bob', email: 'bob@example.com' }\n    ];\n\n    service.getUsers().subscribe(users => {\n      \/\/ Servisin d\u00f6nd\u00fcrd\u00fc\u011f\u00fc verinin mock verilerimizle e\u015fle\u015fti\u011fini kontrol edin\n      expect(users).toEqual(mockUsers);\n    });\n\n    \/\/ HttpTestingController'\u0131 kullanarak beklenen HTTP iste\u011fini yakalay\u0131n\n    const req = httpTestingController.expectOne(apiUrl);\n\n    \/\/ \u0130ste\u011fin GET metoduyla yap\u0131ld\u0131\u011f\u0131n\u0131 kontrol edin\n    expect(req.request.method).toBe('GET');\n\n    \/\/ Yakalanan iste\u011fe mock verilerle yan\u0131t verin (flush)\n    req.flush(mockUsers);\n  });<\/code><\/pre>\n
Yukar\u0131daki kodda:
\n1.  service.getUsers().subscribe(...)<\/code> \u00e7a\u011fr\u0131s\u0131 ile servis metodunu tetikleriz. Bu, arka planda bir HTTP iste\u011fi olu\u015fturur.
\n2.  httpTestingController.expectOne(apiUrl)<\/code> ile, belirtilen URL’ye yap\u0131lan tam olarak bir HTTP iste\u011fi bekleriz. E\u011fer birden fazla veya hi\u00e7 istek yap\u0131lmazsa, bu bir hata f\u0131rlat\u0131r.
\n3.  expect(req.request.method).toBe('GET')<\/code> ile iste\u011fin HTTP metodunun GET<\/code> oldu\u011funu do\u011frular\u0131z.
\n4.  req.flush(mockUsers)<\/code> ile, yakalanan iste\u011fe mock kullan\u0131c\u0131 verileriyle ba\u015far\u0131l\u0131 bir yan\u0131t g\u00f6ndeririz. Bu yan\u0131t, subscribe<\/code> blo\u011fundaki users<\/code> de\u011fi\u015fkenine ula\u015f\u0131r ve burada expect(users).toEqual(mockUsers)<\/code> ile do\u011frulan\u0131r.<\/p>\n
Hatal\u0131 GET \u0130stekleri<\/h3>\n
Servisin bir hata durumunu (\u00f6rne\u011fin, 500 Internal Server Error) nas\u0131l i\u015fledi\u011fini test etmek de \u00f6nemlidir.<\/p>\n
it('should handle GET errors gracefully', () => {\n    const errorMsg = 'Server Error';\n    const errorStatus = 500;\n\n    service.getUsers().subscribe(\n      () => fail('should have failed with the 500 error'), \/\/ Ba\u015far\u0131l\u0131 olmamas\u0131 gerekti\u011fini belirtiriz\n      error => {\n        expect(error.status).toBe(errorStatus);\n        expect(error.error).toBe(errorMsg);\n      }\n    );\n\n    const req = httpTestingController.expectOne(apiUrl);\n    expect(req.request.method).toBe('GET');\n\n    \/\/ Hata yan\u0131t\u0131 g\u00f6nderin\n    req.flush(errorMsg, { status: errorStatus, statusText: 'Internal Server Error' });\n  });<\/code><\/pre>\n
Burada, req.flush()<\/code> metoduna bir hata mesaj\u0131 ve bir HttpErrorResponse<\/code>‘u taklit eden bir durum nesnesi g\u00f6ndeririz. subscribe<\/code> metodunun ikinci parametresi olan error<\/code> callback’i tetiklenir ve hatay\u0131 beklendi\u011fi gibi i\u015fledi\u011fimizi do\u011frular\u0131z.<\/p>\n
Birden Fazla GET \u0130stekleri<\/h3>\n
Bazen ayn\u0131 URL’ye farkl\u0131 zamanlarda veya farkl\u0131 URL’lere ayn\u0131 anda birden fazla istek yap\u0131lmas\u0131 gerekebilir.<\/p>\n
it('should handle multiple GET requests to the same URL', () => {\n    const mockUsers1: User[] = [{ id: 1, name: 'User1', email: 'u1@example.com' }];\n    const mockUsers2: User[] = [{ id: 2, name: 'User2', email: 'u2@example.com' }];\n\n    service.getUsers().subscribe(users => {\n      expect(users).toEqual(mockUsers1);\n    });\n    service.getUsers().subscribe(users => {\n      expect(users).toEqual(mockUsers2);\n    });\n\n    const reqs = httpTestingController.match(apiUrl); \/\/ T\u00fcm e\u015fle\u015fen istekleri yakala\n    expect(reqs.length).toBe(2);\n    expect(reqs[0].request.method).toBe('GET');\n    expect(reqs[1].request.method).toBe('GET');\n\n    reqs[0].flush(mockUsers1);\n    reqs[1].flush(mockUsers2);\n  });<\/code><\/pre>\n
httpTestingController.match(apiUrl)<\/code> metodu, belirtilen URL’ye yap\u0131lan t\u00fcm bekleyen istekleri bir dizi olarak d\u00f6nd\u00fcr\u00fcr. Bu, birden fazla iste\u011fi ayr\u0131 ayr\u0131 ele almam\u0131z\u0131 sa\u011flar.<\/p>\n
POST, PUT, DELETE \u0130steklerini Test Etmek<\/h2>\n
GET<\/code> isteklerini test etmeye benzer \u015fekilde, POST<\/code>, PUT<\/code> ve DELETE<\/code> gibi di\u011fer HTTP metotlar\u0131n\u0131 da test edebiliriz. Temel fark, expectOne<\/code> metoduna ikinci bir parametre olarak HTTP metodunu belirtmemiz ve POST<\/code>\/PUT<\/code> isteklerinde request body’yi kontrol etmemizdir.<\/p>\n
POST \u0130stekleri<\/h3>\n
UserService<\/code>‘teki createUser()<\/code> metodunu test edelim.<\/p>\n
it('should create a user via POST', () => {\n    const newUser: User = { id: 3, name: 'Charlie', email: 'charlie@example.com' };\n    const expectedResponse: User = { ...newUser, id: 101 }; \/\/ API'nin d\u00f6nd\u00fcrece\u011fi ID\n\n    service.createUser(newUser).subscribe(user => {\n      expect(user).toEqual(expectedResponse);\n    });\n\n    const req = httpTestingController.expectOne(apiUrl);\n    expect(req.request.method).toBe('POST');\n    \/\/ \u0130ste\u011fin body'sinin g\u00f6nderilen newUser ile e\u015fle\u015fti\u011fini kontrol edin\n    expect(req.request.body).toEqual(newUser);\n\n    req.flush(expectedResponse);\n  });<\/code><\/pre>\n
Burada, expect(req.request.body).toEqual(newUser)<\/code> ile iste\u011fin g\u00f6vdesinin g\u00f6nderdi\u011fimiz newUser<\/code> nesnesiyle e\u015fle\u015fti\u011fini do\u011frular\u0131z.<\/p>\n
PUT ve DELETE \u0130stekleri<\/h3>\n
PUT<\/code> ve DELETE<\/code> istekleri de benzer bir mant\u0131kla test edilir. \u00d6rne\u011fin, bir updateUser<\/code> veya deleteUser<\/code> metodunuz olsayd\u0131:<\/p>\n
\/\/ \u00d6rnek bir PUT testi\n  it('should update a user via PUT', () => {\n    const updatedUser: User = { id: 1, name: 'Alice Updated', email: 'alice_u@example.com' };\n    const updateUrl = ${apiUrl}\/${updatedUser.id}<\/code>;\n\n    \/\/ Servisinizde update metodu oldu\u011funu varsayal\u0131m: service.updateUser(updatedUser)\n    service.updateUser(updatedUser).subscribe(user => {\n      expect(user).toEqual(updatedUser);\n    });\n\n    const req = httpTestingController.expectOne(updateUrl);\n    expect(req.request.method).toBe('PUT');\n    expect(req.request.body).toEqual(updatedUser);\n    req.flush(updatedUser);\n  });\n\n  \/\/ \u00d6rnek bir DELETE testi\n  it('should delete a user via DELETE', () => {\n    const userIdToDelete = 1;\n    const deleteUrl = ${apiUrl}\/${userIdToDelete}<\/code>;\n\n    \/\/ Servisinizde delete metodu oldu\u011funu varsayal\u0131m: service.deleteUser(userIdToDelete)\n    service.deleteUser(userIdToDelete).subscribe(response => {\n      expect(response).toBeNull(); \/\/ Genellikle DELETE bo\u015f yan\u0131t d\u00f6ner\n    });\n\n    const req = httpTestingController.expectOne(deleteUrl);\n    expect(req.request.method).toBe('DELETE');\n    req.flush(null); \/\/ Bo\u015f yan\u0131t g\u00f6nderin\n  });<\/code><\/pre>\n
\u00d6nemli olan, do\u011fru URL’yi ve do\u011fru HTTP metodunu expectOne<\/code> ile yakalamak ve ard\u0131ndan beklenen yan\u0131t\u0131 flush<\/code> etmektir.<\/p>\n
\u0130stek Parametrelerini ve Ba\u015fl\u0131klar\u0131n\u0131 Kontrol Etmek<\/h2>\n
Bazen HTTP isteklerinin sadece URL’sini ve metodunu de\u011fil, ayn\u0131 zamanda sorgu parametrelerini, iste\u011fin g\u00f6vdesini veya HTTP ba\u015fl\u0131klar\u0131n\u0131 da kontrol etmemiz gerekir.<\/p>\n
Query Parametreleri<\/h3>\n
E\u011fer servisiniz sorgu parametreleri kullan\u0131yorsa (\u00f6rne\u011fin, api\/users?page=1&limit=10<\/code>), bunlar\u0131 da test etmelisiniz.<\/p>\n
it('should send query parameters with GET request', () => {\n    const page = 1;\n    const limit = 5;\n    const mockUsers: User[] = [{ id: 1, name: 'Filtered User', email: 'f@example.com' }];\n\n    \/\/ Varsayal\u0131m ki servisinizde getUsers(page, limit) metodu var\n    service.getUsers(page, limit).subscribe(users => {\n      expect(users).toEqual(mockUsers);\n    });\n\n    const req = httpTestingController.expectOne(\n      req => req.url === apiUrl && req.params.get('page') === page.toString() && req.params.get('limit') === limit.toString()\n    );\n    expect(req.request.method).toBe('GET');\n    req.flush(mockUsers);\n  });<\/code><\/pre>\n
expectOne<\/code> metoduna bir fonksiyon ge\u00e7irerek, iste\u011fin URL’sini, parametrelerini veya di\u011fer \u00f6zelliklerini daha esnek bir \u015fekilde kontrol edebiliriz. req.params.get('paramName')<\/code> ile sorgu parametrelerine eri\u015febiliriz.<\/p>\n
Request Body Kontrol\u00fc<\/h3>\n
POST<\/code> ve PUT<\/code> istekleri i\u00e7in request body kontrol\u00fcn\u00fc zaten g\u00f6rm\u00fc\u015ft\u00fck (expect(req.request.body).toEqual(data)<\/code>). Bu, g\u00f6nderilen verilerin do\u011fru formatta ve i\u00e7erikte oldu\u011fundan emin olmak i\u00e7in \u00e7ok \u00f6nemlidir.<\/p>\n
HTTP Ba\u015fl\u0131klar\u0131<\/h3>\n
\u00d6zellikle g\u00fcvenlik (\u00f6rne\u011fin, Authorization<\/code> ba\u015fl\u0131\u011f\u0131) veya i\u00e7erik tipi (Content-Type<\/code>) gibi durumlar i\u00e7in HTTP ba\u015fl\u0131klar\u0131n\u0131 kontrol etmek isteyebilirsiniz.<\/p>\n
it('should send custom headers with the request', () => {\n    const mockUsers: User[] = [];\n    const customHeaderValue = 'my-custom-token';\n\n    \/\/ Varsayal\u0131m ki servisinizde getUsers(headers) metodu var veya interceptor kullan\u0131l\u0131yor\n    service.getUsersWithCustomHeader(customHeaderValue).subscribe(users => {\n      expect(users).toEqual(mockUsers);\n    });\n\n    const req = httpTestingController.expectOne(apiUrl);\n    expect(req.request.method).toBe('GET');\n    \/\/ \u0130ste\u011fin ba\u015fl\u0131klar\u0131n\u0131 kontrol edin\n    expect(req.request.headers.get('X-Custom-Header')).toBe(customHeaderValue);\n    req.flush(mockUsers);\n  });<\/code><\/pre>\n
req.request.headers.get('Header-Name')<\/code> ile belirli bir ba\u015fl\u0131\u011f\u0131n de\u011ferine eri\u015febiliriz.<\/p>\n
Interceptor’lar\u0131 Test Etmek<\/h2>\n
Angular interceptor’lar\u0131, giden HTTP isteklerini de\u011fi\u015ftirmek veya gelen HTTP yan\u0131tlar\u0131n\u0131 i\u015flemek i\u00e7in g\u00fc\u00e7l\u00fc bir mekanizma sunar. Interceptor’lar\u0131n da do\u011fru \u00e7al\u0131\u015ft\u0131\u011f\u0131ndan emin olmak i\u00e7in test edilmeleri gerekir.<\/p>\n
Interceptor’\u0131n Rol\u00fc<\/h3>\n
Bir interceptor, bir HTTP iste\u011fi uygulaman\u0131zdan ayr\u0131lmadan \u00f6nce veya bir yan\u0131t uygulaman\u0131za ula\u015fmadan \u00f6nce araya girer. Yayg\u0131n kullan\u0131m alanlar\u0131 aras\u0131nda kimlik do\u011frulama token’lar\u0131 eklemek, hata i\u015fleme, y\u00fckleme g\u00f6stergeleri y\u00f6netmek veya istekleri \u00f6nbelle\u011fe almak bulunur.<\/p>\n
Test Ortam\u0131n\u0131 Haz\u0131rlama<\/h3>\n
Interceptor’lar\u0131 test ederken, TestBed.configureTestingModule<\/code> i\u00e7inde HTTP_INTERCEPTORS<\/code> token’\u0131n\u0131 kullanarak interceptor’\u0131n\u0131z\u0131 sa\u011flaman\u0131z gerekir. multi: true<\/code> ayar\u0131, birden fazla interceptor’\u0131n ayn\u0131 anda etkin olabilece\u011fini belirtir.<\/p>\n
\/\/ auth.interceptor.ts\nimport { Injectable } from '@angular\/core';\nimport { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular\/common\/http';\nimport { Observable } from 'rxjs';\n\n@Injectable()\nexport class AuthInterceptor implements HttpInterceptor {\n  intercept(req: HttpRequest, next: HttpHandler): Observable> {\n    const authToken = 'fake-auth-token'; \/\/ Ger\u00e7ekte bir servisten al\u0131n\u0131r\n    const authReq = req.clone({\n      headers: req.headers.set('Authorization', Bearer ${authToken}<\/code>)\n    });\n    return next.handle(authReq);\n  }\n}<\/code><\/pre>\n
\/\/ user.service.spec.ts (AuthInterceptor testi i\u00e7in)\nimport { HTTP_INTERCEPTORS } from '@angular\/common\/http';\nimport { AuthInterceptor } from '.\/auth.interceptor'; \/\/ Interceptor'\u0131n\u0131z\u0131 import edin\n\ndescribe('AuthInterceptor', () => {\n  let service: UserService;\n  let httpTestingController: HttpTestingController;\n  const apiUrl = 'api\/users';\n\n  beforeEach(() => {\n    TestBed.configureTestingModule({\n      imports: [HttpClientTestingModule],\n      providers: [\n        UserService,\n        {\n          provide: HTTP_INTERCEPTORS, \/\/ Interceptor'\u0131 sa\u011flay\u0131n\n          useClass: AuthInterceptor,\n          multi: true\n        }\n      ]\n    });\n\n    service = TestBed.inject(UserService);\n    httpTestingController = TestBed.inject(HttpTestingController);\n  });\n\n  afterEach(() => {\n    httpTestingController.verify();\n  });\n\n  it('should add an Authorization header to outgoing requests', () => {\n    const mockUsers: User[] = [];\n\n    service.getUsers().subscribe(users => {\n      expect(users).toEqual(mockUsers);\n    });\n\n    const req = httpTestingController.expectOne(apiUrl);\n    expect(req.request.method).toBe('GET');\n    \/\/ Interceptor'\u0131n ekledi\u011fi Authorization ba\u015fl\u0131\u011f\u0131n\u0131 kontrol edin\n    expect(req.request.headers.has('Authorization')).toBeTruthy();\n    expect(req.request.headers.get('Authorization')).toBe('Bearer fake-auth-token');\n\n    req.flush(mockUsers);\n  });\n});<\/code><\/pre>\n
Bu test, AuthInterceptor<\/code>‘\u0131n UserService<\/code> taraf\u0131ndan yap\u0131lan bir iste\u011fe Authorization<\/code> ba\u015fl\u0131\u011f\u0131n\u0131 ba\u015far\u0131yla ekledi\u011fini do\u011frular. Interceptor’\u0131n\u0131z\u0131n bir iste\u011fi de\u011fi\u015ftirdi\u011finden veya bir yan\u0131t\u0131 i\u015fledi\u011finden emin olmak i\u00e7in req.request.headers<\/code>, req.request.body<\/code> veya req.error<\/code> gibi \u00f6zelliklere odaklanman\u0131z gerekir.<\/p>\n
Komponentlerdeki HttpClient Kullan\u0131m\u0131n\u0131 Test Etmek<\/h2>\n
Komponentler genellikle servisler arac\u0131l\u0131\u011f\u0131yla HTTP istekleri yaparlar. Komponentin kendisinin do\u011frudan HttpClient<\/code> ile etkile\u015fime girmesini test etmek yerine, genellikle komponentin servislerle olan etkile\u015fimini ve servisten gelen verilere veya hatalara nas\u0131l tepki verdi\u011fini test ederiz.<\/p>\n
Senaryo Tan\u0131m\u0131<\/h3>\n
Kullan\u0131c\u0131lar\u0131 listeleyen basit bir UserListComponent<\/code> olu\u015ftural\u0131m. Bu komponent, ngOnInit<\/code> ya\u015fam d\u00f6ng\u00fcs\u00fc kancas\u0131nda UserService<\/code>‘ten kullan\u0131c\u0131lar\u0131 alacak ve bunlar\u0131 \u015fablonda g\u00f6sterecektir.<\/p>\n
Komponent Yap\u0131s\u0131<\/h3>\n
\/\/ user-list.component.ts\nimport { Component, OnInit } from '@angular\/core';\nimport { UserService, User } from '.\/user.service';\nimport { Observable, of } from 'rxjs';\nimport { catchError } from 'rxjs\/operators';\n\n@Component({\n  selector: 'app-user-list',\n  template: \n    
Users<\/h2>\n    
\n      
     0; else noUsers\">\n        
  • {{ user.name }} ({{ user.email }})<\/li>\n      <\/ul>\n      No users found.<\/ng-template>\n    <\/div>\n    Loading users...<\/ng-template>\n    
    {{ errorMessage }}<\/div>\n  <\/code>\n})\nexport class UserListComponent implements OnInit {\n  users$: Observable;\n  errorMessage: string;\n\n  constructor(private userService: UserService) {}\n\n  ngOnInit(): void {\n    this.users$ = this.userService.getUsers().pipe(\n      catchError(error => {\n        this.errorMessage = 'Failed to load users.';\n        return of([]); \/\/ Hata durumunda bo\u015f dizi d\u00f6nd\u00fcr\n      })\n    );\n  }\n}<\/code><\/pre>\n
    Test Ortam\u0131n\u0131 Haz\u0131rlama<\/h3>\n
    Komponent testlerinde, ba\u011f\u0131ml\u0131l\u0131klar\u0131 (burada UserService<\/code>) mocklamak yayg\u0131n bir yakla\u015f\u0131md\u0131r. Bu, komponentin birim testini yaparken d\u0131\u015f ba\u011f\u0131ml\u0131l\u0131klar\u0131n (HTTP istekleri gibi) etkisini ortadan kald\u0131r\u0131r.<\/p>\n
    \/\/ user-list.component.spec.ts\nimport { ComponentFixture, TestBed } from '@angular\/core\/testing';\nimport { UserListComponent } from '.\/user-list.component';\nimport { UserService, User } from '.\/user.service';\nimport { of, throwError } from 'rxjs';\nimport { DebugElement } from '@angular\/core';\nimport { By } from '@angular\/platform-browser';\n\ndescribe('UserListComponent', () => {\n  let component: UserListComponent;\n  let fixture: ComponentFixture;\n  let mockUserService: jasmine.SpyObj; \/\/ UserService'i mocklamak i\u00e7in SpyObj kullan\u0131n\n\n  const mockUsers: User[] = [\n    { id: 1, name: 'Alice', email: 'alice@example.com' },\n    { id: 2, name: 'Bob', email: 'bob@example.com' }\n  ];\n\n  beforeEach(async () => {\n    \/\/ UserService'in mock bir versiyonunu olu\u015fturun\n    mockUserService = jasmine.createSpyObj('UserService', ['getUsers']);\n    \/\/ getUsers metodunun mockUsers d\u00f6nd\u00fcrmesini sa\u011flay\u0131n\n    mockUserService.getUsers.and.returnValue(of(mockUsers));\n\n    await TestBed.configureTestingModule({\n      declarations: [UserListComponent],\n      providers: [\n        { provide: UserService, useValue: mockUserService } \/\/ Mock servisi sa\u011flay\u0131n\n      ]\n    }).compileComponents();\n  });\n\n  beforeEach(() => {\n    fixture = TestBed.createComponent(UserListComponent);\n    component = fixture.componentInstance;\n    fixture.detectChanges(); \/\/ ngOnInit'i tetikler ve DOM'u g\u00fcnceller\n  });\n\n  it('should create', () => {\n    expect(component).toBeTruthy();\n  });\n\n  it('should display users when loaded successfully', () => {\n    \/\/ Kullan\u0131c\u0131 listesi elemanlar\u0131n\u0131 kontrol edin\n    const userItems = fixture.debugElement.queryAll(By.css('li'));\n    expect(userItems.length).toBe(mockUsers.length);\n    expect(userItems[0].nativeElement.textContent).toContain('Alice');\n    expect(userItems[1].nativeElement.textContent).toContain('Bob');\n  });\n\n  it('should display \"No users found.\" when no users are returned', () => {\n    mockUserService.getUsers.and.returnValue(of([])); \/\/ Bo\u015f dizi d\u00f6nd\u00fcr\n    fixture.detectChanges(); \/\/ Komponenti tekrar render edin\n\n    const noUsersMessage = fixture.debugElement.query(By.css('ng-template#noUsers'));\n    expect(noUsersMessage).toBeDefined(); \/\/ No users template'inin varl\u0131\u011f\u0131n\u0131 kontrol edin.\n    \/\/ DOM'da \"No users found.\" yaz\u0131s\u0131n\u0131n g\u00f6r\u00fcn\u00fcrl\u00fc\u011f\u00fcn\u00fc kontrol etmek i\u00e7in daha karma\u015f\u0131k bir yakla\u015f\u0131m gerekebilir,\n    \/\/ \u00e7\u00fcnk\u00fc ng-template direkt olarak DOM'da g\u00f6r\u00fcnmez. Genellikle *ngIf ile kontrol edilir.\n    \/\/ Basit bir test i\u00e7in, listenin bo\u015f olup olmad\u0131\u011f\u0131n\u0131 kontrol etmek yeterlidir.\n    const userItems = fixture.debugElement.queryAll(By.css('li'));\n    expect(userItems.length).toBe(0);\n  });\n\n  it('should display an error message when user loading fails', () => {\n    \/\/ Hata durumunu sim\u00fcle edin\n    mockUserService.getUsers.and.returnValue(throwError({ status: 500, message: 'Server error' }));\n    fixture.detectChanges(); \/\/ Komponenti tekrar render edin\n\n    const errorMessage = fixture.debugElement.query(By.css('.error'));\n    expect(errorMessage).toBeTruthy();\n    expect(errorMessage.nativeElement.textContent).toContain('Failed to load users.');\n  });\n});<\/code><\/pre>\n
    Servis Mock’lama Yakla\u015f\u0131m\u0131<\/h3>\n
    Yukar\u0131daki \u00f6rnekte, UserService<\/code>‘i bir jasmine.SpyObj<\/code> kullanarak mock’lad\u0131k. Bu, getUsers<\/code> gibi metotlar\u0131n ger\u00e7ek HTTP iste\u011fi yapmadan do\u011frudan test verilerini d\u00f6nd\u00fcrmesini sa\u011flar. Bu, komponentin izole bir \u015fekilde test edilmesini ve testlerin h\u0131zl\u0131 \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar. fixture.detectChanges()<\/code> \u00e7a\u011fr\u0131s\u0131, Angular’\u0131n de\u011fi\u015fiklik alg\u0131lama d\u00f6ng\u00fcs\u00fcn\u00fc tetikler ve \u015fablonun g\u00fcncellenmesini sa\u011flar.<\/p>\n
    Ger\u00e7ek Servis ile Entegrasyon Testi<\/h3>\n
    Baz\u0131 durumlarda, komponentin bir servisle ve HttpClientTestingModule<\/code> ile ger\u00e7ekten entegre oldu\u011funu test etmek isteyebilirsiniz. Bu, daha \u00e7ok bir entegrasyon testi senaryosudur.<\/p>\n
    \/\/ user-list.component.spec.ts (HttpClientTestingModule ile entegrasyon testi)\nimport { ComponentFixture, TestBed } from '@angular\/core\/testing';\nimport { HttpClientTestingModule, HttpTestingController } from '@angular\/common\/http\/testing';\nimport { UserListComponent } from '.\/user-list.component';\nimport { UserService, User } from '.\/user.service';\nimport { DebugElement } from '@angular\/core';\nimport { By } from '@angular\/platform-browser';\n\ndescribe('UserListComponent - Integration with HttpTestingController', () => {\n  let component: UserListComponent;\n  let fixture: ComponentFixture;\n  let httpTestingController: HttpTestingController;\n  const apiUrl = 'api\/users';\n\n  const mockUsers: User[] = [\n    { id: 1, name: 'Charlie', email: 'charlie@example.com' },\n    { id: 2, name: 'Diana', email: 'diana@example.com' }\n  ];\n\n  beforeEach(async () => {\n    await TestBed.configureTestingModule({\n      imports: [HttpClientTestingModule], \/\/ HttpClientTestingModule'i import edin\n      declarations: [UserListComponent],\n      providers: [UserService] \/\/ Ger\u00e7ek UserService'i sa\u011flay\u0131n\n    }).compileComponents();\n  });\n\n  beforeEach(() => {\n    fixture = TestBed.createComponent(UserListComponent);\n    component = fixture.componentInstance;\n    httpTestingController = TestBed.inject(HttpTestingController);\n    \/\/ \u0130lk fixture.detectChanges() \u00e7a\u011fr\u0131s\u0131 ngOnInit'i tetikler ve HTTP iste\u011fini ba\u015flat\u0131r.\n    fixture.detectChanges();\n  });\n\n  afterEach(() => {\n    httpTestingController.verify();\n  });\n\n  it('should display users loaded via HttpClientTestingModule', () => {\n    \/\/ UserService taraf\u0131ndan yap\u0131lan GET iste\u011fini yakalay\u0131n\n    const req = httpTestingController.expectOne(apiUrl);\n    expect(req.request.method).toBe('GET');\n\n    \/\/ \u0130ste\u011fe mock verilerle yan\u0131t verin\n    req.flush(mockUsers);\n\n    \/\/ Yan\u0131t geldikten sonra komponentin DOM'unu g\u00fcncellemek i\u00e7in tekrar detectChanges() \u00e7a\u011f\u0131r\u0131n\n    fixture.detectChanges();\n\n    const userItems = fixture.debugElement.queryAll(By.css('li'));\n    expect(userItems.length).toBe(mockUsers.length);\n    expect(userItems[0].nativeElement.textContent).toContain('Charlie');\n  });\n\n  it('should display error message on http failure', () => {\n    const errorMsg = 'Failed to fetch users';\n    const req = httpTestingController.expectOne(apiUrl);\n    expect(req.request.method).toBe('GET');\n\n    req.flush(errorMsg, { status: 500, statusText: 'Server Error' });\n    fixture.detectChanges();\n\n    const errorMessage = fixture.debugElement.query(By.css('.error'));\n    expect(errorMessage).toBeTruthy();\n    expect(errorMessage.nativeElement.textContent).toContain('Failed to load users.');\n  });\n});<\/code><\/pre>\n
    Bu entegrasyon testinde, UserService<\/code>‘in kendisini mock’lamak yerine, HttpClientTestingModule<\/code>‘i kullanarak ger\u00e7ek UserService<\/code>‘in HttpClient<\/code> \u00fczerinden yapt\u0131\u011f\u0131 iste\u011fi yakalay\u0131p kontrol ederiz. Bu, komponent ile servisin birlikte nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 daha ger\u00e7ek\u00e7i bir \u015fekilde test etmemizi sa\u011flar.<\/p>\n
    \u0130pu\u00e7lar\u0131 ve En \u0130yi Uygulamalar<\/h2>\n
    HttpClient<\/code> isteklerini test ederken, testlerinizin verimli, g\u00fcvenilir ve s\u00fcrd\u00fcr\u00fclebilir olmas\u0131n\u0131 sa\u011flamak i\u00e7in baz\u0131 en iyi uygulamalar\u0131 takip etmek \u00f6nemlidir.<\/p>\n
    Her Zaman httpTestingController.verify()<\/code> Kullan\u0131n<\/h3>\n
    afterEach<\/code> blo\u011funda httpTestingController.verify()<\/code> metodunu \u00e7a\u011f\u0131rmak, testin sonunda bekleyen hi\u00e7bir HTTP iste\u011fi kalmad\u0131\u011f\u0131ndan emin olman\u0131n en iyi yoludur. Bu, testlerinizin temiz kalmas\u0131na ve gizli hatalar\u0131 yakalaman\u0131za yard\u0131mc\u0131 olur. Unutulan veya yanl\u0131\u015f e\u015fle\u015fen bir istek varsa, verify()<\/code> bir hata f\u0131rlatacakt\u0131r.<\/p>\n
    Testleri \u0130zole Edin<\/h3>\n
    Her it<\/code> blo\u011fu ba\u011f\u0131ms\u0131z olmal\u0131 ve di\u011fer testlerin sonu\u00e7lar\u0131ndan etkilenmemelidir. beforeEach<\/code> ve afterEach<\/code> bloklar\u0131, her test i\u00e7in temiz bir ba\u015flang\u0131\u00e7 ve biti\u015f sa\u011flamak i\u00e7in kullan\u0131l\u0131r. Mock veriler ve servis \u00f6rnekleri her testten \u00f6nce yeniden olu\u015fturulmal\u0131d\u0131r.<\/p>\n
    Anlaml\u0131 Mock Verileri Kullan\u0131n<\/h3>\n
    Testleriniz i\u00e7in kulland\u0131\u011f\u0131n\u0131z mock verilerin, ger\u00e7ek API’den bekleyece\u011finiz verilere m\u00fcmk\u00fcn oldu\u011funca yak\u0131n oldu\u011fundan emin olun. Bu, testlerinizin ger\u00e7ek d\u00fcnya senaryolar\u0131n\u0131 daha iyi yans\u0131tmas\u0131n\u0131 sa\u011flar. Edge case’leri (bo\u015f listeler, eksik alanlar vb.) de test etmek i\u00e7in farkl\u0131 mock veriler kullan\u0131n.<\/p>\n
    Edge Case’leri Test Edin<\/h3>\n
    Sadece ba\u015far\u0131l\u0131 senaryolar\u0131 de\u011fil, ayn\u0131 zamanda hata durumlar\u0131n\u0131 (a\u011f hatalar\u0131, 404 Not Found, 500 Internal Server Error), bo\u015f yan\u0131tlar\u0131 veya beklenmedik veri formatlar\u0131n\u0131 da test edin. Servisinizin veya komponentinizin bu durumlar\u0131 nas\u0131l i\u015fledi\u011fini do\u011frulamak, uygulaman\u0131z\u0131n sa\u011flaml\u0131\u011f\u0131n\u0131 art\u0131r\u0131r.<\/p>\n
    Asenkron \u0130\u015flemleri Y\u00f6netin<\/h3>\n
    HTTP istekleri asenkrondur. Jasmine’in done<\/code> callback’ini, async<\/code>\/await<\/code> ile fakeAsync<\/code>\/tick<\/code> yard\u0131mc\u0131lar\u0131n\u0131 veya RxJS operat\u00f6rlerini (\u00f6rne\u011fin firstValueFrom<\/code> veya lastValueFrom<\/code>) kullanarak asenkron testleri d\u00fczg\u00fcn bir \u015fekilde y\u00f6netti\u011finizden emin olun. fakeAsync<\/code> ve tick<\/code> genellikle daha okunabilir ve kontrol edilebilir testler sa\u011flar.<\/p>\n
    \/\/ fakeAsync ile bir \u00f6rnek\nimport { fakeAsync, tick } from '@angular\/core\/testing';\n\nit('should load users with fakeAsync', fakeAsync(() => {\n  const mockUsers: User[] = [{ id: 1, name: 'Fake User', email: 'fake@example.com' }];\n  let actualUsers: User[] = [];\n\n  service.getUsers().subscribe(users => {\n    actualUsers = users;\n  });\n\n  const req = httpTestingController.expectOne(apiUrl);\n  req.flush(mockUsers); \/\/ \u0130stek yan\u0131t\u0131n\u0131 g\u00f6nder\n\n  tick(); \/\/ T\u00fcm bekleyen asenkron i\u015flemleri tamamla\n\n  expect(actualUsers).toEqual(mockUsers);\n}));<\/code><\/pre>\n
    Test Kapsam\u0131n\u0131 Belirleyin<\/h3>\n
    Bir servisi mi yoksa bir komponenti mi test etti\u011finize ba\u011fl\u0131 olarak farkl\u0131 yakla\u015f\u0131mlar benimseyin:
    \n*   Servis Birim Testleri<\/strong>: HttpClientTestingModule<\/code> ve HttpTestingController<\/code> kullanarak servisin HttpClient<\/code> ile do\u011fru etkile\u015fime girdi\u011fini do\u011frulay\u0131n. Servisin d\u0131\u015f ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 mock’lamay\u0131n.
    \n*   Komponent Birim Testleri<\/strong>: Komponentin ba\u011f\u0131ml\u0131 oldu\u011fu servisleri (\u00f6rne\u011fin UserService<\/code>) mock’lay\u0131n. Komponentin kendi mant\u0131\u011f\u0131n\u0131 ve \u015fablonla etkile\u015fimini test edin. Servislerin i\u00e7 i\u015fleyi\u015fi bu testin konusu de\u011fildir.
    \n*   Entegrasyon Testleri<\/strong>: Komponent ve servisin birlikte nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 test etmek i\u00e7in HttpClientTestingModule<\/code>‘i kullanarak ger\u00e7ek servis \u00f6rne\u011fini kullanabilirsiniz. Bu, daha az yayg\u0131n olsa da, belirli senaryolarda faydal\u0131 olabilir.<\/p>\n
    Sonu\u00e7<\/h2>\n
    Angular’da HttpClient<\/code> isteklerini test etmek, uygulaman\u0131z\u0131n g\u00fcvenilirli\u011fini ve kararl\u0131l\u0131\u011f\u0131n\u0131 sa\u011flamak i\u00e7in vazge\u00e7ilmez bir ad\u0131md\u0131r. HttpClientTestingModule<\/code> ve HttpTestingController<\/code> gibi g\u00fc\u00e7l\u00fc ara\u00e7lar sayesinde, arka u\u00e7 servislerine ba\u011f\u0131ml\u0131 olmadan HTTP isteklerini tamamen kontrol edebilir ve izole bir ortamda test edebilirsiniz. Servislerinizi, interceptor’lar\u0131n\u0131z\u0131 ve komponentlerinizi kapsaml\u0131 bir \u015fekilde test ederek, uygulaman\u0131z\u0131n beklenmedik durumlarla ba\u015fa \u00e7\u0131kabildi\u011finden ve kullan\u0131c\u0131lar\u0131n\u0131za sorunsuz bir deneyim sundu\u011fundan emin olabilirsiniz. Sa\u011flam testler, uzun vadede geli\u015ftirme s\u00fcrecini h\u0131zland\u0131r\u0131r ve bak\u0131m maliyetlerini d\u00fc\u015f\u00fcr\u00fcr.<\/p>\n
    <\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Angular Uygulamalar\u0131nda HttpClient \u0130steklerini Test Etmek Angular uygulamalar\u0131 genellikle arka u\u00e7 servislerle ileti\u015fim kurmak i\u00e7in HttpClient mod\u00fcl\u00fcn\u00fc kullan\u0131r.","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1488],"tags":[],"class_list":{"0":"post-40914","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-angular","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nAngular Uygulamalar\u0131nda HttpClient \u0130steklerini Test Etmek - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-httpclient-isteklerini-test-etmek\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular Uygulamalar\u0131nda HttpClient \u0130steklerini Test Etmek\" \/>\n<meta property=\"og:description\" content=\"Angular Uygulamalar\u0131nda HttpClient \u0130steklerini Test Etmek Angular uygulamalar\u0131 genellikle arka u\u00e7 servislerle ileti\u015fim kurmak i\u00e7in HttpClient mod\u00fcl\u00fcn\u00fc kullan\u0131r.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-httpclient-isteklerini-test-etmek\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2026-03-02T07:40:51+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"20 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-httpclient-isteklerini-test-etmek\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-httpclient-isteklerini-test-etmek\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Angular Uygulamalar\u0131nda HttpClient \u0130steklerini Test Etmek\",\"datePublished\":\"2026-03-02T07:40:51+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-httpclient-isteklerini-test-etmek\/\"},\"wordCount\":2094,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"Angular\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-httpclient-isteklerini-test-etmek\/#respond\"]}],\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-httpclient-isteklerini-test-etmek\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-httpclient-isteklerini-test-etmek\/\",\"name\":\"Angular Uygulamalar\u0131nda HttpClient \u0130steklerini Test Etmek - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2026-03-02T07:40:51+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-httpclient-isteklerini-test-etmek\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-httpclient-isteklerini-test-etmek\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-httpclient-isteklerini-test-etmek\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular Uygulamalar\u0131nda HttpClient \u0130steklerini Test Etmek\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Angular Uygulamalar\u0131nda HttpClient \u0130steklerini Test Etmek - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-httpclient-isteklerini-test-etmek\/","og_locale":"tr_TR","og_type":"article","og_title":"Angular Uygulamalar\u0131nda HttpClient \u0130steklerini Test Etmek","og_description":"Angular Uygulamalar\u0131nda HttpClient \u0130steklerini Test Etmek Angular uygulamalar\u0131 genellikle arka u\u00e7 servislerle ileti\u015fim kurmak i\u00e7in HttpClient mod\u00fcl\u00fcn\u00fc kullan\u0131r.","og_url":"https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-httpclient-isteklerini-test-etmek\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2026-03-02T07:40:51+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"20 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-httpclient-isteklerini-test-etmek\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-httpclient-isteklerini-test-etmek\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Angular Uygulamalar\u0131nda HttpClient \u0130steklerini Test Etmek","datePublished":"2026-03-02T07:40:51+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-httpclient-isteklerini-test-etmek\/"},"wordCount":2094,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["Angular"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-httpclient-isteklerini-test-etmek\/#respond"]}],"copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-httpclient-isteklerini-test-etmek\/","url":"https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-httpclient-isteklerini-test-etmek\/","name":"Angular Uygulamalar\u0131nda HttpClient \u0130steklerini Test Etmek - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2026-03-02T07:40:51+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-httpclient-isteklerini-test-etmek\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-httpclient-isteklerini-test-etmek\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-httpclient-isteklerini-test-etmek\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Angular Uygulamalar\u0131nda HttpClient \u0130steklerini Test Etmek"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/40914","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=40914"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/40914\/revisions"}],"predecessor-version":[{"id":40915,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/40914\/revisions\/40915"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=40914"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=40914"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=40914"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}