Menguji fungsi sass dalam 5 minit

mata teras

Ujian fungsi SASS boleh dilakukan dengan membuat fungsi maya, menulis kes ujian, mewujudkan pelari ujian, dan hasil output tersuai. Ini boleh dilaksanakan menggunakan enjin ujian SASS minimalis untuk fungsi ujian dalam senario yang berbeza.
Gunakan pemetaan SASS untuk menguji fungsi dengan pelbagai parameter, yang boleh menerima apa -apa sebagai kunci, termasuk senarai. Ini membolehkan fungsi ujian dengan pelbagai parameter.
Walaupun sistem ujian minimalis ini sangat mudah untuk menguji sebilangan kecil fungsi, ia lebih sesuai untuk kerangka ujian SASS penuh, seperti yang benar Eric Suzanne untuk penyelesaian yang lebih mendalam.

Saya menggunakan Perpustakaan Media-Media Eduardo Bouças pada hari yang lain dan ingin dengan cepat menguji fungsi yang saya bina, jadi saya mula menulis pengadun kecil untuk membantu saya menguji banyak senario yang berbeza. Selepas beberapa minit, saya datang dengan enjin ujian SASS yang minimum mungkin.

Walaupun jawatan ini mungkin sedikit lebih teknikal, saya percaya ia membantu ramai orang, kerana ujian harus menjadi tanggungjawab setiap pemaju. Juga, selepas anda memahami satu demi satu, anda akan mendapati bahawa ia sebenarnya tidak sukar difahami.

Buat fungsi maya untuk ujian

semuanya bermula dengan fungsi yang akan diuji. Untuk tujuan kami, saya cadangkan kami menggunakan fungsi yang sangat mudah. Sebagai contoh, fungsi yang digunakan untuk menggandakan nombor.

@function double($value) {
  @return $value * 2;
}

bunyi mudah. Walau bagaimanapun, untuk tujuan demonstrasi kami sahaja, kami sengaja memperkenalkan kesilapan dalam fungsi supaya kami dapat melihat salah satu ujian kami gagal.

@function double($value) {
  // 为了演示目的而故意引入的错误
  @if $value == 3 {
    @return 5;
  }

  @return $value * 2;
}

Menulis Kes Ujian

Anda mungkin terkejut, tetapi menulis kes ujian dalam sistem kami adalah semudah menulis peta sass di mana kunci adalah input fungsi dan nilai -nilai yang dijangkakan hasilnya.

$tests-double: (
  1: 2,
  2: 4,
  3: 6,
  4: 8
);

itu sahaja! Kami telah menulis kes ujian. Sekali lagi: Kiri adalah input, dan hak adalah output yang diharapkan.

Test Runner

Setakat ini, semuanya berjalan lancar. Kami telah membina fungsi kami dan mempunyai kes ujian bertulis. Kami hanya perlu membuat pelari ujian sekarang.

Jika anda sudah biasa dengan Sass, anda mungkin sudah memahami perkara ini. Pelari ujian kami akan melangkah ke atas peta ujian, hubungi fungsi untuk setiap input, dan pastikan ia sepadan dengan output yang diharapkan. Ia kemudian akan mencetak hasil ujian kami.

inilah yang kelihatan seperti pelari ujian kami:

/// 在测试套件 ($tests) 上运行函数 ($function)
/// @param {Map} $tests - 测试套件
/// @param {String} $function - 要测试的函数名称
@mixin run-tests($tests, $function) { .. }

Baiklah. Mari kita lihat lebih mendalam di bahagian dalam "binatang" ini. Idea ini adalah untuk menggunakan hasil setiap ujian untuk membina rentetan, dan apabila semua operasi selesai, cetak rentetan menggunakan arahan

. Sebagai contoh, kita juga boleh menyampaikannya kepada harta @error pseudo-elemen, tetapi ini sedikit lebih rumit, jadi kita akan melekat dengan content. @error

Perkara pertama yang perlu dilakukan ialah melelehkan suite ujian. Untuk setiap ujian, kami memanggil fungsi secara dinamik berdasarkan namanya (menggunakan fungsi call(...)) dan periksa sama ada hasilnya seperti yang diharapkan.

