Add translation for "Issues for child elements" heading

lib/Linting.js

@@ -176,7 +176,7 @@ Linting.prototype._formatIssues = function(issues) {
         report.id = referringParticipant[0].id;
       } else {
 
-        // (2.2) If there is no partcipant to display it on, display it to root
+        // (2.2) If there is no participant to display it on, display it to root
         report.id = self._canvas.getRootElement().id;
       }
 
@@ -222,7 +222,7 @@ Linting.prototype._setActive = function(active) {
 };
 
 /**
- * Update overlays. Always lint and check wether overlays need update or not.
+ * Update overlays. Always lint and check whether overlays need update or not.
  */
 Linting.prototype.update = function() {
   var self = this;
@@ -404,7 +404,8 @@ Linting.prototype._createElementIssues = function(elementId, elementIssues) {
   if (childErrors || childWarnings || childInfos) {
     var $childIssues = domify('<div class="bjsl-child-issues"></div>');
     var $childIssueList = domify('<ul></ul>');
-    var $childIssueLabel = domify('<a class="bjsl-issue-heading">Issues for child elements:</a>');
+    var childLabel = this._translate('Issues for child elements');
+    var $childIssueLabel = domify('<a class="bjsl-issue-heading">' + childLabel + ':</a>');
 
     if (childErrors) {
       this._addErrors($childIssueList, childErrors);
@@ -419,8 +420,8 @@ Linting.prototype._createElementIssues = function(elementId, elementIssues) {
     }
 
     if (errors || warnings) {
-      var $childIssuesSeperator = domify('<hr/>');
-      $childIssues.appendChild($childIssuesSeperator);
+      var $childIssuesSeparator = domify('<hr/>');
+      $childIssues.appendChild($childIssuesSeparator);
     }
 
     $childIssues.appendChild($childIssueLabel);

test/spec/LintingSpec.js

@@ -701,23 +701,6 @@ describe('linting - i18n', function() {
 
     document.body.appendChild(el);
 
-    const translations = {
-      'Toggle linting overlays': 'Перемкнути перевірку',
-      'Process is missing end event': 'У процеса відсутня завершальна подія',
-      '{errors} Errors, {warnings} Warnings': '{errors} помилок, {warnings} попередженнь'
-    };
-
-    function translateModule(template, replacements = {}) {
-
-      // Translate
-      let transTemplate = translations[template] || template;
-
-      // Replace
-      return transTemplate.replace(/{([^}]+)}/g, function(_, key) {
-        return key in replacements ? replacements[key] : '{' + key + '}';
-      });
-    }
-
     // given
     const modeler = new Modeler({
       container: el,
@@ -750,10 +733,61 @@ describe('linting - i18n', function() {
     expect(endEventRequiredMessage.dataset.message).to.equal('У процеса відсутня завершальна подія');
   });
 
+  it('should translate child issues grouping text', async function() {
+
+    const el = document.createElement('div');
+    el.style.width = '100%';
+    el.style.height = '100%';
+    el.style.position = 'fixed';
+    document.body.appendChild(el);
+
+    // given
+    const modeler = new Modeler({
+      container: el,
+      additionalModules: [
+        LintModule,
+        {
+          translate: [ 'value', translateModule ]
+        }
+      ],
+      linting: {
+        bpmnlint: bpmnlintrc
+      }
+    });
+
+    const diagram = require('./diagram-with-child-issues.bpmn');
+
+    await modeler.importXML(diagram);
+
+    await toggleLinting(modeler);
+
+    const issueHeading = el.querySelector('.bjsl-issue-heading');
+    expect(issueHeading).to.exist;
+    expect(issueHeading.innerText).to.equal('Проблеми дочірніх елементів:');
+  });
+
 });
 
 // helper //////////////////
 
+const translations = {
+  'Toggle linting overlays': 'Перемкнути перевірку',
+  'Process is missing end event': 'У процеса відсутня завершальна подія',
+  '{errors} Errors, {warnings} Warnings': '{errors} помилок, {warnings} попередженнь',
+  'Issues for child elements': 'Проблеми дочірніх елементів'
+};
+
+function translateModule(template, replacements = {}) {
+
+  // Translate
+  let transTemplate = translations[template] || template;
+
+  // Replace
+  return transTemplate.replace(/{([^}]+)}/g, function(_, key) {
+    return key in replacements ? replacements[key] : '{' + key + '}';
+  });
+}
+
 function toggleLinting(modeler) {
 
   return new Promise(resolve => {

test/spec/diagram-with-child-issues.bpmn

@@ -0,0 +1,33 @@
+<bpmn:definitions id="Definitions_1" targetNamespace="http://unitybase.info/schema/bpmn/instance/1.0">
+  <bpmn:collaboration id="Collaboration_1cm9736">
+    <bpmn:participant id="Participant_1dwjt9i" name="Pool" processRef="diagram_with_child_issues"/>
+  </bpmn:collaboration>
+  <bpmn:process id="diagram_with_child_issues" name="diagram-with-child-issues" isExecutable="true">
+    <bpmn:startEvent id="Event_1tu7u4r">
+      <bpmn:outgoing>Flow_11vb9qr</bpmn:outgoing>
+    </bpmn:startEvent>
+    <bpmn:sequenceFlow id="Flow_11vb9qr" sourceRef="Event_1tu7u4r" targetRef="Activity_18y9l2e"/>
+    <bpmn:task id="Activity_18y9l2e" name="Task">
+      <bpmn:incoming>Flow_11vb9qr</bpmn:incoming>
+    </bpmn:task>
+  </bpmn:process>
+  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
+    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Collaboration_1cm9736">
+      <bpmndi:BPMNShape id="Participant_1dwjt9i_di" bpmnElement="Participant_1dwjt9i" isHorizontal="true">
+        <dc:Bounds x="123" y="82" width="487" height="250"/>
+        <bpmndi:BPMNLabel/>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="Event_1tu7u4r_di" bpmnElement="Event_1tu7u4r">
+        <dc:Bounds x="222" y="182" width="36" height="36"/>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="Activity_18y9l2e_di" bpmnElement="Activity_18y9l2e">
+        <dc:Bounds x="320" y="160" width="100" height="80"/>
+        <bpmndi:BPMNLabel/>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNEdge id="Flow_11vb9qr_di" bpmnElement="Flow_11vb9qr">
+        <di:waypoint x="258" y="200"/>
+        <di:waypoint x="320" y="200"/>
+      </bpmndi:BPMNEdge>
+    </bpmndi:BPMNPlane>
+  </bpmndi:BPMNDiagram>
+</bpmn:definitions>