Karma Eğitimi: Karma Test Çalıştırıcısı Kullanarak Ön Uç Birim Testi

karma tutorial front end unit testing using karma test runner

Bu Eğitimde Karma'nın Nasıl Kurulacağı ve Karma Kullanılarak Ön Uç Birim Testinin Nasıl Otomatikleştirileceği, Karma.conf.js dosyası için Temel Yapılandırma Seçenekleri, vb.

Bu öğretici, Karma ve bazı ilgili araçları kullanarak yazılımın ön ucunun Birim Testini otomatikleştirme prosedürünü açıklar.

JavaScript kitaplığı kullanılarak geliştirilen web uygulamalarıyla başlayacağız: 'Jquery' ve JavaScript çalışma zamanı: 'NodeJS'; ve daha sonra AngularJS ve ReactJS gibi bazı JavaScript çerçevelerine bakacağız.

=>AŞAĞI KAYDIRKarma Öğreticilerinin tam listesini görmek için

Ne öğreneceksin:

• Karma Öğreticiler Listesi
• Bu Serideki Karma Öğreticilerine Genel Bakış
• Ön Uç Birim Testi Nedir?
• Karma Test Koşucusu Nedir?
  • Karma Test Sorumlusu Olarak Nasıl Çalışır?
• NodeJS nedir?
  • Düğüm Paket Yöneticisi (Npm) Nedir?
• Karma Nasıl Kurulur?
  • Karma.conf.js Dosya Yapılandırma Seçeneklerine Genel Bakış
• Karma başlatma Soruları
  • Diğer karma.conf.js Dosya İçeriği
  • Karma Tarayıcı Başlatıcıları
• Sonuç
  • Önerilen Kaynaklar

Karma Öğreticiler Listesi

Öğretici 1: Karma Eğitimi: Karma Test Çalıştırıcısı Kullanarak Ön Uç Birim Testi
Öğretici # 2: Örneklerle Jasmine Jquery İçeren Jasmine Çerçeve Eğitimi
Öğretici 3: KARMA ve JASMINE Kullanarak Ön Uç Birim Testine İlişkin Örnek Proje

Bu Serideki Karma Öğreticilerine Genel Bakış

Ön Uç Birim Testi Nedir?

Herhangi bir yazılım sisteminin ön ucu, kullanıcının sistem tarafından sağlanan tüm işlevlere eriştiği basit bir arabirimdir. En iyi kullanıcı deneyimini garanti etmek için, ön uç geliştiricilerin tüm kullanıcı gereksinimlerini göz önünde bulundurarak ön ucu kodladıklarından emin olunması gerekir.

Bunu sağlamanın tek yolu, geliştiricinin kodları üzerinde testler yazmak ve yürütmektir. Teslim edilebilir, yalnızca tüm bu testlerin sonuçları 'başarılı' durumunda olduğunda kaliteli bir ön uç kodu / özelliği olarak kabul edilmelidir.

Birim testi, kaynak kodun her bir ayrı ve bağımsız bölümünün, kullanım için yeterince iyi olup olmadığını belirlemek için test edildiği bir tür yazılım test yöntemidir.

Biz ne zaman bu birim testini yazılımın ön ucunda (istemci tarafı) gerçekleştirin, buna ön uç birim testi denir. Ön uç testinin tersi, arka uç testidir (sunucu tarafı).

Ön uç birim testi manuel veya otomatik olarak gerçekleştirilebilir. Otomatikleştirilmiş ön uç birim testi, daha etkili ve zaman tasarrufu sağladığından günümüzde trendde. Farklı programlama platformlarında ön uç birim testi için kullanılabilen çeşitli araçlar vardır.

AngularJS ve ReactJS, iki popüler front-end JavaScript çerçevesidir, ancak ReactJS oldukça yenidir.

Bir uygulama üzerinde birim testi yapmak için, bu ön uç çerçevelerle oluşturulan ön uçlar veya hatta çerçeveler olmadan oluşturulanlar, Karma, mocha, Yasemin, jest, enzim vb. Gibi belirli otomasyon test araçları kullanılır.

İlk olarak, Karma ve Jasmine'i kullanarak ön uç birim testinin nasıl yapılacağını öğreniyor olurduk ve daha sonra diğer araçlara da göz atabiliriz.

