paint-brush
REST API Otomatik Testinde TypeScript ve JavaScript Karşılaştırmasıile@bormando
3,329 okumalar
3,329 okumalar

REST API Otomatik Testinde TypeScript ve JavaScript Karşılaştırması

ile Dmitrii Bormotov6m2023/08/04
Read on Terminal Reader
Read this story w/o Javascript

Çok uzun; Okumak

TypeScript, Node.js ekosisteminde paket olarak sunulan bir programlama dilidir. Bu paketi kullanarak şunları yapabilirsiniz: 1. Projenizde kısa (mutlak) içe aktarmalar yapın. 2. İstek ve yanıt verileriniz için özel türler oluşturun. 3. Kodunuzda daha az sözdizimi hatası yapmak için IntelliSense ve tür denetimi özelliklerini kullanın. Özel türler aynı zamanda yük verileriniz için bir belge görevi de görür; bunun için artık harici koleksiyonlarınıza/araçlarınıza bakmanıza gerek kalmayacak!
featured image - REST API Otomatik Testinde TypeScript ve JavaScript Karşılaştırması
Dmitrii Bormotov HackerNoon profile picture
0-item

Herkese merhaba!


Bu makaleyi yazmam için öğrencilerim ve danışanlarım bana ilham verdi. JavaScript'teki test otomasyonu sürecine alışır alışmaz TypeScript'i öğrenmelerini sıklıkla öneririm. REST API testi açısından test otomasyon çerçevenizde TypeScript kullanmanın özelliklerinin neler olduğunu görelim…


Bir test projesinin tam kodunu burada bulabilirsiniz.

TypeScript

TypeScript'in ne olduğu ve JavaScript'ten nasıl farklı olduğu konusuna çok fazla girmeyelim ve önemli olanı belirtelim - bu programlama dili . Ama aynı zamanda oldukça önemli; doğrudan JavaScript'e ( Node.js platformu) bağlıdır.


TypeScript bir Node.js paketi olarak sunuluyor, bu yüzden buna bazı harika özelliklere sahip JavaScript olarak bakıyorum.


Dilin kendisi ve neler sunabileceği hakkında daha fazla bilgi edinmek için lütfen resmi web sitesini ziyaret edin, biz de test otomasyonu açısından özellikleri hakkında konuşacağız…

Proje kurulumu

TypeScript'te test otomasyonu projesi oluşturma sürecini inceleyelim:


  1. Bir Node.js projesi oluşturun.

    npm init -y

  2. TypeScript paketini yükleyin.

    npm i typescript

  3. Proje için varsayılan bir TypeScript yapılandırması oluşturun - tsconfig.json .

    npx tsc --init


Yukarıdaki komut varsayılan bir yapılandırma dosyası oluşturacaktır, ancak bunu şunun gibi bir şeye kısaltmanızı öneririm:


 { "compilerOptions": { "baseUrl": "./", "module": "esnext", "target": "esnext", "sourceMap": false, "moduleResolution": "node", "allowJs": true, "skipLibCheck": true, "resolveJsonModule": true, "allowSyntheticDefaultImports": true, "paths": { "*": ["./*"] } } }


Bu yapılandırma gerekli minimum değeri içerir:


  • En son EcmaScript sürümünü kullanır,
  • JSON içe aktarmalarını kullanılabilir hale getirir,
  • içe aktarmada mutlak yolu kullanmanızı sağlar.


Resmi belgeleri kullanarak yapılandırmanızı genişletebilirsiniz.


Araç seçimi

Node.js ekosisteminin sunduğu herhangi bir aracı kullanabilirsiniz, ancak deneyimlerime göre TypeScript ile çalışan mühendislerin çoğu birkaç iyi nedenden dolayı Jest'i seçiyor:


  • mükemmel topluluk desteği (güncellemeler, yanıtlar, belgeler, kod örnekleri),
  • esnek konfigürasyon.


Daha önce projenin çekirdeğini oluşturmak için Mocha + Chai'yi kullanmaktan keyif alıyordum, ancak şimdi hem test çalıştırıcısı hem de iddia kitaplığı içerdiği için Jest'e de bağlı kalıyorum.


Axios en popüler HTTP istemcisi gibi görünüyor, bu yüzden sizin de seçiminizi yapmanızı öneririm.


Kurulumunuz için bunu kullanmak zorunda kaldığınızı söyleyemem ama projelere baktığınızda bunun olağan bir şey olduğunu söylüyorum.


Şimdi bu paketleri bağımlılık olarak kurmanız yeterli:

npm i jest axios

Koleksiyonları yazın

Bazı paketler ( Axios gibi) içinde TypeScript türleri içerir, ancak Jest ve Mocha içermez. Ayrıca, Jest'in düzgün çalışması için @types/jest ile birlikte bir ts-jest paketi gerekir - ilki TypeScript özelliklerini etkinleştirir ve ikincisi IntelliSense kullanmanızı sağlar.


