Merge pull request #349 from funidata/DS-257-translation-service-check

[Translation Service]: Unit tests, docs update and minor refactoring and renaming

ngx-fudis/projects/ngx-fudis/src/lib/components/description-list/description-list-item/description-list-item-term/description-list-item-term.component.ts

@@ -34,7 +34,7 @@ export class DescriptionListItemTermComponent implements AfterContentInit {
 
     effect(() => {
       this._currentLanguage = _translationService.getLanguage();
-      this._languageOptions = _translationService.getBadgeGroupLanguages();
+      this._languageOptions = _translationService.getSelectableLanguages();
       this._setLanguageOptions();
     });
 

ngx-fudis/projects/ngx-fudis/src/lib/components/description-list/description-list.stories.ts

@@ -27,11 +27,11 @@ import { FudisTranslationService } from '../../services/translation/translation.
 })
 class LanguageChangeComponent {
   constructor(private _languageService: FudisTranslationService) {
-    this._languageService.setBadgeGroupLanguages(['fi', 'sv', 'en']);
+    this._languageService.setSelectableLanguages(['fi', 'sv', 'en']);
   }
 
   changeBadgeLanguages(languages: FudisLanguageAbbr[]): void {
-    this._languageService.setBadgeGroupLanguages(languages);
+    this._languageService.setSelectableLanguages(languages);
   }
 }
 

ngx-fudis/projects/ngx-fudis/src/lib/components/form/select/multiselect/multiselect-option/multiselect-option.component.ts

@@ -22,7 +22,7 @@ export class MultiselectOptionComponent extends SelectOptionBaseDirective implem
 
     this._parent = this._parentMultiselect;
 
