5 분 안에 SASS 기능을 테스트합니다-CSS 튜토리얼-php.cn

Testing a Sass Function in 5 Minutes

코어 포인트

SASS 기능 테스트는 가상 함수를 만들고, 테스트 케이스를 작성하고, 테스트 러너 생성 및 사용자 정의 출력 결과를 통해 수행 할 수 있습니다. 이는 다양한 시나리오에서 테스트 기능을 위해 미니멀리스트 SASS 테스트 엔진을 사용하여 구현할 수 있습니다.

SASS 매핑을 사용하여 여러 매개 변수를 사용하여 테스트 기능을 사용하여 목록을 포함하여 키로 사용할 수 있습니다. 이를 통해 여러 매개 변수로 테스트 함수가 가능합니다.

나는 다른 날에 Eduardo Bouças의 Media Library를 사용하고 있었고 내가 만든 기능을 신속하게 테스트하고 싶었 기 때문에 많은 다른 시나리오를 테스트하는 데 도움이되는 작은 믹서를 작성하기 시작했습니다. 몇 분 후, 나는 가능한 한 최소한의 Sass 테스트 엔진을 생각해 냈습니다.

이 게시물은 조금 더 기술적 일 수 있지만 테스트가 모든 개발자의 책임이어야하기 때문에 많은 사람들이 도움이됩니다. 또한, 이것을 하나씩 이해 한 후에는 실제로 이해하기 어렵지 않다는 것을 알게 될 것입니다.

테스트를위한 가상 함수를 만듭니다 모두 테스트 할 기능으로 시작합니다. 목적을 위해 매우 간단한 기능을 사용하는 것이 좋습니다. 예를 들어, 숫자를 두 배로 늘리는 데 사용되는 함수입니다.

간단하게 들립니다. 그러나 시연 목적으로 만, 우리는 실제로 테스트 중 하나가 실패하는 것을 볼 수 있도록 기능에 오류를 의도적으로 도입 할 것입니다.

쓰기 테스트 사례 당신은 놀랄 수도 있지만, 우리 시스템에 테스트 케이스를 작성하는 것은 키가 함수 입력이고 값이 기대되는 Sass 맵을 작성하는 것만 큼 간단합니다.

그게 다야! 우리는 테스트 사례를 작성했습니다. 다시 : 왼쪽은 입력이며 오른쪽은 예상 출력입니다.

테스트 러너

지금까지 모든 것이 잘되었습니다. 우리는 기능을 구축했으며 테스트 사례를 작성했습니다. 지금 테스트 러너를 만들면됩니다.

Sass에 익숙하다면 이미 이것을 이해하고있을 것입니다. 테스트 러너는 테스트 맵을 반복하고 각 입력의 기능을 호출하며 예상 출력과 일치해야합니다. 그런 다음 테스트 결과를 인쇄합니다.

여기 테스트 러너가 어떻게 보이는지

@function double($value) {
  @return $value * 2;
}

로그인 후 복사

좋아요. 이 "짐승"의 내부를 더 깊이 살펴 보겠습니다. 아이디어는 각 테스트의 결과를 사용하여 문자열을 구축하는 것이며 모든 작업이 완료되면

@function double($value) {
  // 为了演示目的而故意引入的错误
  @if $value == 3 {
    @return 5;
  }

  @return $value * 2;
}

로그인 후 복사

지시문을 사용하여 문자열을 인쇄하는 것입니다. 예를 들어, 우리는 그것을 의사 요소의

속성으로 전달할 수 있지만, 이것은 조금 더 복잡하므로

를 고수 할 것입니다.

가장 먼저해야 할 일은 테스트 스위트를 반복하는 것입니다. 각 테스트마다 이름을 기준으로 함수를 동적으로 호출하고 (

함수 사용) 결과가 예상되는지 확인합니다. call(...)

