Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Angular 2+
Code

Menguji Components di Angular Menggunakan Jasmine: Bagian 1

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Husain Ali Yahya (you can also view the original English article)

Final product image
What You'll Be Creating

Test Driven Development adalah praktik pemograman yang telah diajarkan dan dipromosikan oleh tiap komunitas pengembang di dunia. Meskipun dia adalah sebuah rutinitas yang sering diabaikan oleh pengembang ketika mempelajari sebuah framework baru. Menulis unit tests sejak hari pertama akan membantumu untuk menulis kode yang lebih baik, menandai error dengan mudah, dan menjaga alur kerja pengembangan yang lebih baik.

Test-Driven Development di Angular

Angular, sebagai platform pengembangan front-end full-fledged, memiliki seperangkat alat uji coba-nya sendiri. Kita akan menggunakan alat-alat berikut dalam panduan ini:

  • Jasmine Framework. Jasmine adalah sebuah behavior-driven testing framework yang populer untuk JavaScript. Dengan JAsmine, kamu bisa menulis tes-tes yang lebih ekspresif dan mudah. Ini adalah contoh untuk permulaan.
  • Karma Test Runner. Karma adlah sebuah alat yang mengizinkanmu mengetes aplikasimu pada aneka browser. Karma memiliki plugin untuk browser-browser seperti Chrome, Firefox, Safari dan lainnya. Tapi saya lebih suka menggunakan headless browser untuk uji coba. Headless browser tidak memiliki GUI, dan karena-nya, kamu bisa menyimpan hasil tes-nya di dalam terminal-mu. Di panduan ini, kita akan mengonfigurasi Karma untuk berjalan di Chrome dan, bersifat opsional, versi headless dari Chrome.
  • Angular Testing Utilities. Angular testing utilities memberikanmu sebuah pustaka untuk membuat lingkungan uji coba untuk aplikasimu. Class-class seperti TestBed dan ComponentFixtures dan helper function seperti async dan fakeAsync adalah bagian dari paket @angular/core/testing. Pemahaman mengenai utilitas tersebut dibutuhkan jika kamu ingin menulis tes-tes yang mengungkapkan bagaimana komponen-komponenmu berinteraksi dengan templata, layanan, dan komponen lainnya.

Kita tidak akan membahan functional test menggunakan Protractor di panduan ini. Protractor adalah test framework end-to-end terkenal yang berinteraksi dengan antarmuka aplikasi menggunakan browser yang sesungguhnya.

Di panduan ini, kita lebih fokus pada pengetesan komponen dan logika komponen. Meskipun, kita akan menulis beberapa tes yang mendemonstrasikan dasar interaksi antarmuka menggunakan framework Jasmine.

Tujuan Kita

Tujuan dari panduan ini adalah untuk membuat sebuah front-end untuk aplikasi Pastebin dalam lingkungan test-driven development. Pada panduan ini, kita akan mengikuti mantra TDD yang populer, yaitu "red/green/refactor". Kita akan menulis tes yang awalnya gagal (red) lalu kita mengerjakan kode aplikasi kita untuk membuatnya bisa lulus (green). Kita harus me-refactor kode kita dia mulai tidak disukai, yang berarti dia menjadi bengkak dan jelek.

Kita akan menulis tes untuk komponen, template mereka, services, dan class Pastebin-nya. Gambar berikut mengilustrasikan struktur dari aplikasi Pastebin kita. Item yang berwarna abu-abu akan dibahas pada bagian kedua dari panduan ini.

Structure of the application we are about to build Components services and modules are highlighted

Pada bagian pertama dari panduan ini, kita hanya akan berkonsentrasi pada persiapan lingkungan uji coba dan menulis tes-tes dasar untuk components. Angular adalah component-based framework; karenanya, adalah sebuah ide yang bagus untuk menghabiskan beberapa saat untuk memahami penulisan tes-tes untuk components. Pada bagian kedua dari seri ini, kita akan menulis tes-tes yang lebih rumit untuk components, components dengan input, routed components, dan services. PAda akhir dari seri ini, kita akan memiliki aplikasi Pastebin yang berfungsi dengan baik seperti ini.

