Cara menggunakan JSDOM pada JavaScript

Proyek lengkap tersedia di GitHub .

**Jest **dan **Enzyme **adalah alat yang semakin populer yang dapat Anda gunakan untuk menguji build UI dengan ag-Grid. Dalam posting ini kami menunjukkan kepada Anda cara mengaturnya untuk menguji ag-Grid dan menguji panel tombol yang mengubah status instance ag-Grid. Kami akan mendemonstrasikan dan membandingkan dua pendekatan berbeda untuk menulis pengujian kami - menanyakan JSDOM dan menggunakan API ag-Grid.

Di bawah ini adalah demo proyek yang akan kami uji. Aplikasi ini ditulis dalam **React**dan tersedia di GitHub .

#testing #jest #enzyme # ag-grid #jsdom #api

Menguji ag-Grid dengan Jest dan Enzyme - JSDOM vs ag-Grid API

Pelajari cara menggunakan Jest dan Enzyme untuk menguji aplikasi yang dibuat dengan ag-Grid - siapkan lingkungan pengujian Anda dan pilih pendekatan pengujian terbaik.

Anda dapat mengetes komponen React mirip dengan mengetes kode JavaScript lainnya.

Ada beberapa cara untuk mengeteskomponen pada React. Secara umum, terbagi menjadi dua kategori:

Rendering component trees di dalam environment tes yang sudah disederhanakan dan ditegaskan pada keluarannya.
Menjalankan aplikasi lengkap di dalam environment peramban asli (juga dikenal sebagai tes “end-to-end”).

Bagian dokumentasi ini berfokus pada strategi tes untuk kasus pertama. Sementara tes end-to-end secara menyeluruh bisa sangat berguna untuk mencegah regresi terhadap alur kerja yang penting, tes semacam itu tidak diperhatikan terutama pada komponen React, dan berada di luar cakupan bagian ini.

Tradeoffs

Saat memilih kakas pengetesan, perlu mempertimbangkan beberapa tradeoffs:

Kecepatan iterasi vs environment yang realistis: Beberapa kakas menawarkan feedback loop yang sangat cepat antara membuat sebuah perubahan dan melihat hasilnya, tetapi tidak memodelkan sifat dari peramban dengan tepat. Tools lain mungkin menggunakan environment peramban yang asli, tetapi mengurangi kecepatan iterasi dan lebih flakier pada server integrasi berkelanjutan.
Seberapa banyak mock: Dengan komponen, perbedaan antara tes “unit” dan tes “integrasi” bisa tidak sesuai. Jika Anda mengetes sebuah form, haruskah tes yang dilakukan juga menguji tombol yang ada di dalamnya? Atau haruskah komponen memiliki rangkaian tes sendiri? Haruskah refactoring pada tombol merusak tes pada form?

Jawaban yang berbeda mungkin berlaku untuk tim dan produk yang berbeda.

Kakas yang direkomendasikan

Jest adalah test runner pada JavaScript yang memungkinkan Anda mengakses DOM melalui jsdom. Sementara jsdom hanyalah perkiraan cara kerja browser, seringkali cukup baik mengetes komponen pada React. Jest memberikan kecepatan iterasi yang bagus dikombinasikan dengan fitur-fitur yang powerful seperti mocking modules dan timers sehingga Anda dapat memiliki kontrol lebih pada kode yang dijalankan.

React Testing Library adalah seperangkat helpers yang memungkinkan Anda mengetes komponen pada React tanpa bergantung pada detail implementasinya. Pendekatan ini membuat refactoring menjadi mudah dan juga mendorong Anda untuk menerapkan best practices untuk aksesbilitas. Mungkin tidak memberikan cara untuk me-render secara “dangkal” pada sebuah komponen tanpa anak, test runner seperti Jest yang memungkinkan Anda melakukan mocking.

Pembelajaran lainnya

Bagian ini terbagi dalam dua halaman:

Recipes: Pola yang sering dijumpai pada saat menulis tes pada komponen React.
Environments: Apa yang harus dipertimbangkan ketika menyiapkan environment tes untuk komponen React.

Ketika Anda memutuskan untuk belajar Javascript, maka hal utama yang harus Anda pelajari adalah DOM. Lantas apa itu DOM di Javascript?

DOM merupakan kependekan dari Document Object Model, DOM ini yakni object model standar bagi XML dan HTML yang memiliki sifat platform independent. Saat membuka sebuah halaman web pada browser, maka file HTML dari web akan dimuat serta ditampilkan pada layar perangkat. Nah, saat proses render file HTML berlangsung, browser akan membuat DOM atau model objek dokumen yang merupakan model berorientsi objek dari struktur logicnya.