Ön uçlar için JavaScript çerçevelerinden herhangi biri olmadan oluşturulmuş ön uçlar için fikstürleri kullanarak ön uç birim testlerini çalıştırmaya başlayacağız. Toplamda, bu dizideki öğrendiklerimizi üç eğiticiye ayıracağız.

Bu ilk öğreticide, Karma'nın nasıl kurulduğunu kavramaya çalışacağız, ikinci öğretici Jasmine'i ayrıntılı olarak açıklayacak, son olarak üçüncü öğreticide, pratik uygulamasına bakacağız.

Karma Test Koşucusu Nedir?

Karma, JavaScript kodlarınızı birden çok gerçek tarayıcıda test etmenizi sağlayan düğüm tabanlı bir test aracıdır. Düğüm tabanlı bir araç, çalışması için Nodejs motorunun kurulu olması gereken ve düğüm paketi yöneticisi (npm) aracılığıyla erişilebilen (yüklenen) herhangi bir araçtır.

Karma, test odaklı geliştirmemizi hızlı, eğlenceli ve kolay hale getiren bir araçtır. Teknik olarak test koşucusu olarak adlandırılır. Burada Karma'nın Angular ekibi tarafından geliştirildiğini belirtmek dikkate değerdir.

Karma Test Sorumlusu Olarak Nasıl Çalışır?

Bir test koşucusu olarak Karma üç önemli şey yapar:

• Bir web sunucusu başlatır ve JavaScript kaynağınızı ve test dosyalarınızı o sunucuda sunar.
• Tüm kaynak ve test dosyalarını doğru sırayla yükler.
• Son olarak, testleri çalıştırmak için tarayıcıları döndürür.

Karma Başka Ne Yapabilir?

Karma'nın yukarıda listelenen işlevlerinin yanı sıra, Karma'nın yapmak üzere yapılandırılabileceği birkaç başka şey de vardır. Örneğin, kod testi kapsamını yayınlamak tulumlar. io ; bir kodu es6 formatından es5'e aktarın, birden çok dosyayı tek bir dosyada paketleyin ve kaynak haritaları oluşturun.

Sonraki eğitimlerimizde, bunlardan bazılarının nasıl çalıştığını göreceğiz.

Karma'ya Başlarken Gereksinimler

Karma'ya başlamak için, NodeJS ve Node paket yöneticisi hakkında bilgi sahibi olmanız gerekir.

NodeJS nedir?

Nodejs, JavaScript eşzamansız çağrıların engelleme doğasını çözer, yani JavaScript'te eşzamansız bir işleve erişildiğinde, eşzamansız çağrı dönene kadar kodun diğer bölümlerinin çalışmasını engeller. Ancak NodeJS ile asenkron engellemesiz fonksiyon çağrıları yapılabilir.

Teknik terimlerle, NodeJS'nin ölçeklenebilir ağ bağlantılı uygulamalar oluşturmayı kolay ve mümkün kılan, eşzamansız, olay odaklı bir JavaScript çalışma zamanı olduğu söylenebilir.

NodeJS ile Başlarken

makefile c ++ nasıl yapılır

NodeJS çerçevesini kurmanız yeterlidir. Tek yapmanız gereken onları ziyaret etmek İnternet sitesi ve işletim sisteminize bağlı olarak, yükleyiciyi indirmeli ve kurulumuyla ilgili kendi sitelerindeki talimatları izlemelisiniz.

Düğüm Paket Yöneticisi (Npm) Nedir?

Düğüm paketi yöneticisi (npm), kendi uygulamanızda yeniden kullanmak isteyebileceğiniz diğer önceden oluşturulmuş düğüm tabanlı uygulamaları veya modülleri yüklemek için kullanılan bir JavaScript paket yöneticisidir.

NodeJS'yi yüklediğinizde Npm yüklenir, ancak npm düğümden daha hızlı güncellenir. Bu nedenle, bir noktada npm'nizi güncellemeniz gerekebilir. Npm'nin en son sürümünü yüklemek için, bu komutu komut satırınızdan çalıştırmanız gerekir: npm npm @ en son -g yükle

