Testen einer Sass -Funktion in 5 Minuten

Kernpunkte

• SASS -Funktionstests können durchgeführt werden, indem virtuelle Funktionen erstellt, Testfälle geschrieben, Testläufer erstellt und benutzerdefinierte Ausgabeergebnisse erstellt werden. Dies kann mit der minimalistischen SASS -Testmotor für Testfunktionen in verschiedenen Szenarien implementiert werden.
• Verwenden Sie SASS -Mapping, um Funktionen mit mehreren Parametern zu testen, die alles als Schlüssel akzeptieren können, einschließlich einer Liste. Dies ermöglicht Testfunktionen mit mehreren Parametern.
• Während dieses minimalistische Testsystem für das Testen einer kleinen Anzahl von Funktionen sehr bequem ist, eignet es sich besser für einen vollständigen Sass-Test-Framework wie Eric Suzannes wahr für detailliertere Lösungen.

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.

Erstellen Sie virtuelle Funktionen zum Testen

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;
}

Schreiben von Testfällen

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.

Test Runner

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.

verbesserte Ausgabe

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;
}

Es ist jetzt sehr ordentlich, nicht wahr?

Testfunktionen mit mehreren Parametern

In unserem Beispiel hat unsere Funktion nur einen Parameter, aber wir können uns darauf verlassen, dass die SASS -Karte alles als Schlüssel (einschließlich einer Liste) akzeptiert, um eine Funktion mit mehreren Parametern zu testen. Es sieht so aus:

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

Wenn Sie unseren Mixer überprüfen, sehen Sie, dass wir beim Aufrufen der Funktion

der call(...) -Variablen eine Ellipsis (...) hinzufügen. $test

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

Dies bedeutet, dass wir den Wert

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')

endgültige Gedanken

Das ist es, Freunde: Der kleinste Sass -Testmotor aller Zeiten. Dieses winzige Testsystem kann sehr bequem sein, um eine kleine Anzahl von Funktionen zu testen, die möglicherweise in Ihrem Projekt enthalten sind, insbesondere wenn Sie es anderen Entwicklern (Frameworks, Bibliotheken ...) zur Verfügung stellen möchten. Außerdem fand es sehr bequem, die Funktionen auf Sassmeister schnell zu testen. Setzen Sie einfach den Mixer und Ihre Funktion dort und führen Sie Ihre Tests aus!

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)

Was ist die Bedeutung des Testens von Sass -Funktionen?

Testen von SASS -Funktionen sind in der Webentwicklung von entscheidender Bedeutung, da sie die Funktionalität und Effizienz des CSS -Präprozessors sicherstellt. Es hilft, Fehler zu identifizieren und zu beheben, die Leistung der Website zu verbessern und stellt sicher, dass SASS -Funktionen wie erwartet funktionieren. Durch das Testen der SASS -Funktionen können Sie sicherstellen, dass Ihr Website -Design und Ihr Layout über verschiedene Browser und Plattformen konsistent sind.

Wie testet ich Sass -Funktionen?

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.

Was sind die Best Practices zum Testen von Sass -Funktionen?

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.

Kann ich Sass -Funktionen mit JavaScript testen?

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.

Was sind die häufigsten Herausforderungen beim Testen von Sass -Funktionen?

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.

Wie verbessert man meine Sass -Testfähigkeiten?

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.

Welche Rolle spielt SASS in der Webentwicklung?

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.

Wie kann man Sass -Funktionen debuggen?

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.

Kann ich Sass -Funktionen ohne Testframework testen?

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.

Was sind die Vorteile der Verwendung von Sass -Test -Frameworks?

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!