Sass 유닛 테스트를 수행하는 이유: 함수🧪

Did you know you could unit test your Sass/Scss? No? Me neither.

만약 몇 년 전에 네가 나에게 단원 테스트 Sass 같은 것이 있느냐고 물었다면, 스타일시트는 말할 것도 없고, 나는 너에게 그것이 수동일 수도 있고, 자동화될 수도 있으며, 예를 들어 Selenium과 같은 프레임워크가 있다고 말할 것이다.테스트는 느리고, 어렵고, 가볍지 않을 것이다.
이것은 과거이다. 다행히도, 우리는 지금 우리가 선택할 수 있는 시대에 살고 있다.
오늘, True이라는 아름다운 작은 테스트 프레임워크가 있습니다. 이 프레임워크는Sass 단원 테스트를 신속하게 작성할 수 있고, 많은 고통이 없을 것입니다.그것의 문법은 대부분의 전단 개발자들로 하여금 귀환을 느끼게 한다.만약 Jest을 사용하여 단원 테스트를 작성한 적이 있다면, True를 사용하는 것은 실제로는 크게 다르지 않을 것입니다.

왜 유닛 테스트 Sass야?

도구를 깊이 연구하기 전에 왜 이렇게 해야 하는지 토론해 봅시다.

기본적인 예로, 간단한 프로그램을 구축하고 있다면, 이 프로그램은 직원들의 금요일 피자 주문을 받는다.팀원들이 원하는 피자 라디오 상자를 선택할 수 있는 간단한 형식이다.네가 수동으로 테스트하고 발표하면, 그것은 회사 내에서 큰 환영을 받는다.
현재 사람들은 더 많은 기능을 필요로 한다.그런 다음 사용자 정의를 위해 드롭다운 목록을 요청합니다.너는 상술한 과정을 현상하고 중복한 후에 화물을 발송해라.이제는 다양한 종류의 피자를 선택할 수 없기 때문에 라디오 케이스를 별로 좋아하지 않는다.너는 돌아가서 변화와 테스트를 좀 해라.프로그램의 다른 부분을 파괴할 수 있다는 우려 때문에 수동 테스트가 필요하다.매번 연속적인 업데이트는 당신이 함께 유지하는 것을 포기하기로 결정할 때까지 점점 번거로워진다.
관건은 단원 테스트가 반복 수동 테스트 특성의 중복적이고 어려운 임무를 해결했다는 것이다.기본적으로 다음과 같습니다.

은 기존 애플리케이션의 새로운 기능/통합에 대해 내장된 상태 점검을 수행합니다.

애플리케이션을 손상시킬 수 있는 모든 사례를 문서화하고 수집합니다.그것은 본질적으로 무료 응용 프로그램 행동 문서로 입력을 제공했다.

은 코드가 유지보수가 가능한지 확인합니다. 설령 다른 사람이 코드 라이브러리에서 일하고 돌파적인 변경을 하더라도.만약 적절하게 작성된다면, 단원 테스트는 이 데이터를 포착할 것이다.

은 플로드의 화재를 줄였다. 금요일 저녁에 불을 끄는 것을 좋아하는 사람은 아무도 없었다.

이러한 원칙은 소프트웨어 개발의 많은 부분에 적용되기 때문에 Sass에 대한 단원 테스트는 그리 무리하지 않을 수 있다.만약 대량의 생성 양식을 포함하는 대형 프로젝트가 있다면, 디버깅 문제는 항상 그렇게 간단하지 않습니다.Sass 유닛 테스트는 다음과 같은 이점을 제공합니다.

단언 함수와mixin의 입력과 출력이 원하는 결과를 출력합니다.

타사 라이브러리를 사용하는 경우 특히 중요합니다.너는 너의 스타일시트가 상류의 파괴적인 변화로 인해 파괴되는 것을 원하지 않는다.

은 양식 검사에 필요한 수동 테스트량을 줄였다.

에서는 스타일시트 일부의 Sass 컴파일 오류가 올바르게 생성되었는지 확인합니다.

이거 나 주는 거야?

프로젝트의 크기에 상관없이 더 많은 테스트를 진행하자고 주장하지만, 이것은 당신이 구축하고 있는 내용에 적합하지 않을 수도 있습니다.다음을 테스트해야 합니다.

은 프로젝트에서 함수와 혼합을 사용하는데 특히 더 복잡한 상황에서는 그렇다.