<,> 현재, 우리 시스템이 실행 중입니다. 테스트 스위트에서 실행하고 어떻게 생겼는지 보자.

@function double($value) {
  @return $value * 2;
}

로그인 후 복사

@function double($value) {
  // 为了演示目的而故意引入的错误
  @if $value == 3 {
    @return 5;
  }

  @return $value * 2;
}

로그인 후 복사

이봐! 이것이 시작입니다. 이제 우리는 출력을보다 유용하고 더 친근하게 만들면됩니다.

$tests-double: (
  1: 2,
  2: 4,
  3: 6,
  4: 8
);

로그인 후 복사

개선 된 출력

이것은 출력을 사용자 정의하여 원하는 것처럼 보이게 할 때입니다. 이 작업을 수행하는 방법은 단 하나가 없으며 원하는 출력을 출력 할 수 있습니다. CSS 사양에 따라

를 사용하여 줄을 랩핑 할 수 있습니다.

<,> 제 경우에는 이것이 내가 선택한 것입니다 : <🎜 🎜>

우리가 <🎜 🎜> 함수에서 다시 실행하면 이것이 우리가 얻는 것입니다 : <🎜 🎜>.

지금은 매우 깔끔하지 않습니까? a 여러 매개 변수가있는 테스트 함수

<,>이 예에서는 우리의 기능에는 하나의 매개 변수 만 있지만 SASS 맵은 여러 매개 변수가있는 함수를 테스트하기 위해 키 (목록 포함)로서 어떤 것을 수용한다는 사실에 의존 할 수 있습니다. 이렇게 보인다 :

믹서를 검토하면 <🎜 🎜>를 사용하여 함수를 호출 할 때 <🎜 🎜> 변수에 엘립스 시스 (...)를 추가하는 것을 볼 수 있습니다.

/// 在测试套件 ($tests) 上运行函数 ($function)
/// @param {Map} $tests - 测试套件
/// @param {String} $function - 要测试的函数名称
@mixin run-tests($tests, $function) { .. }

로그인 후 복사

이것은 우리가

값을 매개 변수 목록으로 전달한다는 것을 의미합니다. 다시 말해, <,>가 목록 (예 : <🎜 🎜>)이면 목록 대신 여러 매개 변수로 전달됩니다. $tests-double double 최종 생각 <🎜 🎜> <,> 그게 다야, 친구 : 가장 작은 Sass 테스트 엔진. 이 작은 테스트 시스템은 프로젝트에서 가질 수있는 소수의 기능을 테스트하는 데 매우 편리 할 수 있습니다. 특히 다른 개발자 (프레임 워크, 라이브러리 ...)가 제공 할 계획이라면. 또한 Sassmeister에서 기능을 신속하게 테스트하는 것이 매우 편리했습니다. 믹서와 기능을 거기에 넣고 테스트를 실행하십시오!

물론 더 심층적 인 솔루션을 찾고 있다면 Eric Suzanne의 True를 확인하고 싶을 수도 있습니다. 완전한 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;
}

로그인 후 복사

(코드의 약간 더 고급 버전)를보고 싶다면 Sassytester 저장소를 열어 모든 것을 수집했습니다.

그래서 당신은 어떻게 생각하십니까?

SASS 함수 테스트에 대한 FAQS (FAQ) SASS 기능 테스트의 중요성은 무엇입니까?

SASS 기능 테스트는 웹 개발에서 CSS 사전 처리기의 기능과 효율성을 보장하기 때문에 중요합니다. 버그를 식별하고 수정하고 사이트 성능을 향상 시키며 SASS 기능이 예상대로 작동하도록합니다. SASS 기능을 테스트하면 웹 사이트 디자인 및 레이아웃이 다른 브라우저 및 플랫폼에서 일관되게 보장 할 수 있습니다.

