Bagaimana: Konfigurasi Unit Ujian dan Liputan Ujian dengan QUnit.js dan Blanket.js Untuk Office 365 SharePoint App

Tinggalkan pesanan

Intro

Saya telah telah meneroka percubaan unit dan menguji liputan JavaScript kerana saya bekerja pada aplikasi SharePoint baru untuk SharePoint dalam talian di Pejabat 365 Suite.  Jalan-jalan penyelidikan jelas membawa saya untuk Qunit.js dan sejurus selepas itu, kepada Blanket.js.

QUnit Biar saya menubuhkan unit test dan Kumpulan mereka ke dalam modul.  Modul ini hanya cara mudah untuk menguruskan ujian berkaitan. (Saya tidak pasti saya menggunakannya seperti yang dimaksudkan, tetapi ia bekerja bagi saya setakat ini dengan sedikit set ujian saya setakat ditakrifkan).

Blanket.js mengintegrasikan dengan Qunit dan ia akan menunjukkan kepada saya sebenar baris JavaScript yang telah – dan apa yang lebih penting – tidak benar-benar dihukum semasa menjalankan ujian.  Inilah "perlindungan" – garisan yang dilaksanakan akan diliputi oleh ujian manakala yang lain adalah tidak.

Antara menyediakan kes-kes ujian yang baik dan melihat liputan, kita boleh mengurangkan risiko bahawa Kod kita telah tersembunyi kecacatan.  Baik times.

Qunit

Andaikan anda mempunyai Visual Studio anda projek menyediakan, Mulakan dengan memuat turun pakej JavaScript daripada http://qunitjs.com.  Tambah JavaScript dan CSS sepadan ke penyelesaian anda.  Lombong kelihatan seperti ini:

image

Rajah 1

Seperti yang anda lihat, Saya telah menggunakan 1.13.0 pada masa saya menulis ini blog post. Jangan lupa untuk men-download dan menambah fail CSS.

Yang keluar dari cara, langkah seterusnya adalah untuk mencipta beberapa jenis ujian memanfaatkan dan rujukan bit Qunit.  Saya ujian sekumpulan fungsi dalam fail skrip yang dipanggil "QuizUtil.js" supaya saya mencipta halaman HTML yang dipanggil "QuizUtil_test.html" seperti yang ditunjukkan:

image Rajah 2

Berikut adalah kod:

