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

import { Component } from "@angular/core";
import { By } from "@angular/platform-browser";

// Load the implementations that should be tested
import { SamExternalLinkDirective } from "./external-link.directive";

@Component({
  template: `
    <a id="blank" target="_blank">
      Blank
      <span class="fa fa-external-link fa-sm"></span>
    </a>

    <a id="named" target="name"> Named </a>

    <a id="hidden" target="hidden" hideIcon="true"> Hidden </a>
  `,
  standalone: false,
})
class TestComponent {}

describe("Sam External Link Directive", () => {
  let fixture: ComponentFixture<TestComponent>;

  function findIcons(el) {
    return el.queryAll(By.css(".fa-external-link"));
  }

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [TestComponent, SamExternalLinkDirective],
    });

    fixture = TestBed.createComponent(TestComponent);
    fixture.detectChanges();
  });

  it("should add external link text for 508 compliance", () => {
    const cmps = fixture.debugElement.queryAll(By.css(".usa-sr-only"));
    const el1 = cmps[0];
    const el2 = cmps[1];

    expect(el1.nativeElement.innerText).toContain("(opens in new window)");
    expect(el2.nativeElement.innerText).toContain("(opens in new window)");
  });

  it("should add external link icon when none is present", () => {
    const cmp = fixture.debugElement.query(By.css("#named"));

    const icons = findIcons(cmp);

    expect(icons.length).toBe(icons.length);
  });

  it("should not add additional icons if one is present", () => {
    const cmp = fixture.debugElement.query(By.css("#named"));

    const icons = findIcons(cmp);

    expect(icons.length).toBe(1);
  });

  it("should not add icon if hideIcon is true", () => {
    const cmp = fixture.debugElement.query(By.css("#hidden"));

    const icons = findIcons(cmp);

    expect(icons.length).toBe(0);
  });
});