-    this._id = this._idService.getNewSelectOptionid(
+    this._id = this._idService.getNewSelectOptionId(
       'multiselect',
       this._parent.id,
       this._parentGroup?.id,

ngx-fudis/projects/ngx-fudis/src/lib/components/form/select/select/select-option/select-option.component.ts

@@ -24,7 +24,7 @@ export class SelectOptionComponent extends SelectOptionBaseDirective implements
 
     this._parent = _parentSelect;
 
-    this._id = this._idService.getNewSelectOptionid(
+    this._id = this._idService.getNewSelectOptionId(
       'select',
       this._parent.id,
       this._parentGroup?.id,

ngx-fudis/projects/ngx-fudis/src/lib/components/language-badge-group/language-badge-group.component.ts

@@ -17,7 +17,7 @@ export class LanguageBadgeGroupComponent extends TooltipApiDirective implements
   constructor(private _translationService: FudisTranslationService) {
     super();
     effect(() => {
-      this._languageOptions = _translationService.getBadgeGroupLanguages();
+      this._languageOptions = _translationService.getSelectableLanguages();
       this._translations = _translationService.getTranslations();
       this._groupLabel = this._translations().LANGUAGE_BADGE.ARIA_LABEL.TRANSLATIONS;
       this._setLanguageOptions();

ngx-fudis/projects/ngx-fudis/src/lib/services/id/id.service.spec.ts

@@ -93,7 +93,7 @@ describe('FudisIdServiceService', () => {
 
         expect(detailsId).toEqual(`${groupId}-details-${index}`);
       } else {
-        const optionId = idService.getNewSelectOptionid(parentType, parentId, groupId);
+        const optionId = idService.getNewSelectOptionId(parentType, parentId, groupId);
 
         expect(optionId).toEqual(`${groupId}-option-${index}`);
       }
@@ -146,14 +146,13 @@ describe('FudisIdServiceService', () => {
 
         if (grandParentType !== 'description-list') {
           for (let index = 1; index <= 3; index += 1) {
-            const nonGroupedOptionId = idService.getNewSelectOptionid(grandParentType, newId);
+            const nonGroupedOptionId = idService.getNewSelectOptionId(grandParentType, newId);
             expect(nonGroupedOptionId).toEqual(`${newId}-option-${index}`);
           }
         }
       }
     });
   };
-  // TODO: Write tests for getNewGrandChildId
 
   beforeEach(() => {
     TestBed.configureTestingModule({});

ngx-fudis/projects/ngx-fudis/src/lib/services/id/id.service.ts

@@ -227,7 +227,7 @@ export class FudisIdService {
   /**
    * Get an id and add it to collection for Select Options --> fudis-select-4-group-2-option-1
    */
-  public getNewSelectOptionid(
+  public getNewSelectOptionId(
     selectType: 'select' | 'multiselect',
     selectParentId: string,
     groupParentId?: string,

ngx-fudis/projects/ngx-fudis/src/lib/services/translation/readme.stories.mdx

@@ -4,40 +4,63 @@ import { Meta } from "@storybook/blocks";
 
 # Translation Service
 
-Several Fudis component has static text associated with the component logic. Most common example is form components' required indicator which is visible text next to the form field label.
-Also, some of the helper texts for screen readers are set automatically.
-All the translation keys for static texts come from Fudis translations and it is not possible to modify them from the application side.
+Translation Service consists of two parts:
 
-Currently supported languages in Fudis components are English, Finnish and Swedish. Default language of Fudis components is English.
+- Functions for selecting translated language in several repeated texts in various Fudis components
+- Functions for setting selectable languages in components, which manage multiple languages either for display or user input. Currently this is available in Description List component using Language Badges.
 
-## Features
+## Including Service
 
 Use Translation Service by importing and adding it to constructor.
 
 ```
 import { FudisTranslationService } from 'ngx-fudis';
 
   constructor(
-    private _translationService: FudisTranslationService,
+    fudisTranslationService: FudisTranslationService,
   ) {}
 ```
 
+## Component Translation Related Features
+
+Several Fudis component has static text associated with the component logic. Most common example is form components' required indicator which is visible text next to the form field label.
+Also, some of the helper texts for screen readers are set automatically.
+All the translation keys for static texts come from Fudis translations and it is not possible to modify them from the application side.
+
+Currently supported languages in Fudis components are English, Finnish and Swedish. Default language of Fudis components is English.
+
 ### Set Language
 
-`setLanguage` sets the language of above-mentioned repeated texts of Fudis components. Function takes language argument ('en', 'fi', 'sv').
+`setLanguage` sets the language of above-mentioned repeated texts of Fudis components. Function takes language abbreviation argument of either `en`, `fi` or `sv`.
 
 ```
-this._translationService.setLanguage('fi');
+fudisTranslationService.setLanguage('fi');
 ```
 
 ### Get Language
 
 Get current language of Fudis configuration with `getLanguage`.
 
 ```
-this._currentLanguage = this._translationService.getLanguage();
+this.currentLanguage = fudisTranslationService.getLanguage();
+```
+
+## Selectable Languages in Components
+
+Currently only Language Badge Group has this feature enabled, but with Translation Service it is possible to determine which languages are displayed as selectable badges.
+
+By default set languages is an array of `['fi', 'sv', 'en']`.
+
+Check an [example under Description List](/story/components-description-list--description-list-with-languages) how badges behave when different language settings is set.
+
+### Set Selectable Translations
+
+`setSelectableLanguages()` sets the settings for which languages / translations are selectable in components used to display multiple languages. It takes an array of language abbreviation as its argument. The order of abbreviation also determines the order of display in the components.
+
+```
+fudisTranslationService.setSelectableLanguages(['en','sv']);
 ```
 
-### Get Translations
+### Get Selectable Translations
 
-`getTranslations` is invoked in each component's effect that uses Fudis translations and will fetch translation keys according to the application language.
+`getSelectableLanguages()` returns a signal which is invoked each time selectable languages is updated.

ngx-fudis/projects/ngx-fudis/src/lib/services/translation/translation.service.spec.ts

@@ -1,7 +1,7 @@
 import { TestBed } from '@angular/core/testing';
 import { FudisTranslationService } from './translation.service';
+import { en, fi, sv } from './translationKeys';
 
-// TODO: Write tests
 describe('TranslationService', () => {
   let service: FudisTranslationService;
 
@@ -14,9 +14,44 @@ describe('TranslationService', () => {
     expect(service).toBeTruthy();
   });
 
-  // describe('default values', () => {
-  //   it('should ', () => {});
+  describe('default values', () => {
+    it('should return English', () => {
+      expect(service.getLanguage()).toEqual('en');
+    });
 
-  //   it('should ', () => {});
-  // });
+    it('should return English translations', () => {
+      expect(service.getTranslations()()).toEqual(en);
+    });
+
+    it('should return fi, sv, en array', () => {
+      expect(service.getSelectableLanguages()()).toEqual(['fi', 'sv', 'en']);
+    });
+  });
+
+  describe('setter', () => {
+    it('setLanguage should update language and translations properly', () => {
+      service.setLanguage('fi');
+
+      expect(service.getLanguage()).toEqual('fi');
+      expect(service.getTranslations()()).toEqual(fi);
+
+      service.setLanguage('sv');
+
+      expect(service.getLanguage()).toEqual('sv');
+      expect(service.getTranslations()()).toEqual(sv);
+
+      service.setLanguage('en');
+
+      expect(service.getLanguage()).toEqual('en');
+      expect(service.getTranslations()()).toEqual(en);
+    });
+  });
+
+  it('setSelectableLanguages should update badge languages properly ', () => {
+    service.setSelectableLanguages(['fi', 'sv']);
+    expect(service.getSelectableLanguages()()).toEqual(['fi', 'sv']);
+
+    service.setSelectableLanguages(['en', 'fi']);
+    expect(service.getSelectableLanguages()()).toEqual(['en', 'fi']);
+  });
 });

ngx-fudis/projects/ngx-fudis/src/lib/services/translation/translation.service.ts

@@ -19,6 +19,11 @@ export class FudisTranslationService {
    */
   private _appLanguage = signal<FudisLanguageAbbr>('en');
 
+  /**
+   * Currently available languages in Fudis are Finnish, Swedish and English
+   */
+  private _selectableLanguages = signal<FudisLanguageAbbr[]>(['fi', 'sv', 'en']);
+
   /**
    * Set language of repeated texts Fudis uses for its components. E. g. 'required' text of form components or help texts for screen readers for various buttons.
    * Also as Error Summary Component reloads its errors if error's language has changed, here is defined component to NOT focus to the updated list on only language change.
@@ -49,22 +54,17 @@ export class FudisTranslationService {
     return this._appTranslations.asReadonly();
   }
 
-  /**
-   * Currently available languages in Fudis are Finnish, Swedish and English
-   */
-  private _languages = signal<FudisLanguageAbbr[]>(['fi', 'sv', 'en']);
-
   /**
    * Set which languages are visible in Language Badges
    */
-  public setBadgeGroupLanguages(languages: FudisLanguageAbbr[]): void {
-    this._languages.set(languages);
+  public setSelectableLanguages(languages: FudisLanguageAbbr[]): void {
+    this._selectableLanguages.set(languages);
   }
 
   /**
    * Get visible languages of Language Badges
    */
-  public getBadgeGroupLanguages(): Signal<FudisLanguageAbbr[]> {
-    return this._languages.asReadonly();
+  public getSelectableLanguages(): Signal<FudisLanguageAbbr[]> {
+    return this._selectableLanguages.asReadonly();
   }
 }