Objek dari dokumen tersebut menyediakan sekumpulan fungsi serta data atau atribut yang dapat dimanfaatkan ketika membuat program Javascript. Hal inilah yang dimaksud dengan API (Applicatio Programming Interface). Untuk lebih jelasnya, silahkan simak ulasannya lengkap berikut ini.

Apa itu DOM di Javascript?

Sebenarnya, DOM tidak hanya ada di Javascript saja namun juga terdapat pada bahasa pemrograman lain.

Di tingkat paling dasar, situs sebuah web terdiri atas dokumen HTML serta CSS. Browser membuat representasi dokumen yang biasa disebut dengan DOM (Document Object Model). Dokumen tersebut memungkinkan Javascript dapat mengakses serta memanipulasi elemen dan juga style situs web. Model ini diatur dalam struktur ojek serta mendefinisikan:

Properties dan event elemen HTML
Elemen HTML sebagai objek
Method guna mengakses elemen HTML

Objek dokumen merupakan model dokumen HTML yang berisi kumpulan fungsi serta atribut berupa objek berdasarkan elemen HTML yang dapat diilustrasikan dengan bentuk pohon seperti di bawah ini:

Struktur seperti pohon ini akan memudahkan Anda dalam memakai elemen tertentu. Elemen-elemen di atas disebut node. Tidak hanya elemen, namun atribut elemen dan teks juga memiliki node tersendiri, yaitu attribute-node untuk atribut elemen dan text- node untuk teks.

DOM Document

DOM Document merupakan semua objek yang terdapat dalam halaman web Anda. ketika ingin mengakses objek apa pun pada halaman web, maka Anda akan selalu mengawalinya dengan dokumen tersebut. terdapat begitu banyak method dan juga properties enting yang dapat Anda gunakan guna memodifikasi serta mengakses situs web.

Cara Mendapatkan Elemen HTML

Mendapatkan Elemen dengan Nama Kelas

getElementByClassName() adalah method yang bisa menghasilkan lebih dari satu objek. Dari sini Anda akan memperoleh seluruh item dengan kelas list-item lalu menyimpannya ke dalam variabel.

var items = document.getElementsByClassName(‘list-items’);

Mendapatkan Elemen dengan ID

Anda juga bisa memperoleh lebih dari satu objek jika menggunakan method getElementById(). Perhatikan contoh berikut ini:

var title = document.getElementById(‘header-title’);

Dari situlah Anda akan mendapatkan elemen dengan id header-title, kemudian akan disimpan ke dalam variabel.

Mendapatkan Elemen dengan Nama Tag

Anda juga bisa mendapatkan elemen nama tag dengan method getElementBtTagName(). Seperti contoh di bawah ini:

var listItems = document.getElementsByTagName(‘li’);

Dari sini Anda akan memperoleh semua elemen li dari dokumen HTML kemudian akan menyimpannya ke dalam variabel.

Queryselector

Method querySelector() dapat membantu Anda untuk mengembalikan elemen pertama yang sesuai dengan CSS selector yang sebelumnya telah ditentukan. Hal ini berarti bahwa Anda dapat memperoleh elemen dengan kelas, id, tag serta semua CSS selector yang valid. Di bawah ini merupakan daftar beberapa pilihan yang terpopuler.

Get by class :

var items = document.querySelector(‘.list-items’)

Get by id :

