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'in ne olduğu ve JavaScript'ten nasıl farklı olduğu konusuna çok fazla girmeyelim ve önemli olanı belirtelim -
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…
TypeScript'te test otomasyonu projesi oluşturma sürecini inceleyelim:
Bir Node.js projesi oluşturun.
npm init -y
TypeScript paketini yükleyin.
npm i typescript
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:
Resmi belgeleri kullanarak yapılandırmanızı genişletebilirsiniz.
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:
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
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
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.
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.
TypeScript'in REST API testine sunduğu ana özellik...
İstek ve yanıt metninizin nasıl görünmesi gerektiğini beyan edebilirsiniz;
Ö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...
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.
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.
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:
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.
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.