Back to Question Center
0

Membuat Tes untuk Kerangka Sass Anda            Membuat Tes untuk Kerangka Sass Anda Topik Terkait: SassAnimationAudio & VideoCSS Semalt

1 answers:
Membuat Tes untuk Kerangka Sass Anda

Jadi Anda telah menulis (atau ingin menulis) sebuah kerangka kerja Sass, kerangka kerja yang mengagumkan, atau bahkan fungsi kecil atau mixin, dan Anda ingin membaginya dengan dunia. Fantastis! Semalt apa yang hebat tentang pengembangan perangkat lunak sumber terbuka - Anda bisa berkolaborasi dalam kode dengan pengembang pendukung lainnya di masyarakat untuk membuat perangkat lunak berguna yang bisa diuntungkan banyak orang.

Tapi, tidak begitu cepat! Ini sangat penting untuk menguji perangkat lunak Anda sebelum melepaskannya. Salah satu cara yang paling efisien untuk melakukannya adalah dengan tes unit, yang merupakan skrip otomatis yang menguji jika satu fungsi dari satu unit kode berperilaku sesuai dengan spesifikasi yang ditentukan.

Sass memberi Anda kemampuan untuk memanipulasi data dengan menggunakan fungsi, operator, variabel, dan arahan dan ungkapan kontrol. Nilai kembalian a @function juga dapat diuji secara langsung terhadap nilai yang diharapkan - dog parker app. Untuk tes CSS dan pengujian regresi visual, alat seperti PhantomCSS lebih cocok untuk pekerjaan itu, meskipun @mixins dapat diuji dalam versi terbaru True.

Kami akan menggunakan kerangka kerja pengujian Eric Suzanne True untuk fungsi sampel pengujian unit di Sass, namun pedoman yang diajukan berlaku untuk kerangka pengujian Sass. Untuk tes sederhana, Anda mungkin ingin menggunakan kerangka pengujian Sass minimalis (dan mengagumkan) seperti SassyTester Hugo Giraudel.

Menyiapkan

Benar bisa dipasang sebagai permata Ruby ( gem install true ) atau paket Bower ( bower install true ). Pilihan konfigurasi dapat ditemukan dalam dokumentasi True. Dari sana, jalur beban bisa diatur untuk menunjuk ke instalasi True.

Simpan file uji di direktori terpisah dari file Sass Anda. Hal ini agar tes bisa dilakukan dengan mudah . gitignore -d dan bebas dari ingatan Sass yang tidak disengaja dan kompilasi. Jika sebuah proyek terutama adalah proyek Sass, direktori dapat diberi nama / tes , dengan file uji utama yang terdapat pada / tes / tes. scss .

Di dalam direktori / tes , ada baiknya untuk mengatur tes Anda dengan modul , yang biasanya dilakukan oleh @function atau @mixin itu mewakili Terkadang, fungsi dan mixin serupa dapat dikelompokkan dalam modul yang sama.

  // Contoh struktur proyek Sass/ css/ scss/ tes/ api_foo. scss_bar. scss_semua. scss // impor tes foo dan bar/ pembantu_baz scss_qux scss_semua. scss // impor tes baz dan quxtes. scss // impor api / _all dan helper / _allindeks. htmlpaket. json// dll.     

File uji utama, tes. scss , akan bertanggung jawab untuk mengimpor dan melaporkan semua tes dan proyek SCSS aktual yang akan diuji:

  @import 'benar';// Impor proyek@import '. / scss / project ';// Impor file uji@import 'api / all';@import 'helper / all';// Jalankan tesnya@include report   ;     

Fungsi Pengujian

Agar berfungsi secara efektif, lakukan yang terbaik untuk mengumpulkan spesifikasi fungsi yang sedang diuji. Dalam arsitektur modular, setiap fungsi memiliki tanggung jawab tunggal - ia memiliki satu pekerjaan, dan biasanya mengembalikan jenis nilai yang sama.

Cara sederhana untuk membuat spesifikasi untuk suatu fungsi adalah dengan mengatakan bahwa " seharusnya (melakukan sesuatu) " diberi masukan tertentu. Ini adalah prinsip pengembangan berbasis perilaku, yang dapat dilihat pada kerangka pengujian lainnya seperti Jasmine (JavaScript).

