[Alert, Alert Group, Alert Service]: New components and service

ngx-fudis/projects/ngx-fudis/src/lib/components/alert/alert-group/alert-group.component.html

@@ -1,9 +1,9 @@
 <section
-  *ngIf="_visible"
+  *ngIf="(_visible | async) && (_alertList | async) as alerts"
   class="fudis-alert-group fudis-alert-group__{{ position }}"
-  [attr.aria-label]="_alertList().length > 0 ? _alertGroupLabel + ': ' + _alertList().length : null"
+  [attr.aria-label]="alerts.length > 0 ? (_alertGroupLabel | async) + ': ' + alerts.length : null"
 >
-  <ng-container *ngFor="let alert of _alertList()">
+  <ng-container *ngFor="let alert of alerts">
     <fudis-alert
       [initialFocus]="alert.initialFocus"
       [variant]="alert.type"

ngx-fudis/projects/ngx-fudis/src/lib/components/alert/alert-group/alert-group.component.spec.ts

@@ -1,31 +1,29 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { MockComponent } from 'ng-mocks';
 import { AlertGroupComponent } from './alert-group.component';
 import { FudisDialogService } from '../../../services/dialog/dialog.service';
 import { BodyTextComponent } from '../../typography/body-text/body-text.component';
 import { FudisAlertService } from '../../../services/alert/alert.service';
-import { FudisAlert } from '../../../types/miscellaneous';
+import { FudisAlert, fudisAlertPositionArray } from '../../../types/miscellaneous';
 import { AlertComponent } from '../alert/alert.component';
 import { IconComponent } from '../../icon/icon.component';
 import { getElement, sortClasses } from '../../../utilities/tests/utilities';
+import { BehaviorSubject } from 'rxjs';
 
