import { ComponentFixture, TestBed } from '@angular/core/testing';

import { Component } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { By } from '@angular/platform-browser';
import { MatSelect } from '@angular/material/select';
import { provideTranslateService } from '@ngx-translate/core';
import { Chain } from '../../models/Chain';
import { ChainDAO } from '../../dao/ChainDAO';
import { ChainSelect } from './chain-select';

@Component({
  selector: 'app-chain-select-mock',
  imports: [
    ChainSelect,
    ReactiveFormsModule
  ],
  template: `
  <form [formGroup]="form">
    <app-chain-select formControlName="mock"/>
  </form>

  `,
  styleUrl: './chain-select.scss',
})
class ChainSelectTestbed {
  form = new FormGroup({mock: new FormControl()})
}

describe('ChainSelect', () => {
  let component: ChainSelectTestbed;
  let fixture: ComponentFixture<ChainSelectTestbed>;

  let chainDAO: Partial<ChainDAO>;
  let CHAINS_MOCK: Chain[];
  beforeEach(async () => {
    CHAINS_MOCK = [new Chain('Mock 1', '', 1)];

    chainDAO = {
      findAll: vi.fn().mockResolvedValue(CHAINS_MOCK),
    };

    await TestBed.configureTestingModule({
      imports: [ChainSelectTestbed],
      providers: [{ provide: ChainDAO, useValue: chainDAO }, provideTranslateService()],
    }).compileComponents();

    fixture = TestBed.createComponent(ChainSelectTestbed);
    component = fixture.componentInstance;
    
  });

  it('should create', async () => {
    await fixture.whenStable();
    expect(component).toBeTruthy();
  });

  it('should match form chain with chain option', async () => {
    component.form = new FormGroup({mock: new FormControl(CHAINS_MOCK[0])});
    await fixture.whenStable();
    const matSelect: MatSelect = fixture.debugElement.query(By.css('mat-select')).componentInstance;
    expect(matSelect.value).toEqual(CHAINS_MOCK[0]);
  });

});