Semalt lihat contoh fungsi (dan variabel yang relevan):

  // di dalam 'scss / project. scss '$ type-base-font-size: 16px! default;$ type-base-ratio: 1. com untuk representasi visual dari konsep ini). Dengan ini, kami memiliki spec pertama kami  :  

  // di dalam 'tes / api / skala tipe. scss '@include test-module ('type-scale') {@include test ('harus mengembalikan ukuran font yang sesuai berdasarkan skala modular') {$ actual: tipe-skala   ;$ expected: 23px; // berdasarkan basis 16px dan rasio 1. 4@include assert-equal ($ actual, $ expected);}}     

Semalt adalah tiga bagian utama di sini:

  • modul uji : kode modul (atau unit ) yang Anda uji; dalam hal ini, fungsi skala tipe
  • uji : spesifikasi atau asumsi tentang unit yang diuji
  • asersi : pernyataan bahwa nilai sebenarnya memenuhi nilai yang diharapkan.

Untuk mempermudah tes, preferensi saya adalah menyimpan $ aktual dan $ expected nilai pada variabel sebelum menguji pernyataan. Dalam Benar, ada empat jenis asersi:

  • menegaskan-benar ($ value) menegaskan bahwa nilainya adalah truthy
  • menegaskan-salah ($ value) menegaskan bahwa nilainya adalah tidak benar , e. g. null atau salah
  • menegaskan-sama ($ assert, $ expected) menegaskan bahwa nilai aktual (yang dinyatakan) dan yang diharapkan sama
  • menegaskan-tidak sama ($ assert, $ expected) menegaskan bahwa nilai aktual (yang ditegaskan) dan (un) yang diharapkan tidak sama

Semalt membahas beberapa strategi untuk fungsi pengujian unit.

Gunakan @mixin untuk menyiapkan tes, jika diperlukan.

Dalam fungsi di atas, kita mengasumsikan bahwa variabel global $ type-base-font-size == 16px dan $ tipe-base-ratio == 1. 4 . Asumsi berbahaya dalam pengujian, seperti data yang bisa berubah. Buatlah @ mixin yang dapat menerapkan nilai ini sebelum setiap tes:

  @mixin test-type-scale-before    {$ type-base-font-size: 16px! global;$ type-base-ratio: 1. 4! global;}     

