Visual Studio Code ile TypeScript Testlerimizi Görselleştirelim

TypeScript testlerimizi daha da güzelleştirmeye ne dersiniz?

TypeScript test yazımızda projemizi hazırlamış, testlerimizi geliştirmiş, test ve kapsam için script hazırlamış ve sonuçları komut satırında görebilmiştik.

Hemen hatırlayalım, Mocha testlerimizi Chai ifadeleri ile yazmıştık, istanbul kullanarak kapsam kontrolünü nyc komut satırı arayüzü ile yapmıştık.

Şimdi bazı eklentiler ile Visual Studio Code üzerinde bu testleri görselleştirelim.

Mocha Test Explorer

Mocha Test Explorer eklentisi bize testlerimizi komut satırına gerek kalmadan testin üzerinde çıkran Run ve Debug komutlarıyla çalıştırmamız ve debug edebilmemizi sağlıyor.

Ancak bunu yapabilmesi için önce testlerimizi nasıl bulacağını ona söylememiz gerekiyor. Bunu projemizin ana klasöründe bir .vscode klasöründe settings.json dosyasını aşağıdaki içerik ile oluşturmamız gerekiyor. Biliyorsunuzdur, bu dosya ile Visual Studio Code proje bazlı ayarlar yapabiliyoruz.

{
    "mocha.files.glob": "**/*.spec.ts",
    "mocha.options": {
        "compilers": "ts:ts-node/register"
    },
    "mocha.requires": [
        "ts-node/register"
    ]
}

Klasör yapımız da aşağıdaki gibi olmalı.

Şimdi test dosyamızı açtığımızda aşağıdaki gibi görünmeli (testleri çalıştırdığım için yeşil kutuları görüyorsunuz).

Not: Komutları göremezseniz Visual Studio Code Reload Window komutu ile editörü tekrar yüklemeniz gerekebilir.

Mocha Sidebar

Sıradaki eklentimiz Mocha Sidebar. Bu eklenti ile test dosyalarımızı açmadan, Visual Studio Code Test kenar penceresine bu eklentinin eklediği arayüzü kullanarak çalıştırabiliyoruz.

Ağaç görünümünde istersek tüm testleri, istersek grupları, istersek tek tek testleri çalıştırabiliyoruz. Sonuçları görmek için ise Output penceresinde sideBar-test görünümünü seçmemiz gerekiyor.

Farketmişsinizdir, bu görünümde ağaç yapısının üstünde 3 adet buton bulunmakta.

☂ Şemsiye butonu test kapsamımızı (coverage) görmemizi sağlıyor. Burada ufak bir detay var, gösterim için biraz önceki sideBar-test görünümü kullanılmıyor, sideBar-coverage görünümüne geçmeniz gerekiyor.

▷ Oynat butonu ile devamlı test (Continuous Testing) yapabiliyoruz. Açıkçası ben düzgün çalıştıramadım. Normalde kodlarınızı yazdıkça düzenli olarak testlerin çalıştırılması ve kalan testlerin anında kırmızı, geçenlerin ise yeşile dönmesi gerekiyor.

↻ Yenile butonu tahmin ettiğiniz gibi projemizdeki testleri yeniden tarıyor. Yeni yazdığımız testlerin listeye gelmesi için kullanıyoruz.

Coverage Gutters

Testlerimizi artık Visual Studio Code ile çağırıp kod kapsamını Output görünümünde izleyebiliyoruz. Dosyalardaki satırların kod kapsamında olup olmadığını görebilsek ne güzel olurdu değil mi?

Bir önceki aşamada Mocha Sidebar ile çalışırken kod kapsamını çalıştırdıysanız eğer (şemsiye butonu ile) projenizde aşağıdaki gibi bir klasörün oluşması gerekiyor.

Coverage Gutters eklentisini kurduğumuzda da Visual Studio Code Status Bar’a aşağıdaki gibi Watch butonu gelmiş olmalı.

Tıkladığımızda buton yazısı Remove Watch olacak. Bu işlem ile Coverage Gutters’a projemiz içinde kod kapsam dosyası aramasını söylemiş olduk. Eklentilerimizin varsayılan ayarları ve projemizdeki Mocha ve nyc ayarları bu noktaya kadar sorunsuz çalışmamızı sağladı. Ancak hepsini istediğiniz gibi özelleştirebiliyorsunuz. Visual Studio Code ayarlar sayfasına gidip eklentiler için tanımlanmış özellikleri inceleyebilirsiniz.

Şimdi lib/fibonacci.ts dosyamızı açalım. Aşağıdaki gibi görünmeli.

Kod satırlarımızın sol tarafındaki yeşillikler bu satırların testler kapsamında çalıştığını gösteriyor. Test yazmaya başladığınızda, bu bilgiye sahip olmak, hem de çalıştığınız editörde görebilmek çok faydalı olacak.

Şimdi başka bir deney yapalım, test/fibonacci.spec.ts dosyasını açıp aşağıdaki gibi iki testi kapatın.

Mocha Sidebar penceresinde şemsiyeye tıklayıp kod kapsamını tekrar hesaplatalım. lib/fibonacci.ts dosyasını tekrar açtığımızda aşağıdaki gibi testlerimizin artık tüm satırları kapsamadığını göreceğiz.

Bu bize testlerimizin uğramadığı kodlarımızın olduğunu gösteriyor, ne kadar kullanışlı değil mi?

Sonuç

Testlerimiz artık çok daha görsel. Benzer sonuçları elde edebileceğimiz bir çok test kütüphaneleri ve eklentiler var, keşfetmek size kalmış.

Test yazmanın keyfine varmanız dileğiyle 🧪
Mutlu kodlamalar!