Kernpunkte
Ich habe neulich die Include-Media-Bibliothek von Eduardo Bouças verwendet und wollte schnell eine Funktion testen, die ich selbst aufgebaut habe. Deshalb habe ich angefangen, einen kleinen Mixer zu schreiben, um mir zu helfen, viele verschiedene Szenarien zu testen. Nach ein paar Minuten hatte ich einen Sass -Testmotor, der so minimal wie möglich war.
Obwohl dieser Beitrag etwas technischer sein mag, glaube ich, dass er vielen Menschen hilft, da die Tests in der Verantwortung jedes Entwicklers liegen sollten. Nachdem Sie diese eins nach dem anderen verstanden haben, werden Sie feststellen, dass es eigentlich nicht schwer zu verstehen ist.
Alles beginnt mit der zu testenden Funktion. Für unsere Zwecke schlage ich vor, dass wir eine sehr einfache Funktion verwenden. Zum Beispiel eine Funktion, mit der die Zahl verdoppelt wird.
@function double($value) {
@return $value * 2;
}klingt einfach. Für unsere Demonstrationszwecke werden wir jedoch absichtlich einen Fehler in der Funktion einführen, damit wir tatsächlich sehen können, dass einer unserer Tests fehlschlägt.
@function double($value) {
// 为了演示目的而故意引入的错误
@if $value == 3 {
@return 5;
}
@return $value * 2;
}Sie können überrascht sein, aber das Schreiben von Testfällen in unserem System ist so einfach wie das Schreiben einer SASS -Karte, bei der die Tasten Funktioneingänge sind und die Werte erwartete Ergebnisse sind.
$tests-double: ( 1: 2, 2: 4, 3: 6, 4: 8 );
Das ist es! Wir haben Testfälle geschrieben. Wieder: Die linke ist der Eingang und die rechte ist die erwartete Ausgabe.
Bisher lief alles gut. Wir haben unsere Funktionen aufgebaut und Testfälle geschrieben. Wir müssen jetzt nur noch einen Testläufer erstellen.
Wenn Sie mit SASS vertraut sind, verstehen Sie dies wahrscheinlich bereits. Unser Testläufer wird über die Testkarte iteriert, die Funktion für jede Eingabe aufrufen und sicherstellen, dass sie mit der erwarteten Ausgabe übereinstimmt. Anschließend werden unsere Testergebnisse gedruckt.
Hier sieht unser Testläufer aus:
/// 在测试套件 ($tests) 上运行函数 ($function)
/// @param {Map} $tests - 测试套件
/// @param {String} $function - 要测试的函数名称
@mixin run-tests($tests, $function) { .. } okay. Schauen wir uns das Innere dieses "Tieres" tiefer an. Die Idee ist, die Ergebnisse jedes Tests zum Erstellen einer Zeichenfolge zu verwenden. Sobald alle Vorgänge abgeschlossen sind, drucken Sie die Zeichenfolge mit der @error -Grichtlinie aus. Zum Beispiel können wir es auch an die Eigenschaft des Pseudoelements übergeben, aber dies ist etwas komplizierter, sodass wir uns bei content halten. @error
Das erste, was zu tun ist, ist die Testsuite zu iterieren. Für jeden Test rufen wir die Funktion basierend auf ihrem Namen dynamisch auf (unter Verwendung der Funktion call(...)) und überprüfen, ob die Ergebnisse wie erwartet sind.
@function double($value) {
@return $value * 2;
}Zu diesem Zeitpunkt läuft unser System. Lassen Sie es uns in unserer Testsuite ausführen und sehen, wie es aussieht.
@function double($value) {
// 为了演示目的而故意引入的错误
@if $value == 3 {
@return 5;
}
@return $value * 2;
}$tests-double: ( 1: 2, 2: 4, 3: 6, 4: 8 );
Hey! Das ist der Anfang, oder? Jetzt müssen wir die Ausgabe nur nützlicher (und freundlicher) machen.
Dies ist der Zeitpunkt, an dem Sie die Ausgabe anpassen können, damit er so aussieht, als ob Sie es aussehen möchten. Es gibt keine einzige Möglichkeit, dies zu tun. Sie können die mögliche Ausgabe ausgeben. Beachten Sie, dass Sie nach der CSS -Spezifikation a zum Wickeln von Linien in Zeichenfolgen verwenden können.
In meinem Fall habe ich das gewählt:
/// 在测试套件 ($tests) 上运行函数 ($function)
/// @param {Map} $tests - 测试套件
/// @param {String} $function - 要测试的函数名称
@mixin run-tests($tests, $function) { .. } Wenn wir es auf der Funktion $tests-double erneut ausführen, erhalten wir: 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;
}Testfunktionen mit mehreren Parametern
@include run-tests($tests-double);
der call(...) -Variablen eine Ellipsis (...) hinzufügen. $test
<code>Test passed; Test passed; Test failed; Test passed;</code>
als Parameterliste übergeben. Mit anderen Worten, wenn $test eine Liste ist (z. B. $test), wird sie anstelle einer Liste als mehrere Parameter übergeben. ('a', red, 42px')
Wenn Sie nach einer ausführlicheren Lösung suchen, sollten Sie sich vielleicht Eric Suzannes wahres ansehen. Als komplettes Sass -Test -Framework eignet es besser für die globale Infrastruktur für Unit -Tests.
Wenn Sie anzeigen möchten (eine etwas fortgeschrittenere Version des Codes), habe ich das Sassytester -Repository geöffnet, um alles zu sammeln.
Was denkst du?
FAQs über das Testen von Sass -Funktionen (FAQ)
In verschiedenen Werkzeugen und Methoden können Sass -Funktionen getestet werden. Ein häufiger Ansatz ist die Verwendung von SASS -Test -Frameworks wie True. TRUE ist ein Tool für Unit -Tests, das sich in Ihre SASS -Projekte integriert. Sie können Tests direkt in einer SASS -Datei schreiben, die dann in node.js oder einem beliebigen Webbrowser ausgeführt werden können.
Einige Best Practices für das Testen von SASS -Funktionen umfassen das Schreiben von Tests für jede Funktion, die Verwendung konsistenter Namenskonventionen für die Tests und sicherzustellen, dass der Test alle möglichen Szenarien abdeckt. Es ist auch wichtig, Tests regelmäßig auszuführen und bei Bedarf Tests zu aktualisieren, wenn Änderungen an Funktionen vorgenommen werden.
Ja, Sie können Sass -Funktionen mit JavaScript testen. Sie können Tools wie Scherz verwenden, um Ihre Sass -Funktionen zu testen. Jest ist ein JavaScript -Test -Framework, mit dem Sie Tests in einfacher und klarer Syntax schreiben können.
Einige häufige Herausforderungen beim Testen von SASS-Funktionen umfassen die Handhabung komplexer Funktionen, die Verwaltung von Abhängigkeiten und die Gewährleistung der Kompatibilität des Cross-Browsers. Diese Herausforderungen können mit einem leistungsstarken Test -Framework, dem Schreiben klarer und prägnanter Tests und regelmäßig Überprüfung und Aktualisierungstests überwunden werden.
Sie können Ihre SASS -Testfähigkeiten verbessern, indem Sie regelmäßig üben, den Code anderer Menschen lesen und lernen und die neuesten Trends und Best Practices von SASS -Tests verstehen. Die Teilnahme an Coding -Herausforderungen und bei Beitrag zu Open -Source -Projekten kann auch dazu beitragen, Ihre Fähigkeiten zu verbessern.
SASS spielt eine entscheidende Rolle bei der Webentwicklung, indem CSS stärker und leichter aufrechterhalten werden. Es bietet Funktionen wie Variablen, Verschachtelung, Mixer und Funktionen, mit denen effizienter und wiederverwendbarer CSS -Code geschrieben werden kann.
Eine Vielzahl von Tools und Techniken kann verwendet werden, um Sass -Funktionen zu debuggen. Ein gemeinsamer Ansatz ist die Verwendung der Sass inspect -Funktion, mit der Sie den Wert eines Sass -Ausdrucks überprüfen können. Sie können auch die Sass @debug -Richtlinie verwenden, die den Wert des SASS -Ausdrucks in die Konsole druckt.
Während Sass -Funktionen ohne Testframework getestet werden können, wird dies nicht empfohlen. Das Testframework bietet einen strukturierten und systematischen Ansatz für das Testen und erleichtert das Schreiben, Verwalten und Ausführen von Tests.
Die Verwendung des Sass -Test -Frameworks bietet viele Vorteile. Es ermöglicht Ihnen, Tests auf strukturierte und systematische Weise zu schreiben, sodass Sie die Verwaltung und Ausführung von Tests erleichtern. Es bietet auch Tools und Funktionen, mit denen effizientere Tests wie Assertionsfunktionen und Testläufer geschrieben werden können.
Das obige ist der detaillierte Inhalt vonTesten einer Sass -Funktion in 5 Minuten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