@function double($value) {
  @return $value * 2;
}

Pada masa ini, sistem kami sedang berjalan. Mari kita jalankan di suite ujian kami dan lihat bagaimana rupanya.

@function double($value) {
  // 为了演示目的而故意引入的错误
  @if $value == 3 {
    @return 5;
  }

  @return $value * 2;
}

$tests-double: (
  1: 2,
  2: 4,
  3: 6,
  4: 8
);

hei! Inilah permulaan, bukan? Sekarang kita hanya perlu membuat output lebih berguna (dan lebih mesra).

Output yang lebih baik

Ini adalah apabila anda boleh menyesuaikan output untuk menjadikannya kelihatan seperti anda mahu ia kelihatan. Tidak ada satu cara untuk melakukan ini, anda boleh mengeluarkan apa sahaja output yang anda suka. Perhatikan bahawa mengikut spesifikasi CSS, anda boleh menggunakan a untuk membungkus garisan dalam rentetan.

Dalam kes saya, inilah yang saya pilih:

/// 在测试套件 ($tests) 上运行函数 ($function)
/// @param {Map} $tests - 测试套件
/// @param {String} $function - 要测试的函数名称
@mixin run-tests($tests, $function) { .. }

Jika kita menjalankannya lagi pada fungsi $tests-double, inilah yang kita dapat: double

@mixin run-tests($tests, $function) {
  $output: '';

  @each $test, $expected-result in $tests {
    $result: call($function, $test...);

    @if $result == $expected-result {
      // 测试通过
      $output: $output + 'Test passed; ';
    } @else {
      // 测试失败
      $output: $output + 'Test failed; ';
    }
  }

  // 打印输出
  @error $output;
}

Ia sangat kemas sekarang, bukan?

fungsi ujian dengan pelbagai parameter

Dalam contoh kami, fungsi kami hanya mempunyai satu parameter, tetapi kami boleh bergantung pada fakta bahawa peta SASS menerima apa -apa sebagai kunci (termasuk senarai) untuk menguji fungsi dengan pelbagai parameter. Nampaknya ini:

@include run-tests($tests-double);

Jika anda menyemak pengadun kami, anda akan melihat bahawa apabila memanggil fungsi menggunakan

kami menambah ellipsis (...) kepada pembolehubah call(...). $test

<code>Test passed; Test passed; Test failed; Test passed;</code>

Ini bermakna kita lulus nilai

