Prueba y construcción de proyectos de Angular7

En este capítulo discutiremos los siguientes temas:

Para probar el proyecto Angular 7
Para construir el proyecto Angular 7

Prueba del proyecto Angular 7

Durante la configuración del proyecto, los paquetes necesarios para las pruebas ya están instalados. Hay un.spec.ts archivo creado para cada nuevo componente, servicio, directiva, etc. Vamos a utilizar jasmine para escribir nuestros casos de prueba.

Para cualquier cambio agregado a su componente, servicios, directivas o cualquier otro archivo creado, puede incluir sus casos de prueba en los archivos .spec.ts respectivos. Por lo tanto, la mayoría de las pruebas unitarias se pueden cubrir al principio.

Para ejecutar los casos de prueba, el comando utilizado es el siguiente:

ng test

A continuación se muestra el archivo app.component.spec.ts para 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';
}

Ahora ejecutemos el comando para ver los casos de prueba en ejecución.

El estado de los casos de prueba se muestra en la línea de comando como se muestra arriba y también se abrirá en el navegador como se muestra a continuación:

En caso de falla, mostrará los detalles de la siguiente manera:

Para hacer eso, cambiemos app.component.spec.ts de la siguiente manera:

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!');
   });
});

En el archivo anterior, los casos de prueba verifican el título, Angular 7. Pero en app.component.ts, tenemos el título,angular7-app como se muestra a continuación -

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

Aquí el caso de prueba fallará y a continuación se muestran los detalles en la línea de comandos y el navegador.

En línea de comando

La siguiente pantalla se muestra en la línea de comando:

En el navegador

La siguiente pantalla se muestra en el navegador:

Todos los casos de prueba fallidos para su proyecto se mostrarán como se muestra arriba en la línea de comandos y el navegador.

Del mismo modo, puede escribir casos de prueba para sus servicios, directivas y los nuevos componentes que se agregarán a su proyecto.

Proyecto de construcción de Angular 7

Una vez que haya terminado con el proyecto en Angular, debemos compilarlo para que pueda usarse en producción o declaración.

La configuración para la compilación, es decir, producción, preparación, desarrollo, pruebas debe definirse en su src/environments.

En la actualidad, tenemos los siguientes entornos definidos en src / environment:

Puede agregar archivos basados en su compilación a src / environment, es decir, environment.staging.ts, enviornment.testing.ts, etc.

En la actualidad, intentaremos construir para el entorno de producción. El archivoenvironment.ts contiene la configuración de entorno predeterminada y los detalles del archivo de la siguiente manera:

export const environment = {
   production: false
};

Para construir el archivo para producción, necesitamos hacer el production: true en el medio ambiente de la siguiente manera:

export const environment = {
   production: true
};

El archivo de entorno predeterminado debe importarse dentro de los componentes de la siguiente manera:

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';
}

El reemplazo del entorno de forma predeterminada a producción que estamos tratando de hacer se define dentro de angular.json fileReplacements sección de la siguiente manera:

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

Cuando se ejecuta el comando de compilación, el archivo se reemplaza por src/environments/environment.prod.ts. La configuración adicional como la puesta en escena o las pruebas se puede agregar aquí como se muestra en el siguiente ejemplo:

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

Entonces, el comando para ejecutar la compilación es el siguiente:

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

Ahora ejecutemos el comando de compilación para producción, el comando creará una carpeta dist dentro de nuestro proyecto que tendrá los archivos finales después de la compilación.

Los archivos finales se compilan dentro de la carpeta dist / que se puede alojar en el servidor de producción de su lado.

↰ Previous page