[AAE-1923] Multilingual form unit test (#5542)

* ps cloud translation fixed

* included only for form cloud

lib/process-services-cloud/karma.conf.js

@@ -34,14 +34,16 @@ module.exports = function (config) {
             { pattern: 'node_modules/moment/min/moment.min.js', included: true, watched: false },
 
             { pattern: 'lib/core/i18n/**/en.json', included: false, served: true, watched: false },
-            { pattern: 'lib/content-services-cloud/i18n/**/en.json', included: false, served: true, watched: false },
+            { pattern: 'lib/process-services-cloud/src/lib/i18n/*.json', included: false, served: true, watched: false },
-            { pattern: 'lib/process-services-cloud/i18n/**/en.json', included: false, served: true, watched: false },
+            { pattern: 'lib/process-services-cloud/src/lib/mock/*.json', included: false, served: true, watched: false },
             { pattern: 'lib/process-services-cloud/**/*.ts', included: false, served: true, watched: false },
             { pattern: 'lib/config/app.config.json', included: false, served: true, watched: false }
         ],
         frameworks: ['jasmine-ajax', 'jasmine', '@angular-devkit/build-angular'],
         proxies: {
             '/assets/': '/base/lib/process-services-cloud/assets/',
+            '/resources/i18n/en.json': '/base/lib/process-services-cloud/src/lib/mock/en.json',
+            '/resources/i18n/fr.json': '/base/lib/process-services-cloud/src/lib/mock/fr.json',
             '/base/assets/': '/base/lib/process-services/assets/',
             '/assets/adf-core/i18n/en.json': '/base/lib/core/i18n/en.json',
             '/assets/adf-core/i18n/en-GB.json': '/base/lib/core/i18n/en.json',

lib/process-services-cloud/src/lib/form/components/form-cloud.component.spec.ts

@@ -17,10 +17,11 @@
 
 import { Component, CUSTOM_ELEMENTS_SCHEMA, DebugElement, SimpleChange } from '@angular/core';
 import { By } from '@angular/platform-browser';
-import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { Observable, of, throwError } from 'rxjs';
 import {
     AppConfigService,
+    CoreModule,
     FormFieldModel,
     FormFieldTypes,
     FormModel,
@@ -28,8 +29,7 @@ import {
     FormOutcomeModel,
     FormRenderingService,
     setupTestBed,
-    TranslationMock,
+    TRANSLATION_PROVIDER,
-    TranslationService,
     WidgetVisibilityService
 } from '@alfresco/adf-core';
 import { ProcessServiceCloudTestingModule } from '../../testing/process-service-cloud.testing.module';
@@ -39,33 +39,45 @@ import {
     cloudFormMock,
     conditionalUploadWidgetsMock,
     emptyFormRepresentationJSON,
-    fakeCloudForm
+    fakeCloudForm,
+    multilingualForm
 } from '../mocks/cloud-form.mock';
 import { FormCloudRepresentation } from '../models/form-cloud-representation.model';
 import { FormCloudModule } from '../form-cloud.module';
+import { TranslateService } from '@ngx-translate/core';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 describe('FormCloudComponent', () => {
-
     let formCloudService: FormCloudService;
     let fixture: ComponentFixture<FormCloudComponent>;
     let formComponent: FormCloudComponent;
     let visibilityService: WidgetVisibilityService;
     let formRenderingService: FormRenderingService;
+    let translateService: TranslateService;
 
     setupTestBed({
         imports: [
-            ProcessServiceCloudTestingModule,
+            NoopAnimationsModule,
+            CoreModule.forRoot(),
             FormCloudModule
         ],
         providers: [
-            { provide: TranslationService, useClass: TranslationMock }
+            {
+                provide: TRANSLATION_PROVIDER,
+                multi: true,
+                useValue: {
+                    name: 'app',
+                    source: 'resources'
+                }
+            }
         ]
     });
 
-    beforeEach(() => {
+    beforeEach(async(() => {
         formRenderingService = TestBed.get(FormRenderingService);
         formCloudService = TestBed.get(FormCloudService);
         visibilityService = TestBed.get(WidgetVisibilityService);
+        translateService = TestBed.get(TranslateService);
         spyOn(visibilityService, 'refreshVisibility').and.callThrough();
         const appConfigService = TestBed.get(AppConfigService);
         spyOn(appConfigService, 'get').and.returnValue([]);
@@ -73,7 +85,7 @@ describe('FormCloudComponent', () => {
         fixture = TestBed.createComponent(FormCloudComponent);
         formComponent = fixture.componentInstance;
         fixture.detectChanges();
-   });
+   }));
 
     it('should check form', () => {
         expect(formComponent.hasForm()).toBeFalsy();
@@ -848,7 +860,6 @@ describe('FormCloudComponent', () => {
     });
 
     describe('form validations', () => {
-
         it('should be able to set visibility conditions for Attach File widget', async () => {
             spyOn(formCloudService, 'getForm').and.returnValue(of(conditionalUploadWidgetsMock));
             const formId = '123';
@@ -870,7 +881,42 @@ describe('FormCloudComponent', () => {
             const label = fixture.debugElement.query(By.css(`${container} label`));
             expect(label.nativeElement.innerText).toEqual('Attach file');
         });
+    });
 
+    describe('Multilingual Form', () => {
+        it('should  translate form labels  on language change',  async () => {
+            spyOn(formCloudService, 'getForm').and.returnValue(of(multilingualForm));
+            const formId = '123';
+            const appName = 'test-app';
+            formComponent.formId = formId;
+            formComponent.appVersion = 1;
+
+            formComponent.ngOnChanges({ 'appName': new SimpleChange(null, appName, true) });
+            expect(formCloudService.getForm).toHaveBeenCalledWith(appName, formId, 1);
+
+            fixture.detectChanges();
+            expect(getLabelValue('textField')).toEqual('Text field');
+            expect(getLabelValue('fildUploadField')).toEqual('File Upload');
+            expect(getLabelValue('dateField')).toEqual('Date field (D-M-YYYY)');
+            expect(getLabelValue('amountField')).toEqual('Amount field');
+
+            expect(translateService.getLangs()).toEqual(['en', '']);
+            fixture.ngZone.run(() => translateService.use('fr'));
+
+            await fixture.whenStable();
+            fixture.detectChanges();
+
+            expect(translateService.getLangs()).toEqual(['en', '', 'fr']);
+            expect(getLabelValue('textField')).toEqual('Champ de texte');
+            expect(getLabelValue('fildUploadField')).toEqual('Téléchargement de fichiers');
+            expect(getLabelValue('dateField')).toEqual('Champ de date (D-M-YYYY)');
+            expect(getLabelValue('amountField')).toEqual('Champ Montant');
+        });
+
+        function getLabelValue(containerId: string): string {
+            const label = fixture.debugElement.nativeElement.querySelector(`[id="field-${containerId}-container"] label`);
+            return label.innerText;
+        }
     });
 });
 

lib/process-services-cloud/src/lib/form/mocks/cloud-form.mock.ts

@@ -832,3 +832,122 @@ export const conditionalUploadWidgetsMock = {
         }
     }
 };
+
+export const multilingualForm = {
+    'formRepresentation': {
+        'id': 'form-2aaaf20e-43d3-46bf-89be-859d5f512dd2',
+        'name': 'multilingualform',
+        'description': '',
+        'version': 0,
+        'formDefinition': {
+            'tabs': [],
+            'fields': [
+                {
+                    'id': '451e2235-3310-4c2d-9b4a-08b53ae1640c',
+                    'name': 'Label',
+                    'type': 'container',
+                    'tab': null,
+                    'numberOfColumns': 2,
+                    'fields': {
+                        '1': [
+                            {
+                                'id': 'textField',
+                                'name': 'TEXT_FIELD.TITLE',
+                                'type': 'text',
+                                'required': false,
+                                'colspan': 1,
+                                'placeholder': null,
+                                'minLength': 0,
+                                'maxLength': 0,
+                                'regexPattern': null,
+                                'visibilityCondition': null,
+                                'params': {
+                                    'existingColspan': 1,
+                                    'maxColspan': 2
+                                }
+                            }
+                        ],
+                        '2': []
+                    }
+                },
+                {
+                    'id': '1c87df6c-514e-45a7-96bc-508562683bb3',
+                    'name': 'Label',
+                    'type': 'container',
+                    'tab': null,
+                    'numberOfColumns': 2,
+                    'fields': {
+                        '1': [
+                            {
+                                'id': 'fildUploadField',
+                                'name': 'FILE_UPLOAD_FIELD.TITLE',
+                                'type': 'multi-line-text',
+                                'colspan': 1,
+                                'placeholder': null,
+                                'minLength': 0,
+                                'maxLength': 0,
+                                'regexPattern': null,
+                                'required': false,
+                                'visibilityCondition': null,
+                                'params': {
+                                    'existingColspan': 1,
+                                    'maxColspan': 2
+                                }
+                            }
+                        ],
+                        '2': [
+                            {
+                                'id': 'amountField',
+                                'name': 'AMOUNT_FIELD.TITLE',
+                                'type': 'amount',
+                                'required': false,
+                                'colspan': 1,
+                                'placeholder': '123',
+                                'minValue': null,
+                                'maxValue': null,
+                                'visibilityCondition': null,
+                                'params': {
+                                    'existingColspan': 1,
+                                    'maxColspan': 2
+                                },
+                                'enableFractions': false,
+                                'currency': '$'
+                            }
+                        ]
+                    }
+                },
+                {
+                    'id': '33138eea-130f-4bba-b5a5-29ea60f31786',
+                    'name': 'Label',
+                    'type': 'container',
+                    'tab': null,
+                    'numberOfColumns': 2,
+                    'fields': {
+                        '1': [
+                            {
+                                'id': 'dateField',
+                                'name': 'DATE_FIELD.TITLE',
+                                'type': 'date',
+                                'required': false,
+                                'colspan': 1,
+                                'placeholder': null,
+                                'minValue': null,
+                                'maxValue': null,
+                                'visibilityCondition': null,
+                                'params': {
+                                    'existingColspan': 1,
+                                    'maxColspan': 2
+                                },
+                                'dateDisplayFormat': 'D-M-YYYY'
+                            }
+                        ],
+                        '2': []
+                    }
+                }
+            ],
+            'outcomes': [],
+            'metadata': {},
+            'variables': []
+        }
+    }
+};

lib/process-services-cloud/src/lib/mock/en.json

@@ -0,0 +1,14 @@
+{
+  "FILE_UPLOAD_FIELD": {
+    "TITLE": "File Upload"
+  },
+  "TEXT_FIELD": {
+    "TITLE": "Text field"
+  },
+  "AMOUNT_FIELD": {
+    "TITLE": "Amount field"
+  },
+  "DATE_FIELD": {
+    "TITLE": "Date field"
+  }
+}

lib/process-services-cloud/src/lib/mock/fr.json

@@ -0,0 +1,14 @@
+{
+  "FILE_UPLOAD_FIELD": {
+    "TITLE": "Téléchargement de fichiers"
+  },
+  "TEXT_FIELD": {
+    "TITLE": "Champ de texte"
+  },
+  "AMOUNT_FIELD": {
+    "TITLE": "Champ Montant"
+  },
+  "DATE_FIELD": {
+    "TITLE": "Champ de date"
+  }
+}