Las guías de desarrollo son un documento que busca facilitar el onboarding y la homogeneidad de los proyectos en la STIC. La STIC podrá estudiar los casos excepcionales los cuales serán gestionados a través de los responsables del proyecto correspondiente y autorizados por el Área de Gobernanza de la STIC. Asimismo cualquier aspecto no recogido en estas guías deberá regirse en primera instancia por las guías técnicas correspondientes al esquema nacional de seguridad y esquema nacional de interoperabilidad según correspondencia y en su defecto a los marcos normativos y de desarrollo software establecidos por la Junta de Andalucía, debiendo ser puesto de manifiesto ante la STIC.

La STIC se reserva el derecho a la modificación de la guía sin previo aviso, tras lo cual, notificará del cambio a los actores implicados para su adopción inmediata según la planificación de cada proyecto.

En el caso de que algún actor considere conveniente y/o necesario el incumplimiento de alguna de las normas y/o recomendaciones, deberá aportar previamente la correspondiente justificación fehaciente documentada de la solución alternativa propuesta, así como toda aquella documentación que le sea requerida por la STIC para proceder a su validación técnica.

Contacto Arquitectura: l-arquitectura.stic@juntadeandalucia.es

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',
  },
};

import { html, LitElement } from "lit";
import { property } from "lit/decorators.js";
export class Example extends LitElement{

    @property({ type: String, attribute: 'some-attribute'})
    public someProperty: string = "default value";
    constructor() {
        super();
    }
    connectedCallback() {
        super.connectedCallback();
        console.debug(`Cargado componente  ${this.tagName} `);
    }
    render(): any {
        return html`<h2>componente creado</h2>
        <p id="property-value">${this.someProperty}</p>`;
    }
}
customElements.define('example-test-component', Example);

//Importante que los import vengas de @open-wc/testing para que tener la máxima compatibilidad con lit-element
import { defineCE, expect, fixture, fixtureCleanup, html, unsafeStatic} from "@open-wc/testing";
//Importamos el componente
import { Example } from "../index";

describe("Testing Lit WebComponent ", () => {
    //Se restaura el sandbox y se limpia el fixture después de cada test
    afterEach(() => {
      fixtureCleanup();
    });
  
    //test de renderizado del componente example-test-component
    it("should render a web component", async () => {
      //await fixture espera hasta que se renderice el componente
      const el = await fixture< Example >(html`<example-test-component></example-test-component>`);
      expect(el).to.exist;
      // si tiene shadowRoot es que es un webcomponent y que se ha renderizado de forma correcta
      expect(el.shadowRoot).to.exist;
    });
    it("should render a web component with random test tag", async () => {
      const tag = defineCE(class extends Example{});
      const unsafeTag = unsafeStatic(tag);
      //await fixture espera hasta que se renderice el componente
      const el = await fixture< Example >(html`<${unsafeTag}></${unsafeTag}>`);
      expect(el).to.exist;
      // si tiene shadowRoot es que es un webcomponent y que se ha renderizado de forma correcta
      expect(el.shadowRoot).to.exist;
    });
});

      //Cuidado!!!!! este código genera acoplamiento al html generado por el render del componente, no es recomendable ya que los test deben ser funcionales. Nos sirve para testear que el valor de la propiedad se renderiza correctamente, no solo que se ha definido
      expect(el.shadowRoot?.getElementById("property-value")?.textContent).to.equal('default value');

//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} from "@open-wc/testing";
//Importamos el componente
import { Example } from "../index";