Yukarıdaki komut, işletim sistemi kabuğundan npm uygulamasını yürütmesini istediğinizi ve uygulamanın npm paketinin kurulumunu gerçekleştirmesi gerektiğini belirtir. @latest, paketin en son sürümünün yüklenmesi gerektiğini belirtir, -g seçeneği, paketin global olarak yüklenmesi gerektiğini belirtir.

Npm hakkında daha fazla ayrıntı bulunabilir İşte .

Burada belirtilmesi gereken iki önemli şey vardır, yani –save ve –save-dev seçeneğiyle bir paket kurmak.

Testler sırasında, yüklenen herhangi bir paket –save-dev seçeneği kullanılarak kurulmalıdır, yani paket yöneticisine paketi bir proje bağımlılığı olarak değil bir geliştirme bağımlılığı olarak yüklemesi talimatını vermek için (–save kullandığım zaman).

Geliştirme bağımlılığı, bu pakete üretim aşamasında uygulama tarafından ihtiyaç duyulmadığından, yalnızca kalite güvence amacıyla geliştirme aşamasında gerekli olduğundan seçilmelidir.

Karma Nasıl Kurulur?

Karma'ya başlamak için, birim testlerini yazmak üzere olduğunuz proje için bir klasör oluşturmanız gerekir. Bunu 'basicUT' olarak adlandırabilirsiniz. Metin düzenleyici olarak Visual Studio Code kullanıyorum, bu nedenle indirip yüklemenizi de tavsiye ederim. Bulabilirsin İşte .

Görsel stüdyo kodu dahili terminal penceresini açın, 'Görünüm menüsü' ne tıklayın ve ardından entegre terminal alt menüsünü seçin.

Terminal penceresinde, aşağıdaki şekilde gösterildiği gibi 'npminit' yazın. Bu komut, her düğüm tabanlı uygulamanın sahip olması gereken 'package.json' dosyasını otomatik olarak kurmanız için size yol gösterir.

Package.json dosyası, uygulamanızla ilgili adı, sürüm numarası, yazarı, uygulama bağımlılıkları, geliştirme bağımlılıkları, test komutu veya komut dosyası ve uygulamayı başlatmak veya uygulamayı çalıştırılabilir bir formda oluşturmak için komut dosyası gibi bilgileri depolar.

Tıklayın İşte 'package.json' dosyasıyla ilgili daha fazla ayrıntı için.

Npminit kullanarak bir package.json dosyasını başlatma ekran görüntüsü

Yukarıda açıklandığı gibi, Karma'yı kurmak için ihtiyacınız olan tek şey şu komutu çalıştırmaktır. npm Karma @ en son –save-dev yükle . Umarım artık bu komutun ne anlama geldiğini yorumlayabilirsiniz.

Şimdi, Karma'yı başarıyla yükledik, Karma'yı ön uç birim testinizde kullanmak için yapmanız gereken sonraki şey nedir?

Yapmanız gereken tek şey bunun için yapılandırma dosyasını yazmaktır ve dosya genellikle JavaScript için Karma.conf.js olarak adlandırılır. Ancak CoffeeScript için durum farklıdır. Tıklayın İşte Karma yapılandırma dosyası hakkında daha fazlasını keşfetmek için.

Karma.conf.js Dosya Yapılandırma Seçeneklerine Genel Bakış

Karma.conf.js yapılandırma dosyası, Karma'nın Karma'nın üç önemli işlevini gerçekleştirmek için izlemesi gereken kurulum talimatını içermelidir.

Bu yapılandırma dosyası, cevaplamanız için farklı soruları görüntülemeye başlayan 'karma init' komutu kullanılarak manuel veya otomatik olarak oluşturulabilir ve Karma, yapılandırma dosyasını oluşturmak için verdiğiniz yanıtları kullanır.

Şimdiye kadar, 'karma init' komutunun çalıştırılmasının hata verdiğini keşfederdiniz ' 'Karma', dahili veya harici bir komutla çalıştırılabilir program veya toplu iş dosyası olarak tanınmıyor ”.

Bunun nedeni, Karma'nın üzerinde çalıştığınız projede global olarak değil yerel olarak kurulmuş olmasıdır. Bu nedenle, işletim sistemi kabuğunuz, pencere kullanıyorsanız ortam ayarlarında Karma uygulamasını veya Mac kullanıyorsanız .bash_profile dosyasında bulamaz.