SASS 함수를 테스트하는 방법은 무엇입니까?
다양한 도구와 방법을 사용하여 SASS 기능을 테스트 할 수 있습니다. 일반적인 접근법은 True와 같은 SASS 테스트 프레임 워크를 사용하는 것입니다. True는 SASS 프로젝트와 통합되는 단위 테스트 도구입니다. SASS 파일로 직접 테스트를 작성할 수 있으며 Node.js 또는 웹 브라우저에서 실행할 수 있습니다.
SASS 기능을 테스트하기위한 모범 사례는 무엇입니까?
SASS 기능 테스트를위한 일부 모범 사례에는 각 기능에 대한 테스트 작성, 테스트에 대한 일관된 이름 지정 규칙 사용 및 테스트가 가능한 모든 시나리오를 포함하는지 확인하는 것이 포함됩니다. 또한 테스트를 정기적으로 실행하고 기능을 변경할 때 필요에 따라 테스트를 업데이트하는 것도 중요합니다.
JavaScript를 사용하여 SASS 기능을 테스트 할 수 있습니까?
예, JavaScript를 사용하여 SASS 기능을 테스트 할 수 있습니다. Jest와 같은 도구를 사용하여 SASS 기능을 테스트 할 수 있습니다. Jest는 간단하고 명확한 구문으로 테스트를 작성할 수있는 JavaScript 테스트 프레임 워크입니다.
SASS 기능을 테스트 할 때 일반적인 과제는 무엇입니까?
SASS 기능 테스트의 일반적인 과제에는 복잡한 기능 처리, 종속성 관리 및 크로스 브라우저 호환성 보장이 포함됩니다. 이러한 과제는 강력한 테스트 프레임 워크, 명확하고 간결한 테스트 작성, 정기적으로 검사 및 업데이트 테스트를 사용하여 극복 할 수 있습니다.
SASS 테스트 기술을 향상시키는 방법은 무엇입니까?
당신은 정기적으로 연습하고, 다른 사람들의 코드를 읽고, 배우고, SASS 테스트의 최신 트렌드와 모범 사례를 이해함으로써 SASS 테스트 기술을 향상시킬 수 있습니다. 코딩 문제에 참여하고 오픈 소스 프로젝트에 기여하면 기술을 향상시키는 데 도움이 될 수 있습니다.
웹 개발에서 Sass의 역할은 무엇입니까?
Sass는 CSS를 더 강력하고 유지 관리하기 쉽게함으로써 웹 개발에 중요한 역할을합니다. 변수, 중첩, 믹서 및 기능과 같은 기능을 제공하여보다 효율적이고 재사용 가능한 CSS 코드를 작성하는 데 도움이됩니다.
SASS 기능을 디버그하는 방법은 무엇입니까?
다양한 도구와 기술을 사용하여 SASS 기능을 디버그 할 수 있습니다. 일반적인 접근법은 SASS
함수를 사용하여 SASS 표현식의 값을 확인할 수 있습니다. SASS 표현식의 값을 콘솔에 인쇄하는 Sass
지시를 사용할 수도 있습니다.
테스트 프레임 워크없이 SASS 기능을 테스트 할 수 있습니까?
SASS 함수는 테스트 프레임 워크없이 테스트 할 수 있지만 권장하지 않습니다. 테스트 프레임 워크는 테스트에 대한 체계적이고 체계적인 접근 방식을 제공하여 테스트를보다 쉽게 작성, 관리 및 실행할 수 있습니다.
SASS 테스트 프레임 워크를 사용하면 어떤 이점이 있습니까?
SASS 테스트 프레임 워크 사용은 많은 이점을 제공합니다. 이를 통해 체계적이고 체계적인 방식으로 테스트를 작성하여 테스트를보다 쉽게 관리하고 실행할 수 있습니다. 또한 어설 션 기능 및 테스트 러너와 같은보다 효율적인 테스트를 작성하는 데 도움이되는 도구와 기능을 제공합니다.

위 내용은 5 분 안에 SASS 기능을 테스트합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!