import { DemoElement } from '../mockups/demo-element/demo-element';
import { VetproviehElement } from '../../lib';

describe('updateVisibility', () => {
  test('should update visiblity', () => {
    const demo = new DemoElement();
    const id = 'test';
    const shadowRoot = demo.shadowRoot as ShadowRoot;
    const testElement = shadowRoot.getElementById(id) as HTMLParagraphElement;

    expect(testElement).not.toEqual(null);

    demo.updateVisibility(id, false);

    expect(testElement.classList.contains('is-hidden')).toBe(true);

    demo.updateVisibility(id, true);

    expect(testElement.classList.contains('is-hidden')).toBe(false);
  });
});

describe('template', () => {
  test('should return expected value', () => {
    const expected = `"/node_modules/bulma/css/bulma.min.css"`;

    expect(VetproviehElement.template).toMatch(expected);
  });
});


describe('attributeChangedCallback', () => {
  const expected = 'X12345';

  test('should test demoAttribute', () => {
    const demo = new DemoElement();

    demo.attributeChangedCallback('demoAttribute', 'Test', expected);
    expect(demo.demoAttribute).toBe(expected);

    demo.attributeChangedCallback('demoAttribute', expected, expected);
  });


  it('should render value with attributeChangedCallback', () => {
    const demo = new DemoElement();
    const expected2 = 200;
    demo.attributeChangedCallback('demo2Attribute', undefined, expected2);

    let paragraph = demo.getByIdFromShadowRoot("test") as HTMLElement;
    let paragraph2 = demo.getByIdFromShadowRoot("test2") as HTMLElement;

    expect(paragraph.innerHTML).toEqual("test");
    expect(paragraph2.innerHTML).toEqual(expected2.toString());

    demo.attributeChangedCallback('demoAttribute', 'test', expected);
    paragraph = demo.getByIdFromShadowRoot("test") as HTMLElement;

    expect(paragraph.innerHTML).toEqual(expected);

  })
});


describe('demoAttribute Setter', () => {
  const expected = 'X12345';

  describe('afterSetCallbackExample', () => {
    it('it should fire callbacks', () => {
      const demo = new DemoElement();
      demo.attributeChangedCallback("demoAttribute", null, "4711");
      demo.attributeChangedCallback("demoAttribute", "4711", "4711");
      expect(demo.counter).toEqual(1);

      demo.attributeChangedCallback("demoAttribute", null, "4712");

      expect(demo.counter).toEqual(2);
    });
  });

  it('it should render value with setter', () => {
    const demo = new DemoElement();

    demo.demoAttribute = expected;
    demo.render();
    let paragraph = demo.getByIdFromShadowRoot("test") as HTMLElement;

    expect(paragraph.innerHTML).toEqual(expected);
  });
});