Bu hatayı düzeltmek için Karma'yı global olarak kurmamız gerekiyor. Sadece Karma değil, Karma'nın Karma-cli komut satırında kullanılmasını sağlamak için özel olarak tasarlanmış paket. Sadece komutu çalıştırın, ′ Npm install -g karma-cli ’ .

Şimdi karma-init komutunu yeniden çalıştırın ve aşağıdaki şekilde gösterildiği gibi soruları görebilirsiniz. Her soruyu cevapladığınızda ve 'ENTER' tuşuna bastığınızda, bir sonraki soru gelecektir.

Komut satırında Karma init komutunu çalıştırma.

Aşağıdaki tablo size soruların bir listesini, anlamlarını ve bu eğitim bağlamında cevabınızın ne olması gerektiğini verecektir.

Karma başlatma Soruları

S # 1) Hangi test çerçevesini kullanmak istiyorsunuz?

Açıklama: Test çerçevesi, belirli bir dilin herhangi bir yazılım ürünü için kodlama testleri sürecini otomatikleştirmek için gereken işlevleri ve rutinleri sağlayan bir pakettir. Örneğin, yasemin ve mocha, JavaScript yazılım paketleri için çerçeveleri test ediyor, Junit ve JTest Java için çerçeveleri test ediyor, kontrol edin bu daha fazla ayrıntı için.

Cevap: Düğüm tabanlı bir uygulama için diğer mevcut test çerçevelerini görüntülemek için sekmeyi kullanmanızı isteyen bir talimat görüntülenir, ancak varsayılan olarak yasemin görürsünüz, bu nedenle sadece enter tuşuna basın.

S # 2) Require.js kullanmak istiyor musunuz?

Açıklama: Require.js bir JavaScript dosyası ve modül yükleyicidir. Merak ediyor olabilirsiniz: neden bir dosya veya modül yükleyiciye ihtiyacınız var? Okuyun bu

Cevap: Kodda yazacağız, require.js'yi kullanmayacağım, bu yüzden sadece hayır cevabını verin. O soru, biz ne kullanacağız? Required ifadelerini harici dosyaları başka bir dosyaya getirmek için kullanabilmek için, bir modül yükleyiciye ihtiyacımız var, bu yüzden Browserify'ı tercih ederiz. Aşağıda daha fazla ayrıntı göreceksiniz.

S # 3) Herhangi bir tarayıcıyı otomatik olarak yakalamak istiyor musunuz?

Açıklama: Karmanın, farklı tarayıcılarda ön ucunuzu test etmenize yardımcı olan bir araç olduğunu hatırlayın, bu nedenle, bu soru, karma başlangıcı ile testi her çalıştırdığınızda döndürmek isteyeceğiniz tarayıcıları seçmeniz içindir.

Cevap: Bu ders için chrome, firefox ve phantomjs seçin. Şimdi soru PhantomJS nedir? PhantomJS, başsız web sitesi testi, ekran yakalama, sayfa otomasyonu ve ağ izleme için tasarlanmış başsız bir web tarayıcısıdır, ayrıntıları görebilirsiniz İşte .

Başka bir soru, başsız web tarayıcısı nedir? Başsız bir web tarayıcısı, grafik kullanıcı arabirimi olmayan bir tarayıcıdır, kodlar konsol benzeri bir ortamda yürütülür.

S # 4) Kaynak ve test dosyalarınızın konumu nedir?

Açıklama: Bu soru, ön uç dosyalarını kaydedeceğiniz yolu ve bunlar üzerinde Birim testi gerçekleştirecek test dosyalarını ortaya çıkarmak içindir.

Cevap: Bu proje için, kaynak dosya yolu için public / js / *. Js ve test dosyaları yolu için test / * Spec.js girin. * Spec.js, tüm test dosyalarının herhangi bir şekilde çağrılabileceğini, ancak sonunda .js dosya uzantısıyla Spec içermesi gerektiğini belirtir.

b tree ve b + tree arasındaki fark

S # 5) Önceki modellerin içerdiği dosyalardan herhangi biri hariç tutulmalı mı?

Açıklama: Bazen, belirli kaynak dosyalarının ve test dosyalarının yüklenmemesi gerekebilir, bu soru tarayıcıya Karma tarafından yüklenmemesi gereken bu tür dosyaları belirtmeniz içindir.

