Jasmine을 사용하여 Angular에서 테스팅으로 헤드 스타트

몇 달 동안 Jest와 Vue로 작업했지만 요즘에는 Angular로 작업하고 있으며 테스트는 제 학습 과정의 일부입니다.

Jasmine에 대해 조금 설명하고 TypeScript 클래스에 대한 테스트를 작성하는 방법에 대해 설명하겠습니다. 잘못된 점을 발견하면 트위터로 알려주세요.

Angular에서 테스트

Angular는 테스트할 수 있도록 빌드되었으며 Protractor, Jasmine 및 Karma와 함께 제공되어 단위 및 E2E 테스트를 빌드하는 데 도움이 됩니다.

Angular-cli는 이러한 테스트를 빌드하고 실행하기 위한 스캐폴딩을 제공하며 개발 또는 빌드 프로세스 중에 테스트를 실행하도록 이러한 도구를 구성할 수도 있습니다.

단위 테스트

단위 테스트는 코드의 기본 부분 또는 단위를 확인하는 것입니다. 즉, 테스트는 코드의 한 가지 책임만 테스트합니다.

단위 테스트는 기능, 개체 등을 테스트하는 데 사용됩니다.

Jasmine 프레임워크는 이러한 테스트를 작성하기 위해 Angular가 제공하는 프레임워크입니다.

재스민 기능

Jasmine 프레임워크에는 여러 기능이 포함되어 있으므로 모든 기능을 외울 필요는 없지만 기본 기능을 사용하면 describe, it 및 expect를 시작할 수 있습니다.

문자열과 콜백과 같은 2개의 매개변수를 사용하는 일련의 테스트를 그룹화하는 도움말을 설명합니다.

describe("my group of invoice tests", () => {} );

it 함수는 특정 테스트를 만드는 데 도움이 되며, 설명과 유사하지만 테스트를 작성하는 데 사용됩니다.

it("the number should be positive", () => {});

테스트가 예상대로 작동하는지 확인하는 테스트로 기능 플레이를 기대하고 코드를 확인합니다. expect 함수는 내가 값을 전달하는 곳이고 matcher 함수는 예상 값을 전달하는 곳입니다.

일반적인 매처 함수 중 일부는 toBe(), toBeTrurty() 또는 toEqual()입니다.

expect(true).toBeThruthy();

단위 테스트 파일 규칙은 기본적으로 filetotest.spec.ts이며 angular-cli는 app.spect.ts를 생성하고 ng test 명령으로 테스트를 실행합니다.

Jasmine으로 기본 단위 테스트 작성

Gif 수업을 위해 설명을 사용하여 작은 테스트 작성을 방금 배운 내용을 테스트하고 연습할 시간입니다.

export class Gif {
  private _url: string;
  urlValidator = new RegExp(/^(ftp|http|https):\/\/[^ "]+$/);
  public get url(): string {
    return this._url;
  }
  public set url(v: string) {
    this._url = v;
  }
  public get isvalid(): boolean {
    return this.urlValidator.test(this.url);
  }
}

무엇을 테스트할 수 있습니까?

공용 속성 url 및 isValid에 예상 값이 있는 경우.

유효하지 않은 URL과 gif가 유효하지 않은 경우와 같은 동작입니다.

인스턴스를 만들 수 있는 경우.

URL이 할당될 수 있는 경우.

갑시다!

1- Gif 클래스를 가져오고 설명하여 테스트 그룹을 정의합니다.

import { Gif } from './gif';
describe('Gif Class tests', () => {

}

2- 함수를 사용하여 유효한 클래스 생성자에 대한 테스트를 정의하고 유효성 검사를 기대하면 null이 아닙니다.

import { Gif } from './gif';
describe('The Gif', () => {
  it('should to have a valid constructor', () => {
    const gif = new Gif();
    expect(gif).not.toBeNull();
  });
}

CLI에서 ng test로 테스트를 실행합니다.

Chrome 85.0.4183.121 (Windows 10): Executed 1 of 1 SUCCESS (0.035 secs / 0.01 secs)
TOTAL: 1 SUCCESS

공용 속성에 대한 나머지 테스트를 추가합니다.

import { Gif } from './gif';
describe('The Gif', () => {
  it('should to have a valid constructor', () => {
    const gif = new Gif();
    expect(gif).not.toBeNull();
  });

  it('should set the url', () => {
    const gif = new Gif();
    gif.url = 'http://google.com';
    expect(gif.url).not.toBeNull();
  });

  it('should be invalid gif for wrong url', () => {
    const gif = new Gif();
    gif.url = 'ht';
    expect(gif.isvalid).toBe(false);
  });

  it('should be valid gif for valid url', () => {
    const gif = new Gif();
    gif.url = 'http://www.google.com';
    expect(gif.isvalid).toBe(true);
  });

  it('should asign the url string', () => {
    const gif = new Gif();
    const expectedUrl = 'http://www.google.com';
    gif.url = expectedUrl;
    expect(gif.url).toEqual(expectedUrl);
  });
});

그런 다음 ng 테스트 명령을 실행하여 결과를 얻습니다.

beforeEach 및 afterEach로 테스트 리팩터링

코드를 읽으면 각 테스트에 대해 gif 인스턴스가 생성되지만 이것이 최선의 방법은 아닙니다. Jasmine은 beforeEach() 및 afterEach() 함수를 사용하여 테스트 설정을 위한 솔루션을 제공합니다.

beforeEach 함수는 각 테스트 전에 코드를 실행하는 데 도움이 됩니다. 이 경우 변수를 gif 유형으로 선언하고 테스트마다 초기화합니다.

describe('The Gif', () => {
  let gif: Gif = null;
  beforeEach(() => {
    gif = new Gif();
  });
    ... 

afterEach도 마찬가지이며 gif 인스턴스를 null에 할당합니다.

afterEach(() => {
    gif = null;
  });

최종 코드는 다음과 같습니다.

import { Gif } from './gif';
describe('The Gif', () => {
  let gif: Gif = null;
  beforeEach(() => {
    gif = new Gif();
  });
  it('should to have a valid constructor', () => {
    expect(gif).not.toBeNull();
  });

  it('should set the url', () => {
    gif.url = 'http://google.com';
    expect(gif.url).not.toBeNull();
  });

  it('should be invalid for wrong url', () => {
    gif.url = 'ht';
    expect(gif.isvalid).toBe(false);
  });

  it('should be valid for valid url', () => {
    gif.url = 'http://www.google.com';
    expect(gif.isvalid).toBe(true);
  });

  it('should asign the url string', () => {
    const expectedUrl = 'http://www.google.com';
    gif.url = expectedUrl;
    expect(gif.url).toEqual(expectedUrl);
  });
  afterEach(() => {
    gif = null;
  });
});

터미널에서 ng test 명령으로 새 테스트를 실행합니다.

ng test

완료!

Angular 앱용 Jasmine을 사용하여 첫 번째 테스트를 작성하는 데 자신감을 가져야 합니다.