import { constructWithInjector } from "../../../testing/construct-with-injector";
import { TestBed, ComponentFixture } from "@angular/core/testing";
import { ChangeDetectorRef, Renderer2 } from "@angular/core";
import { FormControl } from "@angular/forms";
// Load the implementations that should be tested
import { LabelWrapper } from "./label-wrapper.component";

describe("The Sam Label Wrapper component", () => {
  describe("isolated tests", () => {
    let component: LabelWrapper;
    const cdr: ChangeDetectorRef = undefined;
    const renderer: Renderer2 = undefined;
    beforeEach(() => {
      component = constructWithInjector(
        [
          { provide: ChangeDetectorRef, useValue: cdr },
          { provide: Renderer2, useValue: renderer },
        ],
        () => new LabelWrapper()
      );
    });

    it("should display error messages with a form control", () => {
      component.formatErrors(undefined);

      const control = new FormControl("");
      component.formatErrors(control);
      expect(component.errorMessage).toBe("");

      control.markAsDirty();
      control.setErrors({
        maxlength: {
          actualLength: 12,
          requiredLength: 10,
        },
      });
      component.formatErrors(control);
      expect(component.errorMessage).toBe(
        "12 characters input but max length is 10"
      );

      control.setErrors({
        required: true,
      });
      component.formatErrors(control);
      expect(component.errorMessage).toBe("This field is required");

      control.setErrors({
        isNotBeforeToday: true,
      });
      component.formatErrors(control);
      expect(component.errorMessage).toBe("Date must not be before today");

      control.setErrors({
        dummyError: {
          message: "test message",
        },
      });
      component.formatErrors(control);
      expect(component.errorMessage).toBe("test message");

      control.setErrors({
        dummyError: true,
      });
      component.formatErrors(control);
      expect(component.errorMessage).toBe("Invalid");

      control.reset();
      control.markAsDirty();
      component.formatErrors(control);
      expect(component.errorMessage).toBe("");
    });

    it("should clear error messages", () => {
      component.errorMessage = "abc";
      component.clearError();
      expect(component.errorMessage).toBe("");
    });
  });

  describe("integration tests", () => {
    let component: LabelWrapper;
    let fixture: ComponentFixture<LabelWrapper>;

    beforeEach(() => {
      TestBed.configureTestingModule({
        declarations: [LabelWrapper],
      });
      fixture = TestBed.createComponent(LabelWrapper);
      component = fixture.componentInstance;
      fixture.detectChanges();
    });

    it.skip("should have toggleable hints", () => {
      component.hint =
        "Lorem Ipsum is simply dummy text of the printing and\
         typesetting industry. Lorem Ipsum has been the industry's standard\
          dummy text ever since the 1500s, when an unknown printer took a \
          galley of type and scrambled it to make a type specimen book. It has \
          survived not only five centuries, but also the leap into electronic\
           typesetting, remaining essentially unchanged.";
      component.ngOnChanges({
        hint: {
          previousValue: false,
          currentValue: true,
        },
      });
      fixture.detectChanges();
      expect(
        component.hintContainer.nativeElement.getAttribute("style")
      ).toContain("overflow: hidden;");

      component.toggleHint(false);
      fixture.detectChanges();
      expect(component.hintContainer.nativeElement.getAttribute("style")).toBe(
        ""
      );
    });
  });
});