Unit Testing

We strongly recommend the utilization of Unit Testing practice.  In Dynamics Mobile we are fans of Test Driven Development approach, where the unit testing practice is taken further by implementing unit tests first and then satisfying the developed and failing tests by implementing the actual functionality.
Dynamics Mobile Apps development cycle can be augmented further with unit test phase, easily by utilizing any of the publicly available unit test frameworks  and compagnian tools, including but not limited to:
​Jest​
​Mocha​
​Sinon​
You need to read the corresponding configuration for the selected unit testing tool to it setup for your project.
Dynamics Mobile provides a useful test helper classes, which can be used in the unit tests.
class TestHelper
The TestHelper class exposes one useful method createView.
1
export declare class TestHelper {
2
    static createView(viewClass: any, viewHtml: string, skipDatabind?: boolean): Promise<Object>;
3
}
Copied!
The createView method accepts the following arguments:
viewClass:   View class declared in your project
viewHtml:   Corresponding html content of the view
skipDatabind:  optional, defines if the data binding phase must be skipped.
The method creates instance if the given view and executes the "view loading" part of the view lifecycle, which emulates the behavior of the view when displayed on the screen. This process will effectively call the constructor of the view and the load, resume and show methods if available. It will also execute all @input decorators and data-binding and requiring the developer to pass any hard-required input for the via via ContextService or ConfigurationService.
​
Let's assume we have the following view:
MyView.html
MyView.ts
​
1
<div class="page">
2
    <div class="page-content">
3
        <div class="list">
4
            <ul>
5
                <li>
6
                  <div data-bind="text: myVar"></div>               
7
                </li>
8
            </ul>
9
        </div>        
10
    </div>
11
</div>
Copied!
​
1
...
2
@View()
3
export class MyView {
4
  
5
  @input()
6
  public myVar: ko.Observable<number>;
7
    
8
  public async load():Promise<void>{
9
    console.log('load called');
10
  }
11
  
12
  public async resume():Promise<void>{
13
     console.log('resume called');
14
  }
15
  
16
  public getValue(): number {
17
    return this.myVar();
18
  }
19
   
20
}
Copied!
The view MyView has one observable member called myVar - MyView.ts, line #6. 
myVar is marked as @input  - supposed to be received form the context. The myVar member is also rendered in the UI via databind  in MyView.html , line #6.
We can use the following JEST unit test to test our view
1
import { TestHelper, ContextService } from "@dms";
2
import * as fs from "fs";
3
import * as sinon from "sinon";
4
import { MyView} from "../../src/Views/MyView";
5
​
6
let sandbox: sinon.SinonSandbox;
7
​
8
describe("MyView Task", () => {
9
  
10
  //reset sandbox before each test
11
  beforeEach(async () => {
12
    if (!sandbox) sandbox = sinon.createSandbox();
13
    else sandbox.restore();
14
    localStorage.clear();
15
    sessionStorage.clear();
16
  });
17
​
18
  //reset sandbox after each test
19
  afterEach(() => {
20
    sandbox.restore();
21
  });
22
​
23
  //this is the actual test of the view
24
  it("MyView View", async () => {
25
​
26
    //set myVar vairable, which is required by the view
27
    const contextService = RootDIContainer.inject(ContextService);
28
    await contextService.set('myVar', 123);
29
        
30
    //load the view's html
31
    const viewHtml = fs.readFileSync(
32
      "./src/Views/MyView.html",
33
      "utf8"
34
    );
35
    //create view instance and execute the view loading sequence
36
    const myViewInstance = (await TestHelper.createView(
37
      MyView,
38
      viewHtml
39
    )) as ChangeTheme;
40
    
41
    //call validate method and test the result
42
    const validated = await myViewInstance.validate();
43
    expect(validated).toBeTruthy();
44
​
45
    //call commit method and test the result    
46
    const commited = await myViewInstance.confirm();
47
    expect(commited).toBeTruthy();
48
    
49
    //call other view method and test the result    
50
    const value = await myViewInstance.getValue();
51
    expect(commited).toBe(123);
52
    
53
    
54
  });
55
});
56
​
Copied!
​
​

Typical Development cycle

Enforcing source code rules

Last modified 2yr ago

Copy link