From 71b38b75678a317f7d8cd8333448ce05e12393f9 Mon Sep 17 00:00:00 2001 From: Mohamed Ben Makhlouf Date: Fri, 11 Oct 2024 22:43:10 +0200 Subject: [PATCH] add more test cases --- src/app/components/divider/divider.spec.ts | 114 ++++++++++++++++++++- src/app/components/divider/divider.ts | 2 +- 2 files changed, 114 insertions(+), 2 deletions(-) diff --git a/src/app/components/divider/divider.spec.ts b/src/app/components/divider/divider.spec.ts index 2372a25c2e0..6f2bd7cce85 100755 --- a/src/app/components/divider/divider.spec.ts +++ b/src/app/components/divider/divider.spec.ts @@ -1,11 +1,12 @@ +import { ComponentRef } from '@angular/core'; import { TestBed, ComponentFixture } from '@angular/core/testing'; import { Divider, DividerModule } from './divider'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { By } from '@angular/platform-browser'; describe('Divider', () => { let divider: Divider; let fixture: ComponentFixture; + let dividerRef: ComponentRef; beforeEach(() => { TestBed.configureTestingModule({ @@ -14,6 +15,11 @@ describe('Divider', () => { fixture = TestBed.createComponent(Divider); divider = fixture.componentInstance; + dividerRef = fixture.componentRef; + }); + + it('should create the component', () => { + expect(divider).toBeTruthy(); }); it('should display by default', () => { @@ -21,4 +27,110 @@ describe('Divider', () => { expect(fixture.nativeElement.classList).toContain('p-divider'); }); + + it('should default to horizontal layout when no layout input is provided', () => { + fixture.detectChanges(); + + expect(fixture.nativeElement.classList).toContain('p-divider-horizontal'); + }); + + it('should apply vertical layout when layout input is set to vertical', () => { + dividerRef.setInput('layout', 'vertical'); + fixture.detectChanges(); + + expect(fixture.nativeElement.classList).toContain('p-divider-vertical'); + expect(fixture.nativeElement.classList).not.toContain('p-divider-horizontal'); + }); + + it('should apply solid type by default', () => { + fixture.detectChanges(); + + expect(fixture.nativeElement.classList).toContain('p-divider-solid'); + }); + + it('should apply dashed type when input is set to dashed', () => { + dividerRef.setInput('type', 'dashed'); + fixture.detectChanges(); + + expect(fixture.nativeElement.classList).toContain('p-divider-dashed'); + }); + + it('should apply dotted type when input is set to dotted', () => { + dividerRef.setInput('type', 'dotted'); + fixture.detectChanges(); + + expect(fixture.nativeElement.classList).toContain('p-divider-dotted'); + }); + + it('should apply left alignment for horizontal layout', () => { + dividerRef.setInput('align', 'left'); + fixture.detectChanges(); + + expect(fixture.nativeElement.classList).toContain('p-divider-left'); + }); + + it('should apply right alignment for horizontal layout', () => { + dividerRef.setInput('align', 'right'); + fixture.detectChanges(); + + expect(fixture.nativeElement.classList).toContain('p-divider-right'); + }); + + it('should apply top alignment for vertical layout', () => { + dividerRef.setInput('layout', 'vertical'); + dividerRef.setInput('align', 'top'); + fixture.detectChanges(); + + expect(fixture.nativeElement.classList).toContain('p-divider-top'); + }); + + it('should apply bottom alignment for vertical layout', () => { + dividerRef.setInput('layout', 'vertical'); + dividerRef.setInput('align', 'bottom'); + fixture.detectChanges(); + + expect(fixture.nativeElement.classList).toContain('p-divider-bottom'); + }); + + it('should apply custom inline styles from style input', () => { + dividerRef.setInput('style', { backgroundColor: 'red', width: '100px' }); + fixture.detectChanges(); + + expect(fixture.nativeElement.style.backgroundColor).toBe('red'); + expect(fixture.nativeElement.style.width).toBe('100px'); + }); + + it('should apply custom classes from styleClass input', () => { + dividerRef.setInput('styleClass', 'custom-class-1 custom-class-2'); + fixture.detectChanges(); + + expect(fixture.nativeElement.classList).toContain('custom-class-1'); + expect(fixture.nativeElement.classList).toContain('custom-class-2'); + }); + + it('should have role="separator" and aria-orientation based on layout', () => { + fixture.detectChanges(); + + expect(fixture.nativeElement.getAttribute('role')).toBe('separator'); + expect(fixture.nativeElement.getAttribute('aria-orientation')).toBe('horizontal'); + + dividerRef.setInput('layout', 'vertical'); + fixture.detectChanges(); + + expect(fixture.nativeElement.getAttribute('aria-orientation')).toBe('vertical'); + }); + + it('should update classes dynamically when inputs change', () => { + fixture.detectChanges(); + + dividerRef.setInput('layout', 'vertical'); + dividerRef.setInput('type', 'dotted'); + dividerRef.setInput('align', 'top'); + fixture.detectChanges(); + + const dividerHostElement = fixture.nativeElement; + expect(dividerHostElement.classList).toContain('p-divider-vertical'); + expect(dividerHostElement.classList).toContain('p-divider-dotted'); + expect(dividerHostElement.classList).toContain('p-divider-top'); + }); }); diff --git a/src/app/components/divider/divider.ts b/src/app/components/divider/divider.ts index 0e42773e416..7d03aaaa03a 100755 --- a/src/app/components/divider/divider.ts +++ b/src/app/components/divider/divider.ts @@ -28,7 +28,7 @@ import { DividerStyle } from './style/dividerstyle'; '[class.p-divider-right]': 'layout() === "horizontal" && align() === "right"', '[class.p-divider-top]': 'layout() === "vertical" && align() === "top"', '[class.p-divider-bottom]': 'layout() === "vertical" && align() === "bottom"', - '[style]': 'inlineStyles', + '[style]': 'style()', '[attr.aria-orientation]': 'layout()', '[attr.data-pc-name]': "'divider'", '[attr.role]': '"separator"',