From eb52fe03565b1e5b9ab0bb2f0dd202c8af42781f Mon Sep 17 00:00:00 2001 From: Eero Suvanto Date: Wed, 10 Apr 2024 10:05:56 +0300 Subject: [PATCH 1/5] DS-257: remove LanguageBadgeGroupService and move it under TranslationService --- .../description-list-item-term.component.ts | 8 ++-- .../description-list.stories.ts | 8 ++-- .../language-badge-group.component.ts | 5 +-- .../ngx-fudis/src/lib/ngx-fudis.module.ts | 2 - .../language-badge-group.service.spec.ts | 16 -------- .../language-badge-group.service.ts | 26 ------------- .../translation/translation.service.ts | 39 ++++++++++++++----- 7 files changed, 38 insertions(+), 66 deletions(-) delete mode 100644 ngx-fudis/projects/ngx-fudis/src/lib/services/language-badge-group/language-badge-group.service.spec.ts delete mode 100644 ngx-fudis/projects/ngx-fudis/src/lib/services/language-badge-group/language-badge-group.service.ts diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/description-list/description-list-item/description-list-item-term/description-list-item-term.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/description-list/description-list-item/description-list-item-term/description-list-item-term.component.ts index f1e57f528..14d02af28 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/description-list/description-list-item/description-list-item-term/description-list-item-term.component.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/description-list/description-list-item/description-list-item-term/description-list-item-term.component.ts @@ -10,7 +10,6 @@ import { import { FudisLanguageAbbr, FudisLanguageBadgeContent } from '../../../../types/miscellaneous'; import { FudisTranslationService } from '../../../../services/translation/translation.service'; import { DescriptionListItemComponent } from '../description-list-item.component'; -import { FudisLanguageBadgeGroupService } from '../../../../services/language-badge-group/language-badge-group.service'; import { DescriptionListComponent } from '../../description-list.component'; import { FudisIdService } from '../../../../services/id/id.service'; @@ -23,7 +22,6 @@ export class DescriptionListItemTermComponent implements AfterContentInit { constructor( private _elementRef: ElementRef, private _translationService: FudisTranslationService, - private _languageBadgeGroupService: FudisLanguageBadgeGroupService, private _idService: FudisIdService, @Host() private _parentDlItem: DescriptionListItemComponent, @Host() protected _parentDl: DescriptionListComponent, @@ -36,7 +34,7 @@ export class DescriptionListItemTermComponent implements AfterContentInit { effect(() => { this._currentLanguage = _translationService.getLanguage(); - this._languageOptions = this._languageBadgeGroupService.getLanguages(); + this._languageOptions = _translationService.getBadgeGroupLanguages(); this._setLanguageOptions(); }); @@ -62,7 +60,7 @@ export class DescriptionListItemTermComponent implements AfterContentInit { protected _parentLanguageOptions: FudisLanguageBadgeContent; /** - * Filtered array, where DOM is compared with Language config set in FudisLanguageBadgeGroupService + * Filtered array, where DOM is compared with Language config set in FudisTranslationService */ protected _availableLanguages: FudisLanguageAbbr[]; @@ -87,7 +85,7 @@ export class DescriptionListItemTermComponent implements AfterContentInit { private _currentLanguage: FudisLanguageAbbr; /** - * Config array from FudisLanguageBadgeGroupService + * Config array from FudisTranslationService */ private _languageOptions: Signal; diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/description-list/description-list.stories.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/description-list/description-list.stories.ts index b9bda62e3..6bb6b7931 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/description-list/description-list.stories.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/description-list/description-list.stories.ts @@ -2,9 +2,9 @@ import { StoryFn, Meta, moduleMetadata } from '@storybook/angular'; import { Component } from '@angular/core'; import { DescriptionListComponent } from './description-list.component'; import docs from './docs.mdx'; -import { FudisLanguageBadgeGroupService } from '../../services/language-badge-group/language-badge-group.service'; import { FudisLanguageAbbr } from '../../types/miscellaneous'; import { descriptionListExclude } from '../../utilities/storybook'; +import { FudisTranslationService } from '../../services/translation/translation.service'; @Component({ selector: 'example-language-service-change-component', @@ -26,12 +26,12 @@ import { descriptionListExclude } from '../../utilities/storybook'; `, }) class LanguageChangeComponent { - constructor(private _languageService: FudisLanguageBadgeGroupService) { - this._languageService.setLanguages(['fi', 'sv', 'en']); + constructor(private _languageService: FudisTranslationService) { + this._languageService.setBadgeGroupLanguages(['fi', 'sv', 'en']); } changeBadgeLanguages(languages: FudisLanguageAbbr[]): void { - this._languageService.setLanguages(languages); + this._languageService.setBadgeGroupLanguages(languages); } } diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/language-badge-group/language-badge-group.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/language-badge-group/language-badge-group.component.ts index f85e6acbd..ace8873e0 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/language-badge-group/language-badge-group.component.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/language-badge-group/language-badge-group.component.ts @@ -7,7 +7,6 @@ import { } from '../../types/miscellaneous'; import { FudisTranslationService } from '../../services/translation/translation.service'; import { TooltipApiDirective } from '../../directives/tooltip/tooltip-api.directive'; -import { FudisLanguageBadgeGroupService } from '../../services/language-badge-group/language-badge-group.service'; @Component({ selector: 'fudis-language-badge-group', @@ -17,11 +16,11 @@ import { FudisLanguageBadgeGroupService } from '../../services/language-badge-gr export class LanguageBadgeGroupComponent extends TooltipApiDirective implements OnInit { constructor( private _translationService: FudisTranslationService, - private _languageBadgeGroupService: FudisLanguageBadgeGroupService, + ) { super(); effect(() => { - this._languageOptions = this._languageBadgeGroupService.getLanguages(); + this._languageOptions = _translationService.getBadgeGroupLanguages(); this._translations = _translationService.getTranslations(); this._groupLabel = this._translations().LANGUAGE_BADGE.ARIA_LABEL.TRANSLATIONS; this._setLanguageOptions(); diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/ngx-fudis.module.ts b/ngx-fudis/projects/ngx-fudis/src/lib/ngx-fudis.module.ts index 5b560fa80..51c293695 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/ngx-fudis.module.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/ngx-fudis.module.ts @@ -93,7 +93,6 @@ import { FooterComponent } from './components/footer/footer.component'; import { LanguageBadgeGroupComponent } from './components/language-badge-group/language-badge-group.component'; import { LanguageBadgeComponent } from './components/language-badge-group/language-badge/language-badge.component'; import { FudisTranslationService } from './services/translation/translation.service'; -import { FudisLanguageBadgeGroupService } from './services/language-badge-group/language-badge-group.service'; import { AlertComponent } from './components/alert/alert/alert.component'; import { AlertGroupComponent } from './components/alert/alert-group/alert-group.component'; import { FudisAlertService } from './services/alert/alert.service'; @@ -288,7 +287,6 @@ import { SelectOptionBaseDirective } from './components/form/select/common/selec FudisFocusService, FudisGridService, FudisIdService, - FudisLanguageBadgeGroupService, FudisTranslationService, ], }) diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/services/language-badge-group/language-badge-group.service.spec.ts b/ngx-fudis/projects/ngx-fudis/src/lib/services/language-badge-group/language-badge-group.service.spec.ts deleted file mode 100644 index 74ba1337d..000000000 --- a/ngx-fudis/projects/ngx-fudis/src/lib/services/language-badge-group/language-badge-group.service.spec.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { TestBed } from '@angular/core/testing'; -import { FudisLanguageBadgeGroupService } from './language-badge-group.service'; - -// TODO: Write tests -describe('LanguageBadgeGroupService', () => { - let service: FudisLanguageBadgeGroupService; - - beforeEach(() => { - TestBed.configureTestingModule({}); - service = TestBed.inject(FudisLanguageBadgeGroupService); - }); - - it('should be created', () => { - expect(service).toBeTruthy(); - }); -}); diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/services/language-badge-group/language-badge-group.service.ts b/ngx-fudis/projects/ngx-fudis/src/lib/services/language-badge-group/language-badge-group.service.ts deleted file mode 100644 index 239996338..000000000 --- a/ngx-fudis/projects/ngx-fudis/src/lib/services/language-badge-group/language-badge-group.service.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { Injectable, Signal, signal } from '@angular/core'; -import { FudisLanguageAbbr } from '../../types/miscellaneous'; - -@Injectable({ - providedIn: 'root', -}) -export class FudisLanguageBadgeGroupService { - /** - * Currently available languages in Fudis are Finnish, Swedish and English - */ - private _languages = signal(['fi', 'sv', 'en']); - - /** - * Set which languages are visible - */ - public setLanguages(languages: FudisLanguageAbbr[]): void { - this._languages.set(languages); - } - - /** - * Get visible languages - */ - public getLanguages(): Signal { - return this._languages.asReadonly(); - } -} diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/services/translation/translation.service.ts b/ngx-fudis/projects/ngx-fudis/src/lib/services/translation/translation.service.ts index 3367d491e..e3a8af164 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/services/translation/translation.service.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/services/translation/translation.service.ts @@ -10,14 +10,14 @@ export class FudisTranslationService { constructor(private _errorSummaryService: FudisInternalErrorSummaryService) {} /** - * Translation config, default language for translations is English + * Application's translation texts, default language for translations is English */ - private _translations = signal(en); + private _appTranslations = signal(en); /** - * Single component or application language, default language is English + * Application language, default language is English */ - private _language = signal('en'); + private _appLanguage = signal('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. @@ -25,13 +25,13 @@ export class FudisTranslationService { */ public setLanguage(language: FudisLanguageAbbr): void { this._errorSummaryService.focusToFormOnReload = null; - this._language.set(language); + this._appLanguage.set(language); if (language === 'en') { - this._translations.set(en); + this._appTranslations.set(en); } else if (language === 'fi') { - this._translations.set(fi); + this._appTranslations.set(fi); } else { - this._translations.set(sv); + this._appTranslations.set(sv); } } @@ -39,13 +39,32 @@ export class FudisTranslationService { * Get current language of Fudis configs */ public getLanguage(): FudisLanguageAbbr { - return this._language(); + return this._appLanguage(); } /** * Get application's translation config values */ public getTranslations(): Signal { - return this._translations.asReadonly(); + return this._appTranslations.asReadonly(); + } + + /** + * Currently available languages in Fudis are Finnish, Swedish and English + */ + private _languages = signal(['fi', 'sv', 'en']); + + /** + * Set which languages are visible in Language Badges + */ + public setBadgeGroupLanguages(languages: FudisLanguageAbbr[]): void { + this._languages.set(languages); + } + + /** + * Get visible languages of Language Badges + */ + public getBadgeGroupLanguages(): Signal { + return this._languages.asReadonly(); } } From c070a93e38f7248f823a4b565c93683913517735 Mon Sep 17 00:00:00 2001 From: Eero Suvanto Date: Wed, 10 Apr 2024 13:53:52 +0300 Subject: [PATCH 2/5] DS-257:refactor focusService uses --- .../form/checkbox-group/checkbox-group.component.ts | 4 +++- .../components/form/fieldset/fieldset.component.html | 4 +--- .../components/form/fieldset/fieldset.component.ts | 12 +++++++----- .../common/select-base/select-base.directive.ts | 4 ++++ .../fieldset-base/fieldset-base.directive.spec.ts | 4 ++++ .../form/fieldset-base/fieldset-base.directive.ts | 2 ++ .../form/input-base/input-base.directive.ts | 8 -------- 7 files changed, 21 insertions(+), 17 deletions(-) diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/checkbox-group/checkbox-group.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/checkbox-group/checkbox-group.component.ts index c820e779f..6926919ff 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/checkbox-group/checkbox-group.component.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/checkbox-group/checkbox-group.component.ts @@ -20,6 +20,7 @@ import { hasAtLeastOneRequiredOrMinValidator } from '../../../utilities/form/get import { FormComponent } from '../form/form.component'; import { FudisIdService } from '../../../services/id/id.service'; import { FudisTranslationService } from '../../../services/translation/translation.service'; +import { FudisFocusService } from '../../../services/focus/focus.service'; @Component({ selector: 'fudis-checkbox-group', @@ -31,9 +32,10 @@ export class CheckboxGroupComponent extends FieldSetBaseDirective implements OnI @Host() @Optional() protected _parentForm: FormComponent | null, _idService: FudisIdService, _translationService: FudisTranslationService, + _focusService: FudisFocusService, _changeDetectorRef: ChangeDetectorRef, ) { - super(_idService, _translationService, _changeDetectorRef); + super(_idService, _translationService, _focusService, _changeDetectorRef); } /** * FormGroup for Checkbox group. If provided, provide also `controlName` for each Checkbox children. diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/fieldset/fieldset.component.html b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/fieldset/fieldset.component.html index eb6b2f5e9..917afaca4 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/fieldset/fieldset.component.html +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/fieldset/fieldset.component.html @@ -1,8 +1,6 @@
- +
{ let idService: FudisIdService; let translationService: FudisTranslationService; let changeDetectorRef: ChangeDetectorRef; + let focusService: FudisFocusService; beforeEach(() => { TestBed.configureTestingModule({ @@ -80,6 +82,7 @@ describe('FieldSetBaseDirective', () => { idService = TestBed.inject(FudisIdService); translationService = TestBed.inject(FudisTranslationService); changeDetectorRef = TestBed.inject(ChangeDetectorRef); + focusService = TestBed.inject(FudisFocusService); }); it('should create an instance', () => { @@ -87,6 +90,7 @@ describe('FieldSetBaseDirective', () => { const directive: FieldSetBaseDirective = new FieldSetBaseDirective( idService, translationService, + focusService, changeDetectorRef, ); diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/directives/form/fieldset-base/fieldset-base.directive.ts b/ngx-fudis/projects/ngx-fudis/src/lib/directives/form/fieldset-base/fieldset-base.directive.ts index df4c70133..89e2b525d 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/directives/form/fieldset-base/fieldset-base.directive.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/directives/form/fieldset-base/fieldset-base.directive.ts @@ -5,6 +5,7 @@ import { FudisTranslationService } from '../../../services/translation/translati import { FudisIdService } from '../../../services/id/id.service'; import { FudisIdParent } from '../../../types/id'; import { FormGroup } from '@angular/forms'; +import { FudisFocusService } from '../../../services/focus/focus.service'; @Directive({ selector: '[fudisFieldSetBase]', @@ -13,6 +14,7 @@ export class FieldSetBaseDirective extends TooltipApiDirective { constructor( protected _idService: FudisIdService, protected _translationService: FudisTranslationService, + protected _focusService: FudisFocusService, protected _changeDetectorRef: ChangeDetectorRef, ) { super(); diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/directives/form/input-base/input-base.directive.ts b/ngx-fudis/projects/ngx-fudis/src/lib/directives/form/input-base/input-base.directive.ts index 3c14b1ccf..6495c7a34 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/directives/form/input-base/input-base.directive.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/directives/form/input-base/input-base.directive.ts @@ -107,8 +107,6 @@ export class InputBaseDirective extends TooltipApiDirective implements OnDestroy */ protected _required: boolean = false; - protected _focusTryCounter: number = 0; - protected _destroyed = new Subject(); /** @@ -138,12 +136,6 @@ export class InputBaseDirective extends TooltipApiDirective implements OnDestroy public focusToInput(): void { if (this._inputRef?.nativeElement) { this._inputRef.nativeElement.focus(); - this._focusTryCounter = 0; - } else if (this._focusTryCounter < 100) { - setTimeout(() => { - this._focusTryCounter += 1; - this.focusToInput(); - }, 100); } } From a94cd3c891ca78608f03ca82e1e2d090ce19a358 Mon Sep 17 00:00:00 2001 From: Eero Suvanto Date: Wed, 10 Apr 2024 13:54:12 +0300 Subject: [PATCH 3/5] DS-257: link id and focusService adjustsment --- .../link/link-api/link-api.directive.ts | 5 +++ .../src/lib/directives/link/link.directive.ts | 42 +++++++++---------- .../src/lib/services/id/id.service.ts | 1 + .../ngx-fudis/src/lib/services/id/testData.ts | 4 ++ .../projects/ngx-fudis/src/lib/types/id.ts | 1 + 5 files changed, 31 insertions(+), 22 deletions(-) diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/directives/link/link-api/link-api.directive.ts b/ngx-fudis/projects/ngx-fudis/src/lib/directives/link/link-api/link-api.directive.ts index 9ab68f117..d3c739edd 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/directives/link/link-api/link-api.directive.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/directives/link/link-api/link-api.directive.ts @@ -19,4 +19,9 @@ export class LinkApiDirective { * Set browser focus to link on the first load. */ @Input() initialFocus: boolean = false; + + /** + * Id for the anchor element. By default generated with FudisIdService + */ + @Input() id: string; } diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/directives/link/link.directive.ts b/ngx-fudis/projects/ngx-fudis/src/lib/directives/link/link.directive.ts index e19c22fc2..0d4af2f91 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/directives/link/link.directive.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/directives/link/link.directive.ts @@ -1,12 +1,18 @@ import { OnInit, AfterViewInit, Directive, ElementRef, OnChanges, Input } from '@angular/core'; import { LinkApiDirective } from './link-api/link-api.directive'; import { FudisComponentChanges } from '../../types/miscellaneous'; +import { FudisFocusService } from '../../services/focus/focus.service'; +import { FudisIdService } from '../../services/id/id.service'; @Directive({ selector: '[fudisLink]', }) export class LinkDirective extends LinkApiDirective implements OnInit, OnChanges, AfterViewInit { - constructor(protected _bindedElement: ElementRef) { + constructor( + protected _bindedElement: ElementRef, + private _focusService: FudisFocusService, + private _idService: FudisIdService, + ) { super(); } @@ -15,19 +21,20 @@ export class LinkDirective extends LinkApiDirective implements OnInit, OnChanges */ @Input() classes: string[] = []; - /** - * Helper counter for setting link focus - */ - private _focusTryCounter: number = 0; - ngAfterViewInit(): void { if (this.initialFocus) { - this._focusToLink(); + this._focusToAnchorElement(); } } ngOnInit(): void { this._setCssClasses(); + + if (this.id) { + this._idService.addNewId('link', this.id); + } else { + this.id = this._idService.getNewId('link'); + } } ngOnChanges(changes: FudisComponentChanges): void { @@ -36,21 +43,6 @@ export class LinkDirective extends LinkApiDirective implements OnInit, OnChanges } } - /** - * Set visible focus to the link - */ - protected _focusToLink(): void { - if (this._bindedElement?.nativeElement) { - (this._bindedElement.nativeElement as HTMLAnchorElement).focus(); - this._focusTryCounter = 0; - } else if (this._focusTryCounter < 100) { - setTimeout(() => { - this._focusTryCounter += 1; - this._focusToLink(); - }, 100); - } - } - /** * Set CSS classes */ @@ -71,4 +63,10 @@ export class LinkDirective extends LinkApiDirective implements OnInit, OnChanges (this._bindedElement.nativeElement as HTMLElement).classList.value = arrayToString; } + + private _focusToAnchorElement(): void { + if (this._bindedElement?.nativeElement && !this._focusService.isIgnored(this.id)) { + (this._bindedElement.nativeElement as HTMLAnchorElement).focus(); + } + } } diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/services/id/id.service.ts b/ngx-fudis/projects/ngx-fudis/src/lib/services/id/id.service.ts index ab1b61c83..82a4bfd6c 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/services/id/id.service.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/services/id/id.service.ts @@ -29,6 +29,7 @@ export class FudisIdService { guidance: [], heading: [], 'input-with-language-options': [], + link: [], section: [], 'text-area': [], 'text-input': [], diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/services/id/testData.ts b/ngx-fudis/projects/ngx-fudis/src/lib/services/id/testData.ts index c9531cf46..dc5bd4030 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/services/id/testData.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/services/id/testData.ts @@ -17,6 +17,7 @@ export const testDataBefore: FudisIdData = { guidance: [], heading: [], 'input-with-language-options': [], + link: [], section: [], 'text-area': [], 'text-input': [], @@ -102,6 +103,7 @@ export const testComponentDataAfter: FudisIdData = { 'custom-id-for-input-with-language-options', 'fudis-input-with-language-options-4', ], + link: ['fudis-link-1', 'fudis-link-2', 'custom-id-for-link', 'fudis-link-4'], section: ['fudis-section-1', 'fudis-section-2', 'custom-id-for-section', 'fudis-section-4'], 'text-area': [ 'fudis-text-area-1', @@ -152,6 +154,7 @@ export const testParentDataAfter: FudisIdData = { guidance: [], heading: [], 'input-with-language-options': [], + link: [], section: [], 'text-area': [], 'text-input': [], @@ -275,6 +278,7 @@ export const testGrandParentDataAfter: FudisIdData = { guidance: [], heading: [], 'input-with-language-options': [], + link: [], section: [], 'text-area': [], 'text-input': [], diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/types/id.ts b/ngx-fudis/projects/ngx-fudis/src/lib/types/id.ts index 7204ab831..dc2d74f33 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/types/id.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/types/id.ts @@ -18,6 +18,7 @@ export const fudisIdComponents = [ 'guidance', 'heading', 'input-with-language-options', + 'link', 'section', 'text-area', 'text-input', From 4c2813bc6e79e37259baf5043af747900400e73f Mon Sep 17 00:00:00 2001 From: Eero Suvanto Date: Wed, 10 Apr 2024 13:54:20 +0300 Subject: [PATCH 4/5] DS-257: focus service tests --- .../lib/services/focus/focus.service.spec.ts | 110 +++++++++++++++++- .../src/lib/services/focus/focus.service.ts | 10 +- 2 files changed, 111 insertions(+), 9 deletions(-) diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/services/focus/focus.service.spec.ts b/ngx-fudis/projects/ngx-fudis/src/lib/services/focus/focus.service.spec.ts index b019f9b68..5ef7e0484 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/services/focus/focus.service.spec.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/services/focus/focus.service.spec.ts @@ -1,16 +1,116 @@ -import { TestBed } from '@angular/core/testing'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; import { FudisFocusService } from './focus.service'; +import { Component } from '@angular/core'; +// import { getElement } from '../../utilities/tests/utilities'; +import { ButtonComponent } from '../../components/button/button.component'; +import { LinkComponent } from '../../components/link/link.component'; +import { IconComponent } from '../../components/icon/icon.component'; +import { LinkApiDirective } from '../../directives/link/link-api/link-api.directive'; +import { LinkDirective } from '../../directives/link/link.directive'; + +@Component({ + selector: 'fudis-mock-component', + template: `
+ First link + Second link +
`, +}) +class MockFocusComponent { + secondLinkVisible = false; + + focusedId: string; + + handleFocus(id: string) { + console.log('hellou!!!!!!!!'); + this.focusedId = id; + } +} -// TODO: Write tests describe('FudisFocusService', () => { + let component: MockFocusComponent; let service: FudisFocusService; + let fixture: ComponentFixture; beforeEach(() => { - TestBed.configureTestingModule({}); + TestBed.configureTestingModule({ + declarations: [ + MockFocusComponent, + ButtonComponent, + IconComponent, + LinkComponent, + LinkDirective, + LinkApiDirective, + ], + }); + + fixture = TestBed.createComponent(MockFocusComponent); + component = fixture.componentInstance; service = TestBed.inject(FudisFocusService); + service.addToIgnoreList('fudis-link-2'); + fixture.detectChanges(); + }); + + describe('Basic functionality', () => { + it('should be created', () => { + expect(service).toBeTruthy(); + }); + + it('getFocusTarget and setFocusTarget', () => { + expect(service.getFocusTarget()).toEqual(undefined); + + const newButton: HTMLButtonElement = document.createElement('button'); + newButton.textContent = 'Click me!'; + newButton.setAttribute('id', 'target-button-id'); + + service.setFocusTarget(newButton); + + expect(service.getFocusTarget()).toEqual(newButton); + }); + + it('ignoreList functionality', () => { + expect(service.getIgnoreList()).toEqual(['fudis-link-2']); + + service.addToIgnoreList('ignore-1'); + service.addToIgnoreList('ignore-1'); + service.addToIgnoreList('ignore-1'); + service.addToIgnoreList('ignore-2'); + service.addToIgnoreList('ignore-3'); + service.removeFromIgnoreList('ignore-2'); + service.removeFromIgnoreList('mistyped-ingore-1'); + + expect(service.isIgnored('ignore-1')).toEqual(true); + expect(service.isIgnored('ignore-2')).toEqual(false); + + expect(service.getIgnoreList()).toEqual(['fudis-link-2', 'ignore-1', 'ignore-3']); + }); }); - it('should be created', () => { - expect(service).toBeTruthy(); + describe('Service with components', () => { + it('should focus to non-ignored link on init', () => { + expect(component.focusedId).toEqual('fudis-link-1'); + }); + + it('should not focus to ignored link when link is set visible', () => { + component.secondLinkVisible = true; + fixture.detectChanges(); + + expect(component.focusedId).toEqual('fudis-link-1'); + }); + + it('should focus to second link when it is removed from ignored list and set visible', () => { + service.removeFromIgnoreList('fudis-link-2'); + component.secondLinkVisible = true; + fixture.detectChanges(); + + expect(component.focusedId).toEqual('fudis-link-2'); + }); }); }); diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/services/focus/focus.service.ts b/ngx-fudis/projects/ngx-fudis/src/lib/services/focus/focus.service.ts index bc4378a44..733606b7e 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/services/focus/focus.service.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/services/focus/focus.service.ts @@ -34,16 +34,18 @@ export class FudisFocusService { } /** - * Focus target element by id + * Focus target element by id. If focusable element is not available when function is called, it will repeatively call itself until try counter is full. + * @param id target to focus + * @param tryCounter how many times function should try to focus to given id */ - public focusToElementById(id: string, tryCounter: number = 100): void { + public focusToElementById(id: string, numberOfTries: number = 100): void { setTimeout(() => { const element = this._document.getElementById(id); if (element) { element.focus(); - } else if (tryCounter > 0) { - this.focusToElementById(id, tryCounter - 1); + } else if (numberOfTries > 0) { + this.focusToElementById(id, numberOfTries - 1); } }, 50); } From 691f1975ab76138484c761574b7360edb659abdf Mon Sep 17 00:00:00 2001 From: Eero Suvanto Date: Wed, 10 Apr 2024 14:28:28 +0300 Subject: [PATCH 5/5] DS-257: cleaning --- .../form/checkbox-group/checkbox-group.component.ts | 4 +--- .../src/lib/components/form/fieldset/fieldset.component.ts | 4 ++-- .../language-badge-group/language-badge-group.component.ts | 5 +---- .../ngx-fudis/src/lib/components/link/link.component.html | 3 +++ .../form/fieldset-base/fieldset-base.directive.spec.ts | 4 ---- .../form/fieldset-base/fieldset-base.directive.ts | 2 -- .../ngx-fudis/src/lib/directives/link/link.directive.ts | 2 ++ .../ngx-fudis/src/lib/services/focus/focus.service.spec.ts | 2 -- .../lib/services/translation/translation.service.spec.ts | 6 ++++++ 9 files changed, 15 insertions(+), 17 deletions(-) diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/checkbox-group/checkbox-group.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/checkbox-group/checkbox-group.component.ts index 6926919ff..c820e779f 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/checkbox-group/checkbox-group.component.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/checkbox-group/checkbox-group.component.ts @@ -20,7 +20,6 @@ import { hasAtLeastOneRequiredOrMinValidator } from '../../../utilities/form/get import { FormComponent } from '../form/form.component'; import { FudisIdService } from '../../../services/id/id.service'; import { FudisTranslationService } from '../../../services/translation/translation.service'; -import { FudisFocusService } from '../../../services/focus/focus.service'; @Component({ selector: 'fudis-checkbox-group', @@ -32,10 +31,9 @@ export class CheckboxGroupComponent extends FieldSetBaseDirective implements OnI @Host() @Optional() protected _parentForm: FormComponent | null, _idService: FudisIdService, _translationService: FudisTranslationService, - _focusService: FudisFocusService, _changeDetectorRef: ChangeDetectorRef, ) { - super(_idService, _translationService, _focusService, _changeDetectorRef); + super(_idService, _translationService, _changeDetectorRef); } /** * FormGroup for Checkbox group. If provided, provide also `controlName` for each Checkbox children. diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/fieldset/fieldset.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/fieldset/fieldset.component.ts index 6b3d2925d..259dbb784 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/fieldset/fieldset.component.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/fieldset/fieldset.component.ts @@ -40,12 +40,12 @@ export class FieldSetComponent constructor( @Host() @Optional() private _parentForm: FormComponent | null, private _errorSummaryService: FudisInternalErrorSummaryService, + private _focusService: FudisFocusService, _idService: FudisIdService, _translationService: FudisTranslationService, - _focusService: FudisFocusService, _changeDetectorRef: ChangeDetectorRef, ) { - super(_idService, _translationService, _focusService, _changeDetectorRef); + super(_idService, _translationService, _changeDetectorRef); } /** diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/language-badge-group/language-badge-group.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/language-badge-group/language-badge-group.component.ts index ace8873e0..3122bfcf6 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/language-badge-group/language-badge-group.component.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/language-badge-group/language-badge-group.component.ts @@ -14,10 +14,7 @@ import { TooltipApiDirective } from '../../directives/tooltip/tooltip-api.direct styleUrls: ['./language-badge-group.component.scss'], }) export class LanguageBadgeGroupComponent extends TooltipApiDirective implements OnInit { - constructor( - private _translationService: FudisTranslationService, - - ) { + constructor(private _translationService: FudisTranslationService) { super(); effect(() => { this._languageOptions = _translationService.getBadgeGroupLanguages(); diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/link/link.component.html b/ngx-fudis/projects/ngx-fudis/src/lib/components/link/link.component.html index dddd443c1..5626ff0bf 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/link/link.component.html +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/link/link.component.html @@ -1,6 +1,7 @@ { let idService: FudisIdService; let translationService: FudisTranslationService; let changeDetectorRef: ChangeDetectorRef; - let focusService: FudisFocusService; beforeEach(() => { TestBed.configureTestingModule({ @@ -82,7 +80,6 @@ describe('FieldSetBaseDirective', () => { idService = TestBed.inject(FudisIdService); translationService = TestBed.inject(FudisTranslationService); changeDetectorRef = TestBed.inject(ChangeDetectorRef); - focusService = TestBed.inject(FudisFocusService); }); it('should create an instance', () => { @@ -90,7 +87,6 @@ describe('FieldSetBaseDirective', () => { const directive: FieldSetBaseDirective = new FieldSetBaseDirective( idService, translationService, - focusService, changeDetectorRef, ); diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/directives/form/fieldset-base/fieldset-base.directive.ts b/ngx-fudis/projects/ngx-fudis/src/lib/directives/form/fieldset-base/fieldset-base.directive.ts index 89e2b525d..df4c70133 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/directives/form/fieldset-base/fieldset-base.directive.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/directives/form/fieldset-base/fieldset-base.directive.ts @@ -5,7 +5,6 @@ import { FudisTranslationService } from '../../../services/translation/translati import { FudisIdService } from '../../../services/id/id.service'; import { FudisIdParent } from '../../../types/id'; import { FormGroup } from '@angular/forms'; -import { FudisFocusService } from '../../../services/focus/focus.service'; @Directive({ selector: '[fudisFieldSetBase]', @@ -14,7 +13,6 @@ export class FieldSetBaseDirective extends TooltipApiDirective { constructor( protected _idService: FudisIdService, protected _translationService: FudisTranslationService, - protected _focusService: FudisFocusService, protected _changeDetectorRef: ChangeDetectorRef, ) { super(); diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/directives/link/link.directive.ts b/ngx-fudis/projects/ngx-fudis/src/lib/directives/link/link.directive.ts index 0d4af2f91..1ccc030c5 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/directives/link/link.directive.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/directives/link/link.directive.ts @@ -35,6 +35,8 @@ export class LinkDirective extends LinkApiDirective implements OnInit, OnChanges } else { this.id = this._idService.getNewId('link'); } + + this._bindedElement.nativeElement.setAttribute('id', this.id); } ngOnChanges(changes: FudisComponentChanges): void { diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/services/focus/focus.service.spec.ts b/ngx-fudis/projects/ngx-fudis/src/lib/services/focus/focus.service.spec.ts index 5ef7e0484..949a44bdd 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/services/focus/focus.service.spec.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/services/focus/focus.service.spec.ts @@ -1,7 +1,6 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { FudisFocusService } from './focus.service'; import { Component } from '@angular/core'; -// import { getElement } from '../../utilities/tests/utilities'; import { ButtonComponent } from '../../components/button/button.component'; import { LinkComponent } from '../../components/link/link.component'; import { IconComponent } from '../../components/icon/icon.component'; @@ -29,7 +28,6 @@ class MockFocusComponent { focusedId: string; handleFocus(id: string) { - console.log('hellou!!!!!!!!'); this.focusedId = id; } } diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/services/translation/translation.service.spec.ts b/ngx-fudis/projects/ngx-fudis/src/lib/services/translation/translation.service.spec.ts index 5d5a38149..046909c52 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/services/translation/translation.service.spec.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/services/translation/translation.service.spec.ts @@ -13,4 +13,10 @@ describe('TranslationService', () => { it('should be created', () => { expect(service).toBeTruthy(); }); + + // describe('default values', () => { + // it('should ', () => {}); + + // it('should ', () => {}); + // }); });