다른 여러 파일에 Sass 파일이 사용됩니다.

고객 경험은 사용자 인터페이스의 안정성에 따라 크게 달라집니다.예를 들어 전자상거래 사이트에 대해 당신의 스타일이 의외로 '구매' 단추와 인접한 요소를 숨기기를 원하지 않을 것이다.

당신은 Cirrus처럼 도서관을 짓고 있습니다.

경고

단원 테스트 Sass는 모든 디자인 문제를 해결할 수 있다고 들리지만, 사실은 그렇지 않습니다. Sass True와 같은 프레임워크를 사용하면 생성된 CSS가 예상에 부합되는지 확인하는 데 도움이 되지만, 테스트 함수와 혼합에만 한정됩니다.
최종 CSS 출력은 실제로 수동으로 이중 체크와 유효성 검사를 수행하는 방법에 따라 달라집니다.이는 Sass가 올바르게 컴파일될 수 있는지에도 적용됩니다.

그럼 어떻게 시작해야 되지?

다음 자습서는 무작위 Sass 프로젝트에 대한 셀 테스트를 설정하는 방법에 대해 설명합니다.만약 다른 항목이 있다면, 이것을 추가하려면, 당신의 요구를 충족시키기 위해 수정 절차가 필요할 수도 있습니다.우리는 Dart Sass을 우리가 선택한 transpiler로 사용하고 Jest가 지원하는 Sass True 프레임워크를 사용하여 우리의 테스트를 작성하고 실행할 것입니다.
프로젝트에서 필요한 종속 항목을 먼저 설치합니다.

yarn add dart-sass sass-true glob jest

노드 항목을 초기화합니다.

npm init

package.json에서 Jest를 트리거하는 테스트 스크립트를 정의합니다.

"scripts": {
    "test": "jest"
}

테스트를 진행하려면 우리가 먼저 필요로 하는 것은 원본 코드다.없으면 이 string-split 함수를 복제하여 예시를 사용하고 src/functions.scss에 추가할 수 있습니다.

/* functions.scss */
@function string-split($string, $delimiter) {
    $result: ();

    $index: string.index($string, $delimiter);
    @while $index != null {
        $substring: string.slice($string, 1, $index - 1);
        $result: append($result, $substring);
        $string: string.slice($string, $index + string.length($delimiter));
        $index: string.index($string, $delimiter);
    }

    $result: append($result, $string);
    @return $result;
}

이 강좌에서, 우리는 문자열 분해 함수가 예상대로 작동하는지 확인하기 위해 단원 테스트를 작성하기를 희망합니다.

농담으로 언사의 진실성을 구속하다

이 섹션을 완료하면 Jest와 Sass True를 결합합니다.본질적으로 Sass True는 접착제 또는 Shim을 충당하여 Sass가 작성한 단원 테스트를 Jest가 설명할 수 있는 것에 귀속시킨다.
테스트에 대해 test 디렉터리를 만듭니다.여기서 우리는 우리가 원하는 단원 테스트와 패드 파일을 던질 수 있다.아래의 패드 파일 내용을 복사하여 test/scss.spec.js에 붙여넣습니다.

// scss.spec.js
const path = require('path');
const sassTrue = require('sass-true');
const glob = require('glob');

const testPath = `tests/**/*.spec.scss`;

describe('Sass', () => {
    const testFiles = glob.sync(path.resolve(process.cwd(), testPath));

    // Run on each file with describe() and it() functions
    testFiles.forEach((file) => sassTrue.runSass({ file: file }, { describe, it }));
});

이 패드 파일의 역할은 단원 테스트를 위해 .spec.scss 확장자로 끝난 모든 파일을 검색하는 것이다.우리는 glob을 사용하여 testPath의 정규 표현식의 모든 경로를 해석합니다.
각 테스트 파일에 대해 정의된 테스트를 실행하려면 Sass True를 사용합니다.runSass의 두 번째 매개 변수에서 우리는 Sass 단원 테스트에서 사용하고자 하는 함수, 예를 들어 describe과 it을 전달했다.이 함수들이 무엇을 하는지 확실히 모르면, 다행히도, Jest Documentation을 참고할 수 있습니다. 왜냐하면 이 함수들은 대응하는 자바스크립트와 완전히 같기 때문입니다.

컴파일 단위 테스트

