Angular의 단위 테스트에 대해 이야기해 보겠습니다.

이 글에서는 Angular의 단위 테스트에 대해 설명하고, 예제를 통해 단위 테스트 도구(Karma + Jasmine)의 사용법을 소개합니다.

저는 수년간 Angular 프론트엔드 개발을 해왔지만, 프론트엔드에 대한 단위 테스트를 할 용기가 없었습니다. 첫 번째 이유는 프론트엔드가 사용자를 상대하기가 쉽지 않기 때문입니다. 두 번째 이유는 프로젝트의 시간 압박으로 인해 단위 테스트를 수행할 수 없다는 것입니다. 이는 또한 비즈니스가 변경된 후 프런트엔드 개발 중에 사람이 직접 테스트해야 하는 필요성으로 이어집니다. 시간이 많이 걸리고 기술적 내용이 없어 내 인생을 직접적으로 의심하게 만듭니다.

최근에 시간이 좀 있어서 간단하게 Angular의 유닛 테스트를 공부했어요. Angular에는 실제로 자체 단위 테스트 도구가 있습니다. Karma + Jasmine:

• Karma: Karma는 JavaScript 코드 테스트를 위한 자동화된 테스트 관리 도구로, 파일 변경 사항을 모니터링하고 자동으로 테스트를 실행할 수 있습니다.
• Jasmine: Javascript 테스트 작성을 위한 프레임워크입니다.

【관련 튜토리얼 추천: "angular tutorial"】

첫 번째 테스트 사례

Angular 애플리케이션을 생성한 후 Karma와 Jasmine의 종속성이 package.json 파일에 추가되었습니다.

"karma": "~1.7.1",  
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.0",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",

Those 백엔드 테스트를 수행한 사람은 아마도 다음 구성 요소 간의 작업 분할을 이미 알고 있을 것입니다.

• karma: Karma 핵심 구성 요소
• karma-chrome-launcher: Chrome 런처, 테스트는 Chrome에서 실행됩니다.
• karma-coverage- 이스탄불 -reporter: 적용 범위 보고서
• karma-jasmine: Jasmine 핵심 구성 요소
• karma-jasmine-html-reporter: Html 테스트 보고서

src 디렉터리에 표시되는 항목: karma.conf.js, test.ts 두 개의 파일 .

karma.conf.js: Karma의 구성 파일, 집중해야 할 구성은 다음과 같습니다.

• frameworks: 사용된 테스트 프레임워크, 여기서 Jasmine이 사용됩니다.

• port: 테스트에 사용되는 포트

• autoWatch : 테스트 코드의 변경 사항을 자동으로 모니터링하고 자동으로 테스트를 실행할지 여부

• plugins: 테스트에 사용된 플러그인, package.json 파일과 일치

• browsers: 테스트를 실행하는 데 사용되는 브라우저 테스트, 여기에서 Chrome을 사용하세요. 다른 브라우저를 사용해야 한다면 npm을 통해 브라우저 런처를 설치하고 플러그인과 여기에서 설정해야 합니다. 예를 들어 Safari를 사용하는 경우:

  npm install karma-safari-launcher --save-dev
  
  plugins: [
      require('karma-safari-launcher')
  ]
  browsers: ['Safari'],

test.ts: 테스트 항목 테스트 환경을 초기화하고 모든 테스트 파일을 지정하는 파일

앱 디렉토리에는 app.comComponent.spec.ts라는 파일도 있습니다. 내용은 다음과 같습니다.

import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
//测试入口，参数为测试名、方法
describe('AppComponent', () => {
  //每个测试用的Setup
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent  
      ],
    }).compileComponents();
  }));

  //测试用例
  it('should create the app', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));

  it(`should have as title 'test-demo'`, async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    //断言，期望值是否满足要求
    expect(app.title).toEqual('test-demo');
  }));

  it('should render title in a h1 tag', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    //通过querySelector获取页面元素
    expect(compiled.querySelector('h1').textContent).toContain('Welcome to test-demo!');
  }));

  //每个测试用例的TearDown
  afterEach(function() {
    //清除测试数据
  });
});

The 위의 코드는 Jasmine 구문을 사용합니다. Jasmine에 대한 자세한 소개는 JavaScript 단위 테스트 프레임워크: Jasmine 첫 살펴보기를 참조하세요. 여기서는 자세히 다루지 않겠습니다.

실행: ng test, 위 파일의 테스트 보고서가 표시됩니다.

또한 테스트 보고서에서 테스트를 클릭하여 별도로 실행할 수도 있습니다.