Sekarang, variabel-variabel ini akan aman dari modifikasi luar di setiap tes yang mencakup @mixin :

  @include test-module ('type-scale function') {@include test ('. ') {@include test-type-scale-before   ;// kode uji}}     

Uji setiap argumen.

A Sass @function dapat mencakup banyak argumen (walaupun sebaiknya kita membatasi ini), dan merupakan ide bagus untuk menguji masing-masing individu untuk memastikan hasilnya kembali:

  @include test ('harus bekerja dengan integer $ eksponen') {@include test-type-scale-before   ;$ actual: tipe-skala ($ eksponen: 2);$ expected: 32px;@include assert-equal ($ actual, $ expected);}@include test ('harus bekerja dengan bilangan bulat negatif $ eksponen') {@include test-type-scale-before   ;$ actual: tipe-skala ($ eksponen: -2);$ expected: 9px;@include assert-equal ($ actual, $ expected);}@include test ('harus bekerja dengan huruf numerik $ base') {@include test-type-scale-before   ;$ actual: tipe-skala ($ eksponen: 2, $ base: 10px);$ expected: 20px;@include assert-equal ($ actual, $ expected);}// dll untuk $ rasio, $ faktor     

Menguji argumen default.

Tentu saja, jika fungsi Anda memiliki argumen default, sebuah pernyataan harus dibuat bahwa fungsinya, jika dipanggil tanpa argumen, mengembalikan hasil yang diharapkan.

  @include test ('harus mengembalikan ukuran font dasar dengan argumen default') {@include test-type-scale-before   ;$ actual: tipe-skala   ;$ expected: $ type-base-font-size;@include assert-equal ($ actual, $ expected);}     

Iterasi melalui berbagai nilai potensial. Gunakan petunjuk @each , @ while , atau @for untuk mengulangi melalui semua nilai potensial yang dapat diterima oleh argumen:

  @include test ('harus bekerja dengan unit yang berbeda untuk $ base') {@include test-type-scale-before   ;$ values: (10px, 100%, 10pt); // etc. $ units: ('px', 'percent', 'pt'); // dll. nilai yang diharapkan: (14px, 140%, 14pt); // etc @for $ index dari 1 sampai panjang ($ values) {$ value: nth ($ values, $ index);$ unit: nth ($ units, $ index);$ actual-value: tipe-skala (1, $ value);$ expected-value: nth ($ expected-values, $ index);@include assert-equal ($ actual-value, $ expected-value, 'Works with # {$ unit}');}}     

Menguji mixin

Dengan Benar, a @ mixin dapat diuji kebenarannya dengan membandingkan keluaran sebenarnya dengan keluaran yang diharapkan. Sintaksnya mirip dengan asersi fungsi, dengan penambahan @include input dan @include expect mixin.

Berikut adalah contoh mixin tipe skala yang menggunakan fungsi tipe-skala ;

  @mixin tipe-skala ($ eksponen: 0) {ukuran huruf: tipe-skala ($ eksponen);}     

Dan inilah ujian yang menyertainya:

  @include test ('@ mixin type-scale   ') {@include assert ('harus menampilkan ukuran font yang sesuai') {@include masukan {@include tipe-skala   ;}@include expect {ukuran font: 23px;}}}     

Sekarang, saat tes dijalankan, Anda bisa membandingkan . memasukkan { } blok ke . mengharapkan { } blok untuk tes ini:

  / * @mixin tipe-skala    * /[data-module = "type-scale function"] [data-test = "@ mixin type-scale   "] [data-assert = "harus menampilkan ukuran font yang sesuai"]. memasukkan {ukuran font: 23px;}[data-module = "type-scale function"] [data-test = "@ mixin type-scale   "] [data-assert = "harus menampilkan ukuran font yang sesuai"]. berharap {ukuran font: 23px;}     

Pedoman untuk pengujian mixin harus sama dengan fungsi pengujian. Pastikan untuk menguji setiap argumen, nilai default, dan iterasi melalui berbagai nilai potensial.

Untuk membuat mixin mudah diuji, memisahkan logika dari campuran dan fungsi. Fungsi secara langsung dapat diuji, dan ini akan memberikan modularitas dan pemisahan masalah yang lebih besar di dalam proyek Anda.

Menjalankan tes Anda

Dengan Benar, ada beberapa cara untuk menjalankan tes - via true-cli di terminal, atau dengan node-sass dan pelari tes pilihan Anda, seperti MochaJS. Lihat dokumentasi True untuk informasi lebih lanjut tentang pemasangan dan pengujian. Jika Anda menggunakan terminal, itu sesederhana menjalankan jalur true-cli / ke / your / tests Anda. scss .

Semua tes di atas di dalam @include test harus berada di dalam @include test-module , dengan nama unit spesifik yang Anda uji sebagai nama modul, seperti @include test-module ('type-scale') . Anda dapat melihat daftar isi Sassmeister ini untuk melihat semua tes di atas yang sedang dilakukan.

Catatan Akhir

Tes unit dapat menghemat jam waktu pengembangan dengan mengotomatisasi proses pengujian setiap bagian proyek Anda. Dengan cara itu, Anda dapat melakukan refactor dengan kepastian bahwa, jika semua unit test lulus, kode tersebut dapat digunakan dengan aman dan benar diterapkan. Unit testing secara alami juga menekankan struktur proyek modular.

Aturan praktis yang bagus: kode kurang lebih baik, dan lebih banyak unit test lebih baik. Jaga agar lingkup dan tanggung jawab unit proyek Anda (mixin dan fungsi) kecil, dan mudah dikenali. Uji untuk setiap kemungkinan masukan, dan pastikan bahwa fungsi Anda sama idempotnya.

Jika Anda ingin melihat beberapa penggunaan unit tes kehidupan nyata di perpustakaan Sass, lihat tes unit yang saya tulis untuk Sassdash. com / avatar / b2ed37ca7c832840fdeefd6868754407? s = 96 & d = mm & r = g "alt ="Membuat Tes untuk Kerangka Sass AndaMembuat Tes untuk Kerangka Sass Anda Topik Terkait: SassAnimationAudio & VideoCSS Semalt "/>

Temui pengarangnya
David Khourshid
David Khourshid adalah pengembang dan pembicara web front-end di Orlando, Florida. Dia sangat menyukai JavaScript, Sass, dan teknologi terdepan terdepan. Dia juga seorang pianis dan menikmati matematika, dan terus menemukan cara baru untuk menerapkan teori matematika dan musik ke pengembangan web.
March 7, 2018