スキップしてメイン コンテンツに移動

[Angular]Test with Azure DevOps

Intro

I tried to manage my ASP.NET Core & Angular projects with Azure Repos.
And I wrote some tests of HttpClient for Angular.
I added pipelines to execute on pulling request.

Prepare

I created new projects.
Because I had wanted to the simple projects, so I used empty template for creating ASP.NET Core project.
dotnet new empty -n AspNetCoreAngularSample
And I added an Angular project.
cd AspNetCoreAngularSample
ng new client-apps
I changed csproj, Startup.cs, angular.json and etc. for using JavaScript service as same as last time.

Create Azure DevOps project

I added project to Azure DevOps as same name.
When I had opened Repos, because there had been no projects, so I only could links for cloning or pushing the project.

I added remote repository to the ASP.NET Core & Angular projects.
git remote add origin https://example@dev.azure.com/example/AspNetCoreAngularSample/_git/AspNetCoreAngularSample
git push -u origin --all


After all, I added a local branch and checked out.
git checkout -b dev/first-page origin/master
git push origin dev/first-page

Add Angular test

First, I added test codes for Angular HttpClient.

first-page.service.ts


import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import {catchError, map} from 'rxjs/operators';
import { Product } from '../products/product';

@Injectable({
  providedIn: 'root'
})
export class FirstPageService {
  constructor(private httpClient: HttpClient) { }
  public getProducts(): Observable<Array<Product>> {
    return this.httpClient.get<Array<Product>>(
      `http://localhost:5000/products`)
    .pipe(
      catchError(FirstPageService.handleError)
    )
  }
  private static handleError(error: HttpErrorResponse) {
    console.error(error);
    // Do something
    return throwError(error.message);
  }
}

first-page.service.spec.ts


import { TestBed } from '@angular/core/testing';
import { FirstPageService } from './first-page.service';
import { HttpClient } from '@angular/common/http';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';

describe('FirstPageService', () => {
  let httpClient: HttpClient;
  let testingController: HttpTestingController;
  let service: FirstPageService;
  // prepared for the test
  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule]
    });
    // got instances with TestBed
    // It also resolved dependencies
    httpClient = TestBed.get(HttpClient);
    testingController = TestBed.get(HttpTestingController);
    service = TestBed.get(FirstPageService);
  });
  // test spec
  it('should get products', () => {
    service.getProducts()
    .subscribe(products => {
      expect(products[0]).toEqual({ id: 1, name: 'Hello'});
    });
    // When the test target had accessed http://localhost:5000/products,
    // HttpTestingController could return mock data.
    const request = testingController.expectOne('http://localhost:5000/products');
    expect(request.request.method).toBe('GET');
    request.flush([{ id: 1, name: 'Hello'}]);
  });
  // check the result
  afterEach(() => {
    testingController.verify();
  })
});
This time, I had written very simple test.
Next time, I would write more.

Try test on the local PC

ng test

Good :)

Resources

Angular - Testing
Angular - HttpClient
ng-book

Try test with Azure Pipelines (Failed)

I had pushed the test to remote repository and added pipeline to run test on the project was built.
I had thought the situation had been same as local.
So I added the yaml file like below.

azure-pipelines.yml


trigger:
- master

pool:
  vmImage: 'ubuntu-latest'

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '10.x'
  displayName: 'Install Node.js'

- script: |
    npm install
    npm run test
  workingDirectory: client-apps
  displayName: 'npm install and test'
YAML schema - Azure Pipelines | Microsoft Docs

Result

The test was failed.
I got two problems.

1. The error was occurred by Karma
2. The test couldn't be finished

1. The error was occurred by Karma

Because by default, Karma(Test runner) would connect the Chrome to display the test result.
But when the test had executed by Azure pipeline, it couldn't do that.
So I had to change the Karma settings to use the ChromeHeadless instead of the Chrome.

I could edit the karma.config.js.

karma.config.js