Bu nedenle, bazı paketleri kullanmaya çalışırken otomatik tamamlama özelliğiniz yoksa, muhtemelen tür bildirimlerini kaçırdığınızı unutmayın.


TypeScript ile ilgili uzantıları (paketleri) de yükleyelim:

npm i ts-jest @types/jest

Yapılandırma

Jest , bir ts-jest yapılandırma ön ayarı gerektirir, bu nedenle bunu config (veya package.json ) dosyanızda bildirmeniz gerekir:


 { "jest": { "preset": "ts-jest" } }


Bir proje içinde mutlak yol kullanmayı planlıyorsanız yapılandırmanızı da ayarlamanız gerekir:


 { "jest": { "preset": "ts-jest", "moduleDirectories": [ "node_modules", "<rootDir>" ] } }


Bu yapılandırma, testleri basit bir komutla çalıştırmanıza olanak jest ...


Bu nedenle package.json dosyasındaki test komut dosyanızı şu şekilde yapılandırın:


 { "scripts": { "test": "jest" } }


Daha sonra testlerinizi istediğiniz zaman npm test veya npm run test komutuyla çalıştırın.


Testleri çalıştırma


Ayrıca bir Visual Studio Code kullanıcısıysanız bir Jest Runner uzantısı yüklemenizi öneririm; bu, yalnızca tek bir tıklamayla istediğiniz testleri/paketleri çalıştırmanıza / hata ayıklamanıza olanak tanır. WebStorm'da yerleşik bir özelliktir.


Tek tıklamayla testleri çalıştırın ve hata ayıklayın!

Özel türler

TypeScript'in REST API testine sunduğu ana özellik... türleri , Elbette!


İstek ve yanıt metninizin nasıl görünmesi gerektiğini beyan edebilirsiniz; anahtar isimler , değer türleri ve benzeri.


Örnek olarak bir Paysis sunucusunu ele alalım - /auth bitiş noktası için request body payload'unu bir tür olarak yazabiliriz:


 export type AuthRequestBody = { login: string password: string }


Yanıt gövdesi için de aynısı - isteğimize hangi sunucunun göndermesi gerekir:


 export type AuthResponseBody = { token?: string message?: string }


Başarı/başarısızlık senaryoları için farklı bir veri yükü olacağından, anahtarları " ?" aracılığıyla "isteğe bağlı" olarak işaretleyebilirsiniz. karakter.


İşlem tamamlandıktan sonra, testlerinizde istek ve doğrulama oluşturmak için bu türleri kullanabilirsiniz...

Rica etmek

Axios'ta request config aracılığıyla hangi gövdeyi gönderdiğinizi söyleyebilirsiniz:


 const payload: AxiosRequestConfig<AuthRequestBody> = { method: 'post', url: '/auth', data: { login: process.env.USERNAME, password: process.env.PASSWORD, }, }


AxiosRequestConfig<AuthRequestBody> içindeki AuthRequestBody tam olarak bunu ifade eder ☝️

Bu, data nesnesinde sağlanan AuthRequestBody türüyle eşleşen yükü kullanmaya zorlanacağınız anlamına gelir. Gerekli alanlardan bazılarını ayarlamayı unutursanız veya aşırı olanları ayarlamayı unutursanız bir hata görürsünüz.

Cevap

Aynı şey tepki konusunda da yapılabilir:


 const response: AxiosResponse<AuthResponseBody> = await client.request(payload)


response.data nesnesine otomatik tamamlama ekleyecektir, böylece response.data.token veya response.data.message alanlarına erişebileceksiniz.

Gelişmiş araçlar

Yukarıdaki basit şeylerin dışında, özel türlerinizden bir JSON şeması oluşturmak da mümkündür. Şemayla eşleşip eşleşmediğini görmek için yanıt gövdesindeki her bir anahtarı kontrol etmenize değil, tüm yükü kontrol etmenize olanak tanır.


Yani fikir şu:


  1. Özel türlerden bir JSON şeması oluşturun.
  2. Yanıt gövdesini doğrulamak için özel bir eşleştirici toMatchSchema kullanın.


Oldukça hoş şeyler, ancak bu değişikliklerden sonra testlerinizin kesintiye uğrayabileceğini unutmayın; bu, bazı ek alanlar göründüğünde olur, dolayısıyla şemayı düzenli olarak güncellemeniz gerekir.

Çözüm

TypeScript kurulumu zor olabilir, özellikle de ilk seferinizse, ama buna değer!


Giriş ve çıkış verilerinizi türlerle kaplarsanız, bu nesneleri ayrıştırırken yazım hatası veya başka bir sözdizimi hatası yapmanızın hiçbir yolu yoktur. Sizi basit hatalardan kurtarır ve isteklerinizin yapısını doğrudan kodunuzda görmenizi sağlar, böylece herhangi bir HTTP koleksiyonu açmanıza ( Postman gibi) ve hangi gövdeyi istediğini/yanıt verdiğini görmek için ihtiyacınız olan isteği aramanıza gerek kalmaz. ile.


Deneyiminizi ve bu konuda ne düşündüğünüzü bana bildirin.