Pertanyaan Menguji Javascript yang Memanipulasi DOM


Saya telah melihat ke dalam suite uji javascript dan saya telah menemukan QUnit menjadi sangat menarik. Saya mengerti cara menguji kode komputasi, tapi ...

Bagaimana Anda menguji aplikasi javascript yang ditulis terutama untuk manipulasi DOM?

sepertinya menguji posisi / warna / dll elemen DOM akan menjadi titik diperdebatkan karena Anda akhirnya akan melakukan sesuatu seperti ini:

$("li.my_element").css("background-color", "#f00");

dan kemudian dalam tesmu ...

$(function() {
    module("coloring");
    test("test_my_element", function() {
        var li_element_color = $("li.my_element").css('background-color');
        equals(li_element_color, "#f00");
    });
});

ini tidak terasa benar karena pada dasarnya hanya melakukan ini:

var my_li= $("li.my_element");
my_li.css("background-color", "#f00");
if ( my_li.css("background-color") == "#f00" ) {
    return true;
}

Apakah saya gila? Bagaimana ini seharusnya dilakukan?

sunting: inti dari pertanyaan:

Saya kira apa yang saya maksudkan adalah, saya harus memastikan kode tidak rusak sebelum saya menyebarkan, tetapi sebagian besar itu adalah pembantu UI dan ajax. Bagaimana cara saya menguji hal-hal yang muncul dengan benar?

Beberapa contoh:

  • uji apakah dialog JQuery UI muncul di atas semua elemen lainnya
  • uji bahwa drag-n-drop berfungsi dengan benar
  • uji bahwa warna droppable berubah ketika elemen dijatuhkan di atasnya
  • uji bahwa ajax berfungsi dengan baik
  • uji bahwa tidak ada koma asing yang akan merusak IE

32
2017-09-16 19:38


asal


Jawaban:


Saya telah menemukan tes Javascript / DOM, terutama untuk interaksi sederhana yang Anda gambarkan, tidak begitu berguna. Anda akan menguji bahwa semuanya sudah diatur dengan benar, dan karena jQuery begitu deklaratif, pengujian Anda sangat mirip dengan kode Anda.

Pemikiran saya saat ini adalah bahwa jika Anda menulis komponen JS yang lebih besar, masuk akal untuk mengeluarkan serangkaian perilaku yang saling terkait baik ke dalam plugin jQuery dan serangkaian tes untuk itu.

Tetapi dari contoh yang Anda sebutkan, sepertinya Anda benar-benar mencari tingkat perlindungan di situs web terintegrasi Anda. Alat seperti Selenium mungkin akan lebih kuat dan tepat untuk Anda. Secara khusus, itu

  • dapat diotomatisasi
  • dapat berjalan melawan beberapa browser, termasuk IE
  • berjalan dalam konteks aplikasi web Anda dan halaman, sehingga drag-n-drop dapat diuji di mana itu benar-benar terjadi, bukan di beberapa lingkungan pengujian.
  • AJAX dapat diuji

16
2017-09-19 03:58



Alih-alih menguji fungsi css JQuery. Tes Anda harus mengejek fungsi css, dan memastikan bahwa itu hanya dipanggil sekali dengan warna yang benar. Kode yang diuji harus menjadi milik Anda, bukan kerangka kerja.


12
2017-09-17 14:00



Selain apa yang dikatakan Jason Harwig, saya akan mengatakan bahwa pengujian unit adalah tes untuk memastikan kode dijalankan seperti yang diharapkan. Jika Anda ingin menguji itu, maka Jason benar tentang bagaimana Anda harus melakukan itu. Jika Anda ingin menjalankan tes untuk memeriksa apakah manipulasi DOM sedang terjadi (pengujian UI) dan bukan kode aktual yang melakukan manipulasi DOM (pengujian unit), maka Anda mungkin ingin memeriksa sesuatu seperti Selenium, WatiN atau Watir.


3
2017-09-17 14:09



Saya menduga banyak orang menguji secara visual: yaitu mereka melihat output browser mereka di monitor mereka, untuk melihat apakah itu terlihat seperti DOM dimanipulasi seperti yang diharapkan.

Jika itu perlu menjadi test case otomatis (misalnya untuk pengujian regresi), maka mungkin mereka merekam output (seperti screen capture) dan melakukan sesuatu seperti membandingkan dua screenshot untuk melihat apakah hasilnya sama.

Alih-alih mengambil tangkapan layar, Anda hanya dapat menangkap keseluruhan DOM, dan melakukan perbandingan berdampingan dari pohon DOM yang diambil (yang mungkin kurang rawan kesalahan dibandingkan dengan piksel).


1
2017-09-16 20:02



Saya menguji hal-hal AJAX seperti ini:

  1. Lakukan panggilan AJAX
  2. Mengatur timer JavaScript
  3. Periksa DOM untuk melihat apakah perubahan yang diharapkan telah terjadi

Sekarang, bisa jadi panggilan AJAX belum kembali sebelum Anda melakukan pemeriksaan, tetapi ini juga merupakan informasi tes yang berguna; dengan panggilan AJAX, ada (biasanya) beberapa waktu setelah itu kami menyebutnya sebagai kegagalan. Sebagai contoh, jika kami melakukan munculan saran, dan butuh 30 detik untuk kembali, itu gagal.


0
2017-12-18 12:45