When doing testing during the development process, there are three main types of test that we need to ensure.

  • Unit Tests – Write small test cases to test small pieces of code without external dependencies.
  • Integration Tests – After Unit Tests done to each individual module, this type of test is to test the integration of multiple modules.
  • UI Tests / End-To-End (E2E) Tests – A special Integration Test that allows you to test the User Interface of your app through a browser and in this way it can also cover the backend.

Check Google’s recommendations to E2E tests.

Unit Testing Frameworks

Nowadays, Jasmine 2 and Mocha are probably the most popular frameworks for Javascript unit test. If you are using Mocha, Chai and Sinon are usually being used at the same time.

Check this post for more info – Jasmine vs. Mocha, Chai, and Sinon.

In IonicBoilerplate, it uses Mocha, Chai, and Sinon as the base testing framework. On top of that, Karma is used to help test AngularJS.

E2E Testing Frameworks

When doing E2E testing, Selenium is definitely the most popular one to use. However, when doing test for AngularJS, Protractor is the best choice.

Reference: Protractor vs. Selenium: Which is Easier?

Test Files Arrangement

In IonicBoilerplate, the app modules are arranged based on functionality. So that, the test files are separated into each individual modules. In the tests folder of project root, there are only the config files.

The code structure is like this:

│ 
├── tests
│   ├── karma.conf.js
│   └── protractor.conf.js
├── www
│   ├── ...
│   ├── js
│   │   ├── account
│   │   │   ├── templates
│   │   │   │   └── ...
│   │   │   └── ...
│   │   ├── chats
│   │   │   ├── templates
│   │   │   │   └── ...
│   │   │   ├── tests
│   │   │   │   ├── chats.factory.unit.js
│   │   │   │   └── chats.spec.js
│   │   │   └── ...
│   │   ├── common
│   │   │   └── ...
│   │   ├── dash
│   │   │   └── ...
│   │   └── ...
│   └── ...
└── ...

For unit test file, it has a part .unit. in the filename and e2e test file has a .spec. in it.

Gulp Flow

By now, we already have a quite decent env. to help the development, such as:

  • A well structured app code folder for conducting modularization on AngularJS by Browserify. Every time when a new file for Angular elements is added, it will automatically register into the Angular module.
  • A folder-based Gulp tasks management system facilitates the Gulp task building and management.
  • A Gulp based testing system is for both Unit Test and E2E Test.

However, the whole process that Gulp mainly supports still has some parts that can be improved to make the development process even smoother, such as:

  • Simplify Terminal interface (CLI). Do not need to use bothgulp and ionic.
  • Enable the project code structure to accommodate different development and building environments, like dev, staging, testing, prod, etc.
  • Aim for more streamline product building system, especially for auto-versioning.
  • Make the development process CI(Continuous Integration)-friendly and CD(Continuous Deployment)-Driendly.

To tackle these, in the next chapter, we will introduce Gulp Flow – the streamline application development process.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>