Screenshot of the front-end of the application
Tampilan component Pastebin
Screenshot of the front-end of the application
Tampilan component AddPaste
ViewPaste component in action using a bootstrap modal
Tampilan component ViewPaste

Pada panduan ini, kamu akan belajar cara untuk:

  • Mengonfigurasi Jasmine dan Karma
  • Membuat sebuah class Pastebin yang mewakili tiap salinan
  • Membuat rangka utama PatebinService
  • Membuat dua komponen, Pastebin dan AddPaste
  • Menulis unit tes

Keseluruhan kode untuk panduan ini tersedia di Github.

Salin repo-nya dan jangan ragu untuk mengecek kode-nya jika kamu bingung di tahap manapun dari panduan ini. Mari kita mulai!

Mengonfigurasi Jasmine dan Karma

Pengembang di Angular telah membuat pengaturan lingkungan uji coba menjadi mudah untuk kita. Untuk memulai, kita harus memasang Angular terlebih dahulu. Saya lebih suka menggunakan Angular-CLI. Dia adalah solusi dalam satu bentuk yang memerhatikan, pembuatan, penggenerasian, pembangunan, dan pengetesan proyek Angular-mu.

Ini adalah struktur direktori yang dibuat oleh Angular-CLI

Karena fokus kita lebih ke aspek uji coba di Angular, kita harus memerhatikan dua macam tipe berkas.

karma.conf.js adalah berkas konfigurasi untuk Karma test runner dan satu-satunya berkas konfigurasi yang kita butuhkan untuk menulis unit tes di Angular. Secara bawaan, Chrome adalah browser bawaan yang digunakan oleh Karma untuk melakukan uji coba. Kita akan membuat custom launcher untuk menjalankan headless Chrome dan menambahkannya ke array browsers.

Tipe berkas lain yang perlu kita perhatikan adalah semua yang berakhiran .spec.ts. Berdasarkan kesepakatan, tes-tes yang ditulis di Jasmine disebut dengan specs. Semua tes-tes specs harus diletakkan di dalam direktori src/app/ aplikasi karena di sanalah Karma mencari tes-tes specs. Jika kamu membuat sebuah component atau service baru, penting untuk meletakkan tes-tes specs-nya di dalam direktori yang sama dengan letak kode dari komponen atau service tersebut.

Perintah ng new telah membuat berkas app.component.spec.ts di dalam app.component.ts kita. Jangan ragu untuk membuka-nya dan melihat tes-tes Jasmine di Angular. Bahkan jika kode-nya nampak tidak logis, itu wajar. Kita akan menyimpan AppComponent apa ada-nya untuk saat dan menggunakannya untuk menyimpan route pada beberapa poin berikutnya di panduan ini.

Membuat Class Pastebin

Kita membutuhkan sebuah class Pastebin untuk menjadi model Pastebin kita di dalam components dan tests-nya. Kamu bisa membuatnya menggunakan Angular-CLI.

Tambahkan logic berikut ke Pastebin.ts:

Kita telah mendefinisikan sebuah class Pastebin, dan tiap instance dari kelas ini akan memiliki properti berikut:

  • id
  • title
  • language
  • paste

Buat berkas lain bernama pastebin.spec.ts untuk test suite-nya.

Test suite-nya dimulai dengan sebuah blok describe yang merupakan sebuah fungsi global Jasmine yang menerima dua parameter. Parameter pertamanya adalah judul test suite dan yang kedua adalah implementasinya. Specs-nya didefinisikan menggunakan function it yang memiliki dua parameter, mirip dengan yang dimiliki blok describe.

Banyak specs (blok it) bisa disarangkan di dalam sebuah test suite (blok describe). Namun, pastian bahwa judul test suite-nya tidak membingungkan dan mudah dibaca karena mereka digunakan untuk menyajikan dokumentasi ke pembaca-nya.