Cevap: Enter tuşuna basarak boş bir dizi girmeniz yeterlidir. 'Glob kalıplarını kullanabilirsiniz' ifadesini gördünüz mü? Örneğin, '** / *. Swp'. '. Glob desenleri, Unix benzeri bir ortamda joker karakter kullanarak bir dizi dosya adı belirtmek için kullanılır.
Bizim durumumuzda, public / js / *. Js, (*) ile gösterilen herhangi bir karakter kümesine sahip herhangi bir dosya anlamına gelir ve .js dosya uzantısına sahiptir ve public / js yolunda bulunur. Daha fazla oku İşte

S # 6) Karma'nın tüm dosyaları izlemesini ve değişiklik üzerine testleri çalıştırmasını istiyor musunuz?

Açıklama: Bir görev / test çalıştırıcısı dosyalarınızı izlediğinde, bunun anlamı, geliştirme sırasında dosyaları her düzenlediğinizde, test / görev çalıştırıcısının dosyayı yeniden yüklediğinde veya yeniden gerçekleştirdiğinde, siz manuel olarak sormaya gelmeden dosyadaki işlevi yeniden gerçekleştirmesidir. tekrar yapmak için.

Cevap: Öyleyse basitçe evet yanıtlayın.

Diğer karma.conf.js Dosya İçeriği

# 1) basePath : Bu yapılandırma, test ve kaynak dosyaları için sağlanan yol bilgilerini çözmek için kullanılması gereken herhangi bir klasörün adını taşır.

# 2) önişlemciler : Bu, dosyaları tarayıcıya yüklemeden önce dosyaları işlemek ve test etmek için kullanılması gereken program dosyalarının adını taşır.

Bu neden gerekli?

Henüz tarayıcılar tarafından anlaşılmayan ES6 kodlama stilinin ortaya çıkmasıyla birlikte, kodu tarayıcının anlayabileceği ES6 formatından ES5'e aktarmaya ihtiyaç duyulmaktadır, dolayısıyla Karma için babel ön işlemcisinin, tarayıcıya yüklemeden önce ES6'dan ES5'e kod.

Bir önişlemcinin başka kullanımları da vardır, Örneğin. coveralls.io'ya kod testi kapsamı yayınlama, bkz. İşte daha fazla ayrıntı için.

# 3) muhabirler : Bu yapılandırma seçeneği, test sonuçlarını raporlamak için kullanılacak paketi belirtir. Kod testi kapsamını bildiren birkaç muhabir vardır; Örneğin. kapsama. Ancak varsayılan olarak ilerlemeye ayarlanmıştır. Bunun bir dizi olduğuna dikkat edin, dolayısıyla başka muhabirler de ekleyebilirsiniz.

# 4) bağlantı noktası : Bu, tarayıcının döndürüldüğü bağlantı noktasını belirtir.

# 5) renkler : Raporlayıcıların raporları renklendirmeli olarak oluşturması gerekip gerekmediğini belirtir.

# 6) logLevel : Bu, günlüğe kaydetme düzeyini belirtir. Varsayılan olarak, config.LOG_INFO olarak ayarlanmıştır, bu sadece bilgilerin günlüğe kaydedileceği anlamına gelir.

# 7) singleRun : Bu, testi bir kez çalıştırdıktan sonra Karma'nın çıkıp çıkmayacağını belirtir. True olarak ayarlanırsa, Karma testi çalıştırır ve testin başarısız olup olmamasına bağlı olarak 0 veya 1 durumuyla çıkar, aksi takdirde Karma durmaz.

Bu konfigürasyon, TravisCI ve CircleCI gibi araçları kullanan sürekli entegrasyon testi amaçları için gereklidir.

# 8) eşzamanlılık : Bu, Karma'nın kaç tarayıcının aynı anda başlaması gerektiğini belirtir. Varsayılan olarak sonsuza ayarlanmıştır.

Tıklayın İşte Karma yapılandırma seçenekleri hakkında ayrıntılı bilgi için.

Gözlemci bir öğreniciyseniz, bu üç satırı görmüş olmalısınız.

Bunu aşağıdaki bölümde inceleyelim.

Karma Tarayıcı Başlatıcıları