<!PADA DOCTYPE html>
<html xmlns= "http://www.W3.org/1999/XHTML">
<Ketua>
    <tajuk>Ujian QuizUtil dengan Qunit</tajuk>
    <pautan rel= "stylesheet" href=".. /CSS/qunit-1.13.0.CSS" />
    <skrip Jenis= text/javascript"" JPP="QuizUtil.js" Perlindungan data></skrip>
    <skrip jenis ="text/javascript" src ="qunit-1.13.0.js"></skrip>
    <skrip jenis ="text/javascript" src ="blanket.min.js"></skrip>

    <skrip>
        Modul("getIDFromLookup");
        ujian("QuizUtil getIDFromLookupField", fungsi () {
            VAR goodValue = "1;#Paul Galvin";

            sama(getIDFromLookupField(goodValue) + 1, 2), "ID [" + goodValue + "] + 1 sepatutnya 2";
            sama(getIDFromLookupField(undefined), undefined, "Hujah input undefined perlu kembali keputusan undefined.");
            sama(getIDFromLookupField(""), undefined, "Hujah kosong input perlu kembali untuk nilai undefined.");
            sama(getIDFromLookupField("gobbledigood3-thq;dkvn ada;skfja sdjfbvubvqrubqer0873407t534piutheqw;pada tahun"), undefined,"Harus sentiasa kembalikan sebuah keputusan boleh Tukar ke Integer");
            sama(getIDFromLookupField("2;#orang lain"), "2", "Semakan [2;#orang lain].");
            sama(getIDFromLookupField("9834524;#nilai panjang"), "9834524", "Ujian nilai besar.");
            notEqual(getIDFromLookupField("5;#sesiapa sahaja", 6), 6, "Ujian notEqual yang (5 adalah tidak sama dengan 6 bagi sampel: [5;#sesiapa sahaja]");

        });

        Modul("htmlEscape");
        ujian("QuizUtil htmlEscape()", fungsi () {
            sama(htmlEscape("<"), "&lt;", "Kurang dari pengendali melarikan diri ('<')");
            sama(htmlEscape("<Bhg. kelas =  "someclass">Sesetengah teks</div>"), "&lt;kelas Bhg. =&quot;someclass&quot;&gt;Sesetengah teks&lt;/div&gt;", "Rentetan ujian lebih kompleks.");
        });

        Modul("getDateAsCaml");
        ujian("QuizUtil getDateAsCaml()", fungsi () {
            sama(getDateAsCaml(baru Tarikh("12/31/2013")), "2013-12-31T:00:00:00", "Ujian tarikh keras dikodkan: [12/31/2013]");
            sama(getDateAsCaml(baru Tarikh("01/05/2014")), "2014-01-05T:00:00:00", "Ujian tarikh keras dikodkan: [01/05/2014]");
            sama(getDateAsCaml(baru Tarikh("01/31/2014")), "2014-01-31T:00:00:00", "Ujian tarikh keras dikodkan: [01/31/2014]");
            sama(getTodayAsCaml(), getDateAsCaml(baru Tarikh()), "getTodayAsCaml() hendaklah sama dengan getDateAsCaml(Tarikh baru())");
            sama(getDateAsCaml("nilai karut"), undefined, "Cuba untuk mendapatkan tarikh nilai karut.");
            sama(getDateAsCaml(undefined), undefined, "Cuba untuk mendapatkan tarikh yang [undefined] Tarikh.");
        });

        Modul("getParameterByName");
        ujian("QuizUtil getParameterByName (dari rentetan pertanyaan)", fungsi () {
            sama(getParameterByName(undefined), undefined, "Cuba untuk mendapatkan undefined parameter perlu kembali undefined.");
            sama(getParameterByName("tidak wujud"), undefined, "Cuba untuk mendapatkan nilai parameter apabila kita tahu parameter tidak wujud.");

        });

        Modul("Cookies");
        ujian("QuizUtil pelbagai fungsi cookie.", fungsi () {
            sama(setCookie("ujian", "1", -1), getCookieValue("ujian"), "Dapatkan cookie saya menetapkan perlu bekerja.");
            sama(setCookie("anycookie", "1", -1), benar, "Tatacara memasak sah perlu kembali 'benar'.");
            sama(setCookie("kuih gila nama !@#$%"%\^&*(()?/><.,", "1", -1), benar, "Menetapkan nama kuih yang buruk perlu kembali 'palsu'.");
            sama(setCookie(undefined, "1", -1), undefined, "Lulus undefined dengan nama kuih.");
            sama(getCookieValue("tidak wujud"), "", "Cookie tidak wujud ujian.");
        });

    </skrip>
</Ketua>
<badan>
    <div id= "qunit"></div>
    <div id= "qunit-perlawanan"></div>

</badan>
</html>

Terdapat beberapa perkara yang berlaku di sini:

  1. Rujukan kod (QuizUtil.js)
  2. Rujukan Qunity.js
  3. Menentukan beberapa modul (getIDFromLookup, Biskut, dan lain-lain)
  4. Meletakkan satu <div> ID yang merupakan "qunit".

Kemudian, Saya hanya tarik ke Laman ini dan anda mendapat sesuatu seperti ini:

image

Rajah 3

Jika anda melihat di bahagian atas, anda mempunyai beberapa pilihan, dua di antaranya yang menarik:

  • Sembunyi lulus ujian: Cukup jelas.  Boleh membantu mata anda hanya melihat bidang masalah dan tidak banyak kekacauan.
  • Modul: (jatuh bawah): Ini akan menapis ujian ke ujian yang hendak sekumpulan hanya orang-orang.

Bagi ujian diri – beberapa komen:

  • Ia pergi tanpa mengatakan bahawa anda perlu untuk menulis kod anda supaya ia adalah testable di tempat pertama.  Menggunakan alat yang boleh membantu menguatkuasakan disiplin itu. Sebagai contoh, Saya mempunyai satu majlis yang dipanggil "getTodayAsCaml()".  Ini bukan sangat testable kerana membawa hujah tiada input dan untuk menguji untuk kesaksamaan, kita perlu sentiasa Kemaskini Terakhir kod ujian untuk menunjukkan tarikh semasa.  Saya refactored dengan menambah data input parameter lulus tarikh semasa apabila saya mahu tarikh hari ini dalam CAML format.
  • Rangka Qunit dokumen ujian sendiri dan nampaknya cukup mantap.  Ia boleh melakukan perkara-perkara yang mudah seperti ujian untuk kesaksamaan dan juga mempunyai sokongan untuk panggilan ajax gaya (kedua-dua "real" atau mengejek menggunakan mocker kegemaran anda).
  • Juga akan melalui proses yang memaksa anda berfikir melalui kes-kes canggih – apa yang berlaku dengan "undefined" atau kosong dihantar ke satu fungsi.  Ia menjadikan ia mati mudah untuk menguji senario ini keluar.  Bagus.

Perlindungan dengan Blanket.js

Blanket.js melengkapi Qunit dengan tracking sebenar baris kod yang melaksanakan semasa menjalankan ujian.  Ia mengintegrasikan hak ke Qunit begitu walaupun ia adalah sebuah aplikasi yang keseluruhannya berasingan, Ia memainkan baik – ia benar-benar kelihatan seperti itu adalah satu aplikasi yang lancar.

Inilah blanket.js dalam tindakan:

image Rajah 4

image

Rajah 5

(Anda sebenarnya perlu klik pada checkbox "Dayakan perlindungan" di bahagian atas [lihat Rajah 3] bagi membolehkan ini.)

Garisan yang diserlahkan dalam Rajah 5 telah dilaksanakan oleh mana-mana ujian saya, oleh itu, saya perlu memikirkan ujian yang menyebabkan mereka untuk melaksanakan jika saya ingin perlindungan penuh.

Mendapat blanket.js dengan langkah-langkah berikut:

  1. Muat turun daripada http://blanketjs.org/.
  2. Menambah kepada projek anda
  3. Kemaskini Terakhir Laman abah-abah ujian anda (QuizUtil_test.html dalam kes saya) seperti berikut:
    1. Rujukan kod
    2. Menghias anda <skrip> rujukan seperti ini: 
    <skrip Jenis= text/javascript"" JPP="QuizUtil.js" Perlindungan data></skrip>

Blanket.js menjemput atribut "data-cover" dan melakukan sihir dengan.  Ia cangkuk ke Qunit, mengemaskini UI untuk menambah opsyen "Dayakan perlindungan" dan voila!

Ringkasan (TL; DR)

Gunakan Qunit untuk menulis kes-kes ujian anda.

  • Muat turun
  • Menambah kepada projek anda
  • Menulis halaman ujian abah-abah
  • Mencipta ujian
    • ReFactor di antara kod anda akan testable
    • Menjadi kreatif!  Fikirkan gila, mustahil senario dan menguji mereka juga.

Menggunakan blanket.js untuk memastikan perlindungan

  • Pastikan Qunit bekerja
  • Muat turun blanket.js dan menambahnya ke dalam projek
  • Tambah ke Laman abah-abah ujian anda:
    • Menambah rujukan kepada blanket.js
    • Tambah satu atribut "data-cover" untuk anda <skrip> Tag
  • Menjalankan ujian Qunit.

Saya tidak pernah melakukan apa-apa sebelum ini dan mempunyai beberapa barangan rudimentary bekerja dalam beberapa jam. 

Ujian senang!

</akhir>

undefinedLanggan ke blog saya.

Mengikuti aku di Twitter http://www.twitter.com/pagalvin

Tinggalkan Jawapan

alamat e-mel anda tidak akan diterbitkan. Ruangan yang diperlukan ditanda *