[DSC-1872] remove function from template, adapt tests

Author: FrancescoMolinaro

src/app/shared/switch/switch.component.html

@@ -1,5 +1,5 @@
 <div class="btn-group">
-  <div class="switch-container" [ngClass]="getBackgroundColorClass()">
+  <div class="switch-container" [ngClass]="backgroundClass">
     <div *ngFor="let option of options">
       <div class="switch-opt"
            (click)="onOptionClick(option.value)"

src/app/shared/switch/switch.component.spec.ts

@@ -45,7 +45,7 @@ describe('SwitchComponent', () => {
 
   it('should select an option and emit selected value', () => {
     component.options = mockOptions;
-    component.selectedValue = mockOptions[0].value;
+    component.onOptionClick(mockOptions[0].value);
     fixture.detectChanges();
 
     spyOn(component.selectedValueChange, 'emit');
@@ -60,7 +60,7 @@ describe('SwitchComponent', () => {
 
   it('should apply the correct background color class', () => {
     component.options = mockOptions;
-    component.selectedValue = mockOptions[1].value;
+    component.onOptionClick(mockOptions[1].value);
     fixture.detectChanges();
 
     const containerElement = fixture.debugElement.query(By.css('.switch-container'));
@@ -69,7 +69,7 @@ describe('SwitchComponent', () => {
 
   it('should apply the correct icon color class for selected option', () => {
     component.options = mockOptions;
-    component.selectedValue = mockOptions[1].value;
+    component.onOptionClick(mockOptions[1].value);
     fixture.detectChanges();
 
     const iconElement = fixture.debugElement.query(By.css('.switch-opt .icon-2'));
@@ -78,7 +78,7 @@ describe('SwitchComponent', () => {
 
   it('should display the correct label with the selected color', () => {
     component.options = mockOptions;
-    component.selectedValue = mockOptions[1].value;
+    component.onOptionClick(mockOptions[1].value);
     fixture.detectChanges();
 
     const labelElement = fixture.debugElement.query(By.css('.visibility-label'));
@@ -88,7 +88,7 @@ describe('SwitchComponent', () => {
 
   it('should apply bg-white class to selected option', () => {
     component.options = mockOptions;
-    component.selectedValue = mockOptions[1].value;
+    component.onOptionClick(mockOptions[1].value);
     fixture.detectChanges();
 
     const selectedOptionElement = fixture.debugElement.query(By.css('.switch-opt.bg-white'));

src/app/shared/switch/switch.component.ts

@@ -1,4 +1,5 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { hasValue } from '../empty.util';
 
 export enum SwitchColor {
   Primary = 'primary',
@@ -21,7 +22,7 @@ export interface SwitchOption {
   templateUrl: './switch.component.html',
   styleUrls: ['./switch.component.scss'],
 })
-export class SwitchComponent {
+export class SwitchComponent implements OnInit, OnChanges {
   /**
    * The options available for the switch
    */
@@ -37,6 +38,24 @@ export class SwitchComponent {
    */
   @Output() selectedValueChange = new EventEmitter<any>();
 
+  /**
+   * BG style of the currently selected option
+   */
+
+  public backgroundClass: string;
+
+  ngOnInit() {
+    this.backgroundClass = this.getBackgroundColorClass();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    // Recalculate BG class if options or current value are changed by parent component
+    if ((hasValue(changes?.selectedValue?.currentValue) && !changes.selectedValue.isFirstChange())
+        || (hasValue(changes?.options?.currentValue) && !changes.options.isFirstChange())) {
+      this.backgroundClass = this.getBackgroundColorClass();
+    }
+  }
+
   /**
    * Update the selected value and emit the change event
    * @param value The new value to select
@@ -46,6 +65,8 @@ export class SwitchComponent {
     this.selectedValue = value;
     this.selectedValueChange.emit(this.selectedValue);
 
+    this.backgroundClass = this.getBackgroundColorClass();
+
   }
 
   /**