How to provide different test cases by use of one test component for a directive which changes...

I have a directive which looks like the following:

import { Directive, ElementRef, Input, Renderer2, OnInit } from '@angular/core';

@Directive({
selector: '[appChangeStyle]'
})
export class ChangeStyleDirective implements OnInit {
@Input() appChangeStyle: string = '';

constructor(private el: ElementRef, private renderer: Renderer2) {}

ngOnInit(): void {
this.changeBackgroundColor(this.appChangeStyle);
}

private changeBackgroundColor(color: string): void {
this.renderer.setStyle(this.el.nativeElement, 'background-color', color);
}
}



I would like to test this directive with different test scenarios in Angular, similar to the following code:

import { ChangeStyleDirective } from './change-style.directive';
import { ElementRef, Renderer2 } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { Component } from '@angular/core';

@Component({
template: `<div appChangeStyle="{{color}}"></div>`
})
class TestComponent {
color = 'red';
}

describe('ChangeStyleDirective', () => {
let fixture: ComponentFixture<TestComponent>;
let directiveEl: HTMLElement;
let directive: ChangeStyleDirective;

beforeEach(() => {
TestBed.configureTestingModule({
declarations: [ChangeStyleDirective, TestComponent],
});

fixture = TestBed.createComponent(TestComponent);
directiveEl = fixture.nativeElement.querySelector('div');
fixture.detectChanges();

directive = new ChangeStyleDirective(directiveEl as ElementRef, TestBed.inject(Renderer2));
});

it('should create an instance of ChangeStyleDirective', () => {
expect(directive).toBeTruthy();
});

it('should apply the correct background color based on input', () => {
// Initial color is 'red'
fixture.componentInstance.color = 'red';
fixture.detectChanges();
expect(directiveEl.style.backgroundColor).toBe('red');

// Change color to 'blue'
fixture.componentInstance.color = 'blue';
fixture.detectChanges();
expect(directiveEl.style.backgroundColor).toBe('blue');
});
});



However the tests are not successful because directive ngOnInit is called only once. Is there a way to solve this issue? thank you.

Continue reading...