describe("Testing Lit WebComponent ", () => {

    //creación de un sandbox para el mock
    before(() => {
    });
    //Se restaura el sandbox y se limpia el fixture después de cada test
    afterEach(() => {
      fixtureCleanup();
    });
  
    //test de renderizado del componente example-test-component
    it("should render a default value of property", async () => {
      //await fixture espera hasta que se renderice el componente
      const el = await fixture< Example >(html`<example-test-component></example-test-component>`);
      expect(el).to.exist;
      // si tiene shadowRoot es que es un webcomponent y que se ha renderizado de forma correcta
      expect(el.shadowRoot).to.exist;

      expect(el.someProperty).to.equal('default value');
      //Cuidado!!!!! este código genera acoplamiento al render del componente, no es recomendable ya que los test deben ser funcionales. Nos sirve para testear que el valor de la propiedad se renderiza correctamente, no solo que se ha definido
      expect(el.shadowRoot?.getElementById("property-value")?.textContent).to.equal('default value');
    });
    it("should render a default value of property in a web component with random test tag", async () => {
      const tag = defineCE(class extends Example{});
      const unsafeTag = unsafeStatic(tag);
      //await fixture espera hasta que se renderice el componente
      const el = await fixture< Example >(html`<${unsafeTag}></${unsafeTag}>`);
      expect(el).to.exist;
      // si tiene shadowRoot es que es un webcomponent y que se ha renderizado de forma correcta
      expect(el.shadowRoot).to.exist;
      expect(el.someProperty).to.equal('default value');
      //Cuidado!!!!! este código genera acoplamiento al render del componente, no es recomendable ya que los test deben ser funcionales. Nos sirve para testear que el valor de la propiedad se renderiza correctamente, no solo que se ha definido
      expect(el.shadowRoot?.getElementById("property-value")?.textContent).to.equal('default value');
    });
    it("should render a initialize value property", async () => {
      //await fixture espera hasta que se renderice el componente
      const el = await fixture< Example >(html`<example-test-component .someProperty=${'init value'} ></example-test-component>`);
      expect(el).to.exist;
      // si tiene shadowRoot es que es un webcomponent y que se ha renderizado de forma correcta
      expect(el.shadowRoot).to.exist;
      expect(el.someProperty).to.equal('init value');
      //Cuidado!!!!! este código genera acoplamiento al render del componente, no es recomendable ya que los test deben ser funcionales. Nos sirve para testear que el valor de la propiedad se renderiza correctamente, no solo que se ha definido
      expect(el.shadowRoot?.getElementById("property-value")?.textContent).to.equal('init value');
    });
     it("should render a initialize value property in a web component with random test tag", async () => {
      const tag = defineCE(class extends Example{});
      const unsafeTag = unsafeStatic(tag);
      //await fixture espera hasta que se renderice el componente
      const el = await fixture< Example >(html`<${unsafeTag} .someProperty=${'init value'}></${unsafeTag}>`);
      expect(el).to.exist;
      // si tiene shadowRoot es que es un webcomponent y que se ha renderizado de forma correcta
      expect(el.shadowRoot).to.exist;
      expect(el.someProperty).to.equal('init value');
      //Cuidado!!!!! este código genera acoplamiento al render del componente, no es recomendable ya que los test deben ser funcionales. Nos sirve para testear que el valor de la propiedad se renderiza correctamente, no solo que se ha definido
      expect(el.shadowRoot?.getElementById("property-value")?.textContent).to.equal('init value');
    });
 it("should render a changed value property", async () => {
      //await fixture espera hasta que se renderice el componente
      const el = await fixture< Example >(html`<example-test-component .someProperty=${'init value'} ></example-test-component>`);
      expect(el).to.exist;
      // si tiene shadowRoot es que es un webcomponent y que se ha renderizado de forma correcta
      expect(el.shadowRoot).to.exist;
      expect(el.someProperty).to.equal('init value');
      //Cuidado!!!!! este código genera acoplamiento al render del componente, no es recomendable ya que los test deben ser funcionales. Nos sirve para testear que el valor de la propiedad se renderiza correctamente, no solo que se ha definido
      expect(el.shadowRoot?.getElementById("property-value")?.textContent).to.equal('init value');
      el.someProperty = 'new value';
      await elementUpdated(el);
      expect(el.someProperty).to.equal('new value');
      //Cuidado!!!!! este código genera acoplamiento al render del componente, no es recomendable ya que los test deben ser funcionales. Nos sirve para testear que el valor de la propiedad se renderiza correctamente, no solo que se ha definido
      expect(el.shadowRoot?.getElementById("property-value")?.textContent).to.equal('new value');

    });
      it("should render a changed value property in a web component with random test tag", async () => {
      const tag = defineCE(class extends Example{});
      const unsafeTag = unsafeStatic(tag);
      //await fixture espera hasta que se renderice el componente
      const el = await fixture< Example >(html`<${unsafeTag} .someProperty=${'init value'}></${unsafeTag}>`);
      expect(el).to.exist;
      // si tiene shadowRoot es que es un webcomponent y que se ha renderizado de forma correcta
      expect(el.shadowRoot).to.exist;
      expect(el.someProperty).to.equal('init value');
      //Cuidado!!!!! este código genera acoplamiento al render del componente, no es recomendable ya que los test deben ser funcionales. Nos sirve para testear que el valor de la propiedad se renderiza correctamente, no solo que se ha definido
      expect(el.shadowRoot?.getElementById("property-value")?.textContent).to.equal('init value');
      el.someProperty = 'new value';
      await elementUpdated(el);
      expect(el.someProperty).to.equal('new value');
      //Cuidado!!!!! este código genera acoplamiento al render del componente, no es recomendable ya que los test deben ser funcionales. Nos sirve para testear que el valor de la propiedad se renderiza correctamente, no solo que se ha definido
      expect(el.shadowRoot?.getElementById("property-value")?.textContent).to.equal('new value');
    });
    
   it("should render a reactive changed value property", async () => {
      let propertyReactiveBind = 'init value';
      //await fixture espera hasta que se renderice el componente
      const el = await fixture< Example >(html`<example-test-component .someProperty=${propertyReactiveBind} ></example-test-component>`);
      expect(el).to.exist;
      // si tiene shadowRoot es que es un webcomponent y que se ha renderizado de forma correcta
      expect(el.shadowRoot).to.exist;
      expect(el.someProperty).to.equal('init value');
      //Cuidado!!!!! este código genera acoplamiento al render del componente, no es recomendable ya que los test deben ser funcionales. Nos sirve para testear que el valor de la propiedad se renderiza correctamente, no solo que se ha definido
      expect(el.shadowRoot?.getElementById("property-value")?.textContent).to.equal('init value');
      propertyReactiveBind = 'new value';
      //Tenemos que hacer esto ya que no existe un método para actualizar la propiedad de forma reactiva a través del html desde un entorno de test.
      el.someProperty = propertyReactiveBind;
      await elementUpdated(el);
      expect(el.someProperty).to.equal('new value');
      //Cuidado!!!!! este código genera acoplamiento al render del componente, no es recomendable ya que los test deben ser funcionales. Nos sirve para testear que el valor de la propiedad se renderiza correctamente, no solo que se ha definido
      expect(el.shadowRoot?.getElementById("property-value")?.textContent).to.equal('new value');
    });
    it("should render a reactive changed value property in a web component with random test tag", async () => {
      let propertyReactiveBind = 'init value';
      const tag = defineCE(class extends Example{});
      const unsafeTag = unsafeStatic(tag);
      //await fixture espera hasta que se renderice el componente
      const el = await fixture< Example >(html`<${unsafeTag} .someProperty=${propertyReactiveBind}></${unsafeTag}>`);
      expect(el).to.exist;
      // si tiene shadowRoot es que es un webcomponent y que se ha renderizado de forma correcta
      expect(el.shadowRoot).to.exist;
      expect(el.someProperty).to.equal('init value');
      //Cuidado!!!!! este código genera acoplamiento al render del componente, no es recomendable ya que los test deben ser funcionales. Nos sirve para testear que el valor de la propiedad se renderiza correctamente, no solo que se ha definido
      expect(el.shadowRoot?.getElementById("property-value")?.textContent).to.equal('init value');
      propertyReactiveBind = 'new value';
       //Tenemos que hacer esto ya que no existe un método para actualizar la propiedad de forma reactiva a través del html desde un entorno de test.
      el.someProperty = propertyReactiveBind;
      await elementUpdated(el);
      expect(el.someProperty).to.equal('new value');
      //Cuidado!!!!! este código genera acoplamiento al render del componente, no es recomendable ya que los test deben ser funcionales. Nos sirve para testear que el valor de la propiedad se renderiza correctamente, no solo que se ha definido
      expect(el.shadowRoot?.getElementById("property-value")?.textContent).to.equal('new value');
    }); 
});

      //Cuidado!!!!! este código genera acoplamiento al html generado por el render del componente, no es recomendable ya que los test deben ser funcionales. Nos sirve para testear que el valor del atributo se renderiza correctamente, no solo que se ha definido
      expect(el.shadowRoot?.getElementById("property-value")?.textContent).to.equal('default value');

