import { html } from 'lit';
import { fixture, expect } from '@open-wc/testing';
import { HonorlockElementsElement } from '../src/HonorlockElementsElement.js';
import '../src/HonorlockElements.js';

describe('HonorlockElementsElement', () => {
  const element = window.HonorlockElements;

  it('can render honorlock-elements', async () => {
    element.init({
      token: '<my_access_token>',
      host: 'apptest.honorlock.com',
      context: {
        type: 'course',
        id: 'course_uuid',
      },
      height: 500,
      width: 700,
      debug: false,
    });

    const el = await fixture<HonorlockElementsElement>(
      html`<honorlock-elements></honorlock-elements>`
    );

    const iframe = el.shadowRoot!.querySelector('iframe');

    expect(iframe?.title).contain('Honorlock Elements');
    expect(iframe?.src).contain('my_access_token');
    expect(iframe?.src).contain('https://apptest.honorlock.com');
    expect(iframe?.width).equal('700');
    expect(iframe?.height).equal('500');
  });

  it('passes the a11y audit', async () => {
    const el = await fixture<HonorlockElementsElement>(
      html`<honorlock-elements></honorlock-elements>`
    );

    await expect(el).shadowDom.to.be.accessible();
  });

  it('can resize the iframe', async () => {
    element._configs[0].config.height = 500;
    element._configs[0].config.width = 700;
    element._configs[0].config.debug = false;

    const el = await fixture<HonorlockElementsElement>(
      html`<honorlock-elements></honorlock-elements>`
    );

    element.resize({ height: 100, width: 100 });

    const iFrame = el.shadowRoot?.querySelector('iframe');
    expect(iFrame).not.to.be.null;
    expect(iFrame?.width).equal('100');
    expect(iFrame?.height).equal('100');
  });

  it('can render the user friendly error message if debug property is not being passed', async () => {
    element._validation.errors = ['foo bar'];
    delete element._configs[0].config.debug;

    const el = await fixture<HonorlockElementsElement>(
      html`<honorlock-elements></honorlock-elements>`
    );

    const errorWrapper: Element | null =
      // @ts-ignore
      el.shadowRoot.querySelector('#error-wrapper');

    await expect(errorWrapper).not.to.be.null;
    await expect(errorWrapper).to.contain.text(
      'Honorlock is not configured correctly. Please contact your software integration administrator.'
    );
  });

  it('can render the user friendly error message if debug property is false', async () => {
    element._validation.errors = ['foo bar'];
    element._configs[0].config.debug = false;

    const el = await fixture<HonorlockElementsElement>(
      html`<honorlock-elements></honorlock-elements>`
    );

    const errorWrapper: Element | null =
      // @ts-ignore
      el.shadowRoot.querySelector('#error-wrapper');

    await expect(errorWrapper).not.to.be.null;
    await expect(errorWrapper).to.contain.text(
      'Honorlock is not configured correctly. Please contact your software integration administrator.'
    );
  });

  it('can render the error page with the expected error message if debug property is true', async () => {
    element._validation.errors = ['foo bar'];
    element._configs[0].config.debug = true;

    const el = await fixture<HonorlockElementsElement>(
      html`<honorlock-elements></honorlock-elements>`
    );

    const errorWrapper: Element | null =
      // @ts-ignore
      el.shadowRoot.querySelector('#error-wrapper');

    await expect(errorWrapper).not.to.be.null;
    await expect(errorWrapper).to.contain.text('foo bar');
  });
});