diff --git a/ng2-components/ng2-activiti-diagrams/README.md b/ng2-components/ng2-activiti-diagrams/README.md index 10fc28ac0d..9447af36c4 100644 --- a/ng2-components/ng2-activiti-diagrams/README.md +++ b/ng2-components/ng2-activiti-diagrams/README.md @@ -104,7 +104,12 @@ Follow the 3 steps below: This component shows the diagram of a process. ```html - + +``` +Or below component shows the diagram of a running process instance with the activities highlighted according to their state (Active/Completed/Pending). + +```html + ``` Usage example of this component : @@ -165,7 +170,9 @@ platformBrowserDynamic().bootstrapModule(AppModule); | Name | Description | | --- | --- | -| `metricPercentage` | The array that contains the percentage of the time for each element | +| `metricPercentages` | The array that contains the percentage of the time for each element | +| `metricColor` | The array that contains the color for each element | +| `metricType` | The string that specifies the metric type | ## Build from sources diff --git a/ng2-components/ng2-activiti-diagrams/src/assets/diagramActivities.mock.ts b/ng2-components/ng2-activiti-diagrams/src/assets/diagramActivities.mock.ts index ec7a3b31aa..132ca46aaa 100644 --- a/ng2-components/ng2-activiti-diagrams/src/assets/diagramActivities.mock.ts +++ b/ng2-components/ng2-activiti-diagrams/src/assets/diagramActivities.mock.ts @@ -26,6 +26,32 @@ export let userTask = { properties: [{}] }; +export let userTaskActive = { + completed: false, + current: true, + id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', + name: 'Fake User task', + type: 'UserTask', + width: 82, + height: 67, + x: 75.56890135999998, + y: 30, + properties: [{}] +}; + +export let userTaskCompleted = { + completed: true, + current: false, + id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', + name: 'Fake User task', + type: 'UserTask', + width: 82, + height: 67, + x: 75.56890135999998, + y: 30, + properties: [{}] +}; + export let manualTask = { id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', name: 'Fake Manual task', @@ -37,6 +63,32 @@ export let manualTask = { properties: [{}] }; +export let manualTaskActive = { + completed: false, + current: true, + id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', + name: 'Fake Manual task', + type: 'ManualTask', + width: 82, + height: 67, + x: 75.56890135999998, + y: 30, + properties: [{}] +}; + +export let manualTaskCompleted = { + completed: true, + current: false, + id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', + name: 'Fake Manual task', + type: 'ManualTask', + width: 82, + height: 67, + x: 75.56890135999998, + y: 30, + properties: [{}] +}; + export let serviceTask = { id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', name: 'Fake Service task', @@ -48,6 +100,32 @@ export let serviceTask = { properties: [{}] }; +export let serviceTaskActive = { + completed: false, + current: true, + id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', + name: 'Fake Service task', + type: 'ServiceTask', + width: 82, + height: 67, + x: 75.56890135999998, + y: 30, + properties: [{}] +}; + +export let serviceTaskCompleted = { + completed: true, + current: false, + id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', + name: 'Fake Service task', + type: 'ServiceTask', + width: 82, + height: 67, + x: 75.56890135999998, + y: 30, + properties: [{}] +}; + export let receiveTask = { id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', name: 'Fake Receive task', @@ -59,6 +137,32 @@ export let receiveTask = { properties: [{}] }; +export let receiveTaskActive = { + completed: false, + current: true, + id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', + name: 'Fake Receive task', + type: 'ReceiveTask', + width: 82, + height: 67, + x: 75.56890135999998, + y: 30, + properties: [{}] +}; + +export let receiveTaskCompleted = { + completed: true, + current: false, + id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', + name: 'Fake Receive task', + type: 'ReceiveTask', + width: 82, + height: 67, + x: 75.56890135999998, + y: 30, + properties: [{}] +}; + export let scriptTask = { id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', name: 'Fake Script task', @@ -70,6 +174,32 @@ export let scriptTask = { properties: [{}] }; +export let scriptTaskActive = { + completed: false, + current: true, + id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', + name: 'Fake Script task', + type: 'ScriptTask', + width: 82, + height: 67, + x: 75.56890135999998, + y: 30, + properties: [{}] +}; + +export let scriptTaskCompleted = { + completed: true, + current: false, + id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', + name: 'Fake Script task', + type: 'ScriptTask', + width: 82, + height: 67, + x: 75.56890135999998, + y: 30, + properties: [{}] +}; + export let businessRuleTask = { id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', name: 'Fake BusinessRule task', @@ -81,6 +211,32 @@ export let businessRuleTask = { properties: [{}] }; +export let businessRuleTaskActive = { + completed: false, + current: true, + id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', + name: 'Fake BusinessRule task', + type: 'BusinessRuleTask', + width: 82, + height: 67, + x: 75.56890135999998, + y: 30, + properties: [{}] +}; + +export let businessRuleTaskCompleted = { + completed: true, + current: false, + id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', + name: 'Fake BusinessRule task', + type: 'BusinessRuleTask', + width: 82, + height: 67, + x: 75.56890135999998, + y: 30, + properties: [{}] +}; + export let mailTask = { id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', name: 'Fake Mail task', @@ -93,6 +249,34 @@ export let mailTask = { taskType: 'mail' }; +export let mailTaskActive = { + completed: false, + current: true, + id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', + name: 'Fake Mail task', + type: 'ServiceTask', + width: 82, + height: 67, + x: 75.56890135999998, + y: 30, + properties: [{}], + taskType: 'mail' +}; + +export let mailTaskCompleted = { + completed: true, + current: false, + id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', + name: 'Fake Mail task', + type: 'ServiceTask', + width: 82, + height: 67, + x: 75.56890135999998, + y: 30, + properties: [{}], + taskType: 'mail' +}; + export let camelTask = { id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', name: 'Fake Camel task', @@ -105,6 +289,34 @@ export let camelTask = { taskType: 'camel' }; +export let camelTaskActive = { + completed: false, + current: true, + id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', + name: 'Fake Camel task', + type: 'ServiceTask', + width: 82, + height: 67, + x: 75.56890135999998, + y: 30, + properties: [{}], + taskType: 'camel' +}; + +export let camelTaskCompleted = { + completed: true, + current: false, + id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', + name: 'Fake Camel task', + type: 'ServiceTask', + width: 82, + height: 67, + x: 75.56890135999998, + y: 30, + properties: [{}], + taskType: 'camel' +}; + export let restCallTask = { id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', name: 'Fake Rest Call task', @@ -117,6 +329,34 @@ export let restCallTask = { taskType: 'rest_call' }; +export let restCallTaskActive = { + completed: false, + current: true, + id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', + name: 'Fake Rest Call task', + type: 'ServiceTask', + width: 82, + height: 67, + x: 75.56890135999998, + y: 30, + properties: [{}], + taskType: 'rest_call' +}; + +export let restCallTaskCompleted = { + completed: true, + current: false, + id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', + name: 'Fake Rest Call task', + type: 'ServiceTask', + width: 82, + height: 67, + x: 75.56890135999998, + y: 30, + properties: [{}], + taskType: 'rest_call' +}; + export let muleTask = { id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', name: 'Fake Mule task', @@ -129,6 +369,34 @@ export let muleTask = { taskType: 'mule' }; +export let muleTaskActive = { + completed: false, + current: true, + id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', + name: 'Fake Mule task', + type: 'ServiceTask', + width: 82, + height: 67, + x: 75.56890135999998, + y: 30, + properties: [{}], + taskType: 'mule' +}; + +export let muleTaskCompleted = { + completed: true, + current: false, + id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', + name: 'Fake Mule task', + type: 'ServiceTask', + width: 82, + height: 67, + x: 75.56890135999998, + y: 30, + properties: [{}], + taskType: 'mule' +}; + export let alfrescoPublishTask = { id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', name: 'Fake Alfresco Publish task', @@ -141,6 +409,34 @@ export let alfrescoPublishTask = { taskType: 'alfresco_publish' }; +export let alfrescoPublishTaskActive = { + completed: false, + current: true, + id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', + name: 'Fake Alfresco Publish task', + type: 'ServiceTask', + width: 82, + height: 67, + x: 75.56890135999998, + y: 30, + properties: [{}], + taskType: 'alfresco_publish' +}; + +export let alfrescoPublishTaskCompleted = { + completed: true, + current: false, + id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', + name: 'Fake Alfresco Publish task', + type: 'ServiceTask', + width: 82, + height: 67, + x: 75.56890135999998, + y: 30, + properties: [{}], + taskType: 'alfresco_publish' +}; + export let googleDrivePublishTask = { id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', name: 'Fake Google Drive Publish task', @@ -153,6 +449,34 @@ export let googleDrivePublishTask = { taskType: 'google_drive_publish' }; +export let googleDrivePublishTaskActive = { + completed: false, + current: true, + id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', + name: 'Fake Google Drive Publish task', + type: 'ServiceTask', + width: 82, + height: 67, + x: 75.56890135999998, + y: 30, + properties: [{}], + taskType: 'google_drive_publish' +}; + +export let googleDrivePublishTaskCompleted = { + completed: true, + current: false, + id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', + name: 'Fake Google Drive Publish task', + type: 'ServiceTask', + width: 82, + height: 67, + x: 75.56890135999998, + y: 30, + properties: [{}], + taskType: 'google_drive_publish' +}; + export let boxPublishTask = { id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', name: 'Fake Box Publish task', @@ -164,3 +488,31 @@ export let boxPublishTask = { properties: [{}], taskType: 'box_publish' }; + +export let boxPublishTaskActive = { + completed: false, + current: true, + id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', + name: 'Fake Box Publish task', + type: 'ServiceTask', + width: 82, + height: 67, + x: 75.56890135999998, + y: 30, + properties: [{}], + taskType: 'box_publish' +}; + +export let boxPublishTaskCompleted = { + completed: true, + current: false, + id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', + name: 'Fake Box Publish task', + type: 'ServiceTask', + width: 82, + height: 67, + x: 75.56890135999998, + y: 30, + properties: [{}], + taskType: 'box_publish' +}; diff --git a/ng2-components/ng2-activiti-diagrams/src/assets/diagramBoundary.mock.ts b/ng2-components/ng2-activiti-diagrams/src/assets/diagramBoundary.mock.ts index daaf33a467..7adb084c71 100644 --- a/ng2-components/ng2-activiti-diagrams/src/assets/diagramBoundary.mock.ts +++ b/ng2-components/ng2-activiti-diagrams/src/assets/diagramBoundary.mock.ts @@ -26,6 +26,32 @@ export let boundaryTimeEvent = { eventDefinition: {type: 'timer'} }; +export let boundaryTimeEventActive = { + completed: false, + current: true, + id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', + type: 'BoundaryEvent', + width: 31, + height: 31, + x: 40, + y: 30, + properties: [{}], + eventDefinition: {type: 'timer'} +}; + +export let boundaryTimeEventCompleted = { + completed: true, + current: false, + id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', + type: 'BoundaryEvent', + width: 31, + height: 31, + x: 40, + y: 30, + properties: [{}], + eventDefinition: {type: 'timer'} +}; + export let boundaryErrorEvent = { id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', type: 'BoundaryEvent', @@ -37,6 +63,32 @@ export let boundaryErrorEvent = { eventDefinition: {type: 'error'} }; +export let boundaryErrorEventActive = { + completed: false, + current: true, + id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', + type: 'BoundaryEvent', + width: 31, + height: 31, + x: 40, + y: 30, + properties: [{}], + eventDefinition: {type: 'error'} +}; + +export let boundaryErrorEventCompleted = { + completed: true, + current: false, + id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', + type: 'BoundaryEvent', + width: 31, + height: 31, + x: 40, + y: 30, + properties: [{}], + eventDefinition: {type: 'error'} +}; + export let boundarySignalEvent = { id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', type: 'BoundaryEvent', @@ -48,6 +100,32 @@ export let boundarySignalEvent = { eventDefinition: {type: 'signal'} }; +export let boundarySignalEventActive = { + completed: false, + current: true, + id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', + type: 'BoundaryEvent', + width: 31, + height: 31, + x: 40, + y: 30, + properties: [{}], + eventDefinition: {type: 'signal'} +}; + +export let boundarySignalEventCompleted = { + completed: true, + current: false, + id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', + type: 'BoundaryEvent', + width: 31, + height: 31, + x: 40, + y: 30, + properties: [{}], + eventDefinition: {type: 'signal'} +}; + export let boundaryMessageEvent = { id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', type: 'BoundaryEvent', @@ -58,3 +136,29 @@ export let boundaryMessageEvent = { properties: [{}], eventDefinition: {type: 'message'} }; + +export let boundaryMessageEventActive = { + completed: false, + current: true, + id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', + type: 'BoundaryEvent', + width: 31, + height: 31, + x: 40, + y: 30, + properties: [{}], + eventDefinition: {type: 'message'} +}; + +export let boundaryMessageEventCompleted = { + completed: true, + current: false, + id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', + type: 'BoundaryEvent', + width: 31, + height: 31, + x: 40, + y: 30, + properties: [{}], + eventDefinition: {type: 'message'} +}; diff --git a/ng2-components/ng2-activiti-diagrams/src/assets/diagramEvents.mock.ts b/ng2-components/ng2-activiti-diagrams/src/assets/diagramEvents.mock.ts index 404208d178..99b4ac2a54 100644 --- a/ng2-components/ng2-activiti-diagrams/src/assets/diagramEvents.mock.ts +++ b/ng2-components/ng2-activiti-diagrams/src/assets/diagramEvents.mock.ts @@ -25,6 +25,30 @@ export let startEvent = { properties: [{}] }; +export let startEventActive = { + completed: false, + current: true, + id: 'startEvent1', + type: 'StartEvent', + width: 30, + height: 30, + x: 15, + y: 48.5, + properties: [{}] +}; + +export let startEventCompleted = { + completed: true, + current: false, + id: 'startEvent1', + type: 'StartEvent', + width: 30, + height: 30, + x: 15, + y: 48.5, + properties: [{}] +}; + export let startTimeEvent = { id: 'startEvent1', type: 'StartEvent', @@ -36,6 +60,32 @@ export let startTimeEvent = { properties: [{}] }; +export let startTimeEventActive = { + completed: false, + current: true, + id: 'startEvent1', + type: 'StartEvent', + width: 30, + height: 30, + x: 15, + y: 48.5, + eventDefinition: {type: 'timer'}, + properties: [{}] +}; + +export let startTimeEventCompleted = { + completed: true, + current: false, + id: 'startEvent1', + type: 'StartEvent', + width: 30, + height: 30, + x: 15, + y: 48.5, + eventDefinition: {type: 'timer'}, + properties: [{}] +}; + export let startSignalEvent = { id: 'startEvent1', type: 'StartEvent', @@ -47,6 +97,32 @@ export let startSignalEvent = { properties: [{}] }; +export let startSignalEventActive = { + completed: false, + current: true, + id: 'startEvent1', + type: 'StartEvent', + width: 30, + height: 30, + x: 15, + y: 48.5, + eventDefinition: {type: 'signal'}, + properties: [{}] +}; + +export let startSignalEventCompleted = { + completed: true, + current: false, + id: 'startEvent1', + type: 'StartEvent', + width: 30, + height: 30, + x: 15, + y: 48.5, + eventDefinition: {type: 'signal'}, + properties: [{}] +}; + export let startMessageEvent = { id: 'startEvent1', type: 'StartEvent', @@ -58,6 +134,32 @@ export let startMessageEvent = { properties: [{}] }; +export let startMessageEventActive = { + completed: false, + current: true, + id: 'startEvent1', + type: 'StartEvent', + width: 30, + height: 30, + x: 15, + y: 48.5, + eventDefinition: {type: 'message'}, + properties: [{}] +}; + +export let startMessageEventCompleted = { + completed: true, + current: false, + id: 'startEvent1', + type: 'StartEvent', + width: 30, + height: 30, + x: 15, + y: 48.5, + eventDefinition: {type: 'message'}, + properties: [{}] +}; + export let startErrorEvent = { id: 'startEvent1', type: 'StartEvent', @@ -69,6 +171,32 @@ export let startErrorEvent = { properties: [{}] }; +export let startErrorEventActive = { + completed: false, + current: true, + id: 'startEvent1', + type: 'StartEvent', + width: 30, + height: 30, + x: 15, + y: 48.5, + eventDefinition: {type: 'error'}, + properties: [{}] +}; + +export let startErrorEventCompleted = { + completed: true, + current: false, + id: 'startEvent1', + type: 'StartEvent', + width: 30, + height: 30, + x: 15, + y: 48.5, + eventDefinition: {type: 'error'}, + properties: [{}] +}; + export let endEvent = { id: 'sid-CED2A8DB-47E2-4057-A7B8-3ABBE5CE795E', type: 'EndEvent', @@ -79,6 +207,30 @@ export let endEvent = { properties: [{}] }; +export let endEventActive = { + completed: false, + current: true, + id: 'sid-CED2A8DB-47E2-4057-A7B8-3ABBE5CE795E', + type: 'EndEvent', + width: 28, + height: 28, + x: 15, + y: 48.5, + properties: [{}] +}; + +export let endEventCompleted = { + completed: true, + current: false, + id: 'sid-CED2A8DB-47E2-4057-A7B8-3ABBE5CE795E', + type: 'EndEvent', + width: 28, + height: 28, + x: 15, + y: 48.5, + properties: [{}] +}; + export let endErrorEvent = { id: 'sid-CED2A8DB-47E2-4057-A7B8-3ABBE5CE795E', type: 'EndEvent', @@ -89,3 +241,30 @@ export let endErrorEvent = { eventDefinition: {type: 'error'}, properties: [{}] }; + + +export let endErrorEventActive = { + completed: false, + current: true, + id: 'sid-CED2A8DB-47E2-4057-A7B8-3ABBE5CE795E', + type: 'EndEvent', + width: 28, + height: 28, + x: 15, + y: 48.5, + eventDefinition: {type: 'error'}, + properties: [{}] +}; + +export let endErrorEventCompleted = { + completed: true, + current: false, + id: 'sid-CED2A8DB-47E2-4057-A7B8-3ABBE5CE795E', + type: 'EndEvent', + width: 28, + height: 28, + x: 15, + y: 48.5, + eventDefinition: {type: 'error'}, + properties: [{}] +}; diff --git a/ng2-components/ng2-activiti-diagrams/src/assets/diagramGateways.mock.ts b/ng2-components/ng2-activiti-diagrams/src/assets/diagramGateways.mock.ts index 85163c3d4f..381c471834 100644 --- a/ng2-components/ng2-activiti-diagrams/src/assets/diagramGateways.mock.ts +++ b/ng2-components/ng2-activiti-diagrams/src/assets/diagramGateways.mock.ts @@ -25,6 +25,30 @@ export let exclusiveGatway = { properties: [{}] }; +export let exclusiveGatwayActive = { + completed: false, + current: true, + id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', + type: 'ExclusiveGateway', + width: 40, + height: 40, + x: 40, + y: 30, + properties: [{}] +}; + +export let exclusiveGatwayCompleted = { + completed: true, + current: false, + id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', + type: 'ExclusiveGateway', + width: 40, + height: 40, + x: 40, + y: 30, + properties: [{}] +}; + export let inclusiveGatway = { id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', type: 'InclusiveGateway', @@ -35,6 +59,30 @@ export let inclusiveGatway = { properties: [{}] }; +export let inclusiveGatwayActive = { + completed: false, + current: true, + id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', + type: 'InclusiveGateway', + width: 40, + height: 40, + x: 40, + y: 30, + properties: [{}] +}; + +export let inclusiveGatwayCompleted = { + completed: true, + current: false, + id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', + type: 'InclusiveGateway', + width: 40, + height: 40, + x: 40, + y: 30, + properties: [{}] +}; + export let parallelGatway = { id: 'sid-14EE23CE-0731-4E23-80F3-C557DA2A0CFC', type: 'ParallelGateway', @@ -45,6 +93,30 @@ export let parallelGatway = { properties: [{}] }; +export let parallelGatwayActive = { + completed: false, + current: true, + id: 'sid-14EE23CE-0731-4E23-80F3-C557DA2A0CFC', + type: 'ParallelGateway', + width: 40, + height: 40, + x: 40, + y: 30, + properties: [{}] +}; + +export let parallelGatwayCompleted = { + completed: true, + current: false, + id: 'sid-14EE23CE-0731-4E23-80F3-C557DA2A0CFC', + type: 'ParallelGateway', + width: 40, + height: 40, + x: 40, + y: 30, + properties: [{}] +}; + export let eventGatway = { id: 'sid-14EE23CE-0731-4E23-80F3-C557DA2A0CFC', type: 'EventGateway', @@ -54,3 +126,27 @@ export let eventGatway = { y: 30, properties: [{}] }; + +export let eventGatwayActive = { + completed: false, + current: true, + id: 'sid-14EE23CE-0731-4E23-80F3-C557DA2A0CFC', + type: 'EventGateway', + width: 40, + height: 40, + x: 40, + y: 30, + properties: [{}] +}; + +export let eventGatwayCompleted = { + completed: true, + current: false, + id: 'sid-14EE23CE-0731-4E23-80F3-C557DA2A0CFC', + type: 'EventGateway', + width: 40, + height: 40, + x: 40, + y: 30, + properties: [{}] +}; diff --git a/ng2-components/ng2-activiti-diagrams/src/assets/diagramIntermediate.mock.ts b/ng2-components/ng2-activiti-diagrams/src/assets/diagramIntermediate.mock.ts index 600156fd01..11d5fe4413 100644 --- a/ng2-components/ng2-activiti-diagrams/src/assets/diagramIntermediate.mock.ts +++ b/ng2-components/ng2-activiti-diagrams/src/assets/diagramIntermediate.mock.ts @@ -26,6 +26,33 @@ export let intermediateCatchingTimeEvent = { eventDefinition: {type: 'timer'} }; +export let intermediateCatchingTimeEventActive = { + completed: false, + current: true, + id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', + type: 'IntermediateCatchEvent', + width: 31, + height: 31, + x: 40, + y: 30, + properties: [{}], + eventDefinition: {type: 'timer'} +}; + +export let intermediateCatchingTimeEventCompleted = { + completed: true, + current: false, + id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', + type: 'IntermediateCatchEvent', + width: 31, + height: 31, + x: 40, + y: 30, + properties: [{}], + eventDefinition: {type: 'timer'} +}; + + export let intermediateCatchingErrorEvent = { id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', type: 'IntermediateCatchEvent', @@ -37,6 +64,32 @@ export let intermediateCatchingErrorEvent = { eventDefinition: {type: 'error'} }; +export let intermediateCatchingErrorEventActive = { + completed: false, + current: true, + id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', + type: 'IntermediateCatchEvent', + width: 31, + height: 31, + x: 40, + y: 30, + properties: [{}], + eventDefinition: {type: 'error'} +}; + +export let intermediateCatchingErrorEventCompleted = { + completed: true, + current: false, + id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', + type: 'IntermediateCatchEvent', + width: 31, + height: 31, + x: 40, + y: 30, + properties: [{}], + eventDefinition: {type: 'error'} +}; + export let intermediateCatchingSignalEvent = { id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', type: 'IntermediateCatchEvent', @@ -48,6 +101,33 @@ export let intermediateCatchingSignalEvent = { eventDefinition: {type: 'signal'} }; +export let intermediateCatchingSignalEventActive = { + completed: false, + current: true, + id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', + type: 'IntermediateCatchEvent', + width: 31, + height: 31, + x: 40, + y: 30, + properties: [{}], + eventDefinition: {type: 'signal'} +}; + +export let intermediateCatchingSignalEventCompleted = { + completed: true, + current: false, + id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', + type: 'IntermediateCatchEvent', + width: 31, + height: 31, + x: 40, + y: 30, + properties: [{}], + eventDefinition: {type: 'signal'} +}; + + export let intermediateCatchingMessageEvent = { id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', type: 'IntermediateCatchEvent', @@ -58,3 +138,29 @@ export let intermediateCatchingMessageEvent = { properties: [{}], eventDefinition: {type: 'message'} }; + +export let intermediateCatchingMessageEventActive = { + completed: false, + current: true, + id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', + type: 'IntermediateCatchEvent', + width: 31, + height: 31, + x: 40, + y: 30, + properties: [{}], + eventDefinition: {type: 'message'} +}; + +export let intermediateCatchingMessageEventCompleted = { + completed: true, + current: false, + id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', + type: 'IntermediateCatchEvent', + width: 31, + height: 31, + x: 40, + y: 30, + properties: [{}], + eventDefinition: {type: 'message'} +}; diff --git a/ng2-components/ng2-activiti-diagrams/src/assets/diagramStructural.mock.ts b/ng2-components/ng2-activiti-diagrams/src/assets/diagramStructural.mock.ts index 4dace0d7e3..398f3eee83 100644 --- a/ng2-components/ng2-activiti-diagrams/src/assets/diagramStructural.mock.ts +++ b/ng2-components/ng2-activiti-diagrams/src/assets/diagramStructural.mock.ts @@ -25,6 +25,30 @@ export let subProcess = { properties: [{}] }; +export let subProcessActive = { + completed: false, + current: true, + id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', + type: 'SubProcess', + width: 300, + height: 200, + x: 40, + y: 30, + properties: [{}] +}; + +export let subProcessCompleted = { + completed: true, + current: false, + id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', + type: 'SubProcess', + width: 300, + height: 200, + x: 40, + y: 30, + properties: [{}] +}; + export let eventSubProcess = { id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', type: 'EventSubProcess', @@ -34,3 +58,27 @@ export let eventSubProcess = { y: 30, properties: [{}] }; + +export let eventSubProcessActive = { + completed: false, + current: true, + id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', + type: 'EventSubProcess', + width: 300, + height: 200, + x: 40, + y: 30, + properties: [{}] +}; + +export let eventSubProcessCompleted = { + completed: true, + current: false, + id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', + type: 'EventSubProcess', + width: 300, + height: 200, + x: 40, + y: 30, + properties: [{}] +}; diff --git a/ng2-components/ng2-activiti-diagrams/src/assets/diagramThrow.mock.ts b/ng2-components/ng2-activiti-diagrams/src/assets/diagramThrow.mock.ts index f854de07f1..831a2a7deb 100644 --- a/ng2-components/ng2-activiti-diagrams/src/assets/diagramThrow.mock.ts +++ b/ng2-components/ng2-activiti-diagrams/src/assets/diagramThrow.mock.ts @@ -26,6 +26,32 @@ export let throwTimeEvent = { eventDefinition: {type: 'timer'} }; +export let throwTimeEventActive = { + completed: false, + current: true, + id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', + type: 'ThrowEvent', + width: 31, + height: 31, + x: 40, + y: 30, + properties: [{}], + eventDefinition: {type: 'timer'} +}; + +export let throwTimeEventCompleted = { + completed: true, + current: false, + id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', + type: 'ThrowEvent', + width: 31, + height: 31, + x: 40, + y: 30, + properties: [{}], + eventDefinition: {type: 'timer'} +}; + export let throwErrorEvent = { id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', type: 'ThrowEvent', @@ -37,6 +63,32 @@ export let throwErrorEvent = { eventDefinition: {type: 'error'} }; +export let throwErrorEventActive = { + completed: false, + current: true, + id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', + type: 'ThrowEvent', + width: 31, + height: 31, + x: 40, + y: 30, + properties: [{}], + eventDefinition: {type: 'error'} +}; + +export let throwErrorEventCompleted = { + completed: true, + current: false, + id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', + type: 'ThrowEvent', + width: 31, + height: 31, + x: 40, + y: 30, + properties: [{}], + eventDefinition: {type: 'error'} +}; + export let throwSignalEvent = { id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', type: 'ThrowEvent', @@ -48,6 +100,32 @@ export let throwSignalEvent = { eventDefinition: {type: 'signal'} }; +export let throwSignalEventActive = { + completed: false, + current: true, + id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', + type: 'ThrowEvent', + width: 31, + height: 31, + x: 40, + y: 30, + properties: [{}], + eventDefinition: {type: 'signal'} +}; + +export let throwSignalEventCompleted = { + completed: true, + current: false, + id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', + type: 'ThrowEvent', + width: 31, + height: 31, + x: 40, + y: 30, + properties: [{}], + eventDefinition: {type: 'signal'} +}; + export let throwMessageEvent = { id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', type: 'ThrowEvent', @@ -58,3 +136,29 @@ export let throwMessageEvent = { properties: [{}], eventDefinition: {type: 'message'} }; + +export let throwMessageEventActive = { + completed: false, + current: true, + id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', + type: 'ThrowEvent', + width: 31, + height: 31, + x: 40, + y: 30, + properties: [{}], + eventDefinition: {type: 'message'} +}; + +export let throwMessageEventCompleted = { + completed: true, + current: false, + id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7', + type: 'ThrowEvent', + width: 31, + height: 31, + x: 40, + y: 30, + properties: [{}], + eventDefinition: {type: 'message'} +}; diff --git a/ng2-components/ng2-activiti-diagrams/src/components/diagram.component.spec.ts b/ng2-components/ng2-activiti-diagrams/src/components/diagram.component.spec.ts index c46b8765f9..4c104a5b9c 100644 --- a/ng2-components/ng2-activiti-diagrams/src/components/diagram.component.spec.ts +++ b/ng2-components/ng2-activiti-diagrams/src/components/diagram.component.spec.ts @@ -1395,4 +1395,3696 @@ describe('Test ng2-activiti-diagrams ', () => { }); })); }); + + describe('Diagrams component Events with process instance id: ', () => { + + beforeEach(() => { + jasmine.Ajax.install(); + component.processInstanceId = '38399'; + component.metricPercentages = {startEvent: 0}; + }); + + afterEach(() => { + jasmine.Ajax.uninstall(); + }); + + it('Should render the Start Event', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let event: any = element.querySelector('diagram-start-event > diagram-event > raphael-circle'); + expect(event).not.toBeNull(); + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsEventsMock.startEvent]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Active Start Event', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let event: any = element.querySelector('diagram-start-event > diagram-event > raphael-circle[ng-reflect-stroke="#017501"]'); + expect(event).not.toBeNull(); + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsEventsMock.startEventActive]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Completed Start Event', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let event: any = element.querySelector('diagram-start-event > diagram-event > raphael-circle[ng-reflect-stroke="#2632aa"]'); + expect(event).not.toBeNull(); + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsEventsMock.startEventCompleted]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Start Timer Event', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).toBeDefined(); + let event: any = element.querySelector('diagram-start-event > diagram-event > raphael-circle'); + expect(event).not.toBeNull(); + + let iconEvent: any = element.querySelector('diagram-start-event > diagram-event >' + + ' diagram-container-icon-event > div > div > diagram-icon-timer > raphael-icon-timer'); + expect(iconEvent).not.toBeNull(); + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsEventsMock.startTimeEvent]}; + + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Active Start Timer Event', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).toBeDefined(); + let event: any = element.querySelector('diagram-start-event > diagram-event > raphael-circle[ng-reflect-stroke="#017501"]'); + expect(event).not.toBeNull(); + + let iconEvent: any = element.querySelector('diagram-start-event > diagram-event >' + + ' diagram-container-icon-event > div > div > diagram-icon-timer > raphael-icon-timer'); + expect(iconEvent).not.toBeNull(); + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsEventsMock.startTimeEventActive]}; + + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Completed Start Timer Event', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).toBeDefined(); + let event: any = element.querySelector('diagram-start-event > diagram-event > raphael-circle[ng-reflect-stroke="#2632aa"]'); + expect(event).not.toBeNull(); + + let iconEvent: any = element.querySelector('diagram-start-event > diagram-event >' + + ' diagram-container-icon-event > div > div > diagram-icon-timer > raphael-icon-timer'); + expect(iconEvent).not.toBeNull(); + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsEventsMock.startTimeEventCompleted]}; + + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Start Signal Event', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).toBeDefined(); + let event: any = element.querySelector('diagram-start-event > diagram-event > raphael-circle'); + expect(event).not.toBeNull(); + + let iconEvent: any = element.querySelector('diagram-start-event > diagram-event >' + + ' diagram-container-icon-event > div > div > diagram-icon-signal > raphael-icon-signal'); + expect(iconEvent).not.toBeNull(); + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsEventsMock.startSignalEvent]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Active Start Signal Event', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).toBeDefined(); + let event: any = element.querySelector('diagram-start-event > diagram-event > raphael-circle[ng-reflect-stroke="#017501"]'); + expect(event).not.toBeNull(); + + let iconEvent: any = element.querySelector('diagram-start-event > diagram-event >' + + ' diagram-container-icon-event > div > div > diagram-icon-signal > raphael-icon-signal'); + expect(iconEvent).not.toBeNull(); + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsEventsMock.startSignalEventActive]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Completed Start Signal Event', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).toBeDefined(); + let event: any = element.querySelector('diagram-start-event > diagram-event > raphael-circle[ng-reflect-stroke="#2632aa"]'); + expect(event).not.toBeNull(); + + let iconEvent: any = element.querySelector('diagram-start-event > diagram-event >' + + ' diagram-container-icon-event > div > div > diagram-icon-signal > raphael-icon-signal'); + expect(iconEvent).not.toBeNull(); + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsEventsMock.startSignalEventCompleted]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + + it('Should render the Start Message Event', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).toBeDefined(); + let event: any = element.querySelector('diagram-start-event > diagram-event > raphael-circle'); + expect(event).not.toBeNull(); + + let iconEvent: any = element.querySelector('diagram-start-event > diagram-event >' + + ' diagram-container-icon-event > div > div > diagram-icon-message > raphael-icon-message'); + expect(iconEvent).not.toBeNull(); + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsEventsMock.startMessageEvent]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Active Start Message Event', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).toBeDefined(); + let event: any = element.querySelector('diagram-start-event > diagram-event > raphael-circle[ng-reflect-stroke="#017501"]'); + expect(event).not.toBeNull(); + + let iconEvent: any = element.querySelector('diagram-start-event > diagram-event >' + + ' diagram-container-icon-event > div > div > diagram-icon-message > raphael-icon-message'); + expect(iconEvent).not.toBeNull(); + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsEventsMock.startMessageEventActive]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Completed Start Message Event', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).toBeDefined(); + let event: any = element.querySelector('diagram-start-event > diagram-event > raphael-circle[ng-reflect-stroke="#2632aa"]'); + expect(event).not.toBeNull(); + + let iconEvent: any = element.querySelector('diagram-start-event > diagram-event >' + + ' diagram-container-icon-event > div > div > diagram-icon-message > raphael-icon-message'); + expect(iconEvent).not.toBeNull(); + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsEventsMock.startMessageEventCompleted]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Start Error Event', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).toBeDefined(); + let event: any = element.querySelector('diagram-start-event > diagram-event > raphael-circle'); + expect(event).not.toBeNull(); + + let iconEvent: any = element.querySelector('diagram-start-event > diagram-event >' + + ' diagram-container-icon-event > div > div > diagram-icon-error > raphael-icon-error'); + expect(iconEvent).not.toBeNull(); + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsEventsMock.startErrorEvent]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Active Start Error Event', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).toBeDefined(); + let event: any = element.querySelector('diagram-start-event > diagram-event > raphael-circle[ng-reflect-stroke="#017501"]'); + expect(event).not.toBeNull(); + + let iconEvent: any = element.querySelector('diagram-start-event > diagram-event >' + + ' diagram-container-icon-event > div > div > diagram-icon-error > raphael-icon-error'); + expect(iconEvent).not.toBeNull(); + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsEventsMock.startErrorEventActive]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Completed Start Error Event', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).toBeDefined(); + let event: any = element.querySelector('diagram-start-event > diagram-event > raphael-circle[ng-reflect-stroke="#2632aa"]'); + expect(event).not.toBeNull(); + + let iconEvent: any = element.querySelector('diagram-start-event > diagram-event >' + + ' diagram-container-icon-event > div > div > diagram-icon-error > raphael-icon-error'); + expect(iconEvent).not.toBeNull(); + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsEventsMock.startErrorEventCompleted]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the End Event', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).toBeDefined(); + let event: any = element.querySelector('diagram-end-event > diagram-event > raphael-circle'); + expect(event).not.toBeNull(); + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsEventsMock.endEvent]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Active End Event', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).toBeDefined(); + let event: any = element.querySelector('diagram-end-event > diagram-event > raphael-circle[ng-reflect-stroke="#017501"]'); + expect(event).not.toBeNull(); + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsEventsMock.endEventActive]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Completed End Event', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).toBeDefined(); + let event: any = element.querySelector('diagram-end-event > diagram-event > raphael-circle[ng-reflect-stroke="#2632aa"]'); + expect(event).not.toBeNull(); + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsEventsMock.endEventCompleted]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the End Error Event', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).toBeDefined(); + let event: any = element.querySelector('diagram-end-event > diagram-event > raphael-circle'); + expect(event).not.toBeNull(); + + let iconEvent: any = element.querySelector('diagram-end-event > diagram-event >' + + ' diagram-container-icon-event > div > div > diagram-icon-error > raphael-icon-error'); + expect(iconEvent).not.toBeNull(); + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsEventsMock.endErrorEvent]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Active End Error Event', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).toBeDefined(); + let event: any = element.querySelector('diagram-end-event > diagram-event > raphael-circle[ng-reflect-stroke="#017501"]'); + expect(event).not.toBeNull(); + + let iconEvent: any = element.querySelector('diagram-end-event > diagram-event >' + + ' diagram-container-icon-event > div > div > diagram-icon-error > raphael-icon-error'); + expect(iconEvent).not.toBeNull(); + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsEventsMock.endErrorEventActive]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Completed End Error Event', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).toBeDefined(); + let event: any = element.querySelector('diagram-end-event > diagram-event > raphael-circle[ng-reflect-stroke="#2632aa"]'); + expect(event).not.toBeNull(); + + let iconEvent: any = element.querySelector('diagram-end-event > diagram-event >' + + ' diagram-container-icon-event > div > div > diagram-icon-error > raphael-icon-error'); + expect(iconEvent).not.toBeNull(); + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsEventsMock.endErrorEventCompleted]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + }); + + describe('Diagrams component Activities with process instance id: ', () => { + beforeEach(() => { + jasmine.Ajax.install(); + component.processInstanceId = '38399'; + component.metricPercentages = {startEvent: 0}; + }); + + afterEach(() => { + jasmine.Ajax.uninstall(); + }); + + it('Should render the User Task', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let task: any = element.querySelector('diagram-user-task > diagram-task > raphael-rect'); + expect(task).not.toBeNull(); + + let taskText: any = element.querySelector('diagram-user-task > diagram-task > raphael-multiline-text'); + expect(taskText).not.toBeNull(); + expect(taskText.attributes[1].value).toEqual('Fake User task'); + + let iconTask: any = element.querySelector('diagram-user-task > diagram-icon-user-task > raphael-icon-user'); + expect(iconTask).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].name); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsActivitiesMock.userTask]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Active User Task', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let task: any = element.querySelector('diagram-user-task > diagram-task > raphael-rect[ng-reflect-stroke="#017501"]'); + expect(task).not.toBeNull(); + + let taskText: any = element.querySelector('diagram-user-task > diagram-task > raphael-multiline-text'); + expect(taskText).not.toBeNull(); + expect(taskText.attributes[1].value).toEqual('Fake User task'); + + let iconTask: any = element.querySelector('diagram-user-task > diagram-icon-user-task > raphael-icon-user'); + expect(iconTask).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].name); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsActivitiesMock.userTaskActive]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Completed User Task', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let task: any = element.querySelector('diagram-user-task > diagram-task > raphael-rect[ng-reflect-stroke="#2632aa"]'); + expect(task).not.toBeNull(); + + let taskText: any = element.querySelector('diagram-user-task > diagram-task > raphael-multiline-text'); + expect(taskText).not.toBeNull(); + expect(taskText.attributes[1].value).toEqual('Fake User task'); + + let iconTask: any = element.querySelector('diagram-user-task > diagram-icon-user-task > raphael-icon-user'); + expect(iconTask).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].name); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsActivitiesMock.userTaskCompleted]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Manual Task', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let task: any = element.querySelector('diagram-manual-task > diagram-task > raphael-rect'); + expect(task).not.toBeNull(); + + let taskText: any = element.querySelector('diagram-manual-task > diagram-task > raphael-multiline-text'); + expect(taskText).not.toBeNull(); + expect(taskText.attributes[1].value).toEqual('Fake Manual task'); + + let iconTask: any = element.querySelector('diagram-manual-task > diagram-icon-manual-task > raphael-icon-manual'); + expect(iconTask).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].name); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsActivitiesMock.manualTask]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Active Manual Task', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let task: any = element.querySelector('diagram-manual-task > diagram-task > raphael-rect[ng-reflect-stroke="#017501"]'); + expect(task).not.toBeNull(); + + let taskText: any = element.querySelector('diagram-manual-task > diagram-task > raphael-multiline-text'); + expect(taskText).not.toBeNull(); + expect(taskText.attributes[1].value).toEqual('Fake Manual task'); + + let iconTask: any = element.querySelector('diagram-manual-task > diagram-icon-manual-task > raphael-icon-manual'); + expect(iconTask).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].name); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsActivitiesMock.manualTaskActive]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Completed Manual Task', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let task: any = element.querySelector('diagram-manual-task > diagram-task > raphael-rect[ng-reflect-stroke="#2632aa"]'); + expect(task).not.toBeNull(); + + let taskText: any = element.querySelector('diagram-manual-task > diagram-task > raphael-multiline-text'); + expect(taskText).not.toBeNull(); + expect(taskText.attributes[1].value).toEqual('Fake Manual task'); + + let iconTask: any = element.querySelector('diagram-manual-task > diagram-icon-manual-task > raphael-icon-manual'); + expect(iconTask).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].name); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsActivitiesMock.manualTaskCompleted]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Service Task', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let task: any = element.querySelector('diagram-service-task > diagram-task > raphael-rect'); + expect(task).not.toBeNull(); + + let taskText: any = element.querySelector('diagram-service-task > diagram-task > raphael-multiline-text'); + expect(taskText).not.toBeNull(); + expect(taskText.attributes[1].value).toEqual('Fake Service task'); + + let iconTask: any = element.querySelector('diagram-service-task > diagram-icon-service-task > raphael-icon-service'); + expect(iconTask).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].name); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsActivitiesMock.serviceTask]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Active Service Task', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let task: any = element.querySelector('diagram-service-task > diagram-task > raphael-rect[ng-reflect-stroke="#017501"]'); + expect(task).not.toBeNull(); + + let taskText: any = element.querySelector('diagram-service-task > diagram-task > raphael-multiline-text'); + expect(taskText).not.toBeNull(); + expect(taskText.attributes[1].value).toEqual('Fake Service task'); + + let iconTask: any = element.querySelector('diagram-service-task > diagram-icon-service-task > raphael-icon-service'); + expect(iconTask).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].name); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsActivitiesMock.serviceTaskActive]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Completed Service Task', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let task: any = element.querySelector('diagram-service-task > diagram-task > raphael-rect[ng-reflect-stroke="#2632aa"]'); + expect(task).not.toBeNull(); + + let taskText: any = element.querySelector('diagram-service-task > diagram-task > raphael-multiline-text'); + expect(taskText).not.toBeNull(); + expect(taskText.attributes[1].value).toEqual('Fake Service task'); + + let iconTask: any = element.querySelector('diagram-service-task > diagram-icon-service-task > raphael-icon-service'); + expect(iconTask).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].name); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsActivitiesMock.serviceTaskCompleted]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Service Mail Task', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(true).toBe(true); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsActivitiesMock.mailTask]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Service Camel Task', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let task: any = element.querySelector('diagram-camel-task > diagram-task > raphael-rect'); + expect(task).not.toBeNull(); + + let taskText: any = element.querySelector('diagram-camel-task > diagram-task > raphael-multiline-text'); + expect(taskText).not.toBeNull(); + expect(taskText.attributes[1].value).toEqual('Fake Camel task'); + + let iconTask: any = element.querySelector('diagram-camel-task > diagram-icon-camel-task > raphael-icon-camel'); + expect(iconTask).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].name); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsActivitiesMock.camelTask]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Active Service Camel Task', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let task: any = element.querySelector('diagram-camel-task > diagram-task > raphael-rect[ng-reflect-stroke="#017501"]'); + expect(task).not.toBeNull(); + + let taskText: any = element.querySelector('diagram-camel-task > diagram-task > raphael-multiline-text'); + expect(taskText).not.toBeNull(); + expect(taskText.attributes[1].value).toEqual('Fake Camel task'); + + let iconTask: any = element.querySelector('diagram-camel-task > diagram-icon-camel-task > raphael-icon-camel'); + expect(iconTask).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].name); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsActivitiesMock.camelTaskActive]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Completed Service Camel Task', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let task: any = element.querySelector('diagram-camel-task > diagram-task > raphael-rect[ng-reflect-stroke="#2632aa"]'); + expect(task).not.toBeNull(); + + let taskText: any = element.querySelector('diagram-camel-task > diagram-task > raphael-multiline-text'); + expect(taskText).not.toBeNull(); + expect(taskText.attributes[1].value).toEqual('Fake Camel task'); + + let iconTask: any = element.querySelector('diagram-camel-task > diagram-icon-camel-task > raphael-icon-camel'); + expect(iconTask).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].name); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsActivitiesMock.camelTaskCompleted]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Service Mule Task', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let task: any = element.querySelector('diagram-mule-task > diagram-task > raphael-rect'); + expect(task).not.toBeNull(); + + let taskText: any = element.querySelector('diagram-mule-task > diagram-task > raphael-multiline-text'); + expect(taskText).not.toBeNull(); + expect(taskText.attributes[1].value).toEqual('Fake Mule task'); + + let iconTask: any = element.querySelector('diagram-mule-task > diagram-icon-mule-task > raphael-icon-mule'); + expect(iconTask).not.toBeNull(); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsActivitiesMock.muleTask]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Active Service Mule Task', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let task: any = element.querySelector('diagram-mule-task > diagram-task > raphael-rect[ng-reflect-stroke="#017501"]'); + expect(task).not.toBeNull(); + + let taskText: any = element.querySelector('diagram-mule-task > diagram-task > raphael-multiline-text'); + expect(taskText).not.toBeNull(); + expect(taskText.attributes[1].value).toEqual('Fake Mule task'); + + let iconTask: any = element.querySelector('diagram-mule-task > diagram-icon-mule-task > raphael-icon-mule'); + expect(iconTask).not.toBeNull(); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsActivitiesMock.muleTaskActive]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Completed Service Mule Task', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let task: any = element.querySelector('diagram-mule-task > diagram-task > raphael-rect[ng-reflect-stroke="#2632aa"]'); + expect(task).not.toBeNull(); + + let taskText: any = element.querySelector('diagram-mule-task > diagram-task > raphael-multiline-text'); + expect(taskText).not.toBeNull(); + expect(taskText.attributes[1].value).toEqual('Fake Mule task'); + + let iconTask: any = element.querySelector('diagram-mule-task > diagram-icon-mule-task > raphael-icon-mule'); + expect(iconTask).not.toBeNull(); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsActivitiesMock.muleTaskCompleted]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Service Alfresco Publish Task', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let task: any = element.querySelector('diagram-alfresco-publish-task > diagram-task > raphael-rect'); + expect(task).not.toBeNull(); + + let taskText: any = element.querySelector('diagram-alfresco-publish-task > diagram-task > raphael-multiline-text'); + expect(taskText).not.toBeNull(); + expect(taskText.attributes[1].value).toEqual('Fake Alfresco Publish task'); + + let iconTask: any = element.querySelector('diagram-alfresco-publish-task > diagram-icon-alfresco-publish-task >' + + ' raphael-icon-alfresco-publish'); + expect(iconTask).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].name); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsActivitiesMock.alfrescoPublishTask]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Active Service Alfresco Publish Task', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let task: any = element.querySelector('diagram-alfresco-publish-task > diagram-task > raphael-rect[ng-reflect-stroke="#017501"]'); + expect(task).not.toBeNull(); + + let taskText: any = element.querySelector('diagram-alfresco-publish-task > diagram-task > raphael-multiline-text'); + expect(taskText).not.toBeNull(); + expect(taskText.attributes[1].value).toEqual('Fake Alfresco Publish task'); + + let iconTask: any = element.querySelector('diagram-alfresco-publish-task > diagram-icon-alfresco-publish-task >' + + ' raphael-icon-alfresco-publish'); + expect(iconTask).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].name); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsActivitiesMock.alfrescoPublishTaskActive]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Completed Service Alfresco Publish Task', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let task: any = element.querySelector('diagram-alfresco-publish-task > diagram-task > raphael-rect[ng-reflect-stroke="#2632aa"]'); + expect(task).not.toBeNull(); + + let taskText: any = element.querySelector('diagram-alfresco-publish-task > diagram-task > raphael-multiline-text'); + expect(taskText).not.toBeNull(); + expect(taskText.attributes[1].value).toEqual('Fake Alfresco Publish task'); + + let iconTask: any = element.querySelector('diagram-alfresco-publish-task > diagram-icon-alfresco-publish-task >' + + ' raphael-icon-alfresco-publish'); + expect(iconTask).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].name); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsActivitiesMock.alfrescoPublishTaskCompleted]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Service Google Drive Publish Task', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let task: any = element.querySelector('diagram-google-drive-publish-task > diagram-task > raphael-rect'); + expect(task).not.toBeNull(); + + let taskText: any = element.querySelector('diagram-google-drive-publish-task > diagram-task > raphael-multiline-text'); + expect(taskText).not.toBeNull(); + expect(taskText.attributes[1].value).toEqual('Fake Google Drive Publish task'); + + let iconTask: any = element.querySelector('diagram-google-drive-publish-task >' + + ' diagram-icon-google-drive-publish-task > raphael-icon-google-drive-publish'); + expect(iconTask).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].name); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsActivitiesMock.googleDrivePublishTask]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Active Service Google Drive Publish Task', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let task: any = element.querySelector('diagram-google-drive-publish-task > diagram-task > raphael-rect[ng-reflect-stroke="#017501"]'); + expect(task).not.toBeNull(); + + let taskText: any = element.querySelector('diagram-google-drive-publish-task > diagram-task > raphael-multiline-text'); + expect(taskText).not.toBeNull(); + expect(taskText.attributes[1].value).toEqual('Fake Google Drive Publish task'); + + let iconTask: any = element.querySelector('diagram-google-drive-publish-task >' + + ' diagram-icon-google-drive-publish-task > raphael-icon-google-drive-publish'); + expect(iconTask).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].name); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsActivitiesMock.googleDrivePublishTaskActive]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Completed Service Google Drive Publish Task', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let task: any = element.querySelector('diagram-google-drive-publish-task > diagram-task > raphael-rect[ng-reflect-stroke="#2632aa"]'); + expect(task).not.toBeNull(); + + let taskText: any = element.querySelector('diagram-google-drive-publish-task > diagram-task > raphael-multiline-text'); + expect(taskText).not.toBeNull(); + expect(taskText.attributes[1].value).toEqual('Fake Google Drive Publish task'); + + let iconTask: any = element.querySelector('diagram-google-drive-publish-task >' + + ' diagram-icon-google-drive-publish-task > raphael-icon-google-drive-publish'); + expect(iconTask).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].name); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsActivitiesMock.googleDrivePublishTaskCompleted]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Rest Call Task', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let task: any = element.querySelector('diagram-rest-call-task > diagram-task > raphael-rect'); + expect(task).not.toBeNull(); + + let taskText: any = element.querySelector('diagram-rest-call-task > diagram-task > raphael-multiline-text'); + expect(taskText).not.toBeNull(); + expect(taskText.attributes[1].value).toEqual('Fake Rest Call task'); + + let iconTask: any = element.querySelector('diagram-rest-call-task > diagram-icon-rest-call-task >' + + ' raphael-icon-rest-call'); + expect(iconTask).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].name); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsActivitiesMock.restCallTask]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Active Rest Call Task', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let task: any = element.querySelector('diagram-rest-call-task > diagram-task > raphael-rect[ng-reflect-stroke="#017501"]'); + expect(task).not.toBeNull(); + + let taskText: any = element.querySelector('diagram-rest-call-task > diagram-task > raphael-multiline-text'); + expect(taskText).not.toBeNull(); + expect(taskText.attributes[1].value).toEqual('Fake Rest Call task'); + + let iconTask: any = element.querySelector('diagram-rest-call-task > diagram-icon-rest-call-task >' + + ' raphael-icon-rest-call'); + expect(iconTask).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].name); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsActivitiesMock.restCallTaskActive]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Completed Rest Call Task', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let task: any = element.querySelector('diagram-rest-call-task > diagram-task > raphael-rect[ng-reflect-stroke="#2632aa"]'); + expect(task).not.toBeNull(); + + let taskText: any = element.querySelector('diagram-rest-call-task > diagram-task > raphael-multiline-text'); + expect(taskText).not.toBeNull(); + expect(taskText.attributes[1].value).toEqual('Fake Rest Call task'); + + let iconTask: any = element.querySelector('diagram-rest-call-task > diagram-icon-rest-call-task >' + + ' raphael-icon-rest-call'); + expect(iconTask).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].name); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsActivitiesMock.restCallTaskCompleted]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Service Box Publish Task', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let task: any = element.querySelector('diagram-box-publish-task > diagram-task > raphael-rect'); + expect(task).not.toBeNull(); + + let taskText: any = element.querySelector('diagram-box-publish-task > diagram-task > raphael-multiline-text'); + expect(taskText).not.toBeNull(); + expect(taskText.attributes[1].value).toEqual('Fake Box Publish task'); + + let iconTask: any = element.querySelector('diagram-box-publish-task >' + + ' diagram-icon-box-publish-task > raphael-icon-box-publish'); + expect(iconTask).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].name); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsActivitiesMock.boxPublishTask]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Active Service Box Publish Task', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let task: any = element.querySelector('diagram-box-publish-task > diagram-task > raphael-rect[ng-reflect-stroke="#017501"]'); + expect(task).not.toBeNull(); + + let taskText: any = element.querySelector('diagram-box-publish-task > diagram-task > raphael-multiline-text'); + expect(taskText).not.toBeNull(); + expect(taskText.attributes[1].value).toEqual('Fake Box Publish task'); + + let iconTask: any = element.querySelector('diagram-box-publish-task >' + + ' diagram-icon-box-publish-task > raphael-icon-box-publish'); + expect(iconTask).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].name); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsActivitiesMock.boxPublishTaskActive]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Completed Service Box Publish Task', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let task: any = element.querySelector('diagram-box-publish-task > diagram-task > raphael-rect[ng-reflect-stroke="#2632aa"]'); + expect(task).not.toBeNull(); + + let taskText: any = element.querySelector('diagram-box-publish-task > diagram-task > raphael-multiline-text'); + expect(taskText).not.toBeNull(); + expect(taskText.attributes[1].value).toEqual('Fake Box Publish task'); + + let iconTask: any = element.querySelector('diagram-box-publish-task >' + + ' diagram-icon-box-publish-task > raphael-icon-box-publish'); + expect(iconTask).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].name); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsActivitiesMock.boxPublishTaskCompleted]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Receive Task', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let task: any = element.querySelector('diagram-receive-task > diagram-task > raphael-rect'); + expect(task).not.toBeNull(); + + let taskText: any = element.querySelector('diagram-receive-task > diagram-task > raphael-multiline-text'); + expect(taskText).not.toBeNull(); + expect(taskText.attributes[1].value).toEqual('Fake Receive task'); + + let iconTask: any = element.querySelector('diagram-receive-task > diagram-icon-receive-task > raphael-icon-receive'); + expect(iconTask).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].name); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsActivitiesMock.receiveTask]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Active Receive Task', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let task: any = element.querySelector('diagram-receive-task > diagram-task > raphael-rect[ng-reflect-stroke="#017501"]'); + expect(task).not.toBeNull(); + + let taskText: any = element.querySelector('diagram-receive-task > diagram-task > raphael-multiline-text'); + expect(taskText).not.toBeNull(); + expect(taskText.attributes[1].value).toEqual('Fake Receive task'); + + let iconTask: any = element.querySelector('diagram-receive-task > diagram-icon-receive-task > raphael-icon-receive'); + expect(iconTask).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].name); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsActivitiesMock.receiveTaskActive]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Completed Receive Task', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let task: any = element.querySelector('diagram-receive-task > diagram-task > raphael-rect[ng-reflect-stroke="#2632aa"]'); + expect(task).not.toBeNull(); + + let taskText: any = element.querySelector('diagram-receive-task > diagram-task > raphael-multiline-text'); + expect(taskText).not.toBeNull(); + expect(taskText.attributes[1].value).toEqual('Fake Receive task'); + + let iconTask: any = element.querySelector('diagram-receive-task > diagram-icon-receive-task > raphael-icon-receive'); + expect(iconTask).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].name); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsActivitiesMock.receiveTaskCompleted]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Script Task', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let task: any = element.querySelector('diagram-script-task > diagram-task > raphael-rect'); + expect(task).not.toBeNull(); + + let taskText: any = element.querySelector('diagram-script-task > diagram-task > raphael-multiline-text'); + expect(taskText).not.toBeNull(); + expect(taskText.attributes[1].value).toEqual('Fake Script task'); + + let iconTask: any = element.querySelector('diagram-script-task > diagram-icon-script-task > raphael-icon-script'); + expect(iconTask).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].name); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsActivitiesMock.scriptTask]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Active Script Task', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let task: any = element.querySelector('diagram-script-task > diagram-task > raphael-rect[ng-reflect-stroke="#017501"]'); + expect(task).not.toBeNull(); + + let taskText: any = element.querySelector('diagram-script-task > diagram-task > raphael-multiline-text'); + expect(taskText).not.toBeNull(); + expect(taskText.attributes[1].value).toEqual('Fake Script task'); + + let iconTask: any = element.querySelector('diagram-script-task > diagram-icon-script-task > raphael-icon-script'); + expect(iconTask).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].name); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsActivitiesMock.scriptTaskActive]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Completed Script Task', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let task: any = element.querySelector('diagram-script-task > diagram-task > raphael-rect[ng-reflect-stroke="#2632aa"]'); + expect(task).not.toBeNull(); + + let taskText: any = element.querySelector('diagram-script-task > diagram-task > raphael-multiline-text'); + expect(taskText).not.toBeNull(); + expect(taskText.attributes[1].value).toEqual('Fake Script task'); + + let iconTask: any = element.querySelector('diagram-script-task > diagram-icon-script-task > raphael-icon-script'); + expect(iconTask).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].name); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsActivitiesMock.scriptTaskCompleted]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Business Rule Task', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let task: any = element.querySelector('diagram-business-rule-task > diagram-task > raphael-rect'); + expect(task).not.toBeNull(); + + let taskText: any = element.querySelector('diagram-business-rule-task > diagram-task > raphael-multiline-text'); + expect(taskText).not.toBeNull(); + expect(taskText.attributes[1].value).toEqual('Fake BusinessRule task'); + + let iconTask: any = element.querySelector('diagram-business-rule-task > diagram-icon-business-rule-task > raphael-icon-business-rule'); + expect(iconTask).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].name); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsActivitiesMock.businessRuleTask]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Active Business Rule Task', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let task: any = element.querySelector('diagram-business-rule-task > diagram-task > raphael-rect[ng-reflect-stroke="#017501"]'); + expect(task).not.toBeNull(); + + let taskText: any = element.querySelector('diagram-business-rule-task > diagram-task > raphael-multiline-text'); + expect(taskText).not.toBeNull(); + expect(taskText.attributes[1].value).toEqual('Fake BusinessRule task'); + + let iconTask: any = element.querySelector('diagram-business-rule-task > diagram-icon-business-rule-task > raphael-icon-business-rule'); + expect(iconTask).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].name); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsActivitiesMock.businessRuleTaskActive]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Completed Business Rule Task', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let task: any = element.querySelector('diagram-business-rule-task > diagram-task > raphael-rect[ng-reflect-stroke="#2632aa"]'); + expect(task).not.toBeNull(); + + let taskText: any = element.querySelector('diagram-business-rule-task > diagram-task > raphael-multiline-text'); + expect(taskText).not.toBeNull(); + expect(taskText.attributes[1].value).toEqual('Fake BusinessRule task'); + + let iconTask: any = element.querySelector('diagram-business-rule-task > diagram-icon-business-rule-task > raphael-icon-business-rule'); + expect(iconTask).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].name); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsActivitiesMock.businessRuleTaskCompleted]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + }); + + describe('Diagrams component Gateways with process instance id: ', () => { + beforeEach(() => { + jasmine.Ajax.install(); + component.processInstanceId = '38399'; + component.metricPercentages = {startEvent: 0}; + }); + + afterEach(() => { + jasmine.Ajax.uninstall(); + }); + + it('Should render the Exclusive Gateway', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let shape: any = element.querySelector('diagram-exclusive-gateway > diagram-gateway > raphael-rhombus'); + expect(shape).not.toBeNull(); + + let shape1: any = element.querySelector('diagram-exclusive-gateway > raphael-cross'); + expect(shape1).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsGatewaysMock.exclusiveGatway]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Active Exclusive Gateway', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let shape: any = element.querySelector('diagram-exclusive-gateway > diagram-gateway > raphael-rhombus[ng-reflect-stroke="#017501"]'); + expect(shape).not.toBeNull(); + + let shape1: any = element.querySelector('diagram-exclusive-gateway > raphael-cross'); + expect(shape1).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsGatewaysMock.exclusiveGatwayActive]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Completed Exclusive Gateway', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let shape: any = element.querySelector('diagram-exclusive-gateway > diagram-gateway > raphael-rhombus[ng-reflect-stroke="#2632aa"]'); + expect(shape).not.toBeNull(); + + let shape1: any = element.querySelector('diagram-exclusive-gateway > raphael-cross'); + expect(shape1).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsGatewaysMock.exclusiveGatwayCompleted]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Inclusive Gateway', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let shape: any = element.querySelector('diagram-inclusive-gateway > diagram-gateway > raphael-rhombus'); + expect(shape).not.toBeNull(); + + let shape1: any = element.querySelector('diagram-inclusive-gateway > raphael-circle'); + expect(shape1).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsGatewaysMock.inclusiveGatway]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Active Inclusive Gateway', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let shape: any = element.querySelector('diagram-inclusive-gateway > diagram-gateway > raphael-rhombus[ng-reflect-stroke="#017501"]'); + expect(shape).not.toBeNull(); + + let shape1: any = element.querySelector('diagram-inclusive-gateway > raphael-circle'); + expect(shape1).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsGatewaysMock.inclusiveGatwayActive]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Completed Inclusive Gateway', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let shape: any = element.querySelector('diagram-inclusive-gateway > diagram-gateway > raphael-rhombus[ng-reflect-stroke="#2632aa"]'); + expect(shape).not.toBeNull(); + + let shape1: any = element.querySelector('diagram-inclusive-gateway > raphael-circle'); + expect(shape1).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsGatewaysMock.inclusiveGatwayCompleted]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Parallel Gateway', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let shape: any = element.querySelector('diagram-parallel-gateway > diagram-gateway > raphael-rhombus'); + expect(shape).not.toBeNull(); + + let shape1: any = element.querySelector('diagram-parallel-gateway > raphael-plus'); + expect(shape1).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsGatewaysMock.parallelGatway]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Active Parallel Gateway', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let shape: any = element.querySelector('diagram-parallel-gateway > diagram-gateway > raphael-rhombus[ng-reflect-stroke="#017501"]'); + expect(shape).not.toBeNull(); + + let shape1: any = element.querySelector('diagram-parallel-gateway > raphael-plus'); + expect(shape1).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsGatewaysMock.parallelGatwayActive]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Completed Parallel Gateway', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let shape: any = element.querySelector('diagram-parallel-gateway > diagram-gateway > raphael-rhombus[ng-reflect-stroke="#2632aa"]'); + expect(shape).not.toBeNull(); + + let shape1: any = element.querySelector('diagram-parallel-gateway > raphael-plus'); + expect(shape1).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsGatewaysMock.parallelGatwayCompleted]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Event Gateway', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let shape: any = element.querySelector('diagram-event-gateway > diagram-gateway > raphael-rhombus'); + expect(shape).not.toBeNull(); + + let shape1: any = element.querySelector('diagram-event-gateway'); + expect(shape1).not.toBeNull(); + expect(shape1.children.length).toBe(4); + + let outerCircle = shape1.children[1]; + expect(outerCircle.localName).toEqual('raphael-circle'); + + let innerCircle = shape1.children[2]; + expect(innerCircle.localName).toEqual('raphael-circle'); + + let shape2: any = element.querySelector('diagram-event-gateway > raphael-pentagon'); + expect(shape2).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsGatewaysMock.eventGatway]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Active Event Gateway', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let shape: any = element.querySelector('diagram-event-gateway > diagram-gateway > raphael-rhombus[ng-reflect-stroke="#017501"]'); + expect(shape).not.toBeNull(); + + let shape1: any = element.querySelector('diagram-event-gateway'); + expect(shape1).not.toBeNull(); + expect(shape1.children.length).toBe(4); + + let outerCircle = shape1.children[1]; + expect(outerCircle.localName).toEqual('raphael-circle'); + + let innerCircle = shape1.children[2]; + expect(innerCircle.localName).toEqual('raphael-circle'); + + let shape2: any = element.querySelector('diagram-event-gateway > raphael-pentagon'); + expect(shape2).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsGatewaysMock.eventGatwayActive]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Completed Event Gateway', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let shape: any = element.querySelector('diagram-event-gateway > diagram-gateway > raphael-rhombus[ng-reflect-stroke="#2632aa"]'); + expect(shape).not.toBeNull(); + + let shape1: any = element.querySelector('diagram-event-gateway'); + expect(shape1).not.toBeNull(); + expect(shape1.children.length).toBe(4); + + let outerCircle = shape1.children[1]; + expect(outerCircle.localName).toEqual('raphael-circle'); + + let innerCircle = shape1.children[2]; + expect(innerCircle.localName).toEqual('raphael-circle'); + + let shape2: any = element.querySelector('diagram-event-gateway > raphael-pentagon'); + expect(shape2).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [diagramsGatewaysMock.eventGatwayCompleted]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + }); + + describe('Diagrams component Intermediate Catching events with process instance id: ', () => { + beforeEach(() => { + jasmine.Ajax.install(); + component.processInstanceId = '38399'; + component.metricPercentages = {startEvent: 0}; + }); + + afterEach(() => { + jasmine.Ajax.uninstall(); + }); + + it('Should render the Intermediate catching time event', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let shape: any = element.querySelector('diagram-intermediate-catching-event'); + expect(shape).not.toBeNull(); + expect(shape.children.length).toBe(4); + + let outerCircle = shape.children[0]; + expect(outerCircle.localName).toEqual('raphael-circle'); + + let innerCircle = shape.children[1]; + expect(innerCircle.localName).toEqual('raphael-circle'); + + let iconShape: any = element.querySelector('diagram-intermediate-catching-event > diagram-container-icon-event >' + + ' div > div > diagram-icon-timer'); + expect(iconShape).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [intermediateCatchingMock.intermediateCatchingTimeEvent]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Active Intermediate catching time event', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + + let coloredShape: any = element.querySelector('diagram-intermediate-catching-event>raphael-circle[ng-reflect-stroke="#017501"]'); + expect(coloredShape).not.toBeNull(); + + let shape: any = element.querySelector('diagram-intermediate-catching-event'); + expect(shape).not.toBeNull(); + expect(shape.children.length).toBe(4); + + let outerCircle = shape.children[0]; + expect(outerCircle.localName).toEqual('raphael-circle'); + + let innerCircle = shape.children[1]; + expect(innerCircle.localName).toEqual('raphael-circle'); + + let iconShape: any = element.querySelector('diagram-intermediate-catching-event > diagram-container-icon-event >' + + ' div > div > diagram-icon-timer'); + expect(iconShape).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [intermediateCatchingMock.intermediateCatchingTimeEventActive]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Completed Intermediate catching time event', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + + let coloredShape: any = element.querySelector('diagram-intermediate-catching-event>raphael-circle[ng-reflect-stroke="#2632aa"]'); + expect(coloredShape).not.toBeNull(); + + let shape: any = element.querySelector('diagram-intermediate-catching-event'); + expect(shape).not.toBeNull(); + expect(shape.children.length).toBe(4); + + let outerCircle = shape.children[0]; + expect(outerCircle.localName).toEqual('raphael-circle'); + + let innerCircle = shape.children[1]; + expect(innerCircle.localName).toEqual('raphael-circle'); + + let iconShape: any = element.querySelector('diagram-intermediate-catching-event > diagram-container-icon-event >' + + ' div > div > diagram-icon-timer'); + expect(iconShape).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [intermediateCatchingMock.intermediateCatchingTimeEventCompleted]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Intermediate catching error event', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let shape: any = element.querySelector('diagram-intermediate-catching-event'); + expect(shape).not.toBeNull(); + expect(shape.children.length).toBe(4); + + let outerCircle = shape.children[0]; + expect(outerCircle.localName).toEqual('raphael-circle'); + + let innerCircle = shape.children[1]; + expect(innerCircle.localName).toEqual('raphael-circle'); + + let iconShape: any = element.querySelector('diagram-intermediate-catching-event > diagram-container-icon-event >' + + ' div > div > diagram-icon-error'); + expect(iconShape).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [intermediateCatchingMock.intermediateCatchingErrorEvent]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Active Intermediate catching error event', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + + let coloredShape: any = element.querySelector('diagram-intermediate-catching-event>raphael-circle[ng-reflect-stroke="#017501"]'); + expect(coloredShape).not.toBeNull(); + + let shape: any = element.querySelector('diagram-intermediate-catching-event'); + expect(shape).not.toBeNull(); + expect(shape.children.length).toBe(4); + + let outerCircle = shape.children[0]; + expect(outerCircle.localName).toEqual('raphael-circle'); + + let innerCircle = shape.children[1]; + expect(innerCircle.localName).toEqual('raphael-circle'); + + let iconShape: any = element.querySelector('diagram-intermediate-catching-event > diagram-container-icon-event >' + + ' div > div > diagram-icon-error'); + expect(iconShape).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [intermediateCatchingMock.intermediateCatchingErrorEventActive]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Completed Intermediate catching error event', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + + let coloredShape: any = element.querySelector('diagram-intermediate-catching-event>raphael-circle[ng-reflect-stroke="#2632aa"]'); + expect(coloredShape).not.toBeNull(); + + let shape: any = element.querySelector('diagram-intermediate-catching-event'); + expect(shape).not.toBeNull(); + expect(shape.children.length).toBe(4); + + let outerCircle = shape.children[0]; + expect(outerCircle.localName).toEqual('raphael-circle'); + + let innerCircle = shape.children[1]; + expect(innerCircle.localName).toEqual('raphael-circle'); + + let iconShape: any = element.querySelector('diagram-intermediate-catching-event > diagram-container-icon-event >' + + ' div > div > diagram-icon-error'); + expect(iconShape).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [intermediateCatchingMock.intermediateCatchingErrorEventCompleted]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Intermediate catching signal event', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let shape: any = element.querySelector('diagram-intermediate-catching-event'); + expect(shape).not.toBeNull(); + expect(shape.children.length).toBe(4); + + let outerCircle = shape.children[0]; + expect(outerCircle.localName).toEqual('raphael-circle'); + + let innerCircle = shape.children[1]; + expect(innerCircle.localName).toEqual('raphael-circle'); + + let iconShape: any = element.querySelector('diagram-intermediate-catching-event > diagram-container-icon-event >' + + ' div > div > diagram-icon-signal'); + expect(iconShape).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [intermediateCatchingMock.intermediateCatchingSignalEvent]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Intermediate Active catching signal event', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + + let coloredShape: any = element.querySelector('diagram-intermediate-catching-event>raphael-circle[ng-reflect-stroke="#017501"]'); + expect(coloredShape).not.toBeNull(); + + let shape: any = element.querySelector('diagram-intermediate-catching-event'); + expect(shape).not.toBeNull(); + expect(shape.children.length).toBe(4); + + let outerCircle = shape.children[0]; + expect(outerCircle.localName).toEqual('raphael-circle'); + + let innerCircle = shape.children[1]; + expect(innerCircle.localName).toEqual('raphael-circle'); + + let iconShape: any = element.querySelector('diagram-intermediate-catching-event > diagram-container-icon-event >' + + ' div > div > diagram-icon-signal'); + expect(iconShape).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [intermediateCatchingMock.intermediateCatchingSignalEventActive]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Completed Intermediate catching signal event', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + + let coloredShape: any = element.querySelector('diagram-intermediate-catching-event>raphael-circle[ng-reflect-stroke="#2632aa"]'); + expect(coloredShape).not.toBeNull(); + + let shape: any = element.querySelector('diagram-intermediate-catching-event'); + expect(shape).not.toBeNull(); + expect(shape.children.length).toBe(4); + + let outerCircle = shape.children[0]; + expect(outerCircle.localName).toEqual('raphael-circle'); + + let innerCircle = shape.children[1]; + expect(innerCircle.localName).toEqual('raphael-circle'); + + let iconShape: any = element.querySelector('diagram-intermediate-catching-event > diagram-container-icon-event >' + + ' div > div > diagram-icon-signal'); + expect(iconShape).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [intermediateCatchingMock.intermediateCatchingSignalEventCompleted]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Intermediate catching signal message', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let shape: any = element.querySelector('diagram-intermediate-catching-event'); + expect(shape).not.toBeNull(); + expect(shape.children.length).toBe(4); + + let outerCircle = shape.children[0]; + expect(outerCircle.localName).toEqual('raphael-circle'); + + let innerCircle = shape.children[1]; + expect(innerCircle.localName).toEqual('raphael-circle'); + + let iconShape: any = element.querySelector('diagram-intermediate-catching-event > diagram-container-icon-event >' + + ' div > div > diagram-icon-message'); + expect(iconShape).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [intermediateCatchingMock.intermediateCatchingMessageEvent]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Active Intermediate catching signal message', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + + let coloredShape: any = element.querySelector('diagram-intermediate-catching-event>raphael-circle[ng-reflect-stroke="#017501"]'); + expect(coloredShape).not.toBeNull(); + + let shape: any = element.querySelector('diagram-intermediate-catching-event'); + expect(shape).not.toBeNull(); + expect(shape.children.length).toBe(4); + + let outerCircle = shape.children[0]; + expect(outerCircle.localName).toEqual('raphael-circle'); + + let innerCircle = shape.children[1]; + expect(innerCircle.localName).toEqual('raphael-circle'); + + let iconShape: any = element.querySelector('diagram-intermediate-catching-event > diagram-container-icon-event >' + + ' div > div > diagram-icon-message'); + expect(iconShape).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [intermediateCatchingMock.intermediateCatchingMessageEventActive]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Completed Intermediate catching signal message', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + + let coloredShape: any = element.querySelector('diagram-intermediate-catching-event>raphael-circle[ng-reflect-stroke="#2632aa"]'); + expect(coloredShape).not.toBeNull(); + + let shape: any = element.querySelector('diagram-intermediate-catching-event'); + expect(shape).not.toBeNull(); + expect(shape.children.length).toBe(4); + + let outerCircle = shape.children[0]; + expect(outerCircle.localName).toEqual('raphael-circle'); + + let innerCircle = shape.children[1]; + expect(innerCircle.localName).toEqual('raphael-circle'); + + let iconShape: any = element.querySelector('diagram-intermediate-catching-event > diagram-container-icon-event >' + + ' div > div > diagram-icon-message'); + expect(iconShape).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [intermediateCatchingMock.intermediateCatchingMessageEventCompleted]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + }); + + describe('Diagrams component Boundary events with process instance id: ', () => { + beforeEach(() => { + jasmine.Ajax.install(); + component.processInstanceId = '38399'; + component.metricPercentages = {startEvent: 0}; + }); + + afterEach(() => { + jasmine.Ajax.uninstall(); + }); + + it('Should render the Boundary time event', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let shape: any = element.querySelector('diagram-boundary-event'); + expect(shape).not.toBeNull(); + expect(shape.children.length).toBe(4); + + let outerCircle = shape.children[0]; + expect(outerCircle.localName).toEqual('raphael-circle'); + + let innerCircle = shape.children[1]; + expect(innerCircle.localName).toEqual('raphael-circle'); + + let iconShape: any = element.querySelector('diagram-boundary-event > diagram-container-icon-event >' + + ' div > div > diagram-icon-timer'); + expect(iconShape).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [boundaryEventMock.boundaryTimeEvent]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Active Boundary time event', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + + let coloredShape: any = element.querySelector('diagram-boundary-event>raphael-circle[ng-reflect-stroke="#017501"]'); + expect(coloredShape).not.toBeNull(); + + let shape: any = element.querySelector('diagram-boundary-event'); + expect(shape).not.toBeNull(); + expect(shape.children.length).toBe(4); + + let outerCircle = shape.children[0]; + expect(outerCircle.localName).toEqual('raphael-circle'); + + let innerCircle = shape.children[1]; + expect(innerCircle.localName).toEqual('raphael-circle'); + + let iconShape: any = element.querySelector('diagram-boundary-event > diagram-container-icon-event >' + + ' div > div > diagram-icon-timer'); + expect(iconShape).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [boundaryEventMock.boundaryTimeEventActive]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Completed Boundary time event', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + + let coloredShape: any = element.querySelector('diagram-boundary-event>raphael-circle[ng-reflect-stroke="#2632aa"]'); + expect(coloredShape).not.toBeNull(); + + let shape: any = element.querySelector('diagram-boundary-event'); + expect(shape).not.toBeNull(); + expect(shape.children.length).toBe(4); + + let outerCircle = shape.children[0]; + expect(outerCircle.localName).toEqual('raphael-circle'); + + let innerCircle = shape.children[1]; + expect(innerCircle.localName).toEqual('raphael-circle'); + + let iconShape: any = element.querySelector('diagram-boundary-event > diagram-container-icon-event >' + + ' div > div > diagram-icon-timer'); + expect(iconShape).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [boundaryEventMock.boundaryTimeEventCompleted]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Boundary error event', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let shape: any = element.querySelector('diagram-boundary-event'); + expect(shape).not.toBeNull(); + expect(shape.children.length).toBe(4); + + let outerCircle = shape.children[0]; + expect(outerCircle.localName).toEqual('raphael-circle'); + + let innerCircle = shape.children[1]; + expect(innerCircle.localName).toEqual('raphael-circle'); + + let iconShape: any = element.querySelector('diagram-boundary-event > diagram-container-icon-event >' + + ' div > div > diagram-icon-error'); + expect(iconShape).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [boundaryEventMock.boundaryErrorEvent]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Active Boundary error event', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + + let coloredShape: any = element.querySelector('diagram-boundary-event>raphael-circle[ng-reflect-stroke="#017501"]'); + expect(coloredShape).not.toBeNull(); + + let shape: any = element.querySelector('diagram-boundary-event'); + expect(shape).not.toBeNull(); + expect(shape.children.length).toBe(4); + + let outerCircle = shape.children[0]; + expect(outerCircle.localName).toEqual('raphael-circle'); + + let innerCircle = shape.children[1]; + expect(innerCircle.localName).toEqual('raphael-circle'); + + let iconShape: any = element.querySelector('diagram-boundary-event > diagram-container-icon-event >' + + ' div > div > diagram-icon-error'); + expect(iconShape).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [boundaryEventMock.boundaryErrorEventActive]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Completed Boundary error event', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + + let coloredShape: any = element.querySelector('diagram-boundary-event>raphael-circle[ng-reflect-stroke="#2632aa"]'); + expect(coloredShape).not.toBeNull(); + + let shape: any = element.querySelector('diagram-boundary-event'); + expect(shape).not.toBeNull(); + expect(shape.children.length).toBe(4); + + let outerCircle = shape.children[0]; + expect(outerCircle.localName).toEqual('raphael-circle'); + + let innerCircle = shape.children[1]; + expect(innerCircle.localName).toEqual('raphael-circle'); + + let iconShape: any = element.querySelector('diagram-boundary-event > diagram-container-icon-event >' + + ' div > div > diagram-icon-error'); + expect(iconShape).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [boundaryEventMock.boundaryErrorEventCompleted]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Boundary signal event', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let shape: any = element.querySelector('diagram-boundary-event'); + expect(shape).not.toBeNull(); + expect(shape.children.length).toBe(4); + + let outerCircle = shape.children[0]; + expect(outerCircle.localName).toEqual('raphael-circle'); + + let innerCircle = shape.children[1]; + expect(innerCircle.localName).toEqual('raphael-circle'); + + let iconShape: any = element.querySelector('diagram-boundary-event > diagram-container-icon-event >' + + ' div > div > diagram-icon-signal'); + expect(iconShape).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [boundaryEventMock.boundarySignalEvent]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Active Boundary signal event', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + + let coloredShape: any = element.querySelector('diagram-boundary-event>raphael-circle[ng-reflect-stroke="#017501"]'); + expect(coloredShape).not.toBeNull(); + + let shape: any = element.querySelector('diagram-boundary-event'); + expect(shape).not.toBeNull(); + expect(shape.children.length).toBe(4); + + let outerCircle = shape.children[0]; + expect(outerCircle.localName).toEqual('raphael-circle'); + + let innerCircle = shape.children[1]; + expect(innerCircle.localName).toEqual('raphael-circle'); + + let iconShape: any = element.querySelector('diagram-boundary-event > diagram-container-icon-event >' + + ' div > div > diagram-icon-signal'); + expect(iconShape).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [boundaryEventMock.boundarySignalEventActive]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Completed Boundary signal event', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + + let coloredShape: any = element.querySelector('diagram-boundary-event>raphael-circle[ng-reflect-stroke="#2632aa"]'); + expect(coloredShape).not.toBeNull(); + + let shape: any = element.querySelector('diagram-boundary-event'); + expect(shape).not.toBeNull(); + expect(shape.children.length).toBe(4); + + let outerCircle = shape.children[0]; + expect(outerCircle.localName).toEqual('raphael-circle'); + + let innerCircle = shape.children[1]; + expect(innerCircle.localName).toEqual('raphael-circle'); + + let iconShape: any = element.querySelector('diagram-boundary-event > diagram-container-icon-event >' + + ' div > div > diagram-icon-signal'); + expect(iconShape).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [boundaryEventMock.boundarySignalEventCompleted]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Boundary signal message', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let shape: any = element.querySelector('diagram-boundary-event'); + expect(shape).not.toBeNull(); + expect(shape.children.length).toBe(4); + + let outerCircle = shape.children[0]; + expect(outerCircle.localName).toEqual('raphael-circle'); + + let innerCircle = shape.children[1]; + expect(innerCircle.localName).toEqual('raphael-circle'); + + let iconShape: any = element.querySelector('diagram-boundary-event > diagram-container-icon-event >' + + ' div > div > diagram-icon-message'); + expect(iconShape).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [boundaryEventMock.boundaryMessageEvent]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Active Boundary signal message', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + + let coloredShape: any = element.querySelector('diagram-boundary-event>raphael-circle[ng-reflect-stroke="#017501"]'); + expect(coloredShape).not.toBeNull(); + + let shape: any = element.querySelector('diagram-boundary-event'); + expect(shape).not.toBeNull(); + expect(shape.children.length).toBe(4); + + let outerCircle = shape.children[0]; + expect(outerCircle.localName).toEqual('raphael-circle'); + + let innerCircle = shape.children[1]; + expect(innerCircle.localName).toEqual('raphael-circle'); + + let iconShape: any = element.querySelector('diagram-boundary-event > diagram-container-icon-event >' + + ' div > div > diagram-icon-message'); + expect(iconShape).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [boundaryEventMock.boundaryMessageEventActive]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Completed Boundary signal message', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + + let coloredShape: any = element.querySelector('diagram-boundary-event>raphael-circle[ng-reflect-stroke="#2632aa"]'); + expect(coloredShape).not.toBeNull(); + + let shape: any = element.querySelector('diagram-boundary-event'); + expect(shape).not.toBeNull(); + expect(shape.children.length).toBe(4); + + let outerCircle = shape.children[0]; + expect(outerCircle.localName).toEqual('raphael-circle'); + + let innerCircle = shape.children[1]; + expect(innerCircle.localName).toEqual('raphael-circle'); + + let iconShape: any = element.querySelector('diagram-boundary-event > diagram-container-icon-event >' + + ' div > div > diagram-icon-message'); + expect(iconShape).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [boundaryEventMock.boundaryMessageEventCompleted]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Boundary signal message', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let shape: any = element.querySelector('diagram-boundary-event'); + expect(shape).not.toBeNull(); + expect(shape.children.length).toBe(4); + + let outerCircle = shape.children[0]; + expect(outerCircle.localName).toEqual('raphael-circle'); + + let innerCircle = shape.children[1]; + expect(innerCircle.localName).toEqual('raphael-circle'); + + let iconShape: any = element.querySelector('diagram-boundary-event > diagram-container-icon-event >' + + ' div > div > diagram-icon-message'); + expect(iconShape).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [boundaryEventMock.boundaryMessageEvent]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Active Boundary signal message', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + + let coloredShape: any = element.querySelector('diagram-boundary-event>raphael-circle[ng-reflect-stroke="#017501"]'); + expect(coloredShape).not.toBeNull(); + + let shape: any = element.querySelector('diagram-boundary-event'); + expect(shape).not.toBeNull(); + expect(shape.children.length).toBe(4); + + let outerCircle = shape.children[0]; + expect(outerCircle.localName).toEqual('raphael-circle'); + + let innerCircle = shape.children[1]; + expect(innerCircle.localName).toEqual('raphael-circle'); + + let iconShape: any = element.querySelector('diagram-boundary-event > diagram-container-icon-event >' + + ' div > div > diagram-icon-message'); + expect(iconShape).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [boundaryEventMock.boundaryMessageEventActive]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Completed Boundary signal message', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + + let coloredShape: any = element.querySelector('diagram-boundary-event>raphael-circle[ng-reflect-stroke="#2632aa"]'); + expect(coloredShape).not.toBeNull(); + + let shape: any = element.querySelector('diagram-boundary-event'); + expect(shape).not.toBeNull(); + expect(shape.children.length).toBe(4); + + let outerCircle = shape.children[0]; + expect(outerCircle.localName).toEqual('raphael-circle'); + + let innerCircle = shape.children[1]; + expect(innerCircle.localName).toEqual('raphael-circle'); + + let iconShape: any = element.querySelector('diagram-boundary-event > diagram-container-icon-event >' + + ' div > div > diagram-icon-message'); + expect(iconShape).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [boundaryEventMock.boundaryMessageEventCompleted]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + }); + + describe('Diagrams component Throw events with process instance id: ', () => { + beforeEach(() => { + jasmine.Ajax.install(); + component.processInstanceId = '38399'; + component.metricPercentages = {startEvent: 0}; + }); + + afterEach(() => { + jasmine.Ajax.uninstall(); + }); + + it('Should render the Throw time event', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let shape: any = element.querySelector('diagram-throw-event'); + expect(shape).not.toBeNull(); + expect(shape.children.length).toBe(4); + + let outerCircle = shape.children[0]; + expect(outerCircle.localName).toEqual('raphael-circle'); + + let innerCircle = shape.children[1]; + expect(innerCircle.localName).toEqual('raphael-circle'); + + let iconShape: any = element.querySelector('diagram-throw-event > diagram-container-icon-event >' + + ' div > div > diagram-icon-timer'); + expect(iconShape).not.toBeNull(); + }); + }); + component.ngOnChanges(); + let resp = {elements: [throwEventMock.throwTimeEvent]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Active Throw time event', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + + let coloredShape: any = element.querySelector('diagram-throw-event>raphael-circle[ng-reflect-stroke="#017501"]'); + expect(coloredShape).not.toBeNull(); + + let shape: any = element.querySelector('diagram-throw-event'); + expect(shape).not.toBeNull(); + expect(shape.children.length).toBe(4); + + let outerCircle = shape.children[0]; + expect(outerCircle.localName).toEqual('raphael-circle'); + + let innerCircle = shape.children[1]; + expect(innerCircle.localName).toEqual('raphael-circle'); + + let iconShape: any = element.querySelector('diagram-throw-event > diagram-container-icon-event >' + + ' div > div > diagram-icon-timer'); + expect(iconShape).not.toBeNull(); + }); + }); + component.ngOnChanges(); + let resp = {elements: [throwEventMock.throwTimeEventActive]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Completed Throw time event', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + + let coloredShape: any = element.querySelector('diagram-throw-event>raphael-circle[ng-reflect-stroke="#2632aa"]'); + expect(coloredShape).not.toBeNull(); + + let shape: any = element.querySelector('diagram-throw-event'); + expect(shape).not.toBeNull(); + expect(shape.children.length).toBe(4); + + let outerCircle = shape.children[0]; + expect(outerCircle.localName).toEqual('raphael-circle'); + + let innerCircle = shape.children[1]; + expect(innerCircle.localName).toEqual('raphael-circle'); + + let iconShape: any = element.querySelector('diagram-throw-event > diagram-container-icon-event >' + + ' div > div > diagram-icon-timer'); + expect(iconShape).not.toBeNull(); + }); + }); + component.ngOnChanges(); + let resp = {elements: [throwEventMock.throwTimeEventCompleted]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Throw error event', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let shape: any = element.querySelector('diagram-throw-event'); + expect(shape).not.toBeNull(); + expect(shape.children.length).toBe(4); + + let outerCircle = shape.children[0]; + expect(outerCircle.localName).toEqual('raphael-circle'); + + let innerCircle = shape.children[1]; + expect(innerCircle.localName).toEqual('raphael-circle'); + + let iconShape: any = element.querySelector('diagram-throw-event > diagram-container-icon-event >' + + ' div > div > diagram-icon-error'); + expect(iconShape).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [throwEventMock.throwErrorEvent]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Active Throw error event', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + + let coloredShape: any = element.querySelector('diagram-throw-event>raphael-circle[ng-reflect-stroke="#017501"]'); + expect(coloredShape).not.toBeNull(); + + let shape: any = element.querySelector('diagram-throw-event'); + expect(shape).not.toBeNull(); + expect(shape.children.length).toBe(4); + + let outerCircle = shape.children[0]; + expect(outerCircle.localName).toEqual('raphael-circle'); + + let innerCircle = shape.children[1]; + expect(innerCircle.localName).toEqual('raphael-circle'); + + let iconShape: any = element.querySelector('diagram-throw-event > diagram-container-icon-event >' + + ' div > div > diagram-icon-error'); + expect(iconShape).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [throwEventMock.throwErrorEventActive]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Completed Throw error event', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + + let coloredShape: any = element.querySelector('diagram-throw-event>raphael-circle[ng-reflect-stroke="#2632aa"]'); + expect(coloredShape).not.toBeNull(); + + let shape: any = element.querySelector('diagram-throw-event'); + expect(shape).not.toBeNull(); + expect(shape.children.length).toBe(4); + + let outerCircle = shape.children[0]; + expect(outerCircle.localName).toEqual('raphael-circle'); + + let innerCircle = shape.children[1]; + expect(innerCircle.localName).toEqual('raphael-circle'); + + let iconShape: any = element.querySelector('diagram-throw-event > diagram-container-icon-event >' + + ' div > div > diagram-icon-error'); + expect(iconShape).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [throwEventMock.throwErrorEventCompleted]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Throw signal event', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let shape: any = element.querySelector('diagram-throw-event'); + expect(shape).not.toBeNull(); + expect(shape.children.length).toBe(4); + + let outerCircle = shape.children[0]; + expect(outerCircle.localName).toEqual('raphael-circle'); + + let innerCircle = shape.children[1]; + expect(innerCircle.localName).toEqual('raphael-circle'); + + let iconShape: any = element.querySelector('diagram-throw-event > diagram-container-icon-event >' + + ' div > div > diagram-icon-signal'); + expect(iconShape).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [throwEventMock.throwSignalEvent]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Active Throw signal event', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + + let coloredShape: any = element.querySelector('diagram-throw-event>raphael-circle[ng-reflect-stroke="#017501"]'); + expect(coloredShape).not.toBeNull(); + + let shape: any = element.querySelector('diagram-throw-event'); + expect(shape).not.toBeNull(); + expect(shape.children.length).toBe(4); + + let outerCircle = shape.children[0]; + expect(outerCircle.localName).toEqual('raphael-circle'); + + let innerCircle = shape.children[1]; + expect(innerCircle.localName).toEqual('raphael-circle'); + + let iconShape: any = element.querySelector('diagram-throw-event > diagram-container-icon-event >' + + ' div > div > diagram-icon-signal'); + expect(iconShape).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [throwEventMock.throwSignalEventActive]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Completed Throw signal event', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + + let coloredShape: any = element.querySelector('diagram-throw-event>raphael-circle[ng-reflect-stroke="#2632aa"]'); + expect(coloredShape).not.toBeNull(); + + let shape: any = element.querySelector('diagram-throw-event'); + expect(shape).not.toBeNull(); + expect(shape.children.length).toBe(4); + + let outerCircle = shape.children[0]; + expect(outerCircle.localName).toEqual('raphael-circle'); + + let innerCircle = shape.children[1]; + expect(innerCircle.localName).toEqual('raphael-circle'); + + let iconShape: any = element.querySelector('diagram-throw-event > diagram-container-icon-event >' + + ' div > div > diagram-icon-signal'); + expect(iconShape).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [throwEventMock.throwSignalEventCompleted]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Throw signal message', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let shape: any = element.querySelector('diagram-throw-event'); + expect(shape).not.toBeNull(); + expect(shape.children.length).toBe(4); + + let outerCircle = shape.children[0]; + expect(outerCircle.localName).toEqual('raphael-circle'); + + let innerCircle = shape.children[1]; + expect(innerCircle.localName).toEqual('raphael-circle'); + + let iconShape: any = element.querySelector('diagram-throw-event > diagram-container-icon-event >' + + ' div > div > diagram-icon-message'); + expect(iconShape).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [throwEventMock.throwMessageEvent]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Active Throw signal message', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + + let coloredShape: any = element.querySelector('diagram-throw-event>raphael-circle[ng-reflect-stroke="#017501"]'); + expect(coloredShape).not.toBeNull(); + + let shape: any = element.querySelector('diagram-throw-event'); + expect(shape).not.toBeNull(); + expect(shape.children.length).toBe(4); + + let outerCircle = shape.children[0]; + expect(outerCircle.localName).toEqual('raphael-circle'); + + let innerCircle = shape.children[1]; + expect(innerCircle.localName).toEqual('raphael-circle'); + + let iconShape: any = element.querySelector('diagram-throw-event > diagram-container-icon-event >' + + ' div > div > diagram-icon-message'); + expect(iconShape).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [throwEventMock.throwMessageEventActive]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Completed Throw signal message', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + + let coloredShape: any = element.querySelector('diagram-throw-event>raphael-circle[ng-reflect-stroke="#2632aa"]'); + expect(coloredShape).not.toBeNull(); + + let shape: any = element.querySelector('diagram-throw-event'); + expect(shape).not.toBeNull(); + expect(shape.children.length).toBe(4); + + let outerCircle = shape.children[0]; + expect(outerCircle.localName).toEqual('raphael-circle'); + + let innerCircle = shape.children[1]; + expect(innerCircle.localName).toEqual('raphael-circle'); + + let iconShape: any = element.querySelector('diagram-throw-event > diagram-container-icon-event >' + + ' div > div > diagram-icon-message'); + expect(iconShape).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [throwEventMock.throwMessageEventCompleted]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Throw signal message', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let shape: any = element.querySelector('diagram-throw-event'); + expect(shape).not.toBeNull(); + expect(shape.children.length).toBe(4); + + let outerCircle = shape.children[0]; + expect(outerCircle.localName).toEqual('raphael-circle'); + + let innerCircle = shape.children[1]; + expect(innerCircle.localName).toEqual('raphael-circle'); + + let iconShape: any = element.querySelector('diagram-throw-event > diagram-container-icon-event >' + + ' div > div > diagram-icon-message'); + expect(iconShape).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [throwEventMock.throwMessageEvent]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Active Throw signal message', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + + let coloredShape: any = element.querySelector('diagram-throw-event>raphael-circle[ng-reflect-stroke="#017501"]'); + expect(coloredShape).not.toBeNull(); + + let shape: any = element.querySelector('diagram-throw-event'); + expect(shape).not.toBeNull(); + expect(shape.children.length).toBe(4); + + let outerCircle = shape.children[0]; + expect(outerCircle.localName).toEqual('raphael-circle'); + + let innerCircle = shape.children[1]; + expect(innerCircle.localName).toEqual('raphael-circle'); + + let iconShape: any = element.querySelector('diagram-throw-event > diagram-container-icon-event >' + + ' div > div > diagram-icon-message'); + expect(iconShape).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [throwEventMock.throwMessageEventActive]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Completed Throw signal message', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + + let coloredShape: any = element.querySelector('diagram-throw-event>raphael-circle[ng-reflect-stroke="#2632aa"]'); + expect(coloredShape).not.toBeNull(); + + let shape: any = element.querySelector('diagram-throw-event'); + expect(shape).not.toBeNull(); + expect(shape.children.length).toBe(4); + + let outerCircle = shape.children[0]; + expect(outerCircle.localName).toEqual('raphael-circle'); + + let innerCircle = shape.children[1]; + expect(innerCircle.localName).toEqual('raphael-circle'); + + let iconShape: any = element.querySelector('diagram-throw-event > diagram-container-icon-event >' + + ' div > div > diagram-icon-message'); + expect(iconShape).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [throwEventMock.throwMessageEventCompleted]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + }); + + describe('Diagrams component Structural with process instance id: ', () => { + beforeEach(() => { + jasmine.Ajax.install(); + component.processInstanceId = '38399'; + component.metricPercentages = {startEvent: 0}; + }); + + afterEach(() => { + jasmine.Ajax.uninstall(); + }); + + it('Should render the Subprocess', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let shape: any = element.querySelector('diagram-subprocess > raphael-rect'); + expect(shape).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [structuralMock.subProcess]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Active Subprocess', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let shape: any = element.querySelector('diagram-subprocess > raphael-rect[ng-reflect-stroke="#017501"]'); + expect(shape).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [structuralMock.subProcessActive]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Completed Subprocess', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let shape: any = element.querySelector('diagram-subprocess > raphael-rect[ng-reflect-stroke="#2632aa"]'); + expect(shape).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [structuralMock.subProcessCompleted]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Event Subprocess', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let shape: any = element.querySelector('diagram-event-subprocess > raphael-rect'); + expect(shape).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [structuralMock.eventSubProcess]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Active Event Subprocess', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let shape: any = element.querySelector('diagram-event-subprocess > raphael-rect[ng-reflect-stroke="#017501"]'); + expect(shape).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [structuralMock.eventSubProcessActive]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Completed Event Subprocess', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let shape: any = element.querySelector('diagram-event-subprocess > raphael-rect[ng-reflect-stroke="#2632aa"]'); + expect(shape).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.elements[0].id); + expect(tooltip.textContent).toContain(res.elements[0].type); + }); + }); + component.ngOnChanges(); + let resp = {elements: [structuralMock.eventSubProcessCompleted]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + }); + + describe('Diagrams component Swim lane with process instance id: ', () => { + beforeEach(() => { + jasmine.Ajax.install(); + component.processInstanceId = '38399'; + component.metricPercentages = {startEvent: 0}; + }); + + afterEach(() => { + jasmine.Ajax.uninstall(); + }); + + it('Should render the Pool', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let shape: any = element.querySelector('diagram-pool > raphael-rect'); + expect(shape).not.toBeNull(); + + let shapeText: any = element.querySelector('diagram-pool > raphael-text'); + expect(shapeText).not.toBeNull(); + expect(shapeText.attributes[2].value).toEqual('Activiti'); + }); + }); + component.ngOnChanges(); + let resp = {pools: [swimLanesMock.pool]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + + it('Should render the Pool with Lanes', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let shapeLane: any = element.querySelector('diagram-lanes > div > div > diagram-lane'); + expect(shapeLane).not.toBeNull(); + + let shapeRect: any = element.querySelector('diagram-lanes > div > div > diagram-lane > raphael-rect'); + expect(shapeRect).not.toBeNull(); + + let shapeText: any = element.querySelector('diagram-lanes > div > div > diagram-lane > raphael-text'); + expect(shapeText).not.toBeNull(); + expect(shapeText.attributes[2].value).toEqual('Beckend'); + }); + }); + component.ngOnChanges(); + let resp = {pools: [swimLanesMock.poolLanes]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + }); + + describe('Diagrams component Flows with process instance id: ', () => { + beforeEach(() => { + jasmine.Ajax.install(); + component.processInstanceId = '38399'; + component.metricPercentages = {startEvent: 0}; + }); + + afterEach(() => { + jasmine.Ajax.uninstall(); + }); + + it('Should render the flow', async(() => { + component.onSuccess.subscribe((res) => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(res).not.toBeNull(); + let shape: any = element.querySelector('diagram-sequence-flow > raphael-flow-arrow'); + expect(shape).not.toBeNull(); + + let tooltip: any = element.querySelector('diagram-tooltip > div'); + expect(tooltip.textContent).toContain(res.flows[0].id); + expect(tooltip.textContent).toContain(res.flows[0].type); + }); + }); + component.ngOnChanges(); + let resp = {flows: [flowsMock.flow]}; + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: resp + }); + })); + }); }); diff --git a/ng2-components/ng2-activiti-diagrams/src/components/diagram.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/diagram.component.ts index ba8cddc88e..b22e99e270 100644 --- a/ng2-components/ng2-activiti-diagrams/src/components/diagram.component.ts +++ b/ng2-components/ng2-activiti-diagrams/src/components/diagram.component.ts @@ -31,6 +31,9 @@ export class DiagramComponent { @Input() processDefinitionId: any; + @Input() + processInstanceId: any; + @Input() metricPercentages: any; @@ -71,14 +74,34 @@ export class DiagramComponent { ngOnChanges(changes: SimpleChanges) { this.reset(); this.diagramColorService.setTotalColors(this.metricColor); - this.getProcessDefinitionModel(this.processDefinitionId); + if (this.processDefinitionId) { + this.getProcessDefinitionModel(this.processDefinitionId); + } else { + this.getRunningProcessDefinitionModel(this.processInstanceId); + } + } + + getRunningProcessDefinitionModel(processInstanceId: string) { + this.diagramsService.getRunningProcessDefinitionModel(processInstanceId).subscribe( + (res: any) => { + this.diagram = new DiagramModel(res); + this.raphaelService.setting(this.diagram.diagramWidth + this.PADDING_WIDTH, + this.diagram.diagramHeight + this.PADDING_HEIGHT); + this.setMetricValueToDiagramElement(this.diagram, this.metricPercentages, this.metricType); + this.onSuccess.emit(res); + }, + (err: any) => { + this.onError.emit(err); + } + ); } getProcessDefinitionModel(processDefinitionId: string) { this.diagramsService.getProcessDefinitionModel(processDefinitionId).subscribe( (res: any) => { this.diagram = new DiagramModel(res); - this.raphaelService.setting(this.diagram.diagramWidth + this.PADDING_WIDTH, this.diagram.diagramHeight + this.PADDING_HEIGHT); + this.raphaelService.setting(this.diagram.diagramWidth + this.PADDING_WIDTH, + this.diagram.diagramHeight + this.PADDING_HEIGHT); this.setMetricValueToDiagramElement(this.diagram, this.metricPercentages, this.metricType); this.onSuccess.emit(res); }, diff --git a/ng2-components/ng2-activiti-diagrams/src/components/raphael/raphael-multiline-text.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/raphael/raphael-multiline-text.component.ts index 60a1961804..ed2a22bc66 100644 --- a/ng2-components/ng2-activiti-diagrams/src/components/raphael/raphael-multiline-text.component.ts +++ b/ng2-components/ng2-activiti-diagrams/src/components/raphael/raphael-multiline-text.component.ts @@ -74,6 +74,10 @@ export class RaphaelMultilineTextDirective extends RaphaelBase implements OnInit } private formatText(textPaper, text, elementWidth) { + let pText = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'; + textPaper.attr({ + 'text': pText + }); let letterWidth = textPaper.getBBox().width / text.length; let removedLineBreaks = text.split('\n'); let actualRowLength = 0, formattedText = []; diff --git a/ng2-components/ng2-activiti-diagrams/src/models/diagram.model.ts b/ng2-components/ng2-activiti-diagrams/src/models/diagram.model.ts index 32510ca0db..a50e1fc604 100644 --- a/ng2-components/ng2-activiti-diagrams/src/models/diagram.model.ts +++ b/ng2-components/ng2-activiti-diagrams/src/models/diagram.model.ts @@ -50,6 +50,8 @@ export class DiagramModel { } export class DiagramElementModel { + completed: boolean; + current: boolean; height: string; id: string; name: string; @@ -65,6 +67,8 @@ export class DiagramElementModel { constructor(obj?: any) { if (obj) { + this.completed = obj.completed || false; + this.current = obj.current || false; this.height = obj.height || ''; this.id = obj.id || ''; this.name = obj.name || ''; @@ -102,6 +106,8 @@ export class DiagramElementPropertyModel { } export class DiagramFlowElementModel { + completed: boolean; + current: boolean; id: string; properties: any[] = []; sourceRef: string; @@ -111,6 +117,8 @@ export class DiagramFlowElementModel { constructor(obj?: any) { if (obj) { + this.completed = obj.completed || false; + this.current = obj.current || false; this.id = obj.id; this.properties = obj.properties; this.sourceRef = obj.sourceRef; diff --git a/ng2-components/ng2-activiti-diagrams/src/services/diagrams.service.ts b/ng2-components/ng2-activiti-diagrams/src/services/diagrams.service.ts index de67d44b59..af3da58afe 100644 --- a/ng2-components/ng2-activiti-diagrams/src/services/diagrams.service.ts +++ b/ng2-components/ng2-activiti-diagrams/src/services/diagrams.service.ts @@ -40,6 +40,17 @@ export class DiagramsService { }).catch(err => this.handleError(err)); } + getRunningProcessDefinitionModel(processInstanceId: string): Observable { + let url = `${this.settingsService.getBPMApiBaseUrl()}/app/rest/process-instances/${processInstanceId}/model-json`; + let options = this.getRequestOptions(); + return this.http + .get(url, options) + .map((res: any) => { + let body = res.json(); + return body; + }).catch(err => this.handleError(err)); + } + public getHeaders(): Headers { return new Headers({ 'Accept': 'application/json',