Test e costruzione di progetti Angular7

In questo capitolo verranno discussi i seguenti argomenti:

• Per testare Angular 7 Project
• Per costruire Angular 7 Project

Testing Angular 7 Project

Durante la configurazione del progetto, i pacchetti richiesti per il test sono già installati. C'è un.spec.ts file creato per ogni nuovo componente, servizio, direttiva, ecc. Useremo jasmine per scrivere i nostri casi di test.

Per qualsiasi modifica aggiunta al componente, ai servizi, alle direttive o a qualsiasi altro file creato, è possibile includere i casi di test nei rispettivi file .spec.ts. Quindi la maggior parte dei test unitari può essere coperta all'inizio stesso.

Per eseguire i casi di test, il comando utilizzato è il seguente -

ng test

Di seguito è riportato il file app.component.spec.ts per app.component.ts -

import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
   beforeEach(async(() => {
      TestBed.configureTestingModule({
         imports: [
            RouterTestingModule
         ],
         declarations: [
            AppComponent
         ],
      }).compileComponents();
   }));
   it('should create the app', () => {
      const fixture = TestBed.createComponent(AppComponent);
      const app = fixture.debugElement.componentInstance;
      expect(app).toBeTruthy();
   });
   it(`should have as title 'angular7-app'`, () => {
      const fixture = TestBed.createComponent(AppComponent);
      const app = fixture.debugElement.componentInstance;
      expect(app.title).toEqual('angular7-app');
   });
   it('should render title in a h1 tag', () => {
      const fixture = TestBed.createComponent(AppComponent);
      fixture.detectChanges();
      const compiled = fixture.debugElement.nativeElement;
      expect(compiled.querySelector('h1').textContent).toContain(
         'Welcome to angular7-app!');
   })
});

app.component.ts

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'angular7-app';
}

Ora eseguiamo il comando per vedere i casi di test in esecuzione.

Lo stato dei casi di test viene mostrato nella riga di comando come mostrato sopra e si aprirà anche nel browser come mostrato di seguito -

In caso di guasto, mostrerà i dettagli come segue:

Per farlo, cambiamo app.component.spec.ts come segue:

import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
   beforeEach(async(() => {
      TestBed.configureTestingModule({
         imports: [
            RouterTestingModule
         ],
         declarations: [
            AppComponent
         ],
      }).compileComponents();
   }));
   it('should create the app', () => {
      const fixture = TestBed.createComponent(AppComponent);
      const app = fixture.debugElement.componentInstance;
      expect(app).toBeTruthy();
   });
   it(`should have as title 'angular7-app'`, () => {
      const fixture = TestBed.createComponent(AppComponent);
      const app = fixture.debugElement.componentInstance;
      expect(app.title).toEqual('Angular 7'); // change the 
      title from angular7-app to Angular 7
   });
   it('should render title in a h1 tag', () => {
      const fixture = TestBed.createComponent(AppComponent);
      fixture.detectChanges();
      const compiled = fixture.debugElement.nativeElement;
      expect(compiled.querySelector('h1').textContent).toContain(
         'Welcome to angular7-app!');
   });
});

Nel file sopra, i casi di test controllano il titolo, Angular 7. Ma in app.component.ts, abbiamo il titolo,angular7-app come mostrato di seguito -

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'angular7-app';
}

Qui il test case fallirà e di seguito sono riportati i dettagli mostrati nella riga di comando e nel browser.

Nella riga di comando

La seguente schermata viene visualizzata nella riga di comando -

Nel browser

La seguente schermata viene visualizzata nel browser:

Tutti i casi di test falliti per il tuo progetto verranno visualizzati come mostrato sopra nella riga di comando e nel browser.

Allo stesso modo, puoi scrivere casi di test per i tuoi servizi, direttive e nuovi componenti che verranno aggiunti al tuo progetto.

Building Angular 7 Project

Una volta che hai finito con il progetto in Angular, dobbiamo costruirlo in modo che possa essere utilizzato in produzione o dichiarando.

La configurazione per build, ovvero produzione, staging, sviluppo, test deve essere definita nel tuo file src/environments.

Al momento, abbiamo i seguenti ambienti definiti in src / environment:

Puoi aggiungere file basati sulla tua build a src / environment, cioè environment.staging.ts, enviornment.testing.ts, ecc.

Al momento, proveremo a creare un ambiente di produzione. Il fileenvironment.ts contiene le impostazioni di ambiente predefinite e i dettagli del file come segue:

export const environment = {
   production: false
};

Per creare il file per la produzione, dobbiamo creare il file production: true in environment.ts come segue -

export const environment = {
   production: true
};

Il file dell'ambiente predefinito deve essere importato all'interno dei componenti come segue:

app.component.ts

import { Component } from '@angular/core';
import { environment } from './../environments/environment';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'angular7-app';
}

La sostituzione dell'ambiente dal default alla produzione che stiamo cercando di fare è definita all'interno di angular.json fileReplacements sezione come segue -

"production": {
   "fileReplacements": [
      {
         "replace": "src/environments/environment.ts",
         "with": "src/environments/environment.prod.ts"
      }
   ],
}

Quando viene eseguito il comando per la compilazione, il file viene sostituito in src/environments/environment.prod.ts. La configurazione aggiuntiva come lo staging o il test può essere aggiunta qui come mostrato nell'esempio seguente:

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

Quindi il comando per eseguire la build è il seguente:

ng build --configuration = production // for production environmnet
ng build --configuration = staging // for stating enviroment

Ora eseguiamo il comando build per la produzione, il comando creerà una cartella dist all'interno del nostro progetto che avrà i file finali dopo la build.

I file finali vengono creati all'interno della cartella dist / che può essere ospitata sul server di produzione alla fine.