import { createComponentFactory, Spectator } from '@ngneat/spectator';
import { CommonModule } from '@angular/common';
import { ModalNotificationsListItemComponent } from './notifications-list-item.component';
import { MessageBoardItemDTO } from 'apps/hub/notifications/src/lib/defs';

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

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

  beforeEach(() => {
    spectator = createComponent({ props: { item: {} } });
  });

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

  describe('item input', () => {
    it('should display text and headline if available', () => {
      spectator.setInput({ item: { text: 'test', headline: 'testHeadline' } });
      expect(spectator.query('h1')).toHaveText('testHeadline');
      expect(spectator.query('.notification-text')).toHaveText('test');
    });

    it('should not display text and headline if not available', () => {
      spectator.setInput({ item: {} });
      expect(spectator.query('h1')).toHaveText('');
      expect(spectator.query('.notification-text')).toHaveText('');
    });
  });

  describe('notification-edit-cta', () => {
    it('should emit itemSelected event with the item after clicking the CTA', () => {
      const item: MessageBoardItemDTO = { text: 'Test' };
      spectator.setInput({ item });
      const cta = spectator.query('.notification-edit-cta') as HTMLButtonElement;
      let output: MessageBoardItemDTO;
      spectator.output('itemSelected').subscribe((result) => (output = result));
      spectator.click(cta);
      expect(output).toEqual(item);
    });
  });
});