//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} from "@open-wc/testing";
//Importamos el componente
import { Example } from "../index";

describe("Testing Lit WebComponent ", () => {

    //creación de un sandbox para el mock
    before(() => {
    });
    //Se restaura el sandbox y se limpia el fixture después de cada test
    afterEach(() => {
      fixtureCleanup();
    });
  
    //test de renderizado del componente example-test-component
    it("should render a default value of attribute", async () => {
      //await fixture espera hasta que se renderice el componente
      const el = await fixture< Example >(html`<example-test-component></example-test-component>`);
      expect(el).to.exist;
      // si tiene shadowRoot es que es un webcomponent y que se ha renderizado de forma correcta
      expect(el.shadowRoot).to.exist;
      expect(el.getAttribute('some-attribute')).to.not.exist;
      expect(el.someProperty).to.equal('default value');
      //Cuidado!!!!! este código genera acoplamiento al render del componente, no es recomendable ya que los test deben ser funcionales. Nos sirve para testear que el valor de la propiedad se renderiza correctamente, no solo que se ha definido
      expect(el.shadowRoot?.getElementById("property-value")?.textContent).to.equal('default value');
    });
    it("should render a default value of attribute in a web component with random test tag", async () => {
      const tag = defineCE(class extends Example{});
      const unsafeTag = unsafeStatic(tag);
      //await fixture espera hasta que se renderice el componente
      const el = await fixture< Example >(html`<${unsafeTag}></${unsafeTag}>`);
      expect(el).to.exist;
      // si tiene shadowRoot es que es un webcomponent y que se ha renderizado de forma correcta
      expect(el.shadowRoot).to.exist;
      expect(el.getAttribute('some-attribute')).to.not.exist;
      expect(el.someProperty).to.equal('default value');
      //Cuidado!!!!! este código genera acoplamiento al render del componente, no es recomendable ya que los test deben ser funcionales. Nos sirve para testear que el valor de la propiedad se renderiza correctamente, no solo que se ha definido
      expect(el.shadowRoot?.getElementById("property-value")?.textContent).to.equal('default value');
    });
    it("should render a initialize value attribute", async () => {
      //await fixture espera hasta que se renderice el componente
      const el = await fixture< Example >(html`<example-test-component some-attribute=${'init value'} ></example-test-component>`);
      expect(el).to.exist;
      // si tiene shadowRoot es que es un webcomponent y que se ha renderizado de forma correcta
      expect(el.shadowRoot).to.exist;
      expect(el.getAttribute('some-attribute')).to.equal('init value');
      expect(el.someProperty).to.equal('init value');
      //Cuidado!!!!! este código genera acoplamiento al render del componente, no es recomendable ya que los test deben ser funcionales. Nos sirve para testear que el valor de la propiedad se renderiza correctamente, no solo que se ha definido
      expect(el.shadowRoot?.getElementById("property-value")?.textContent).to.equal('init value');
    });
     it("should render a initialize value attribute in a web component with random test tag", async () => {
      const tag = defineCE(class extends Example{});
      const unsafeTag = unsafeStatic(tag);
      //await fixture espera hasta que se renderice el componente
      const el = await fixture< Example >(html`<${unsafeTag} some-attribute=${'init value'}></${unsafeTag}>`);
      expect(el).to.exist;
      // si tiene shadowRoot es que es un webcomponent y que se ha renderizado de forma correcta
      expect(el.shadowRoot).to.exist;
      expect(el.getAttribute('some-attribute')).to.equal('init value');
      expect(el.someProperty).to.equal('init value');
      //Cuidado!!!!! este código genera acoplamiento al render del componente, no es recomendable ya que los test deben ser funcionales. Nos sirve para testear que el valor de la propiedad se renderiza correctamente, no solo que se ha definido
      expect(el.shadowRoot?.getElementById("property-value")?.textContent).to.equal('init value');
    });
    it("should render a changed value attribute", async () => {
      //await fixture espera hasta que se renderice el componente
      const el = await fixture< Example >(html`<example-test-component some-attribute=${'init value'} ></example-test-component>`);
      expect(el).to.exist;
      // si tiene shadowRoot es que es un webcomponent y que se ha renderizado de forma correcta
      expect(el.shadowRoot).to.exist;
      expect(el.getAttribute('some-attribute')).to.equal('init value');
      expect(el.someProperty).to.equal('init value');
      //Cuidado!!!!! este código genera acoplamiento al render del componente, no es recomendable ya que los test deben ser funcionales. Nos sirve para testear que el valor de la propiedad se renderiza correctamente, no solo que se ha definido
      expect(el.shadowRoot?.getElementById("property-value")?.textContent).to.equal('init value');
      el.setAttribute('some-attribute', 'new value');
      await elementUpdated(el);
      expect(el.getAttribute('some-attribute')).to.equal('new value');
      expect(el.someProperty).to.equal('new value');
      //Cuidado!!!!! este código genera acoplamiento al render del componente, no es recomendable ya que los test deben ser funcionales. Nos sirve para testear que el valor de la propiedad se renderiza correctamente, no solo que se ha definido
      expect(el.shadowRoot?.getElementById("property-value")?.textContent).to.equal('new value');

    });
    it("should render a changed value attribute in a web component with random test tag", async () => {
      const tag = defineCE(class extends Example{});
      const unsafeTag = unsafeStatic(tag);
      //await fixture espera hasta que se renderice el componente
      const el = await fixture< Example >(html`<${unsafeTag} some-attribute=${'init value'}></${unsafeTag}>`);
      expect(el).to.exist;
      // si tiene shadowRoot es que es un webcomponent y que se ha renderizado de forma correcta
      expect(el.shadowRoot).to.exist;
      expect(el.getAttribute('some-attribute')).to.equal('init value');
      expect(el.someProperty).to.equal('init value');
      //Cuidado!!!!! este código genera acoplamiento al render del componente, no es recomendable ya que los test deben ser funcionales. Nos sirve para testear que el valor de la propiedad se renderiza correctamente, no solo que se ha definido
      expect(el.shadowRoot?.getElementById("property-value")?.textContent).to.equal('init value');
      el.setAttribute('some-attribute', 'new value');
      await elementUpdated(el);
      expect(el.getAttribute('some-attribute')).to.equal('new value');
      expect(el.someProperty).to.equal('new value');
      //Cuidado!!!!! este código genera acoplamiento al render del componente, no es recomendable ya que los test deben ser funcionales. Nos sirve para testear que el valor de la propiedad se renderiza correctamente, no solo que se ha definido
      expect(el.shadowRoot?.getElementById("property-value")?.textContent).to.equal('new value');
    });
    it("should render a reactive changed value attribute", async () => {
      let propertyReactiveBind = 'init value';
      //await fixture espera hasta que se renderice el componente
      const el = await fixture< Example >(html`<example-test-component some-attribute=${propertyReactiveBind} ></example-test-component>`);
      expect(el).to.exist;
      // si tiene shadowRoot es que es un webcomponent y que se ha renderizado de forma correcta
      expect(el.shadowRoot).to.exist;
      expect(el.getAttribute('some-attribute')).to.equal('init value');
      expect(el.someProperty).to.equal('init value');
      //Cuidado!!!!! este código genera acoplamiento al render del componente, no es recomendable ya que los test deben ser funcionales. Nos sirve para testear que el valor de la propiedad se renderiza correctamente, no solo que se ha definido
      expect(el.shadowRoot?.getElementById("property-value")?.textContent).to.equal('init value');
      propertyReactiveBind = 'new value';
        //Tenemos que hacer esto ya que no existe un método para actualizar la propiedad de forma reactiva a través del html desde un entorno de test.
        el.setAttribute('some-attribute', propertyReactiveBind);
      await elementUpdated(el);
      expect(el.getAttribute('some-attribute')).to.equal('new value');
      expect(el.someProperty).to.equal('new value');
      //Cuidado!!!!! este código genera acoplamiento al render del componente, no es recomendable ya que los test deben ser funcionales. Nos sirve para testear que el valor de la propiedad se renderiza correctamente, no solo que se ha definido
      expect(el.shadowRoot?.getElementById("property-value")?.textContent).to.equal('new value');
    });
    it("should render a reactive changed value attribute in a web component with random test tag", async () => {
      let propertyReactiveBind = 'init value';
      const tag = defineCE(class extends Example{});
      const unsafeTag = unsafeStatic(tag);
      //await fixture espera hasta que se renderice el componente
      const el = await fixture< Example >(html`<${unsafeTag} some-attribute=${propertyReactiveBind}></${unsafeTag}>`);
      expect(el).to.exist;
      // si tiene shadowRoot es que es un webcomponent y que se ha renderizado de forma correcta
      expect(el.shadowRoot).to.exist;
      expect(el.getAttribute('some-attribute')).to.equal('init value');
      expect(el.someProperty).to.equal('init value');
      //Cuidado!!!!! este código genera acoplamiento al render del componente, no es recomendable ya que los test deben ser funcionales. Nos sirve para testear que el valor de la propiedad se renderiza correctamente, no solo que se ha definido
      expect(el.shadowRoot?.getElementById("property-value")?.textContent).to.equal('init value');
      propertyReactiveBind = 'new value';
      //Tenemos que hacer esto ya que no existe un método para actualizar la propiedad de forma reactiva a través del html desde un entorno de test.
      el.setAttribute('some-attribute', propertyReactiveBind);
      await elementUpdated(el);
      expect(el.getAttribute('some-attribute')).to.equal('new value');
      expect(el.someProperty).to.equal('new value');
      //Cuidado!!!!! este código genera acoplamiento al render del componente, no es recomendable ya que los test deben ser funcionales. Nos sirve para testear que el valor de la propiedad se renderiza correctamente, no solo que se ha definido
      expect(el.shadowRoot?.getElementById("property-value")?.textContent).to.equal('new value');
    });
});

//Importante que los import vengas de @open-wc/testing para que tener la máxima compatibilidad con lit-element
import { defineCE, expect, fixture, fixtureCleanup, html, unsafeStatic } from "@open-wc/testing";
import { LitElement } from "lit";
//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 ", () => {
  //Se restaura el sandbox y se limpia el fixture después de cada test
  afterEach(() => {
    fixtureCleanup();
  });

  //test de renderizado del componente customizado
  it("should render a web component", async () => {
     //await fixture espera hasta que se renderice el componente
    const el = await fixture< LitElement >(html`<${customElementWithPropertiesTag}></${customElementWithPropertiesTag}`);
    expect(el).to.exist;
    // si tiene shadowRoot es que es un webcomponent y que se ha renderizado de forma correcta
    expect(el.shadowRoot).to.exist;
  });
});