sebagai senarai parameter. Dalam erti kata lain, jika $test adalah senarai (mis. ), ia akan diluluskan sebagai parameter berganda dan bukan senarai. $test ('a', red, 42px') Pemikiran Akhir

itu, kawan -kawan: enjin ujian sass terkecil yang pernah ada. Sistem ujian kecil ini boleh menjadi sangat mudah untuk menguji sebilangan kecil fungsi yang mungkin ada dalam projek anda, terutamanya jika anda merancang untuk menjadikannya tersedia untuk pemaju lain (rangka kerja, perpustakaan ...). Juga, saya dapati ia sangat mudah untuk menguji fungsi dengan cepat pada Sassmeister. Hanya letakkan pengadun dan fungsi anda di sana dan jalankan ujian anda!

Sudah tentu, jika anda sedang mencari penyelesaian yang lebih mendalam, anda mungkin ingin melihat Eric Suzanne yang benar. Sebagai rangka kerja ujian SASS yang lengkap, ia lebih sesuai untuk infrastruktur ujian unit global.

Jika anda mahu melihat (versi kod yang lebih maju), saya telah membuka repositori Sassytester untuk mengumpul segala -galanya.

Jadi apa pendapat anda?

Soalan Lazim Mengenai Ujian Fungsi Sass (FAQ)

Apakah kepentingan menguji fungsi SASS?

Ujian fungsi SASS adalah kritikal dalam pembangunan web kerana ia memastikan fungsi dan kecekapan preprocessor CSS. Ia membantu mengenal pasti dan memperbaiki pepijat, meningkatkan prestasi tapak, dan memastikan fungsi SASS berfungsi seperti yang diharapkan. Dengan menguji fungsi SASS, anda dapat memastikan reka bentuk dan susun atur laman web anda konsisten merentasi pelayar dan platform yang berbeza.

Bagaimana untuk menguji fungsi SASS?

Pelbagai alat dan kaedah boleh digunakan untuk menguji fungsi SASS. Pendekatan yang biasa adalah menggunakan kerangka ujian SASS, seperti benar. Benar adalah alat ujian unit yang diintegrasikan dengan projek SASS anda. Ia membolehkan anda menulis ujian secara langsung dalam fail SASS, yang kemudiannya boleh dijalankan di Node.js atau mana -mana pelayar web.

Apakah amalan terbaik untuk menguji fungsi SASS?

Beberapa amalan terbaik untuk menguji fungsi SASS termasuk ujian menulis untuk setiap fungsi, menggunakan konvensyen penamaan yang konsisten untuk ujian, dan memastikan bahawa ujian meliputi semua senario yang mungkin. Ia juga penting untuk menjalankan ujian secara teratur dan mengemas kini ujian seperti yang diperlukan semasa membuat perubahan pada fungsi.

Bolehkah saya menguji fungsi SASS menggunakan JavaScript?

Ya, anda boleh menguji fungsi SASS menggunakan JavaScript. Anda boleh menggunakan alat seperti JEST untuk menguji fungsi SASS anda. Jest adalah rangka kerja ujian JavaScript yang membolehkan anda menulis ujian dalam sintaks mudah dan jelas.

Apakah cabaran umum dalam menguji fungsi SASS?

Beberapa cabaran umum dalam menguji fungsi SASS termasuk mengendalikan fungsi kompleks, menguruskan kebergantungan, dan memastikan keserasian penyemak imbas. Cabaran -cabaran ini dapat diatasi menggunakan rangka kerja ujian yang kuat, menulis ujian yang jelas dan ringkas, dan kerap memeriksa dan mengemas kini ujian.

Bagaimana untuk meningkatkan kemahiran ujian SASS saya?

Anda boleh meningkatkan kemahiran ujian SASS anda dengan mengamalkan secara teratur, membaca dan mempelajari kod orang lain, dan memahami trend terkini dan amalan terbaik ujian SASS. Mengambil bahagian dalam cabaran pengekodan dan menyumbang kepada projek sumber terbuka juga boleh membantu meningkatkan kemahiran anda.

Apakah peranan SASS dalam pembangunan web?

Sass memainkan peranan penting dalam pembangunan web dengan menjadikan CSS lebih kuat dan lebih mudah untuk dikekalkan. Ia menyediakan ciri -ciri seperti pembolehubah, bersarang, pengadun, dan fungsi, yang membantu menulis kod CSS yang lebih cekap dan boleh diguna semula.

Bagaimana cara debug fungsi sass?

Pelbagai alat dan teknik boleh digunakan untuk debug fungsi SASS. Pendekatan yang sama adalah menggunakan fungsi SASS inspect, yang membolehkan anda menyemak nilai ekspresi SASS. Anda juga boleh menggunakan arahan SASS @debug, yang mencetak nilai ekspresi SASS ke konsol.

Bolehkah saya menguji fungsi SASS tanpa rangka kerja ujian?

Walaupun fungsi SASS boleh diuji tanpa kerangka ujian, ini tidak disyorkan. Rangka kerja ujian menyediakan pendekatan berstruktur dan sistematik untuk menguji, menjadikannya lebih mudah untuk menulis, mengurus, dan menjalankan ujian.

Apakah faedah menggunakan kerangka ujian SASS?

Menggunakan Rangka Kerja Ujian SASS menyediakan banyak faedah. Ia membolehkan anda menulis ujian dengan cara berstruktur dan sistematik, menjadikannya lebih mudah untuk mengurus dan menjalankan ujian. Ia juga menyediakan alat dan ciri yang boleh membantu menulis ujian yang lebih cekap, seperti fungsi penegasan dan pelari ujian.

Atas ialah kandungan terperinci Menguji fungsi sass dalam 5 minit. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!