Testing Angular simple Components using Jest

@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';
  }
}

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');
    });
  });
});