Expectations, diimplementasikan menggunakan function expect, digunakan oleh Jasmine untuk menentukan apakah sebuah spec harus lulus atau gagal. Function expect mengambil sebuah parameter yang dikenal sebagai nilai asli (actual value)-nya. Lalu itu dirantaikan dengan fungsi lainnya yang mengambil nilai yang diharapkan. Fungsi-funsi ini disebut mathcer function, dan kita akan banyak menggunakan matcher function seperti toBeTruthy(), toBeDefined(), toBe(), dan toContain() di panduan ini.

Jadi, dengna kode ini kita telah membuat sebuah instance baru dari class Pastebin dan mengharapkan (expect) nilai true. Mari tambahkan spec lain untuk mengonfirmasi bahwa model Pastebin-nya bekerja sesuai yang diinginkan.

Kita telah memberi contoh class Pastebin-nya dan menambhakan beberapa expectation untuk menguji spec kita. Jalankan ng test untuk memverifikasi bahwa semua test-nya lulus.

Membuat Kerangka Service

Buat sebuah service menggunakan perintah berikut.

PastebinService akan menangani logic untuk mengirim permintaan HTTP ke server-nya; namun, kita tidak memiliki sebuah server API untuk aplikasi yang kita buat. maka, kita akan mensimulasikan komunikasi server-nya menggunakan modul bernama InMemoryWebApiModule.

Mengatur Angular-In-Memory-Web-API

Pasang angular-in-memory-web-api melalui npm:

Perbaharui AppModule dengan versi ini.

Buat sebuah InMemoryDataService yang mengimplementasikan InMemoryDbService.

Di sini, pastebin adalah sebuah array dari sampel salinan-salinan yang akan dikembalikan atau diperbaharui ketika kita melakukan sebuah aksi HTTP seperti http.get atau http.post.

Metode getPasteBin() membuat sebuah permintaan HTTP.get dan mengembalikan sebuah janji yang menyelesaikannya ke sebuah array dari objek-objek Pastebin yang dikembalikkan oleh server-nya.

Jika kamu mendapatkan No provider for HTTP error ketika menjalankan sebuah spec, kamu harus mengimpor HTTPModule-nya ke berkas spec-nya.

Memulai dengan Components

Components adalah blok pembangun paling dasar dari sebuah antarmuka di aplikasi Angular. Sebuah aplikasi Angular adalah pohon dari komponen-komponen Angular.
— Dokumentasi Angular

Seperti yang disorot sebelumnya di bagian tinjauan, kita akan mengerjakan dua komponen di panduan ini: PastebinComponent dan AddPasteComponent. Komponen Pastebin terdiri dari sebuah struktur tabel yang mendaftar semua salinan yang diterima dari server-nya. Komponen AddPaste menahan logic untuk pembuatan salinan baru.

Mendesain dan Menguji Pastebin Component

Maju dan buat komponen-nya menggunakan Angular-CLI.

Opsi --spec=false memberi tahu Angular-CLI untuk tidak membuat sebuah berkas spec. Ini karena kita ingin menulis unit tes untuk komponen-nya dari nol. Buat sebuah berkas pastebin.component.spec.ts di dalam folder pastebin-component.

Berikut kode untuk pastebin.component.spec.ts.

Ada banyak yang terjadi di sini. Mari pecahkan dan ambil satu bagian dalam satu waktu. Di dalam blok describe, kita telah mendeklarasikan beberapa variabel lalu kita menggunakan fungsi beforeEach. beforeEach() adalah sebuah fungsi global yang disediakan oleh Jasmine dan seperti namanya, dia dipanggil sekali sebelum tiap spec dalam blok describe dipanggil.

