Jasmine: 순수 함수 및 기본 테스트에 대한 초보자 친화적인 가이드

순수 함수는 단위 테스트를 위한 완벽한 사례입니다. 주어진 입력에 대해 우리는 항상 동일한 출력을 기대합니다. 관련된 내부 상태는 없습니다. 몇 가지 예와 메서드가 예상대로 작동하는지 확인하는 몇 가지 간단한 테스트를 살펴보겠습니다.

여자 이름

Jasmine은 JavaScript용 단위 테스트 프레임워크입니다. Node.js 또는 브라우저 모두에서 테스트를 실행할 수 있습니다. 이는 Angular 프레임워크에서 사용되며 특히 Angular 기반 프로젝트에서 널리 사용됩니다. Vanilla JS 프로젝트나 다른 프레임워크 기반 프로젝트에도 확실한 선택입니다.

행복한 경로 테스트

행복한 경로 테스트는 정상적으로 작동할 것으로 예상되는 입력을 사용하여 메서드를 테스트하는 것입니다. 인수가 유효하고 합리적인 범위 내에 있습니다. 이러한 테스트는 메서드가 제대로 작동하는지 확인합니다. 테스트 사례는 문서에서 메서드가 어떻게 설명되는지에 대한 간단한 예여야 합니다.

유사 코드 예:

• expect(add(2, 2)).toBe(4) ,

• expect(concatenate(“Lorem”, “Ipsum”)).toBe(“LoremIpsum”)

이러한 테스트는 메서드 키 동작이 중단될 때마다 자동으로 이를 포착하도록 되어 있습니다.

행동 양식

몇 가지 간단한 방법, 즉 일부 실제 응용 프로그램에 필요할 수 있는 간단한 작업을 살펴보겠습니다.

모든 구현은 크게 단순화되었습니다. 예상과 약간 다른 매개변수만 제공하면 모든 메소드가 보기 흉한 방식으로 중단됩니다. 코드는 강력하지 않습니다.

환영하다

이름과 성을 사용하여 사용자에게 인사하는 방법:

 export function greet(name, surname) { return `Hello ${name} ${surname}!`; }

짧은 날짜

shortDate 는 날짜 객체를 가져와 짧은 문자열 형식으로 반환하는 형식 지정 방법입니다. 코드:

 export function shortDate(date) { return date.toISOString().substring(0, 10); }

생략

ellipsis 긴 텍스트 문자열과 선택적 길이 매개변수를 사용하여 제한 내에 맞게 문자열을 자릅니다.

 export function ellipsis(text, length = 50) { if (text.length > length) { return text.substring(0, length) + "…"; } return text; }

번역하다

key 와 lang 쌍에 대해 번역된 문자열 값을 제공하는 메서드입니다. 이는 고급 번역 라이브러리로 대체할 수 있는 단순화된 구현입니다.

 export function translate(key, lang = "en") { switch (lang) { case "en": switch (key) { case "hello": return "Hello!"; } case "pl": switch (key) { case "hello": return "Cześć!"; } } }

할인 적용

가격에 백분율 할인을 적용하는 방법입니다. 이 순진한 구현은 과잉처럼 느껴질 수 있지만 나중에 극단적인 사례를 조사하기 시작하면 훨씬 더 흥미로워질 것입니다.

 export function applyDiscount(price, discountPercentage) { return price - (price * discountPercentage) / 100; }

계산가격

이것은 주어진 가격으로 여러 단위를 구입할 때 총 가격을 계산합니다. 또한 흥미로운 엣지 케이스를 추가하면 더욱 복잡해집니다.

 export function calculatePrice(unitPrice, quantity) { return unitPrice * quantity; }

JS 코드 완성

전체 JS 코드, src/main.js :

 export function greet(name, surname) { return `Hello ${name} ${surname}!`; } export function shortDate(date) { return date.toISOString().substring(0, 10); } export function ellipsis(text, length = 50) { if (text.length > length) { return text.substring(0, length) + "…"; } return text; } export function translate(key, lang = "en") { switch (lang) { case "en": switch (key) { case "hello": return "Hello!"; } case "pl": switch (key) { case "hello": return "Cześć!"; } } } export function applyDiscount(price, discountPercentage) { return price - (price * discountPercentage) / 100; } export function calculatePrice(unitPrice, quantity) { return unitPrice * quantity; }

Jasmine 테스트 추가

Jasmine을 추가하려면 먼저 폴더를 npm 패키지로 변환해 보겠습니다.

 $ npm init -y Wrote to …/package.json: …

그런 다음 Jasmine 패키지를 설치할 수 있습니다.

 $ npm install --save-dev jasmine added 42 packages, and audited 43 packages in 2s 13 packages are looking for funding run `npm fund` for details found 0 vulnerabilities

그런 다음 Jasmine에서 사용하는 폴더와 파일을 생성할 수 있습니다.

 $ npx jasmine init (no output)

이 명령은 다음을 생성합니다.

• spec/ - 테스트와 함께 *.spec.js 파일을 넣을 수 있는 폴더

• spec/support/jasmine.json —Jasmine 구성이 포함된 파일입니다.

단위 테스트

다음 단위 테스트에서는 Happy Path에만 초점을 맞췄습니다. 결과가 합리적인 입력에 대해 예상한 대로인지 확인합니다. 테스트는 설명이 필요하므로 살펴보겠습니다.

 import { greet, shortDate, ellipsis, translate, applyDiscount, calculatePrice, } from "../src/main.js"; describe("main", () => { describe("greet", () => { it("should greet by name and surname", () => { expect(greet("Lorem", "Ipsum")).toEqual("Hello Lorem Ipsum!"); }); }); describe("shortDate", () => { it("should format correclty date", () => { const date = new Date("2023-11-02"); expect(shortDate(date)).toEqual("2023-11-02"); }); }); describe("shortDate", () => { it("should shorten long text at 50 chars", () => { expect( ellipsis( "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a faucibus massa." ) ).toEqual("Lorem ipsum dolor sit amet, consectetur adipiscing…"); }); it("should leave short text unchanged", () => { expect(ellipsis("Lorem ipsum sin dolor")).toEqual( "Lorem ipsum sin dolor" ); }); it("should shorten to custom length", () => { expect(ellipsis("Lorem ipsum sin dolor", 10)).toEqual("Lorem ipsu…"); }); }); describe("translate", () => { it("should translate to supported langauges", () => { expect(translate("hello", "en")).toEqual("Hello!"); expect(translate("hello", "pl")).toEqual("Cześć!"); }); }); describe("applyDiscount", () => { it("should lower the price accordingly", () => { expect(applyDiscount(120, 25)).toEqual(90); expect(applyDiscount(8, 50)).toEqual(4); }); }); describe("calculatePrice", () => { it("should find a price of many products", () => { expect(calculatePrice(4, 3)).toEqual(12); expect(calculatePrice(9, 0.5)).toEqual(4.5); }); }); });

(파일 spec/main.spec.js )

테스트 실행

테스트를 실행하려면 package.json 에 다음 스크립트를 추가하면 됩니다.

 .. "scripts": { "test": "jasmine" }, …

이를 통해 npm run test 테스트를 실행합니다.

 $ npm run test > [email protected] test > jasmine Randomized with seed 76873 Started ........ 8 specs, 0 failures Finished in 0.004 seconds Randomized with seed 76873 (jasmine --random=true --seed=76873)

요약

이번 포스팅에서는 JS 코드의 간단한 예와 이를 단위 테스트로 어떻게 다룰 수 있는지 살펴보았습니다. GitHub에서 전체 코드 예제를 찾을 수 있습니다.

여기에도 게시됨