import { ComponentFixture, TestBed, async, fakeAsync, tick, inject } from '@angular/core/testing';
import { By }              from '@angular/platform-browser';
import { DebugElement }    from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { FooterComponent } from '../footer/footer.component';
import { FooterDataService } from './footer-data.service';
import { LINKS } from './mock-links';

import { TestableModule } from '../shared/baseshared/components/test.base.module';

describe('Footer Component - View Layer', () => {
  let fixture, footerComponent, FooterDataService, el, de, de2;

  // setup
  beforeEach(() => {
    // not currently using this class
    // left in for now so the real FooterService isn't called

    class MockServ {
      mappedLinks;
      get(): Observable<string[]> {
        this.mappedLinks = LINKS;
        return this.mappedLinks;
      }
    }
    TestBed.configureTestingModule({
      imports: [TestableModule],
      declarations: [ FooterComponent ],
      providers: [{ provide: FooterDataService, useClass: MockServ }]
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(FooterComponent);
    footerComponent = fixture.componentInstance;  // to access properties and methods
    
    // override default getLinks to remove observe/subscribe & http request
    footerComponent.getLinks = function() {
      footerComponent.links = LINKS;
    };
  });

  it('should not contain any links before ngOnInit', () => {
    de2 = fixture.debugElement.query(By.css('.footer-link'));
    expect(de2).toBeNull();
  });

  // specs
  // TODO: refactor test to check for content more comprehensively
  it('should render footer links when provided with JSON data', () => {
    footerComponent.getLinks();
    de = fixture.debugElement.query(By.css('.sublink-group'));
    el = de.nativeElement;
    fixture.detectChanges();
    expect(el.textContent).toContain('Member Support');
  });
});