develop more test cases

primefaces · Oct 13, 2024 · 2f36e2f · 2f36e2f
1 parent 38284ba
commit 2f36e2f
Showing 1 changed file with 55 additions and 0 deletions.
diff --git a/src/app/components/skeleton/skeleton.spec.ts b/src/app/components/skeleton/skeleton.spec.ts
@@ -1,3 +1,4 @@
+import { ComponentRef } from '@angular/core';
 import { TestBed, ComponentFixture } from '@angular/core/testing';
 import { Skeleton, SkeletonModule } from './skeleton';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@@ -6,6 +7,7 @@ import { By } from '@angular/platform-browser';
 describe('Skeleton', () => {
     let skeleton: Skeleton;
     let fixture: ComponentFixture<Skeleton>;
+    let skeletonRef: ComponentRef<Skeleton>;
 
     beforeEach(() => {
         TestBed.configureTestingModule({
@@ -14,6 +16,7 @@ describe('Skeleton', () => {
 
         fixture = TestBed.createComponent(Skeleton);
         skeleton = fixture.componentInstance;
+        skeletonRef = fixture.componentRef;
     });
 
     it('should display by default', () => {
@@ -22,4 +25,56 @@ describe('Skeleton', () => {
         const skeletonEl = fixture.debugElement.query(By.css('.p-skeleton'));
         expect(skeletonEl.nativeElement).toBeTruthy();
     });
+
+    it('should render skeleton with default values', () => {
+        fixture.detectChanges();
+        const skeletonElement = fixture.nativeElement.querySelector('div');
+
+        expect(skeletonElement).toBeTruthy();
+        expect(skeletonElement.classList).toContain('p-skeleton');
+        expect(skeletonElement.classList).toContain('p-component');
+        expect(skeletonElement.style.width).toBe('100%');
+        expect(skeletonElement.style.height).toBe('1rem');
+    });
+
+    it('should apply circle shape and no animation', () => {
+        skeletonRef.setInput('shape', 'circle');
+        skeletonRef.setInput('animation', 'none');
+        fixture.detectChanges();
+
+        const skeletonElement = fixture.nativeElement.querySelector('div');
+        expect(skeletonElement.classList).toContain('p-skeleton-circle');
+        expect(skeletonElement.classList).toContain('p-skeleton-animation-none');
+    });
+
+    it('should apply custom styles and borderRadius', () => {
+        skeletonRef.setInput('style', { backgroundColor: 'red' });
+        skeletonRef.setInput('borderRadius', '50%');
+        skeletonRef.setInput('size', '50px');
+        fixture.detectChanges();
+
+        const skeletonElement = fixture.nativeElement.querySelector('div');
+        expect(skeletonElement.style.backgroundColor).toBe('red');
+        expect(skeletonElement.style.borderRadius).toBe('50%');
+        expect(skeletonElement.style.width).toBe('50px');
+        expect(skeletonElement.style.height).toBe('50px');
+    });
+
+    it('should apply size over width and height', () => {
+        skeletonRef.setInput('size', '80px');
+        skeletonRef.setInput('width', '200px');
+        skeletonRef.setInput('height', '300px');
+        fixture.detectChanges();
+
+        const skeletonElement = fixture.nativeElement.querySelector('div');
+        expect(skeletonElement.style.width).toBe('80px');
+        expect(skeletonElement.style.height).toBe('80px');
+    });
+
+    it('should set aria-hidden attribute to true', () => {
+        fixture.detectChanges();
+
+        const skeletonElement = fixture.nativeElement.querySelector('div');
+        expect(skeletonElement.getAttribute('aria-hidden')).toBe('true');
+    });
 });