fix: added tests and updated README

.travis.yml

@@ -11,6 +11,7 @@ cache:
   directories:
   - $HOME/.npm
 script:
+- npm run test-lib-ci
 - npm run build-lib && npm run build
 
 notifications:

README.md

@@ -42,6 +42,13 @@ Add required dependencies to `angular.json` as follows:
 
 See full example [here](https://github.com/AhmedAlatawi/ngx-treant-js/blob/master/angular.json).
 
+### :pencil2: Key Goals
+* Easy to integrate and use in any `Angular` applications
+* Provide `callback` functions to react to user's actions, e.g. single-click, double-click, drag-drop, hover, etc
+* provide `drag-drop` feature for swapping (re-positioning) `Tree` nodes
+* Support adding & removing `Tree` nodes
+* Support editting `Node`'s content, e.g. `name`, `title`, etc
+
 ### Quick start :rocket:
 `employess-chart.component.html`
 ```html
@@ -135,6 +142,9 @@ See full example [here](https://github.com/fperucic/treant-js/tree/master/exampl
 </ngx-treant-chart>
 ```
 
+### Bootstrap Popover Example
+![](./images/chart_with_popover_example.gif)
+
 
 ### :page_facing_up: NgxTreantChart component API
 

projects/ahmed757/ngx-treant-js/karma.conf.js

@@ -26,6 +26,12 @@ module.exports = function (config) {
         logLevel: config.LOG_INFO,
         autoWatch: true,
         browsers: ['Chrome'],
+        customLaunchers: {
+        ChromeHeadlessCI: {
+            base: 'ChromeHeadless',
+            flags: ['--no-sandbox', '--disable-gpu']
+         }
+        },
         singleRun: false,
         restartOnFileChange: true,
     });

projects/ahmed757/ngx-treant-js/src/lib/ngx-treant-js.component.spec.ts

@@ -5,6 +5,7 @@ import { NgxTreantJsComponent } from './ngx-treant-js.component';
 import { Treant } from 'treant-js';
 import * as raphael from '../../../../../node_modules/treant-js/vendor/raphael';
 import * as jquery from 'jquery';
+import { By } from '@angular/platform-browser';
 
 (<any>window).Treant = Treant;
 (<any>window).$ = jquery;
@@ -34,28 +35,50 @@ describe('NgxTreantJsComponent', () => {
                 connectors: {
                     type: 'step',
                     style: {
-                        'stroke-width': 2,
-                    },
+                        'stroke-width': 2
+                    }
                 },
                 node: {
-                    HTMLclass: 'big-commpany',
-                },
+                    HTMLclass: 'test-chart-class'
+                }
             },
             nodeStructure: {
                 text: { name: 'CEO' },
                 connectors: {
                     style: {
                         stroke: '#bbb',
                         'arrow-end': 'oval-wide-long',
-                        className: 'test',
-                    },
+                        className: 'test'
+                    }
                 },
-            },
+                children: [
+                    {
+                        text: { name: 'Account' },
+                        stackChildren: true,
+                        connectors: {
+                            style: {
+                                stroke: '#8080FF',
+                                'arrow-end': 'block-wide-long',
+                            },
+                        },
+                        children: [
+                            {
+                                text: { name: 'Receptionist' },
+                                HTMLclass: 'reception',
+                            },
+                            {
+                                text: { name: 'Author' }
+                            }
+                        ]
+                    }
+                ]
+            }
         };
         fixture.detectChanges();
     });
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
+    it('Tree should be loaded', () => {
+        const chart = fixture.debugElement.query(By.css('.test-chart-class')).nativeElement;
+        expect(chart.id).toBe('test-chart-id');
     });
 });