구멍 채우기

파이프, 서비스, 라우터 및 기타 구성 요소를 테스트하려면 Angular 문서를 참조하세요. 여기서는 테스트 중에 직면하는 다양한 함정에 중점을 둡니다.

공급자 없음 ***

테스트 중에 테스트 중인 구성 요소에 다른 타사 구성 요소, 서비스 또는 파이프가 필요하고 도입되지 않은 경우 공급자가 나타나지 않습니다. 오류, 해결 방법은 매우 간단합니다. beforeEach에서 가져오기 또는 공급자를 사용하여 도입하세요.

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        //这里声明
      ],
      imports: [
        //这里引入
      ],
      providers: [
        //这里引入
      ],
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
    })
      .compileComponents();
  }));

Request timeout

개발 중에 비동기 요청에 네트워크 문제로 인해 TimeOut 오류가 발생하는 경우가 많습니다. TimeOut 시간의 상한선을 설정하고 TimeOut 오류에 대해 인간화된 프롬프트를 제공합니다. TimeOut 오류는 테스트 중에도 발생합니다.

해결 방법은 테스트 사례에서 TimeOut 시간을 설정하는 것입니다:

it('#loadBalance for BCT should return real value', async () => {
  jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000000;
  ...
})

또는 BeforeEach에서 TimeOut 시간을 균일하게 설정:

describe("my async specs", function() {
    var originalTimeout;
    beforeEach(function() {
      originalTimeout = jasmine.DEFAULT_TIMEOUT_INTERVAL;
      jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000000;
    });

    ...

    afterEach(function() {
      jasmine.DEFAULT_TIMEOUT_INTERVAL = originalTimeout;
    });
  });

테스트 환경 정의

Angular는 개발용과 제품용으로 기본적으로 서로 다른 환경을 제공하며, 테스트용으로 환경을 설정할 수도 있습니다.

src/environment 아래에 Environment.test.ts를 생성하고angular.json 내용을 수정합니다:

"architect":{
    "test":{
        ...
        "configurations": {
            "test": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.test.ts"
                }
              ]
            }
          }
    }
}

package.json 파일을 수정합니다:

"scripts": {
  "test": "ng test --configuration=test",
}

다음 명령을 다음과 같이 실행합니다.

npm test
//或者
ng test --configuration=test

테스트를 실행할 때 환경은 test.ts 파일에 구성된 내용입니다.

테스트 데이터 롤백

做过Grails开发的伙计应该知道，单元测试、集成测试后，数据库中的测试数据会通过配置文件清除掉。在前端测试中，测试数据需要自行调用清除代码，对于使用LocalStorage、SessionStorage保持的数据亦是如此，方法很简单，在afterEach添加清除代码：

describe("my async specs", function() {
  
  afterEach(function() {
    //在这里清除测试数据
  });
});

与StoryBook的配合

先前我发布了一篇题为《StoryBook实战》的文章，StoryBook也是用来测试组件的，它与Karma+Jasmine有什么区别呢？

二者都能测试的：

• Pipe

• Servcie

• Component

StoryBook不能测、Karma + Jasmine可测试的：

• Router

• Component的界面元素属性、Input、Output

Karma + Jasmine不能做的，StoryBook能做的：

• Component交互测试

• 组件管理

• 编写组件文档

从上面可以看出，Storybook进行的是黑盒测试，Karma + Jasmine则注重白盒测试，二者侧重点不同，没有谁强谁弱之分，只有扬长避短，利用好各自的优点，方可让前端测试更完美，将前端bug扼杀在开发阶段。

一些前端测试感悟

虽然前端开发的工作比较繁琐，也是客户Challenge最多的地方，但是不代表前端只有页面，没有架构。以前之所以觉得Angular的单元测试难做，就是觉得都是页面的东西怎么测？其实，终其原因，还是没有架构，所有的代码都集中在Component中，为了赶进度，通过拷贝、粘贴，怎么快怎么来。结果，悲剧了，后期代码维护困难，一点改动就需要人肉测试。

费时不说，开发人员也没有成长。接触Angular前端测试后，我的脑海里又出现了“测试驱动开发”。一段好代码，前提是要易于测试，不管这段代码是用于前端还是后端。 前端开发人员不仅仅要关注页面的易用性、美观性，同样需要关注前端的架构，一个易于测试的架构才是最好的“武器”。

更多编程相关知识，请访问：编程入门！！

위 내용은 Angular의 단위 테스트에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!