Testing and Building Angular7 Projects

Testing and Building Angular7 Projects

In this chapter , the following topics will be discussed-

• To test Angular 7 Project
• To build Angular 7 Project

Testing Angular 7 Project

The packages needed for testing are already installed during project setup. For every new component, service, directive, etc., there is a.spec.ts file generated. We will be using jasmine to write down our test cases.

You can include your test cases in the respective .spec.ts files for any changes added to your component, services, directives or any other created files. So, at the beginning, most unit testing can be covered by itself.

ng test

The app.component.spec.ts file below is for 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';
}

Should any failure occur, it will show the details as follows −

Let us change the app.component.spec.ts to do that as follows –

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

The test cases in the file above check for the title, Angular 7. But we also have the title in app.component.ts, angular7-app as shown below –

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

Building Angular 7 Project

Once you're done in Angular with the project, we need to build it so that it can be used in production or declaration.

The build configuration needs to be defined in your src / environments , i.e. production, staging, development, testing.

You can add files to src / environment based on your build, i.e .. environment.staging.ts, enviornment.testing.ts, etc.

At present, we're going to try to create the environment for growth. The.ts file environment contains default setting and the file details as follows –

export const environment = {
   production: false
};

To construct the production file, we must make the production: true in environment.ts as follows –

export const environment = {
   production: true
};

The default environment file must be imported as follows inside components –

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

The environment we are trying to replace from default to production is defined as follows in the section angular.json fileReplacements-

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

Once the create command runs, the file is replaced for src / environments / environment.prod.ts. The further configuration such as staging or testing can be added here as shown in the example below-

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

So the command to run the build is as follows −

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