Class TestBed adalah bagian dari Angular testing utilities, dan dia membuat sebuah modul pengujian yang mirip dengan milik class @NgModule. Lebih lanjut lagi, kamu bisa mengonfigurasi TestBed menggunakan metode configureTestingModule. Contohnya, kamu bisa membuat lingkungan uji coba untuk proyekmu yang mensimulasikan aplikasi Angular yang sesungguhnya, dan kamu bisa menarik sebuah komponen dari modul aplikasimu dan memasukkannya kembali ke modul tes ini.

Dari dokumentasi Angular:

Metode createComponent mengembalikan ComponentFixture, sebuah handle di lingkungan uji coba yang dilingkupi komponen yang dibuat. Fixture menyediakan akses ke component instance-nya sendiri dan ke DebugElement yang merupakan sebuah handle dari komponen DOM element.

Seperti yang disebutkan di atas, kita telah membuat sebuah fixture dari PastebinComponent dan menggunakan fixture tersebut untuk membuat instance dari komponen-nya. Sekarang kita bisa mengakses properti dan metode-metode komponen di dalam tes kita dengan memanggil comp.property_name. Karena fixture juga menyediakan akses ke debugElement, sekarang kita bisa query DOM elements dan selector.

Ada sebuah masalah dengan kode kita karena kita belum memikirkannya. Komponen kita memiliki sebuah template eksternal dansebuah berkas CSS. Mengambil dan membaca mereka dari berkas sistem adalah sebuah aktivitas asinkronis, tidak seperti sisa dari kode-nya yang semua-nya sinkronis.

Angular menawarkanmu sebuah function bernama async() yang mengurus semua hal asinkronis. Apa yang async lakukan adalah memperhatikan semua tugas asinkronis di dalamnya sambil menyembunikan kerumitan dari eksekusi asinkronis dari kita. Jadi, sekarang kita memiliki dua function beforeEach, sebuah beforeEach() asinkronis dan sebuah beforeEach() sinkronis.

Kita belum menulis test specs apapun. Namun, sebuah ide yang bagus untuk membuat garis besar dari spech-nya. Gambar berikut menunjukkan desain kasar dari komponen Pastebin.

Mock design of the Pastebin Application

Kita harus menulis test dengan expectations berikut:

  • Komponen Pastebin harus ada
  • Properti judul komponen harus ditampilkan dalam template.
  • Template-nya harus memiliki sebuah tabel HTML untuk menampilkan salinan yang ada.
  • pastebinservice dimasukkan ke dalam komponen, dan metode-nya dapat diaskses.
  • Tidak ada salinan yang ditampilkan hingga onInit() dipanggil.
  • Salinan tidak ditampilkan hingga promise dalam Service kita selesai.

Tiga tests yang pertama mudah untuk diimplementasikan.

Dalam lingkungan uji coba, Angular tidak mengikat properti komponen secara otomatis dengan elemen-elemen template. Kamu harus memanggil fixture.detectChanges() secara eksplisit tiap kali kamu ingin mengikat sebuah properti komponen dengan template-nya. Menjalankan tes-nya akan menghasilkan error karena kita belum mendeklarasikan judul properti di dalam komponen kita.

Jangan lupa untuk perbaharui template-nya dengan struktur tabel dasar.

Dan untuk sisa kasusnya, kita harus memasukkan Pastebinservice dan menulis test yang berurusan dengan interaksi service. Sebuah service sungguhan bisa membuat panggilan ke server yang jauh dan memasukkannya ke bentuk mentah akan menjadi sebuah tugas yang menantang dan melelahkan.

Daripada itu, kita harus menulis tests yang fokus pada apakah komponennya berinteraksi sesuai dengan yang diharapkan. Kita harus menambahkan spect yang memata-matai metode pastebinservice dan getPastebin() nya.

Pertama, impor PastebinService ke testsuite kita.

Selanjutnya, masukkan array providers ke dalam TestBed.configureTestingModule().

Kode berikut membuat sebuah mata-mata Jasmine yang didesain untuk melacak semua panggilan ke metode getPastebin() dan mengembalikan sebuah promise yang menyelesaikan masalahnya ke mockPaste.

