mport { esbuildPlugin } from '@web/dev-server-esbuild';

import { puppeteerLauncher } from '@web/test-runner-puppeteer';
import { defaultReporter } from '@web/test-runner';




export default {
  plugins: [
    esbuildPlugin({ ts: true, tsconfig: 'tsconfig.dev.json', // Asegúrate de que esbuild use tu tsconfig.json
      loaders: {
        '.ts': 'ts',
      } }),

  ],
  browsers: [puppeteerLauncher({ launchOptions: { args: ['--no-sandbox', '--disable-setuid-sandbox'] } })],
  reporters:[    defaultReporter({ reportTestResults: true, reportTestProgress: true })],
  nodeResolve: true,
  preserveSymlinks: true,
  rootDir: '.',
  files: ['packages/**/*.test.ts'],
  mimeTypes: {
    '**/*.ts': 'js',
  },
};

//Importante que los import vengas de @open-wc/testing para que tener la máxima compatibilidad con lit-element
import { defineCE, elementUpdated, expect, fixture, fixtureCleanup, html, unsafeStatic, waitUntil } from "@open-wc/testing";
//Librería de MOCK
import sinon, { SinonSpy } from "sinon";

//Creación de un componente LitElement dinámico
const customElementWithProperties = defineCE(
  class extends LitElement{
    static properties = {
      someProperty: { type: String },
    };
    constructor() {
      super();
    }
    connectedCallback() {
      super.connectedCallback();
      console.debug(`Cargado componente  ${this.tagName} `);
    }
    render(): any {
      return html`<h2>componente creado STAND-ALONE</h2>`;
    }
  }
);

//Obtención del tag del componente para su renderizado dinámico
const customElementWithPropertiesTag = unsafeStatic(customElementWithProperties);

//Definición de la suit
describe("Testing Lit WebComponent ", () => {
  let sandbox: sinon.SinonSandbox;

  //creación de un sandbox para el mock
  before(() => {
    sandbox = sinon.createSandbox();
  });
  //Se restaura el sandbox y se limpia el fixture después de cada test
  afterEach(() => {
    sandbox.restore();
    fixtureCleanup();
  });

  //test de renderizado de un componente LitElement
  it("should render a web component", async () => {
    const el = await fixture< LitElement >(html`<${customElementWithPropertiesTag}></${customElementWithPropertiesTag}`);
    expect(el).to.exist;
    expect(el.shadowRoot).to.exist;
  });
});