import { HttpClientModule } from '@angular/common/http';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { MatListModule } from '@angular/material/list';
import { By } from '@angular/platform-browser';
import { TeamsService } from '../../teams.service';

import { DetailsComponent } from './details.component';

describe('DetailsComponent', () => {
  let component: DetailsComponent;
  let fixture: ComponentFixture<DetailsComponent>;
  const mockTeamService = jasmine.createSpyObj('TeamsService', ['loadTransactionsOfUser']);
  mockTeamService.selectedUserTransaction = [
    {id: 1, note: 'dev1', createdAt: '', date: '', amount: 100, type: {id: 1}},
    {id: 2, note: 'dev2', createdAt: '', date: '', amount: 100, type: {id: 1}},
    {id: 3, note: 'dev3', createdAt: '', date: '', amount: 100, type: {id: 1}},
    {id: 4, note: 'dev4', createdAt: '', date: '', amount: 100, type: {id: 1}},
  ];

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ DetailsComponent ],
      imports: [ MatDialogModule, HttpClientModule, MatListModule ],
      providers: [
        { provide: MAT_DIALOG_DATA, useValue: {} },
        { provide: MatDialogRef, useValue: {} },
        { provide: TeamsService, useValue: mockTeamService }
      ]
    })
    .compileComponents();

    fixture = TestBed.createComponent(DetailsComponent);
    
    component = fixture.componentInstance;

    component.data.user = {
      id: 2,
      balance: 46.64,
      firstName: 'Rover',
      lastName: 'Stiedeman',
      user: null
    }
    
    fixture.detectChanges();
  });

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

  it('should initialise the user', () => {
    
    
    expect(component.data.user).not.toBeNull();
  })

  it('should have a users transactions', () => {
    expect(component.transactions).not.toBeNull();
    expect(component.transactions.length).toBe(4)
  })

  it('should display the users balance', () => {
    const balance = 46.64;
    component.data.user.balance = balance;
    const el = fixture.debugElement.query(By.css('#userBalance'));
    expect(el).not.toBeNull();
    expect(el.nativeElement.textContent.trim()).toEqual('Rover: €' + balance);
  })

  it('should display users transactions', () => {
    const list = fixture.debugElement.query(By.css('#transactionsList'));
    const htmlList = (list.nativeElement as HTMLElement).children;
    expect(htmlList).not.toBeNull();
    expect(htmlList.length).toBe(4)
    
    
  })
});