Mata-matanya tidak berfokus pada implementasi detil dari service yang sesungguhnya, namun melewatkan tiap panggilan ke metode getPastebin() yang sesungguhnya. Terlebih lagi, semua panggilan jarak jauh yang dikubur di dalam getPastebin() ditolak oleh test kita. Kita akan menulis unit test terisolasi untuk Angular services di bagian kedua panduan ini.

Tambahkan tests berikut ke pastebin.component.spec.ts.

Dua tests yang pertama adalah tes sinkronis. Spec yang pertama mengecek apakah innerText dari elemen div tetap kosong selama komponen-nya tidak diinisialisasi. Argumen kedua yang ke matcher function Jasmine bersifat opsional dan ditampilkan ketika tes-nya gagal. Ini berguna saat kamu memiliki banyak pernyataan expect dalam sebuah spec.

Di spec yang kedua, komponennya diinisialisasi (karena fixture.detectChanges() dipanggil), dan mata-matanya juga diharapkan akan muncul, tapi template-nya tidak boleh diperbaharui. Meskipun mata-matanya mengembalikan sebuah promise yang menyelesaikan masalah, mockPaste belumlah tersedia. Dia tidak seharusnya hadir kecuali tes-nya adalah tes asinkronis.

Tes ketiga menggunakan fungsi async() yang kita bahas sebelumnya untuk menjalankan tes-nya dalam zona tes async. async() digunakan untuk membuat sebuah tes sinkronis menjadi asinkronis. fixture.whenStable() dipanggil ketika semua aktivitas asinkronis yang tertahan terlengkapi. Lalu ronde kedua dari fixture.detectChanges() dipanggil untuk memperbaharui DOM dengan nilai baru. Expectation di tes akhir memastikan bahwa DOM kita diperbaharui dengan nilai mockPaste.

Untuk membuat tesnya lulus, kita ahrus memperbaharui pastebin.component.ts kita dengan kode berikut.

Template-nya juga harus diperbaharui.

Menambahkan sebuah Salinan Baru

Buat sebuah komponen AddPaste menggunakan Angular-CLI. Gambar berikut mengilustrasikan desain dari komponen AddPaste.

Mock design of the AddPaste component

Logic component harus melewatkan specs berikut.

  • Komponen template AddPaste harus memiliki sebuah tombol bernama Create Paste.
  • Mengklik tombol Create Paste harus menampilkan sebuah modal box dengan id 'source-modal'
  • Aksi klik juga harus memperbaharui properti komponen showModal menjadi true. (showModal adalah properti boolean yang mengembalikan nilai true ketika modal-nya ditampilkan dan false ketika modal-nya ditutup).
  • Menekan tombol save harus memanggil metode addPaste() milik Pastebin service.
  • Mengklik tombol close harus menghapus id 'source-modal' dari DOM dan memperbaharui property showModal menjadi false.

Kita telah mengerjakan tiga tes pertama untukmu. Lihat jika kamu bisa membuat tes-tes nya lulus dengan kerjamu sendiri.

DebugElement.triggerEventHandler() adalah satu-satunya yang baru di sini. Dia digunakan untuk memicu sebuah event klik di element button di mana dia dipanggil. Parameter keduanya adlaah event object, dan kita membiarkannya koson karena komponen click() tidak mengharapkannya.

Rangkuman

Cukup untuk hari ini. Di artikel pertama ini, kitatelah belajar:

  • Cara mengatur dan mengonfigurasi Jasmine dan Karma
  • Cara menulis tes-tes dasar untuk classes
  • Cara mendesain dan menulis unit tests untuk komponen
  • Cara membuat sebuah service dasar
  • Cara menggunakan Angular testing utilites dalam proyek kita

Pada panduan berikutnya, kita akan membuat komponen baru, menulis lebih banyak komponen tests dengan input dan output dan routes. Tetap ikuti bagian kedua dari seri ini. Bagikan idemu melalui komentar.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.