Test Protocol

How to test generator-mcfly

Installation

This is a step by step guide to to test the main features of the Mcfly generator.

Action:
cd to a clean directory and run : yo mcfly --mobile
A series of question will appear and you should press enter several times to input all the default answers.

Run the following commands:

yo mcfly:module common
yo mcfly:controller         
# check that the suggested module name is 'common' 
# then ^+C and run the following line.
yo mcfly:controller common home

Inspection:

• After the installation, open the directory in your text editor and check that package.json contains a bunch of dependencies and devDependencies (with a bigger amount of devDependencies).
• Check in particulier if it contains browser-sync and webpack-dev-server.
• Check that gulp lint passes.

Controller

Action:
Open the index.js located in the common module directory you have just created.
Add

controller: fullname + '.home as vm',

right after

template: require('./views/home.html')

You have just written an extra comma not allowed.

Inspection:
Run gulp lint to check that it does not pass. Delete the extra comma not allowed. Let's now check that the ES6 code can be implemented without any problem.

Action:
Go into the home controller file and write :

vm.message = `Hello controller ${vm.controllername}`;
var activate = () => $log.debug('activate');
activate();

vm.add = (a,b) => {
    var res = a+b;
    $log.debug(`${a}+${b}=${res}`);
    return res;
};

vm.addNumbers = () => vm.res = vm.add(parseInt(vm.a), parseInt(vm.b));

Inject the $log dependency (as an argument of the controller function and as an element of the deps array).

Then replace the content of home.html by the following :

<ion-view>
   <ion-header-bar class="bar-positive">
       <h1 class="title">{{vm.message}}</h1>
   </ion-header-bar>
   <ion-content>
       <div class="list">
           <label class="item item-input">
               <input type="text" placeholder="a" ng-model="vm.a">
           </label>
           <label class="item item-input">
               <input type="text" placeholder="b" ng-model="vm.b">
           </label>
           <label class="item item-input">
               <div>{{vm.res}}</div>
           </label>
       </div>

       <button class="button button-block button-positive" ng-click="vm.addNumbers()">Add numbers</button>

   </ion-content>
</ion-view> 

Inspection: Check gulp lint passes.

Browsersync

Action:
Run gulp browsersync
Fill the form and click on the 'Add numbers' button.

Inspection:

• Check that there is no error in the terminal output (except for cordova).
• Check that the 'activate' you logged in the controller is output in your browser's console.
• Check that everything on the page is well displayed, as written in home.html.
• Check that the correct result is displayed.
• Inspect the page and check for the browsersync and node_modules to be present in the sources tab.
• Look into the scripts and check that all the source files are there with a bundle.js in addition.
• Check in particular that home.controller is present and that it is the exact same as the source file from your computer.

Change the name of the "Add numbers" button into "Add the numbers" and check that your browser automatically refreshed the page and displayed the change.

Style

SCSS and LESS

Action:
Write in the scss file:

h1 {
    color:red !important;
} 

Inspection:
Check that the page refreshed and now has a red background color. Then delete what you have just written in the scss.

Action:
Write in the less file:

h1 {
    color:green !important;
} 

Inspection:

• Check that the page refreshed and now has a green background color.
• Delete what you have just written in the less file.

Images

Action:
Copy an image into the folder images/app. Write a img tag in `home.html:

<img src='images/app/imageName.jpg' >

Inspection:
Check that it creates an image in the dist directory and that it is displayed correctly in your browser.

Stop browsersync with ^+C.

Graph

Action:
run: gulp graph.
If you get an error, run: brew install graphviz and try again.
Inspection:

• Check that a new graph-dependency.png file has been created in your working directory.
• Open it and check it represents your modules tree.

Testing

Unit Testing

Action:
Run gulp unit and check that the tests pass and the code coverage is displayed. It should not be 100% since you did not write any test for the functions you added to 'home' controller.
Inspection:

• Check that in the coverage directory, there are two subdirectories named mocha (containing a covreport) and unit, containing an index.html.
• Open this index.html on browser.
• Check that the source code is there and that the functions we added in 'home' controller are not tested.

e2e Testing

Action:
Go now in the test/e2e directory of your project.
In test/e2e/view/Main.view.js write the following code in the class definition:

inputA() {
       return element(by.model('vm.a'));
   }

   inputB() {
       return element(by.model('vm.b'));
   }

   addNumbersButton() {
       return element(by.ngClick('vm.addNumbers()'));
   }

   result() {
       return element(by.binding('vm.res'));
   }

In test/e2e/app/main.e2e.test.js add the following 'it':

it('should add numbers', function() {
     mainView.inputA().sendKeys('1');
     mainView.inputB().sendKeys('2');
     mainView.addNumbersButton().click();
       expect(mainView.result().getText()).toEqual('3');
   });

Inspection:

• Check gulp e2e passes, coverage is displaying and a reports folder has been created.
• Check that it contains all the screenshots of the e2e tests and that they are well displayed when opening in browser the index.html.

Webpack

Action:
Open gulp_tasks/common/constants.js and change the value of the attribute 'moduleManager' from 'browsersync' to 'webpack'.

run: gulp lint.
run: gulp browsersync.

Inspection:

• Inspect the element on the browser, check that your console.logs are output in the console and that all the source files are there and the exact same as the ones in your working directory.
• Check gulp unit and gulp e2e pass.
• Run gulp graph. Check that a graph that represents your modules has been created in your working directory.

Updating packages

Action:
Update all packages except for babel. run:

ncu -u
npm i

Then put back the old version of babel packages, changing their version in package.json by the following:

"babel": "5.8.29",
"babel-core": "5.8.29",
"babel-eslint": "4.1.3",
"babel-loader": "5.3.2",
"babel-runtime": "5.8.29",
"babelify": "6.4.0",

Repeat all the previous steps, to test mcfly with the updated packages.