-// TODO: fix & refactor when these are again published
-
-describe.skip('AlertGroupComponent', () => {
+describe('AlertGroupComponent', () => {
   let component: AlertGroupComponent;
   let fixture: ComponentFixture<AlertGroupComponent>;
   let alertService: FudisAlertService;
   let dialogService: FudisDialogService;
 
-  beforeEach(() => {
-    TestBed.configureTestingModule({
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
       imports: [MatDialogModule],
       declarations: [
         AlertGroupComponent,
-        BodyTextComponent,
         AlertComponent,
+        BodyTextComponent,
         MockComponent(IconComponent),
       ],
       providers: [
@@ -39,7 +37,10 @@ describe.skip('AlertGroupComponent', () => {
           useValue: [],
         },
       ],
-    });
+    }).compileComponents();
+
+    alertService = TestBed.inject(FudisAlertService);
+    dialogService = TestBed.inject(FudisDialogService);
     fixture = TestBed.createComponent(AlertGroupComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
@@ -50,55 +51,33 @@ describe.skip('AlertGroupComponent', () => {
   });
 
   describe('Basic inputs', () => {
-    it('should have default CSS classes', () => {
-      const element = getElement(fixture, 'section');
-
-      expect(sortClasses(element.className)).toEqual(
-        sortClasses('fudis-alert-group fudis-alert-group__fixed'),
-      );
-    });
-
-    it('should have absolute position', () => {
-      component.position = 'absolute';
-      fixture.detectChanges();
-
-      const element = getElement(fixture, 'section');
-
-      expect(sortClasses(element.className)).toEqual(
-        sortClasses('fudis-alert-group fudis-alert-group__absolute'),
-      );
-    });
-
-    it('should have static position', () => {
-      component.position = 'static';
-      fixture.detectChanges();
-
-      const element = getElement(fixture, 'section');
-
-      expect(sortClasses(element.className)).toEqual(
-        sortClasses('fudis-alert-group fudis-alert-group__static'),
-      );
+    it('should update CSS class according to position input', () => {
+      fudisAlertPositionArray.forEach((position) => {
+        const element = getElement(fixture, '.fudis-alert-group');
+        fixture.componentRef.setInput('position', `${position}`);
+        fixture.detectChanges();
+
+        expect(sortClasses(element.className)).toEqual(
+          sortClasses(`fudis-alert-group fudis-alert-group__${position}`),
+        );
+      });
     });
   });
 
   describe('Functionality with services', () => {
     beforeEach(() => {
-      alertService = TestBed.inject(FudisAlertService);
-      dialogService = TestBed.inject(FudisDialogService);
-
-      jest.spyOn(alertService, 'getAlertsSignal').mockImplementation();
-
       const firstAlert: FudisAlert = {
-        message: 'Test message',
+        message: new BehaviorSubject<string>('Test message'),
         id: 'my-test-id-1',
         type: 'info',
       };
 
       const secondAlert: FudisAlert = {
-        message: 'Second test message',
+        message: new BehaviorSubject<string>('Second test message'),
         id: 'my-test-id-2',
         type: 'warning',
       };
+
       alertService.addAlert(firstAlert);
       alertService.addAlert(secondAlert);
     });
@@ -111,7 +90,7 @@ describe.skip('AlertGroupComponent', () => {
       expect(childAlerts.length).toEqual(2);
     });
 
-    it('should have one alert as children after one is dismissed', () => {
+    it('should have one alert as child after one is dismissed', () => {
       alertService.dismissAlert('my-test-id-1');
       fixture.detectChanges();
 
@@ -142,7 +121,6 @@ describe.skip('AlertGroupComponent', () => {
 
     it('should not be visible, if Dialog is not open and Alert Group is inside dialog', () => {
       component.insideDialog = true;
-
       component.ngAfterViewInit();
 
       fixture.detectChanges();

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

@@ -1,6 +1,7 @@
-import { ChangeDetectorRef, Component, Input, AfterViewInit, Signal, effect } from '@angular/core';
-
-import { FudisAlertElement } from '../../../types/miscellaneous';
+import { Component, Input, AfterViewInit, effect, ChangeDetectorRef } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { FudisAlertElement, FudisAlertPosition } from '../../../types/miscellaneous';
 import { FudisTranslationService } from '../../../services/translation/translation.service';
 import { FudisAlertService } from '../../../services/alert/alert.service';
 import { FudisDialogService } from '../../../services/dialog/dialog.service';
@@ -14,13 +15,18 @@ export class AlertGroupComponent implements AfterViewInit {
   constructor(
     private _alertService: FudisAlertService,
     private _translationService: FudisTranslationService,
-    private readonly _changeDetectorRef: ChangeDetectorRef,
     private _dialogService: FudisDialogService,
+    private _cdRef: ChangeDetectorRef,
   ) {
+    /**
+     * Subscribe to current visible alerts
+     */
+    _alertService.allAlertsObservable.pipe(takeUntilDestroyed()).subscribe((value) => {
+      this._alertList.next(value);
+    });
+
     effect(() => {
-      this._alertList = this._alertService.getAlertsSignal();
-      // TODO: To Observable
-      this._alertGroupLabel = this._translationService.getTranslations()().ALERT.HEADING_LABEL;
+      this._alertGroupLabel.next(this._translationService.getTranslations()().ALERT.HEADING_LABEL);
 
       this._dialogStatus = this._dialogService.getDialogOpenSignal()();
 
@@ -29,54 +35,55 @@ export class AlertGroupComponent implements AfterViewInit {
   }
 
   /**
-   * CSS position of alerts. Defaults to fixed.
+   * CSS position of alerts
    */
-  @Input() position: 'fixed' | 'absolute' | 'static' = 'fixed';
+  @Input() position: FudisAlertPosition = 'fixed';
 
   /**
-   * Boolean to determine if Alert Group is used as child in Fudis Dialog.
+   * Boolean to determine if Alert Group is used inside Fudis Dialog Component
    */
   @Input() insideDialog: boolean = false;
 
   /**
-   * List of Alerts fetched from service
+   * List of Alerts fetched from Alert Service
    */
-  protected _alertList: Signal<FudisAlertElement[]>;
+  protected _alertList = new BehaviorSubject<FudisAlertElement[]>([]);
 
   /**
    * Label for section element containing alerts
    */
-  protected _alertGroupLabel: string;
+  protected _alertGroupLabel = new BehaviorSubject<string>('');
 
   /**
-   * Boolean to determine if Alert group is visible. Used with _dialogStatus boolean.
+   * Boolean to determine if Alert group is visible. Used with _dialogStatus boolean
    */
-  protected _visible: boolean = false;
+  protected _visible = new BehaviorSubject<boolean>(false);
 
   /**
-   * Boolean from service to determine if Fudis Dialog is open.
+   * Boolean from Dialog Service to determine if Fudis Dialog is open
    */
   private _dialogStatus: boolean;
 
   ngAfterViewInit(): void {
     this._setVisibility();
+    this._cdRef.detectChanges();
   }
 
   /**
    * Getter for visible status
    */
   public getVisibleStatus(): boolean {
-    return this._visible;
+    return this._visible.value;
   }
 
   /**
-   * Set visibility when Fudis Dialog is opened and closed.
+   * Set visibility when Fudis Dialog is opened and closed
    */
   private _setVisibility(): void {
     if ((this._dialogStatus && this.insideDialog) || (!this._dialogStatus && !this.insideDialog)) {
-      this._visible = true;
+      this._visible.next(true);
     } else {
-      this._visible = false;
+      this._visible.next(false);
     }
   }
 }