Karma-firefox-launcher, Karma-chrome-launcher ve Karma-phantomjs-launcher genellikle Karma için tarayıcı başlatıcıları olarak adlandırılabilir.

Karma'nın bu bağımsız tarayıcı uygulamalarını çalıştırması gerekir, bu nedenle, Karma'nın test yürüttüğü herhangi bir işletim sisteminde tarayıcıları döndüren kabuk komutunu çalıştırmak için Karma'ya bir arabirim sağlamak üzere üçüncü taraf bir uygulama gereklidir.

Bu nedenle, sırasıyla firefox, chrome ve phantomjs için Karma tarayıcı başlatıcılarıdır. Karma, bu gereksinimleri yükleyemediğini bize bildirmek için bu ifadeleri patlatıyor ve daha sonra bizden bunu kendi başımıza manuel olarak yüklememizi istiyor.

Bunu yapmak için düğüm paketi yöneticisini kullanacağız ve şu komutları komut satırından çalıştıracağız: npm Karma-chrome-launcher'ı kurun Karma-firefox-launcher Karma-phantomjs-launcher -save-dev

Hepimiz, yüklü olmayan phantomjs ile chrome ve firefox tarayıcılara sahip olmalıyız. Bu doğruysa, yüklemeniz gerekir, bakın İşte detaylar için tıklayın İşte hızlı bir başlangıç ​​kılavuzu için.

Sonuç

Bu eğiticide, ön uç birim testinin ne hakkında olduğunu anlamaya çalıştık. Ayrıca düğüm tabanlı bir araç olan Karma olarak bilinen JavaScript yazılımı için önemli bir ön uç birim test aracı da tanıttık. Ayrıca Karma.conf.js dosyası için temel yapılandırma seçeneklerini ve bunların ne anlama geldiğini sunduk.

Çıkarımlar

• Birim testi, kaynak kodun her bir ayrı ve bağımsız bölümünün kullanım için yeterince iyi olup olmadığını belirlemek için test edildiği bir tür yazılım test yöntemidir.
• Bu birim testini yazılımın ön ucunda (istemci tarafı) gerçekleştirdiğimizde, bu ön uç birim testi olarak bilinir.
• Karma, JavaScript kodlarınızı birden çok gerçek tarayıcıda test etmenizi sağlayan düğüm tabanlı bir test aracıdır. Bu nedenle test koşucusu olarak adlandırılır.
• Nodejs, ölçeklenebilir ağ bağlantılı uygulamalar oluşturmayı kolay ve mümkün hale getiren, eşzamansız, olay odaklı bir çalışma zamanı JavaScript'idir.
• Düğüm paketi yöneticisi (npm), kendi uygulamanızda yeniden kullanmak isteyebileceğiniz diğer önceden oluşturulmuş düğüm tabanlı uygulamaları veya modülleri yüklemek için kullanılan bir JavaScript paket yöneticisidir.

Sonraki Eğitim

Karma tek başına JavaScript uygulamalarının ön uç birim testini otomatikleştiremez, ayrıca test senaryolarımızın yazılmasını kolaylaştıracak bir test çerçevesi gibi diğer test araçlarıyla birlikte çalışması gerekir.

Yaklaşan eğitimimizde Jasmine ve Jasmine-Jquery paketini inceleyeceğiz. Bu paket Jasmine'in işlevselliğini JavaScript kitaplığından yararlanan HTML armatürlerini test edebilecek şekilde genişletecek: Jquery.

Önerilen Kaynaklar

• 2021'de En Popüler 20 Birim Test Aracı
• Başarılı Birim Testinin Anahtarı - Geliştiriciler Kendi Kodlarını Nasıl Test Ediyor?
• Ayrıntılı Yanıtlarla EN İYİ 45 JavaScript Mülakat Soruları
• Mutlak Yeni Başlayanlar İçin AngularJS Eğitimi (Kurulum Kılavuzu ile)
• Açısal Sürümler Arasındaki Fark: Angular Vs AngularJS
• Yazılım Testinde Test Kapsamı (Test Kapsamını En Üst Düzeye Çıkarma İpuçları)
• 48 En Popüler AngularJS Röportaj Soruları ve Cevapları (2021 LİSTESİ)
• Node.js Test Çerçevesi Nasıl Kurulur: Node.js Eğitimi