Ionic 4 is the next version of the Ionic framework, currently is in beta, but it works well, one of the major differences between this release and the previous is the dependency with Angular.
In Ionic 4 Angular is provided as an option (currently with Vue) and when you use the Ionic cli, all the commands use ‘angular-cli’ in the backgrounds and make little modifications to the code they generate.
In this post I will show you how to make a simple test that mocks the user interaction with a form and how to setup and execute all tests.
First, we start creating a simple new project
When the cli ask if we want to use Ionic 4 press ‘y’.
This project already has some test, but they are very basic, if we want to try our pages with Ionic components, we need some modifications first.
First, run the test
To run the unit test, we simple run:
And a chrome window will apear and it will run all tests, you will se something like this in your console:
Everything works fine out of the box.
Second, add some ionic components
In the component
tab1.page.ts we will add an input text and a button, when we press the button, a
Alert will show saying
This is a very simple component, we insert some text, and press the button and an alert apear.
Third, the test
If we run our test, we will see that there is one failing, the test of the
tab1.page.ts, this is because we don’t provide a
AlertController provider, and angular can’t perform the dependency injection in our component.
We can fix this in our
TestBed configuration, simple add:
If we check our test output, it will say now that all test are passing, now we can make real tests.
Let’s make a simple test that ensure that every change to our input is reflected on our component.
We will use a little helper from the angular test suite called fakeAsync, this helper should wrap the entire test, and it provides a simple function
tick() to simulate time.
This is a simple test, first we search for the
ion-input, we update the value, and then check if the component has the same value, it’s simple enough, too bad it doesn’t work.
To be able to test Ionic components, we need to add the IonicModule and another dependencies, we change the test to be like this:
In the first
beforeEach we add some modules that are used in our code to make the
[(ngModel)] works, we add the
IonicModule, and, because in some part the
navController is injected in that module, we need to provide a value for that controller.
In the second
beforeEach we change the code to wait for ionic to load all the components, and only proceed when everything is stable.
If we check now our test console, everything should be fine.
Now it’s time to test the alert, to do this I will provide you with a simple
MockAlertController class that will help us in our testing process, you can get it here ionicMocks, with this, we can simply add to our test:
This works great! Let me know if you have an issue!.