05 Okt

JavaScript: Guide to the JavaScript Ecosystem

Beginning – Libraries and Frameworks

UI

  • Angular 2
  • Ionic
  • Onson UI
  • Framework 7

Unit Testing

  • Karma
  • Jasmine

End-to-End Testing

Technologies

Unit Testing

Protractor (http://www.protractortest.org/)

Use npm to install Protractor globally with

 $ npm install -g protractor

The webdriver-manager is a helper tool to easily get an instance of a Selenium Server running. Use it to download the necessary binaries with:

 $ webdriver-manager update

Now start up a server with:

$ webdriver-manager start

Install a demo repository:

 $ git clone https://github.com/juliemr/protractor-demo.git $ npm install

Update selenium driver

 $ node_modules/protractor/bin/webdriver-manager  update

Run server in background:

 $ node app/expressserver.js &

Now run the tests

 $ npm test > protractor-demo@0.0.1 test /CLOUD/Environment/workspace.javascript.testing/protractor/protractor-demo > protractor test/conf.js Using ChromeDriver directly... [launcher] Running 1 instances of WebDriver Started ... 3 specs, 0 failures Finished in 6.552 seconds [launcher] 0 instance(s) of WebDriver still running [launcher] chrome #1 passed

 

02 Okt

angular-cli – great command line tool for ionic and angularjs

Angular-cli is easy to install

npm install -g angular-cli
ng --help

 Create your first app

$ ng new DemoApp

Output:

installing ng2
create .editorconfig
create README.md
create src/app/app-routing.module.ts
create src/app/app.component.css
create src/app/app.component.html
create src/app/app.component.spec.ts
create src/app/app.component.ts
create src/app/app.module.ts
create src/app/index.ts
create src/app/shared/index.ts
create src/assets/.gitkeep
create src/assets/.npmignore
create src/environments/environment.prod.ts
create src/environments/environment.ts
create src/favicon.ico
create src/index.html
create src/main.ts
create src/polyfills.ts
create src/styles.css
create src/test.ts
create src/tsconfig.json
create src/typings.d.ts
create angular-cli.json
create e2e/app.e2e-spec.ts
create e2e/app.po.ts
create e2e/tsconfig.json
create .gitignore
create karma.conf.js
create package.json
create protractor.conf.js
create tslint.json
Successfully initialized git.
Installing packages for tooling via npm.
Installed packages for tooling via npm.

Change in app directory and start app

$ cd DemoApp/
$ ng serve

Output will be

** NG Live Development Server is running on http://localhost:4200. **
3220ms building modules
18ms sealing
0ms optimizing
0ms basic module optimization
64ms module optimization
1ms advanced module optimization
7ms basic chunk optimization
0ms chunk optimization
3ms advanced chunk optimization
0ms module and chunk tree optimization
81ms module reviving
2ms module order optimization
2ms module id optimization
2ms chunk reviving
0ms chunk order optimization
6ms chunk id optimization
41ms hashing
0ms module assets processing
95ms chunk assets processing
2ms additional chunk assets processing
0ms recording
0ms additional asset processing
1097ms chunk asset optimization
878ms asset optimization
31ms emitting
Hash: 9690f63d31805d052342
Version: webpack 2.1.0-beta.22
Time: 5563ms
            Asset       Size  Chunks             Chunk Names
   main.bundle.js    2.83 MB    0, 2  [emitted]  main
 styles.bundle.js    10.2 kB    1, 2  [emitted]  styles
        inline.js    5.53 kB       2  [emitted]  inline
         main.map    2.97 MB    0, 2  [emitted]  main
       styles.map    14.7 kB    1, 2  [emitted]  styles
       inline.map    5.59 kB       2  [emitted]  inline
       index.html  474 bytes          [emitted]
assets/.npmignore    0 bytes          [emitted]
Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks       Chunk Names
    index.html  2.81 kB       0
webpack: bundle is now VALID.
webpack: bundle is now INVALID.
222ms building modules
5ms sealing
0ms optimizing
0ms basic module optimization
43ms module optimization
0ms advanced module optimization
4ms basic chunk optimization
0ms chunk optimization
0ms advanced chunk optimization
5ms module and chunk tree optimization
65ms module reviving
2ms module order optimization
2ms module id optimization
2ms chunk reviving
0ms chunk order optimization
5ms chunk id optimization
36ms hashing
0ms module assets processing
46ms chunk assets processing
2ms additional chunk assets processing
0ms recording
0ms additional asset processing
1118ms chunk asset optimization
453ms asset optimization
31ms emitting
Hash: ff698373ee93d6be0b46
Version: webpack 2.1.0-beta.22
Time: 3021ms
           Asset     Size  Chunks             Chunk Names
  main.bundle.js  2.83 MB    0, 2  [emitted]  main
styles.bundle.js  10.2 kB    1, 2             styles
       inline.js  5.53 kB       2             inline
      styles.map  14.7 kB    1, 2             styles
      inline.map  5.59 kB       2             inline
        main.map  2.97 MB    0, 2  [emitted]  main
Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks       Chunk Names
    index.html  2.81 kB       0
webpack: bundle is now VALID.