Menguji perpustakaan sass

Akhir-akhir ini, saya telah menghabiskan masa yang baik bekerja dengan Eduardo Bouças di termasuk media. Kami melalui banyak refactoring sehingga memutuskan untuk menulis beberapa ujian dan menjalankannya pada setiap komit untuk memastikan kami tidak memecahkan apa -apa. Saya akan melalui butiran dalam artikel ini.

Jika anda tidak tahu termasuk media lagi, ia adalah pengurus breakpoint yang sangat ringan namun kuat di SASS.

API awam yang disediakan adalah mixin tunggal, media (..) (oleh itu nama perpustakaan), tetapi semuanya cukup difikirkan dengan baik sehingga anda benar -benar dapat melakukan keajaiban dengannya. Contoh pendek sebelum memulakan:

<span>.my-component {
</span><span>  <span>width: 100%;</span>
</span>
  <span>// On screens larger or equal to *small* breakpoint,
</span>  <span>// make the component floated and half the size
</span><span>  <span>@include media('≥small') {</span>
</span><span>    <span>float: left;</span>
</span><span>    <span>width: 50%;</span>
</span>  <span>}
</span><span>}</span>

Sekarang itu cukup rad, bukan?

Bagaimanapun, jadi kami datang dengan sistem ujian kecil yang saya ingin berkongsi dengan anda. Sudah tentu, jika anda ingin menguji rangka kerja penuh, anda mungkin mahu menggunakan True dari Eric Suzanne sebaliknya, yang merupakan rangka kerja ujian penuh yang ditulis dalam Sass, untuk Sass dan diperkenalkan dan dijelaskan oleh David dalam artikel baru -baru ini di Sitepoint.

Apa idea itu?

kami mahu menjalankan beberapa ujian pada fungsi peribadi utama dari perpustakaan pada bila -bila masa kami berkomitmen untuk repositori. Sekiranya sebarang ujian gagal, komit itu dibatalkan dan kod perlu diperbaiki untuk membolehkan komited untuk lulus. Dengan cara ini, kami memastikan bahawa kami dapat bekerja dengan selamat di perpustakaan tanpa mengambil risiko memecahkannya (yang biasanya

buruk perkara).

Mencapai sesuatu seperti ini akhirnya menghairankan mudah: Kami menyediakan cangkuk pra-komit Jika ujian gagal, kami membunuh proses itu.

Terdapat cara yang berbeza untuk menjalankan sass dan libsass. Anda boleh mempunyai binari, atau anda boleh menggunakan pembalut. Dalam kes kami, kami memilih aliran kerja kecil, menjadikannya mudah bagi kami untuk menjalankan kedua -dua Ruby Sass dan Libsass.

Kami mahukan sesuatu yang sangat mudah, jadi ujian ditulis dalam SASS menggunakan Sassytester, yang saya diperkenalkan baru -baru ini dalam artikel menguji fungsi SASS dalam 5 minit. Sassytester adalah kira -kira 25 baris panjang. Fungsi ujian hanya mengeluarkan peta SASS dengan hasil dari ujian. Dari sana, kita boleh melakukan apa sahaja yang kita mahu dengannya. Dalam kes kami, kami mahu membuang kesilapan jika ujian gagal. Untuk berbuat demikian, kami mempunyai arahan @error dari SASS!

Apabila menyusun ujian SASS, jika tugas GULP menemui kesilapan SASS, ia keluar dari proses sambil membuang kesilapan itu sendiri, yang buih ke cangkuk pra-komit dan akhirnya membatalkan komit.

Jika kita menyimpulkan ini, ia seperti ini:

1. cangkuk pra-komit menjalankan tugas menguji tugas di komit
2. Tugas ujian ujian menyusun ujian sass di kedua -dua libsass dan ruby ​​sass
3. Jika ujian gagal, sass melemparkan ralat dengan @Error
4. ralat sass ditangkap oleh gulp yang sendiri memancarkan ralat
5. Ralat Gulp ditangkap oleh cangkuk pra-komit yang menggugurkan komite

setakat ini, begitu baik?

Menyediakan Senibina Ujian

arkitek perkataan menjadikannya bunyi begitu besar sementara ia sebenarnya sangat mudah. Inilah yang kelihatan seperti projek:

<span>.my-component {
</span><span>  <span>width: 100%;</span>
</span>
  <span>// On screens larger or equal to *small* breakpoint,
</span>  <span>// make the component floated and half the size
</span><span>  <span>@include media('≥small') {</span>
</span><span>    <span>float: left;</span>
</span><span>    <span>width: 50%;</span>
</span>  <span>}
</span><span>}</span>

tidak begitu mengagumkan selepas semua, heh? Tugas Gulp hanya akan menjalankan enjin SASS pada semua fail dalam folder ujian. Inilah fungsi-1.scss yang kelihatan seperti:

dist/
<span>|
</span><span>|- my-sass-library.scss
</span><span>|
</span>tests/
<span>|
</span><span>|- helpers/
</span><span>|   |- _SassyTester.scss
</span><span>|   |- _custom-formatter.scss
</span><span>|
</span><span>|- function-1.scss
</span><span>|- function-2.scss
</span><span>|- ...</span>