module.exports = function (config) {
  config.set({
...
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['ChromeHeadless'],
    singleRun: false,
    restartOnFileChange: true
  });
};
I also could add the option to the test command.
ng test --browsers=ChromeHeadless

2. The test couldn't be finished

By default, the Karma kept watching until it would be terminated.
So when I had run test, I had to make it stopped.

karma.config.js


module.exports = function (config) {
  config.set({
...
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['ChromeHeadless'],
    singleRun: true,
    restartOnFileChange: true
  });
};
I also could add the option to the test command.
ng test --watch=false
Because I wanted to test with default settings on local environment, I added the test command with the options in package.json.

package.json


{
  "name": "client-apps",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "citest": "ng test --code-coverage --watch=false --browsers=ChromeHeadless --reporters=progress",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
...

azure-pipelines.yml


trigger:
- master

pool:
  vmImage: 'ubuntu-latest'

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '10.x'
  displayName: 'Install Node.js'

- script: |
    npm install
    npm run citest
  workingDirectory: client-apps
  displayName: 'npm install and test'
Angular unit testing in Azure DevOps + SonarQube - Lucas Moura Veloso - Medium

Finally, I succeeded running test.
ラベル:

コメント

コメントを投稿

このブログの人気の投稿

[Nest.js] Show static files

Intro I wanted to use Nest.js and WebRTC(node-webrtc). NestJS - A progressive Node.js framework Documentation | NestJS - A progressive Node.js framework And because I wanted to try with simple page(not use JavaScript frameworks), I added static HTML, CSS, JavaScript into a Nest.js project. Prepare Install First, I installed @nestjs/cli. First steps | NestJS - A progressive Node.js framework As same as last time , I couldn't do global install because I had used Volta. But I could installed by volta. volta install @nestjs/cli Create project nest new nest-web-rtc-sample volta pin node@12 Run npm start After doing "npm start", I could getting "Hello World!" from http://localhost:3000. Add static files I could add static files by two ways. @nestjs/serve-static First one of them was using "serve-static". Serve Static | NestJS - A progressive Node.js framework npm install --save @nestjs/serve-static And I needed adding a module into app.modu...
コメントを投稿
続きを読む

[Angular][ASP.NET Core] Upload chunked files

Intro I wanted to send files to Web application (made by ASP.NET Core). If the file size had been small, I didn't need do any special things. But when I tried to send a large file, the error was occurred by ASP.NET Core's limitation. Though I could change the settings, but I didn't want to do that, because I hadn't known the file sizes what would been actually using. So I splitted the data into chunks first, and sent them. After receiving all chunks, I merged them into one file. There might be some libraries or APIs (ex. Stream API) what did them automatically, but I couldn't find them. What I did [ASP.NET Core] Make CORS enabled [Angular] Split a large file into chunks [Angular][ASP.NET Core] Send and receive data as form data [ASP.NET Core] Merge chunks into one file [ASP.NET Core] Make CORS enabled Because the client side application(Angular) and the server side application(ASP.NET Core) had been separated, I had to make CORS(Cross-Origin Requests) ...
コメントを投稿
続きを読む

[TypeScript] About tsconfig 1

Intro On the section 2 of " Effective TypeScript " had been written about setting "noImplicitAny", "strictNullChecks" and etc. And I wanted to know more about the tsconfig.json. What could I do through the settings of it? This time, I wrote about "allowJs", "checkJs", "incremental", and "tsBuildInfoFile". Environment TypeScript: ver. 3.8.2 tsc: ver.1.20150623.0 Resources Compiler Options - TypeScript TypeScript: TSConfig Reference - Docs on every TSConfig option Effective TypeScript Default tsconfig.json When I executed "tsc --init", I could get the default tsconfig.json. tsconfig.json { "compilerOptions": { /* Basic Options */ // "incremental": true, /* Enable incremental compilation */ "target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', ...
コメントを投稿
続きを読む