var header = document.querySelector(‘#header’)

Get by tag :

var headings = document.querySelector(‘h2’);

Memperoleh Elemen yang Lebih Spesifik

Ingin memperoleh elemen yang lebih spesifik? Tenang saja, dengan CSS Selector Anda juga dapat memperoleh elemen yang lebih spesifik. Yaitu:

document.querySelector(“h2.heading”);

Contoh di atas adalah ketika Anda mencari kelas dan tag secara bersamaan serta mengembalikan elemen pertama yang melalui CSS Selector.

Queryselectorall

Jika sebelumnya Anda telah memahami tentang method querySelector(), maka method querySelectorAll() ini dapat dikatakan sepenuhnya sama atau serupa dengan method querySelector() tersebut. Hanya saja memiliki perbedaan ketika mengembalikan semua elemen yang sama dengan CSS Selector.

var heading = document.querySelectorAll(‘h2.heading’);

Dalam contoh di atas, Anda akan memperoleh semua tag h2 yang mempunyai kelas heading dan selanjutnya disimpan dalam array.

Menambah dan Menghapus Elemen

HTML DOM akan memungkinkan Anda untuk menambah elempen baru maupun menghapus elemen yang sebelumnya sudah ada.

Menambahkan Elemen

Sebagai contoh, Anda hanya akan membuat elemen div dengan method createElement() yang mengambil tagname untuk parameternya dan kemudian disimpan ke dalam variabel. Jika sudah, Anda hanya perlu memberikan beberapa konten lalu memasukkannya ke dokumen DOM.

Di bawah ini contoh sintaks yang digunakan untuk menambahkan elemen:

var div = document.createElement(‘div’);

selanjutnya, Anda akan membuat konten dengan method createTextNode() menggunakan sebuah String untuk parameternya dan memasukkan elemen div yang baru sebelum div yang lama ada dalam dokumen Anda.

var newContent = document.createTextNode(“Hello World!”); div.appendChild(newContent);
document.body.insertBefore(div, currentDiv);

Menghapus Elemen

Dari sini Anda akan memperoleh elemen serta menghapusnya dengan method removeChild(). Nah, berikut ini adalah contok sintkas yang digunakan untuk menghapus elemen:

var elem = document.querySelector(‘#header’); elem.parentNode.removeChild(elem);

Mengganti Elemen

Untuk mengganti elemen, coba perhatikan contoh sintaks berikut ini:

var div = document.querySelector(‘#div’); var newDiv = document.createElement(‘div’); newDiv.innerHTML = “Hello World2” div.parentNode.replaceChild(newDiv, div);

Dari sintkas di atas, Anda bisa mengganti elemen dengan method replaceChild(). Di mana argumen pertama merupakan elemen baru, sementara argumen kedua merupakan elemen yang ingin diganti.

Selain cara-cara sebelumnya, ternyata Anda juga bisa menulis ekspresi HTML serta JavaScript langsung pada HTML outpit stream dengan method write(). Perhatikan sintaks di bawah ini:

document.write(“
Hello World!
This is a paragraph!
”);

Anda juga bisa meneruskan ekspresi JavaScrip, misalnya objek tanggal. Sehingga:

document.write(Date());

Selain itu, method write() juga bisa mengambil beberapa argumen yang nantinya akan ditambahkan ke dokumen yang disesuaikan dengan kemunculannya.

Mengubah Elemen HTML

HTML DOM memungkinkan pengguna untuk mengubah style serta konten dari elemen HTML dengan cara mengubah propertinya.

Mengubah Nilai Artibut

DOM memungkinkan Anda untuk mengubah nilai atribut. Sebagai contoh, Anda akan mengubah src dari seluruh tag

Dari contoh di atas, Anda memilih elemen dengan method document.getElementById(), kemudian membuat objek untuk elemen tersebut. Jika sudah, maka Anda dapat melakukan apapun seperti yang diinginkan, misalnya mengubah style dan teks CSS.

Akan tetapi jika elemen yang dipilih lebih dari satu, misalnya atribut class atau nama tag maka elemen tersebut menjadi sebaug array. Yang mana array akan berisi DOM dari elemen-elemen yang telag Anda pilih.

Misalnya:

DOM API Javascript
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quo quaerat recusandae qui ullam eaque cumque ea fugit,
debitis commodi ipsum illo dolorum consequatur sed laudantium suscipit quis magni,
maiores in?
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quo quaerat recusandae qui ullam eaque cumque ea fugit,
debitis commodi ipsum illo dolorum consequatur sed laudantium suscipit quis magni,
maiores in?
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quo quaerat recusandae qui ullam eaque cumque ea fugit,
debitis commodi ipsum illo dolorum consequatur sed laudantium suscipit quis magni,
maiores in?

Pada contoh di atas, Anda mempunyai tiga paragraf yang dinamai dengan class paragraf. Kemudian Anda bisa menggunakan method getElemenByClassName() untuk memilih tida paragraf tersebut melewati Javascript. Dan lihat hasilnya dalam console Javascript di bawah ini.

Variabel paragraf akan memuat sebuah array yang mana array tersebut berisi tiga buah objek DOM paragraf. Hal lain juga bisa Anda lakukan, misalnya mengubah warna teks paragraf pertama.

Paragraf pertama berada di posisi indeks 0 di dalam array, sehingga sintkas yang akan diinput dalam console Javasript yaitu:

paragraf[0].style.color = “red”

Dengan begitu, warna teks paragraf pertama pun menjadi warna merah.

Berhasil bukan? sekarang coba untuk membuat sebuah animasi warna dengan mengubah kode javascript tersebut menjadi :

Taksis tersebut menggunakan method setInterval() dan method setTimeOut() sebagai durasi waktu animasi. Pada kode tersebut, interval atau rentang waktu diatur selama 1000 milidetik atau 1 detik. Sementara untuk berubah warna menjadi hitam, kode tersebut diberi interval 500 milidetik atau setara setengah detik. Dengan begitu, ketiga paragraf tersebut akan berubah dari warna masing-masing ke warna hitam secara bergantian sesuai dengan interval waktu yang diberikan.

Kini Anda sudah mengerti bukan apa itu DOM di Javascript dan berbagai method yang dimiliki? Pada dasarnya, DOM tidak hanya digunakan pada Javascript saja melainkan juga terdapat di bahasa pemrograman lain dalam kegunaan yang lebih luas.