fix missing applying of the translate service

bpmn-io · Apr 22, 2024 · c2b92e3 · c2b92e3
1 parent 0125a79
commit c2b92e3
Show file tree

Hide file tree

Showing 3 changed files with 108 additions and 28 deletions.
diff --git a/test/spec/element-templates/i18n/Translate.spec.js b/test/spec/element-templates/i18n/Translate.spec.js
@@ -6,12 +6,12 @@ import {
 } from 'min-dom';
 
 import {
-  bootstrapModeler,
+  bootstrapPropertiesPanel,
   inject
 } from 'test/TestHelper';
 
 import {
-  act,
+  act
 } from '@testing-library/preact';
 
 import coreModule from 'bpmn-js/lib/core';
@@ -24,25 +24,28 @@ import diagramXML from './Translate.bpmn';
 
 import templates from './Translate.templates';
 
-import customTranslate from './customTranslate';
-
-describe('provider/element-templates - ElementTemplates', function() {
+describe('provider/element-templates - Translate', function() {
 
   let container;
 
   beforeEach(function() {
     container = TestContainer.get(this);
   });
 
-  beforeEach(bootstrapModeler(diagramXML, {
+  beforeEach(bootstrapPropertiesPanel(diagramXML, {
     container,
     modules: [
       BpmnPropertiesPanelModule,
       coreModule,
       elementTemplatesModule,
       modelingModule,
       {
-        translate: [ 'value', customTranslate ]
+        translate: [
+          'value',
+          (template, replacements) => replacements
+            ? `${template}:translated:${JSON.stringify(replacements)}`
+            : `${template}:translated`
+        ]
       }
     ],
     moddleExtensions: {
@@ -51,20 +54,68 @@ describe('provider/element-templates - ElementTemplates', function() {
     elementTemplates: templates
   }));
 
-  describe('translate', function() {
-    it('should translate', inject(
-      async function(elementRegistry, elementTemplates, selection) {
+  beforeEach(inject(async function(elementRegistry, selection) {
+    const element = elementRegistry.get('ServiceTask_1');
+    await act(() => selection.select(element));
+  }));
 
-        const element = elementRegistry.get('ServiceTask_1');
+  describe('Template group', function() {
+    it('should apply the `translate` service for the Template group title', inject(function() {
+      const titleEl = domQuery('[data-group-id="group-ElementTemplates__Template"] .bio-properties-panel-group-header-title', container);
 
-        await act(() => {
-          selection.select(element);
-        });
+      expect(titleEl.textContent).to.equal('Template:translated');
+    }));
+  });
 
-        const groups = domQueryAll('[data-group-id]', container);
+  describe('Custom Properties group', function() {
+    it('should apply the `translate` service for the Custom Properties group title', inject(function() {
+      const titleEl = domQuery('[data-group-id="group-ElementTemplates__CustomProperties"] .bio-properties-panel-group-header-title', container);
 
-        console.log(groups.length);
-      }
-    ));
+      expect(titleEl.textContent).to.equal('Custom properties:translated');
+    }));
+
+    it('should apply the `translate` service for a Boolean entry', inject(function() {
+      const booleanEntry = domQuery('[data-group-id="group-ElementTemplates__CustomProperties"] [data-entry-id="custom-entry-foo-0"]', container);
+
+      const labelEl = domQuery('.bio-properties-panel-label', booleanEntry);
+      expect(labelEl.textContent).to.equal('BooleanLabel:translated');
+
+      const descriptionEl = domQuery('.bio-properties-panel-description', booleanEntry);
+      expect(descriptionEl.textContent).to.equal('BooleanDescription:translated');
+    }));
+
+    it('should apply the `translate` service for a Dropdown entry', inject(function() {
+      const dropdownEntry = domQuery('[data-group-id="group-ElementTemplates__CustomProperties"] [data-entry-id="custom-entry-foo-1"]', container);
+
+      const labelEl = domQuery('.bio-properties-panel-label', dropdownEntry);
+      expect(labelEl.textContent).to.equal('DropdownLabel:translated');
+
+      const descriptionEl = domQuery('.bio-properties-panel-description', dropdownEntry);
+      expect(descriptionEl.textContent).to.equal('DropdownDescription:translated');
+
+      const options = domQueryAll('option', dropdownEntry);
+      expect(options[0].textContent).to.equal('Choice1:translated');
+      expect(options[1].textContent).to.equal('Choice2:translated');
+    }));
+
+    it('should apply the `translate` service for a String entry', inject(function() {
+      const stringEntry = domQuery('[data-group-id="group-ElementTemplates__CustomProperties"] [data-entry-id="custom-entry-foo-2"]', container);
+
+      const labelEl = domQuery('.bio-properties-panel-label', stringEntry);
+      expect(labelEl.textContent).to.equal('StringLabel:translated');
+
+      const descriptionEl = domQuery('.bio-properties-panel-description', stringEntry);
+      expect(descriptionEl.textContent).to.equal('StringDescription:translated');
+    }));
+
+    it('should apply the `translate` service for a Text entry', inject(function() {
+      const textEntry = domQuery('[data-group-id="group-ElementTemplates__CustomProperties"] [data-entry-id="custom-entry-foo-3"]', container);
+
+      const labelEl = domQuery('.bio-properties-panel-label', textEntry);
+      expect(labelEl.textContent).to.equal('TextLabel:translated');
+
+      const descriptionEl = domQuery('.bio-properties-panel-description', textEntry);
+      expect(descriptionEl.textContent).to.equal('TextDescription:translated');
+    }));
   });
 });
diff --git a/test/spec/element-templates/i18n/Translate.templates.json b/test/spec/element-templates/i18n/Translate.templates.json
@@ -2,16 +2,50 @@
   {
     "id": "foo",
     "name":"foo",
-    "appliesTo": [ "bpmn:ServiceTask" ],
+    "appliesTo": ["bpmn:ServiceTask"],
     "properties": [
       {
-        "id": "name",
+        "type": "Boolean",
+        "label": "BooleanLabel",
+        "description": "BooleanDescription",
+        "value": "boolean",
+        "binding": {
+          "type": "property",
+          "name": "boolean"
+        }
+      },
+      {
+        "type": "Dropdown",
+        "label": "DropdownLabel",
+        "description": "DropdownDescription",
+        "value": "dropdown",
+        "choices": [
+          {"name": "Choice1", "value": "choice1"},
+          {"name": "Choice2", "value": "choice2"}
+        ],
+        "binding": {
+          "type": "property",
+          "name": "dropdown"
+        }
+      },
+      {
         "type": "String",
-        "label": "Name",
-        "value": "value",
+        "label": "StringLabel",
+        "description": "StringDescription",
+        "value": "string",
+        "binding": {
+          "type": "property",
+          "name": "string"
+        }
+      },
+      {
+        "type": "Text",
+        "label": "TextLabel",
+        "description": "TextDescription",
+        "value": "text",
         "binding": {
           "type": "property",
-          "name": "name"
+          "name": "text"
         }
       }
     ]

diff --git a/test/spec/element-templates/i18n/customTranslate.js b/test/spec/element-templates/i18n/customTranslate.js