DEV Community

Fran Saoco
Fran Saoco

Posted on • Edited on

Testing Angular simple Components using Jest

simple-component.ts

@Component({ selector: 'simple-component', template: ` <button (click)="showMessage()"> Show message </button> <div class="message" *ngIf="isMessage"> <p>{{message}}<p> </div> `, }) export class SimpleComponent { isMessage = false; color = 'blue'; message = "" /* We don't test private functions directly only the result when they're called by a public function */ private getNewMessage() { return 'I am the new message'; } showMessage() { this.message = this.getNewMessage(); this.isMessage = true; this.color = 'red'; } } 
Enter fullscreen mode Exit fullscreen mode

simple-component.spec.ts

describe('SimpleComponent', () => { let component: SimpleComponent; let fixture: ComponentFixture<SimpleComponent>; beforeEach(async () => { await TestBed.configureTestingModule({ declarations: [SimpleComponent], }).compileComponents(); fixture = TestBed.createComponent(SimpleComponent); component = fixture.componentInstance; fixture.detectChanges(); }); it('should create', () => { expect(component).toBeTruthy(); }); describe('.showMessage()', () => { it('should initialize with default state', () => { expect(component.message).toEqual(''); expect(component.isMessage).toEqual(false); expect(component.color).toEqual('blue'); }); it('should update the message when called', () => { component.showMessage(); expect(component.message).toEqual('I am the new message'); }); it('should set isMessage to true when called', () => { component.showMessage(); expect(component.isMessage).toEqual(true); }); it('should change color to red when called', () => { component.showMessage(); expect(component.color).toEqual('red'); }); it('should show the message in the DOM when button is clicked', () => { const button = fixture.nativeElement.querySelector('button'); button.click(); fixture.detectChanges(); const messageDiv = fixture.nativeElement.querySelector('div.message'); const messageElement = fixture.nativeElement.querySelector('p'); expect(messageDiv).toBeTruthy(); // Div is visible expect(messageElement.textContent).toEqual('I am the new message'); }); }); }); 
Enter fullscreen mode Exit fullscreen mode

Top comments (0)