Basic Diagram component unit test

ng2-components/ng2-activiti-diagrams/index.ts

@@ -18,9 +18,7 @@
 import { NgModule, ModuleWithProviders } from '@angular/core';
 import { CoreModule } from 'ng2-alfresco-core';
 
-import { DIAGRAM_DIRECTIVES } from './src/components/index';
-import { DiagramColorService } from './src/services/diagram-color.service';
-import { DiagramsService } from './src/services/diagrams.service';
+import { DIAGRAM_DIRECTIVES, DIAGRAM_PROVIDERS } from './src/components/index';
 
 import { RAPHAEL_DIRECTIVES } from './src/components/raphael/index';
 import { RAPHAEL_PROVIDERS } from './src/components/raphael/index';
@@ -29,11 +27,6 @@ import { RAPHAEL_PROVIDERS } from './src/components/raphael/index';
 export * from './src/components/index';
 export * from './src/components/raphael/index';
 
-export const DIAGRAM_PROVIDERS: any[] = [
-    DiagramsService,
-    DiagramColorService
-];
-
 @NgModule({
     imports: [
         CoreModule

ng2-components/ng2-activiti-diagrams/src/components/diagram.component.spec.ts

@@ -0,0 +1,109 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+import {
+    CoreModule
+} from 'ng2-alfresco-core';
+
+import { DIAGRAM_DIRECTIVES, DIAGRAM_PROVIDERS } from './index';
+import { RAPHAEL_DIRECTIVES, RAPHAEL_PROVIDERS } from './raphael/index';
+import { DiagramComponent } from './index';
+import { DebugElement } from '@angular/core';
+
+declare let jasmine: any;
+
+describe('Test ng2-activiti-diagrams ', () => {
+
+    let component: any;
+    let fixture: ComponentFixture<DiagramComponent>;
+    let debug: DebugElement;
+    let element: HTMLElement;
+
+    let componentHandler: any;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                CoreModule
+            ],
+            declarations: [
+                ...DIAGRAM_DIRECTIVES,
+                ...RAPHAEL_DIRECTIVES
+            ],
+            providers: [
+                ...DIAGRAM_PROVIDERS,
+                ...RAPHAEL_PROVIDERS
+            ]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(DiagramComponent);
+        component = fixture.componentInstance;
+        debug = fixture.debugElement;
+        element = fixture.nativeElement;
+        fixture.detectChanges();
+        componentHandler = jasmine.createSpyObj('componentHandler', [
+            'upgradeAllRegistered'
+        ]);
+        window['componentHandler'] = componentHandler;
+    });
+
+    describe('Diagrams component ', () => {
+        beforeEach(() => {
+            jasmine.Ajax.install();
+        });
+
+        afterEach(() => {
+            jasmine.Ajax.uninstall();
+        });
+
+        it('Should render the StartEvent', async(() => {
+            component.processDefinitionId = 'fakeprocess:24:38399';
+            component.metricPercentages = {startEvent: 0};
+
+            component.onSuccess.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).toBeDefined();
+                    let startEvent: any = element.querySelector('diagram-start-event');
+                    expect(startEvent).toBeDefined();
+                    let raphaelCircle: any = element.querySelector('raphael-circle');
+                    expect(raphaelCircle).toBeDefined();
+                });
+            });
+            component.ngOnChanges();
+            let startEvent = {
+                id: 'startEvent1',
+                type: 'StartEvent',
+                width: 30,
+                height: 30,
+                x: 15,
+                y: 48.5,
+                properties: [{}]
+            };
+            let resp = {elements : [startEvent] };
+
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: resp
+            });
+        }));
+    });
+});

ng2-components/ng2-activiti-diagrams/src/components/diagram.component.ts

@@ -39,6 +39,9 @@ export class DiagramComponent {
     @Input()
     height: number = 500;
 
+    @Output()
+    onSuccess = new EventEmitter();
+
     @Output()
     onError = new EventEmitter();
 
@@ -70,6 +73,7 @@ export class DiagramComponent {
         this.diagramsService.getProcessDefinitionModel(processDefinitionId).subscribe(
             (res: any) => {
                 this.diagram = res;
+                this.onSuccess.emit(res);
             },
             (err: any) => {
                 this.onError.emit(err);

ng2-components/ng2-activiti-diagrams/src/components/index.ts

@@ -24,6 +24,10 @@ import { DIAGRAM_ICONS_DIRECTIVES } from './icons/index';
 import { DIAGRAM_BOUNDARY_EVENTS_DIRECTIVES } from './boundary-events/index';
 import { DIAGRAM_INTERMEDIATE_EVENTS_DIRECTIVES } from './intermediate-catching-events/index';
 import { DIAGRAM_STRUCTURAL_DIRECTIVES } from './structural/index';
+import { DIAGRAM_SWIMLANES_DIRECTIVES } from './swimlanes/index';
+
+import { DiagramColorService } from '../services/diagram-color.service';
+import { DiagramsService } from '../services/diagrams.service';
 
 // primitives
 export * from './diagram.component';
@@ -34,6 +38,7 @@ export * from './diagram-sequence-flow.component';
 export * from './boundary-events/index';
 export * from './intermediate-catching-events/index';
 export * from './structural/index';
+export * from './swimlanes/index';
 
 export const DIAGRAM_DIRECTIVES: any[] = [
     DiagramComponent,
@@ -44,5 +49,11 @@ export const DIAGRAM_DIRECTIVES: any[] = [
     DIAGRAM_ICONS_DIRECTIVES,
     DIAGRAM_BOUNDARY_EVENTS_DIRECTIVES,
     DIAGRAM_INTERMEDIATE_EVENTS_DIRECTIVES,
-    DIAGRAM_STRUCTURAL_DIRECTIVES
+    DIAGRAM_STRUCTURAL_DIRECTIVES,
+    DIAGRAM_SWIMLANES_DIRECTIVES
+];
+
+export const DIAGRAM_PROVIDERS: any[] = [
+    DiagramsService,
+    DiagramColorService
 ];