Terakhir tetapi tidak kurang, kita perlu mentakrifkan semula larian (..) kerana yang asal dari Sassytester mengeluarkan keputusan ujian dengan @error tidak kira sama ada mereka semua lulus atau tidak. Dalam kes kita, kita hanya mahu membuang jika ada kesilapan. Mari kita masukkannya ke dalam pembantu/_output-formatter.scss.

<span>// Import the library to test (or only the function if you can)
</span><span><span>@import '../dist/my-sass-library';</span>
</span>
<span>// Import the tester
</span><span><span>@import 'helpers/SassyTester';</span>
</span>
<span>// Import the custom formatter
</span><span><span>@import 'helpers/custom-formatter';</span>
</span>
<span>// Write the tests
</span><span>// See my previous article to know more about this:
</span><span>// http://...
</span><span><span>$tests-function-1: ( ... );</span>
</span>
<span>// Run the tests
</span><span><span>@include run(test('function-1', $tests-function-1));</span></span>

Untuk versi yang lebih maju dari mixin yang sama (..), semak satu dari termasuk media.

aliran kerja gulp

Jika anda ingin pengenalan ringkas kepada Gulp, pastikan anda membaca artikel baru -baru ini tentangnya: aliran kerja yang mudah untuk SASS. Untuk bahagian ini, saya akan menganggap anda sudah biasa dengan Gulp.

kita memerlukan tiga tugas:

• satu untuk menjalankan libsass pada folder ujian (menggunakan gulp-sass)
• satu untuk menjalankan ruby ​​sass pada folder ujian (menggunakan gulp-ruby-sass)
• satu untuk menjalankan dua tugas sebelumnya

<span>// We overwrite the `run(..)` mixin from SassyTester to make it throw
</span><span>// an `@error` only if a test fails. The only argument needed by the
</span><span>// `run(..)` mixin is the return of `test(..)` function from SassyTester.
</span><span>// You can check what `$data` looks like in SassyTester documentation:
</span><span>// http://kittygiraudel.com/SassyTester/#function-test
</span><span><span>@mixin run($data) {</span>
</span><span>  <span>$tests: map-get($data, 'tests');</span>
</span>
<span>  <span>@each $test in $tests {</span>
</span><span>    <span>@if map-get($test, 'fail') {</span>
</span><span>      <span>@error 'Failing test!</span>
</span><span>        <span>Expected : #{map-get($test, 'expected')}</span>
</span><span>        <span>Actual   : #{map-get($test, 'actual')}';</span>
</span>    <span>}
</span>  <span>}
</span><span>}</span>

Sebaik-baiknya, apabila Sass melemparkan ralat (sama ada kerana ralat terbina dalam atau kerana @error), Gulp harus keluar dengan betul. Malangnya, terdapat masalah mengenai perkara ini di Gulp-Ruby-Sass yang masih belum ditetapkan untuk Ruby Sass, kita perlu menaikkan node Pengecualian Fatal yang tidak diketahui dengan Process.exit (1) diri kita.

Menambah cangkuk pra-komit

Terdapat banyak perpustakaan untuk menubuhkan cangkuk pra-komite. Saya secara peribadi suka pra-komit tetapi pada dasarnya anda boleh memilih yang anda suka kerana mereka semua melakukan lebih kurang perkara yang sama.

Untuk menambah cangkuk pra-komit ke projek kami, kami perlu membuat kunci pra-komit dalam pakej.json kami. Kunci ini dipetakan ke pelbagai npm skrip arahan. Oleh itu, kita juga memerlukan objek skrip, dengan ujian yang dinamakan kunci, dipetakan ke perintah Gulp: ujian Gulp.

<span>var gulp = require('gulp');
</span><span>var sass = require('gulp-sass');
</span><span>var rubySass = require('gulp-ruby-sass');
</span>
<span>// Run LibSass on the tests folder
</span><span>// Gulp automatically exits process in case of Sass error
</span>gulp<span>.task('test:libsass', function () {
</span>  <span>return gulp.src('./tests/*.scss')
</span>    <span>.pipe(plugins.sass());
</span><span>});
</span>
<span>// Run Ruby Sass on the tests folder
</span><span>// Gulp manually exits process in case of Sass error
</span>gulp<span>.task('test:ruby-sass', function () {
</span>  <span>return rubySass('./tests')
</span>    <span>.on('error', function (err) {
</span>      process<span>.exit(1);
</span>    <span>});
</span><span>});
</span>
gulp<span>.task('test', ['test:libsass', 'test:ruby-sass']);</span>

Apabila berkomitmen, kebakaran cangkuk pra-komit dan cuba untuk melaksanakan skrip ujian NPM. Skrip ini menjalankan arahan berikut: Ujian Gulp, yang intimates Gulp untuk menjalankan ujian.

Itu sahaja, kami sudah selesai.

Pemikiran Akhir

Contoh ini sangat mudah seperti yang anda lihat, tetapi ia berfungsi dan ia melakukannya dengan baik. Inilah yang kelihatan seperti:

Jadi apa pendapat anda? Adakah ini sesuatu yang mungkin anda pertimbangkan untuk menambah perpustakaan atau kerangka anda?

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