5 분 안에 SASS 기능을 테스트합니다
- Christopher Nolan원래의
- 2025-02-25 12:43:08426검색
-
이 미니멀리스트 테스트 시스템은 적은 수의 기능을 테스트하는 데 매우 편리하지만 Eric Suzanne 's True와 같은 전체 SASS 테스트 프레임 워크에 더 적합합니다.
-
이 게시물은 조금 더 기술적 일 수 있지만 테스트가 모든 개발자의 책임이어야하기 때문에 많은 사람들이 도움이됩니다. 또한, 이것을 하나씩 이해 한 후에는 실제로 이해하기 어렵지 않다는 것을 알게 될 것입니다.
쓰기 테스트 사례
그게 다야! 우리는 테스트 사례를 작성했습니다. 다시 : 왼쪽은 입력이며 오른쪽은 예상 출력입니다.
테스트 러너
<code class="language-sass">@function double($value) {
@return $value * 2;
}</code>
좋아요. 이 "짐승"의 내부를 더 깊이 살펴 보겠습니다. 아이디어는 각 테스트의 결과를 사용하여 문자열을 구축하는 것이며 모든 작업이 완료되면
<code class="language-sass">@function double($value) {
// 为了演示目的而故意引入的错误
@if $value == 3 {
@return 5;
}
@return $value * 2;
}</code> 지시문을 사용하여 문자열을 인쇄하는 것입니다. 예를 들어, 우리는 그것을 의사 요소의 속성으로 전달할 수 있지만, 이것은 조금 더 복잡하므로
를 고수 할 것입니다. 함수 사용) 결과가 예상되는지 확인합니다.
값을 매개 변수 목록으로 전달한다는 것을 의미합니다. 다시 말해, 가 목록 (예 : )이면 목록 대신 여러 매개 변수로 전달됩니다.
Sass는 CSS를 더 강력하고 유지 관리하기 쉽게함으로써 웹 개발에 중요한 역할을합니다. 변수, 중첩, 믹서 및 기능과 같은 기능을 제공하여보다 효율적이고 재사용 가능한 CSS 코드를 작성하는 데 도움이됩니다. 지시를 사용할 수도 있습니다.
SASS 테스트 프레임 워크 사용은 많은 이점을 제공합니다. 이를 통해 체계적이고 체계적인 방식으로 테스트를 작성하여 테스트를보다 쉽게 관리하고 실행할 수 있습니다. 또한 어설 션 기능 및 테스트 러너와 같은보다 효율적인 테스트를 작성하는 데 도움이되는 도구와 기능을 제공합니다. call(...)
<code class="language-sass">@function double($value) {
@return $value * 2;
}</code>
<code class="language-sass">@function double($value) {
// 为了演示目的而故意引入的错误
@if $value == 3 {
@return 5;
}
@return $value * 2;
}</code> 이봐! 이것이 시작입니다. 이제 우리는 출력을보다 유용하고 더 친근하게 만들면됩니다. <code class="language-sass">$tests-double: (
1: 2,
2: 4,
3: 6,
4: 8
);</code>
제 경우에는 이것이 내가 선택한 것입니다 :
a
<code class="language-sass">/// 在测试套件 ($tests) 上运行函数 ($function)
/// @param {Map} $tests - 测试套件
/// @param {String} $function - 要测试的函数名称
@mixin run-tests($tests, $function) { .. }</code>
$tests-double
double 최종 생각
그게 다야, 친구 : 가장 작은 Sass 테스트 엔진. 이 작은 테스트 시스템은 프로젝트에서 가질 수있는 소수의 기능을 테스트하는 데 매우 편리 할 수 있습니다. 특히 다른 개발자 (프레임 워크, 라이브러리 ...)가 제공 할 계획이라면. 또한 Sassmeister에서 기능을 신속하게 테스트하는 것이 매우 편리했습니다. 믹서와 기능을 거기에 넣고 테스트를 실행하십시오! <code class="language-sass">@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;
}</code>
SASS 함수를 테스트하는 방법은 무엇입니까?
JavaScript를 사용하여 SASS 기능을 테스트 할 수 있습니까?
예, JavaScript를 사용하여 SASS 기능을 테스트 할 수 있습니다. Jest와 같은 도구를 사용하여 SASS 기능을 테스트 할 수 있습니다. Jest는 간단하고 명확한 구문으로 테스트를 작성할 수있는 JavaScript 테스트 프레임 워크입니다.
함수를 사용하여 SASS 표현식의 값을 확인할 수 있습니다. SASS 표현식의 값을 콘솔에 인쇄하는 Sass 테스트 프레임 워크없이 SASS 기능을 테스트 할 수 있습니까?
위 내용은 5 분 안에 SASS 기능을 테스트합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!