지금은 재미있다/지루한 부분이다.현재 우리는 반드시 string-split() 함수를 위해 실제 테스트를 작성해야 한다.경로 test/functions.spec.scss에서 첫 번째 테스트 파일을 만듭니다.
첫 번째로 해야 할 일은 Sass True 라이브러리와 테스트를 위한 파일을 가져오는 것입니다.

/* functions.spec.scss */
@use 'true';
@use '../src/functions.scss';

만약 당신이 단원 테스트를 농담으로 하는 것에 익숙하다면, 다음 일은 익숙해 보일 것이다.이 문법은 JS를 쓰는 것과 거의 같지만 약간의 문법 차이가 있다.Jests의 각 글로벌 함수는 함수 호출이 아닌 mixin으로 정의됩니다.우선 테스트 중인 항목 describe을 살펴보겠습니다.이것은 같은 사물을 테스트하는 여러 개의 테스트 용례를 한데 조합하는 데 도움이 된다.

@include describe('string-split()') {

}

다음에 우리는 테스트 용례 자체를 정의할 것이다.우리는 it, 즉 test 키워드를 사용하여 우리가 테스트하고자 하는 함수의 모든 입력을 지정합니다.

@include describe('string-split()') {
    @include it('should return input string split using delimiter ","') {

    }
}

이 테스트 용례를 포장하기 위해서, 우리는 출력 값이 우리가 기대하는 것인지, 통상적으로 우리의 출력을 단언하는 방법을 검사해야 한다.assert-equal($assert, $expected) 믹서는 string-split()의 출력을 검사하기에 매우 적합하다.첫 번째 파라미터는 측정된 함수의 출력이고, 두 번째 파라미터는 이 값의 예상 출력이다.그것에 대한 더 많은 정보를 읽을 수 있습니다. here.
만약 우리가 입력 문자열 apples,oranges,bananas과 구분자 ,으로 우리의 함수를 테스트하려고 한다면.그렇다면 우리의 생산량은 (‘apples’ ‘oranges’ ‘bananas’)일 것이다.테스트는 다음과 같이 작성할 수 있습니다.

@include describe('string-split()') {
    @include it('should return input string split using delimiter ","') {
        @include assert-equal(string-split('apples,bananas,oranges', ','), ('apples' 'oranges' 'bananas'));
    }
}

현재, 당신은 이미 첫 번째 테스트를 실행할 준비가 되어 있습니다.

실행 테스트

우리가 package.json 파일에 추가한 스크립트를 기억하십니까?이제 npm test을 실행하여 Jest를 실행할 수 있습니다.솔직히 jest을 입력하면 더 빠를 수 있다.

npm test

다음 출력과 유사한 첫 번째 테스트 결과를 보게 될 것입니다.

 PASS  tests/scss.spec.js
  Sass
    string-split()
      √ should return input string split using delimiter "," (1 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.058 s, estimated 6 s
Ran all test suites.

🎉 네가 해냈어.🎉

축하합니다!Sass에서 작성한 첫 번째 유닛 테스트에 박수를 보냅니다.
단원 테스트는 소프트웨어 개발에서 가장 사람을 끌어당기는 화제다.개발자들이 가장 두려워하는 부분이라고 할 수 있다. 왜냐하면 자신이 작성한 코드가 파괴되었다는 것을 발견했을 때, 이것은 중복되고 지루하며 실망스러웠기 때문이다.그러나 이것은 코드의 유지보수성과 현식성을 유지하는 가장 기본적인 메커니즘이다.가장자리 상황은 명확합니다. 명령을 실행하기만 하면 특정한 입력에 대한 시스템 행동에 대한 가설을 확인할 수 있습니다.
나는 이전에 Sass 단원 테스트가 영원히 하나의 일이 되지 않을 것이라고 생각했다. 왜 개발자가 이 일을 분명히 하려고 하는지.오늘날 나는 단원 테스트 없이 Cirrus이나 수백 가지 양식의 대형 프로젝트를 개발하는 것을 상상할 수 없다.
어쨌든 True의 멋진 문서를 보고 무엇을 할 수 있는지에 대한 더 많은 정보를 얻는 것을 잊지 마세요.이 시리즈의 다음 글에서 나는 어떻게 쉽게 믹서를 테스트할 수 있는지 소개할 것이다.

읽어주셔서 감사합니다!

💎 이 게시물을 보실 시간을 내주셔서 감사합니다.비슷한 내용을 더 알고 싶으면 제 실제 버전 blog을 방문하세요.Github으로 연락 주셔서 감사합니다.