How to Export Power BI Data to Excel
Imagine walking into a meeting where critical decisions need to be made—fast. You need clear, flexible data that you can analyze on the spot. But what if your insights are locked inside...
Kapil Panchal - September 02, 2021
Listening is fun too.
Straighten your back and cherish with coffee - PLAY !
In this Angular blog, we will learn how to build a simple Angular app and then learn about the unit testing process step by step with examples.
Unit Testing is the practice of testing small lonely pieces of code to ensure it is bug-free. However, it is also called as Isolated testing. If our test code utilizes any external resource, like the database, network, etc., then it is not a unit test.
Unit tests are written using Jasmine (Jasmine is a behavior-driven development framework for testing JavaScript code.) and it is run to see if individual parts of an application are working accurately or not. Unit tests will either pass or fail as a result depending on if the code is working accurately or has any kind of bug in the tested part of an application. For the project's unit tests, angular use Karma as the test runner.
Ensures that all code meets quality standards prior to unit testing. This quality is uppermost. This ensures a reliable engineering environment. Unit testing helps with time saving, money saving, and better coding efficiency for developers.
When we create a new project with the Angular CLI (ng new appName), a default component and test file are added. A test script is always created along with any component module (service, component) we create using the Angular CLI.
This default test script, is always added. Let’s see the app.component.spec.ts file:
import { TestBed, async } from '@angular/core/testing'; import { AppComponent } from './app.component'; describe('AppComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ AppComponent ], }).compileComponents(); })); it(it is create the app', async(() => { const fixture = TestBed.createComponent(AppComponent); const app = fixture.debugElement.componentInstance; expect(app).toBeTruthy(); })); it(`should have as title of the app 'angular-unit-test'`, async(() => { const fixture = TestBed.createComponent(AppComponent); const app = fixture.debugElement.componentInstance; expect(app.title).toEqual('angular-unit-test'); })); it(it is render title in a h1 tag', async(() => { const fixture = TestBed.createComponent(AppComponent); fixture.detectChanges(); const compiled = fixture.debugElement.nativeElement; expect(compiled.querySelector('h1').textContent).toContain('Welcome to angular-unit-test!'); })); });
Nothing has changed yet Let’s run our first test :
ng test
The Angular testing package includes mainly two utilities which are called TestBed and async. TestBed is the main Angular utility package.
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(`title 'angular-unit-test'`, async(() => { const fixture = TestBed.createComponent(AppComponent); const app = fixture.debugElement.componentInstance; expect(app.title).toEqual('angular-unit-test'); }));
it('title is render in h1 tag', async(() => { const fixture = TestBed.createComponent(AppComponent); fixture.detectChanges(); const compiled = fixture.debugElement.nativeElement; expect(compiled.querySelector('h1').textContent).toContain('Welcome to angular-unit-test!'); }));
let’s test our Angular example application.
Ways to test the QuoteService class:
import { QuoteService } from "./Quote.service"; describe("QuoteService", () => { let service: QuoteService; beforeEach(() => { service = new QuoteService(); }); it("it is create a post in the array", () => { const qouteText = "This is message"; service.addNewQuote(qouteText); expect(service.quoteList.length).toBeGreaterThanOrEqual(1); }); it("it is delete created post from array", () => { service.addNewQuote("This is message"); service.removeQuote(0); expect(service.quoteList.length).toBeLessThan(1); }); });
In the first block, an instance of QuoteService is created.
it("it is generate post in array", () => { const qouteText = "This is message"; service.addNewQuote(qouteText); expect(service.quoteList.length).toBeGreaterThanOrEqual(1); });
it("it is delete generated post", () => { service.addNewQuote("This is message"); service.removeQuote(0); expect(service.quoteList.length).toBeLessThan(1); });
The second block creates a post in an array.
In our example of Angular unit testing, the service is injected into the QuoteComponent to access its properties, which will be needed by the view:
import { Component, OnInit } from '@angular/core'; import { QuoteService } from '../service/Quote.service'; import { QuoteModel } from '../model/QuoteModel'; @Component({ selector: 'app-Quotes', templateUrl: './Quotes.component.html', styleUrls: ['./Quotes.component.css']}) export class QuotesComponent implements OnInit { public quoteList: QuoteModel[]; public quoteText: String = null; constructor(private service: QuoteService) { } ngOnInit() { this.quoteList = this.service.getQuote(); } createNewQuote() { this.service.addNewQuote(this.quoteText); this.quoteText = null; } removeQuote(index) { this.service.removeQuote(index); } }
The first two blocks in the describe container run consecutively. In the first block, the form module is imported into the configuration test. This is used ngModel as a form-related directive.
Also, QuotesComponent is also declared in configTestMod in the same as components are declared in ngModule of the appModule file. The second block creates a QuoteComponent and its instance, which is used by the other blocks:
let component: QuotesComponent; let fixture: ComponentFixture; beforeEach(() => { TestBed.configureTestingModule({ imports: [FormsModule], declarations: [QuotesComponent] }); }); beforeEach(() => { fixture = TestBed.createComponent(QuotesComponent); component = fixture.debugElement.componentInstance; });
If the instance of the component is created then this block tests :
it("should create Quote component", () => { expect(component).toBeTruthy(); });
The manipulation of all operations are injected service handles. The quoteService variable holds the injected service (QuoteService). Here, the component is yet to be rendered until the detectChanges method is called:
it("quoteList of service", () => { const quoteService = fixture.debugElement.injector.get(QuoteService); fixture.detectChanges(); expect(quoteService.getQuote()).toEqual(component.quoteList); });
Now we test successfully create a post. The nativeElement object gives access to the HTML element.
it("it is generate post", () => { component.quoteText = "I love this test"; fixture.detectChanges(); const compiled = fixture.debugElement.nativeElement; expect(compiled.innerHTML).toContain("I love this test"); });
In addition to accessing HTML content, you can also access an element through its CSS property. The button is disabled when the QuoteTextModel is empty or empty:
it("textArea is empty then disable button", () => { fixture.detectChanges(); const button = fixture.debugElement.query(By.css("button")); expect(button.nativeElement.disabled).toBeTruthy(); }); it("textArea is not empty then enable button", () => { component.quoteText = "I love this test"; fixture.detectChanges(); const button = fixture.debugElement.query(By.css("button")); expect(button.nativeElement.disabled).toBeFalsy(); });
The way we access an element with its CSS properties, we can also access an element by its class name. The button clicks are fired by calling the triggerEventHandler . The click event type is specified. A quote displayed deleted from the quoteList when clicked on:
it("it is delete post", () => { component.quoteText = "This is a newly fresh post"; fixture.detectChanges(); fixture.debugElement .query(By.css(".row")) .query(By.css(".card")) .triggerEventHandler("click", null); const compiled = fixture.debugElement.nativeElement; expect(compiled.innerHTML).toContain("This is a newly fresh post"); });
Unit tests ensure that each angular component or angular service of our angular application works as expected. In this blog, we demonstrated how to write unit tests, how to perform a unit test in Angular, and how to test an Angular service as well as an Angular component.
Build Your Agile Team
Imagine walking into a meeting where critical decisions need to be made—fast. You need clear, flexible data that you can analyze on the spot. But what if your insights are locked inside...
Clear insights mean smarter decisions, and this is what data storytelling does. It helps you speak a language that you quickly understand. Like for example, you are a CTO dealing with...
You might ask “why migrate from AWS to Azure when it already offers so many options?” This question is valid, but there's a reason why businesses are moving to Azure. First, Azure's...