Video Transcript

NOTE: This video was originally filmed using Ionic 3, so the folder structure looks a little different, but the same concepts still apply

So far we have talked through some testing concepts. We have even talked a little bit about Jasmine, Karma and Protractor so we have a bit of a background as to what a unit test is supposed to do and what it should look like. These are going to get a little some complicated as we progress, our tests are going to look a little bit more complex than what I am about to show you.

0:22 What I do want to show you is just a really simple unit test in an Ionic application. What we are going to do is create a really simple provider to do something and we are going to write a test first before we start writing that functionality. The functionality we build here isn't going to be relevant to the app in general. The application we do build is just going to be for an example.

NOTE: This video is using an application that has testing set up already, you will not be able to follow along just by doing what I am describing here.

0:45 Let's create a provider - we are going to create a provider that is going to store some items for us. It is just going to have an array and we should be able to push an item into that array. We will just call this provider MyItems. I will generate that provider on the command line.

ionic g provider MyItems

1:04 We have the provider generated over in the src/providers/my-items/my-items.ts file now so let's open that up now to see what that looks like. We have our default provider template here and what we are going to do now is create a test for that. I am just going to clean this file up a little bit because we are not going to be using a bunch of this stuff. We are not going to be using HTTP and we are not going to be using any mapping of observables so I am just going to get rid of this code and we will start with a really simple blank provider here.

src/providers/my-items/my-items.ts

import { Injectable } from '@angular/core'

@Injectable()
import class MyItemsProvider {

	constructor() {
		console.log('Hello MyItemsProvider Provider');
	}

}

1:33 We have talked about Test Driven Development and writing tests before we write code. If we want to do that here before we start writing the functionality that we want to build - which is creating something that can store items - we are going to create a test file for that, we are going to run the test to make sure it fails first and then we will implement the code.

1:56 To create a test file for the provider all we have to do is create a new file. We are going to call this one my-items.spec.ts. By giving it the extension of .spec.ts this test will be run when we are running our npm test command. In order to be able to test this provider, we are going to have to import it, we have to import the thing we are trying to test.