import { createComponentFactory, Spectator } from '@ngneat/spectator';
import { CommonModule } from '@angular/common';
import { UiIconModule } from '@ui/icon';
import { ModalNotificationsUpdateGroupComponent } from './notifications-update-group.component';

describe('ModalNotificationsUpdateGroupComponent', () => {
  let spectator: Spectator<ModalNotificationsUpdateGroupComponent>;

  const createComponent = createComponentFactory({
    component: ModalNotificationsUpdateGroupComponent,
    imports: [CommonModule, UiIconModule],
  });

  beforeEach(() => {
    spectator = createComponent({ props: { notifications: [] } });
  });

  it('should create', () => {
    expect(spectator.component).toBeTruthy();
  });

  describe('notifications input', () => {
    it('should display the right notification-counter value based on the length of the input array', () => {
      spectator.setInput({ notifications: [{}, {}, {}] });
      expect(spectator.query('.notification-counter')).toHaveText('3');
    });

    it('should not display notification-counter if input array has length 0', () => {
      spectator.setInput({ notifications: [] });
      expect(spectator.query('.notification-counter')).toHaveText('');
    });

    it('should render notification-headline and notification-text based on the input array', () => {
      const notifications = [{}, {}];
      spectator.setInput({ notifications });
      spectator.detectComponentChanges();
      expect(spectator.queryAll('.notification-headline')).toHaveLength(notifications.length);
      expect(spectator.queryAll('.notification-text')).toHaveLength(notifications.length);
    });
  });
});
