test:🐳 all test when have icon

NsdHSO · Oct 6, 2023 · 8aed4a3 · 8aed4a3
1 parent 09f1103
commit 8aed4a3
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 3 deletions.
diff --git a/ftx-sivan-shared/src/lib/components/toogle/toggle.component.html b/ftx-sivan-shared/src/lib/components/toogle/toggle.component.html
@@ -17,7 +17,7 @@
   />
   <div class="w-11 h-6">
     <div
-      data-test="shared-toggle-type-input"
+      data-test="shared-toggle-type-input-label"
       class="h-full transition-all duration-300 -translate-y-[0.05rem]"
       [ngClass]="{
       'translate-x-3/4 ': control.value,
@@ -36,15 +36,18 @@
       >
         <mat-icon
           *ngIf="valuesToggled; else noData"
+          data-test="shared-toggle-type-input-label-another"
           class="rounded-full transition-all duration-300 !w-fit text-gray-500 dark:text-blue-50"
           [svgIcon]="
             control.value
               ? valuesToggled[0].icon || ''
               : valuesToggled[1].icon || ''
           "
-        ></mat-icon>
+        >
+        </mat-icon>
         <ng-template #noData>
           <div
+            data-test="shared-toggle-type-input-label-implicit"
             [ngClass]="{
 						          'text-white':  control.disabled,
 

diff --git a/ftx-sivan-shared/src/lib/components/toogle/toggle.component.spec.ts b/ftx-sivan-shared/src/lib/components/toogle/toggle.component.spec.ts
@@ -1,6 +1,8 @@
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormControl } from '@angular/forms';
+import { MatIconModule } from '@angular/material/icon';
+import { IconCoreModule } from 'ngx-liburg-icon';
 import { ToggleComponent } from './toggle.component';
 
 describe('ToogleComponent', () => {
@@ -9,7 +11,7 @@ describe('ToogleComponent', () => {
   let formControl = new FormControl('TESTr');
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ToggleComponent],
+      imports: [ToggleComponent, MatIconModule, IconCoreModule],
     }).compileComponents();
     fixture = TestBed.createComponent(ToggleComponent);
     component = fixture.componentInstance;
@@ -68,6 +70,76 @@ describe('ToogleComponent', () => {
         expect(component.control.value).toBeFalsy();
       });
     });
+    describe('should label go', () => {
+      it('should left', () => {
+        component.control = new FormControl(true);
+        fixture.detectChanges();
+        const wrapperElement = fixture.nativeElement.querySelector(
+          '[data-test="shared-toggle-type-input-label"]'
+        );
+        expect(wrapperElement.classList.contains('translate-x-3/4')).toBe(true);
+      });
+      it('should right', () => {
+        component.control = new FormControl(false);
+        fixture.detectChanges();
+        const wrapperElement = fixture.nativeElement.querySelector(
+          '[data-test="shared-toggle-type-input-label"]'
+        );
+        expect(wrapperElement.classList.contains('-translate-x-4')).toBe(true);
+      });
+    });
+    describe('should check content', () => {
+      describe('be implicit', () => {
+        it('should not have value use implicit value', () => {
+          component.control = new FormControl(true);
+          component.valuesToggled = null;
+          fixture.detectChanges();
+          const wrapperElement = fixture.nativeElement.querySelector(
+            '[data-test="shared-toggle-type-input-label-implicit"]'
+          );
+          expect(wrapperElement.innerHTML).toBe('Yes');
+        });
+        it('should not have value use implicit value', () => {
+          component.control = new FormControl(false);
+          component.valuesToggled = null;
+          fixture.detectChanges();
+          const wrapperElement = fixture.nativeElement.querySelector(
+            '[data-test="shared-toggle-type-input-label-implicit"]'
+          );
+          expect(wrapperElement.innerHTML).toBe('No');
+        });
+      });
+      describe('have another value', () => {
+        it('should have set icon when control have value', () => {
+          component.control = new FormControl(false);
+          component.valuesToggled = [
+            { icon: 'fa_solid:CR', description: '', value: true },
+            { icon: 'fa_solid:RO', description: 'test', value: false },
+          ];
+          fixture.detectChanges();
+          const wrapperElement = fixture.nativeElement.querySelector(
+            '[data-test="shared-toggle-type-input-label-another"]'
+          );
+          expect(wrapperElement.getAttribute('ng-reflect-svg-icon')).toBe(
+            'fa_solid:RO'
+          );
+        });
+        it('should have set icon when no control have value', () => {
+          component.control = new FormControl(true);
+          component.valuesToggled = [
+            { icon: 'fa_solid:CR', description: '', value: true },
+            { icon: 'fa_solid:RO', description: 'test', value: false },
+          ];
+          fixture.detectChanges();
+          const wrapperElement = fixture.nativeElement.querySelector(
+            '[data-test="shared-toggle-type-input-label-another"]'
+          );
+          expect(wrapperElement.getAttribute('ng-reflect-svg-icon')).toBe(
+            'fa_solid:CR'
+          );
+        });
+      });
+    });
     it('should check if the correct class is applied when is not disabled', () => {
       component.control = new FormControl('Iban');
       const wrapperElement = fixture.nativeElement.querySelector(