Subdirección de las Tecnologías de la Información y Comunicaciones

Área de Gobernanza y Calidad

Versión

Guia de Testing en el Frontend Versión: 1.0.0 Estado: Vigente Entrada en vigor desde: 13 nov 2024	Guia de Testing en el Frontend Versión: 1.0.0 Estado: PRE-RELEASE Entrada en vigor desde: 11 oct 2023

Tabla de Contenido

Uso de las Guías de Desarrollo

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

Histórico de cambios

Los cambios en la normativa vendrán acompañados de un registro de las modificaciones. De este modo se podrá realizar un seguimiento y consultar su evolución. Ordenándose de mas recientes a menos recientes, prestando especial cuidado a las cabeceras de la tablas dónde se indican las fechas de entrada en vigor y versión.

Versión	Pre-release	Adopción	Activa	Retiro	Alcance
v01r00					Versión inicial del documento

Introducción

En este documento se describirán las principales pautas a tener en cuenta a la hora de diseñar y ejecutar test en los desarrollos frontales. Importante e

Configuración

Este apartado pretende compartir algunas configuraciones consideradas de utilidad para una correcta ejecución de los test.

Web test runner

Dependencias
- @open-wc/testing
- @types/mocha
- @web/test-runner
- @web/test-runner-puppeteer
- sinon
- puppeteer
Fichero de configuración del runner
- Esta configuración permite la ejecución de los test desde typescript, realizando la transpilación de forma automática.
- También está configurado para funcionar en un monorepo
- También permite la correcta ejecución en contenedores, requisito indispensable para la entrega en la plataforma de Jenkins

web-test-runner.config.mjs

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

Ejemplos

Renderizar un componente

Ejemplo de test de renderizado de un WC

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

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 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(Example);
      //await fixture espera hasta que se renderice el componente
      const el = await fixture< Example >(html`<${tag}></${tag}>`);
      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;
    });
});

Propiedades

Alerta Acoplamiento

//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")).to.equal('default value');

Ejemplo Testing de propiedades del componente

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

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 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.getAttribute('someProperty')).to.equal('default value');
      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")).to.equal('default value');
    });
    it("should render a default value of property in a web component with random test tag", async () => {
      const tag = defineCE(Example);
      //await fixture espera hasta que se renderice el componente
      const el = await fixture< Example >(html`<${tag}></${tag}>`);
      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('someProperty')).to.equal('default value');
      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")).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.getAttribute('someProperty')).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")).to.equal('init value');
    });
    it("should render a initialize value property in a web component with random test tag", async () => {
      const tag = defineCE(Example);
      //await fixture espera hasta que se renderice el componente
      const el = await fixture< Example >(html`<${tag} .someProperty=${'init value'}></${tag}>`);
      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('someProperty')).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")).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.getAttribute('someProperty')).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")).to.equal('init value');
      el.someProperty = 'new value';
      await elementUpdated(el);
      expect(el.getAttribute('someProperty')).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")).to.equal('new value');

    });
    it("should render a changed value property in a web component with random test tag", async () => {
      const tag = defineCE(Example);
      //await fixture espera hasta que se renderice el componente
      const el = await fixture< Example >(html`<${tag} .someProperty=${'init value'}></${tag}>`);
      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('someProperty')).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")).to.equal('init value');
      el.someProperty = 'new value';
      await elementUpdated(el);
      expect(el.getAttribute('someProperty')).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")).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.getAttribute('someProperty')).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")).to.equal('init value');
      propertyReactiveBind = 'new value';
      await elementUpdated(el);
      expect(el.getAttribute('someProperty')).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")).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(Example);
      //await fixture espera hasta que se renderice el componente
      const el = await fixture< Example >(html`<${tag} .someProperty=${propertyReactiveBind}></${tag}>`);
      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('someProperty')).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")).to.equal('init value');
      propertyReactiveBind = 'new value';
      await elementUpdated(el);
      expect(el.getAttribute('someProperty')).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")).to.equal('new value');
    });
});

Renderizar un componente customizado

Ejemplo de test de componente customizado

//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";
//Librería de MOCK
import sinon 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 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;
  });
});

Ejecución

Depuración

Navegadores

Iframe

Normativa

Oops, it seems that you need to place a table or a macro generating a table within the Table Filter macro.

Normativa	Descripción	Versión Activa	Versión Pre-Release	Fecha de Pre-release
Normas de diseño estructural	Documento normativo y pautas sobre el uso de Atomic Web Design	1.0	1.0	-
Web Components	Documento normativo y pautas sobre el desarrollo de web components	1.0	1.0	pte de especificar
Dominio del color	Documento normativo y pautas sobre el uso del color en los web components a través del theming	1.0	1.0	pte de especificar
Dominio de las tipografías	Documento normativo y pautas sobre el uso de los distintos elementos tipográficos en los web components a través del theming	1.0	1.0	pte de especificar
Dominio de los estados	Documento normativo y pautas sobre el uso de los estados en los web components a través del theming	1.0	1.0	pte de especificar
Dominio de las formas	Documento normativo y pautas sobre el uso de las formas en los web components a través del theming	1.0	1.0	pte de especificar
Testing	Documento normativo y pautas sobre el testing	pte de especificar	pte de especificar	pte de especificar

Guías de desarrollo

Guía Implementación	Descripción	Versión Activa	Versión Pre-Release	Fecha de Pre-release
Paradigma atomic web design	Guia de implementación en base a Atomic Web-Design	1.0	1.0	-
Documentar los web components	Guía de implementación acerca de cómo documentar correctamente los web components con las herramientas propuestas	1.0	1.0	pte de especificar
Implementación del theme en los distintos ámbitos	Guía de implementación sobre la implementación y uso del theme en los web components y su extensión a otras áreas/proyectos	1.0	1.0	pte de especificar
Modelo model–view–viewmodel en web components	Guía de implementación sobre los distintos elementos que se deben tener en cuenta en el modelo model-view-modelview	1.0	1.0	pte de especificar
Scaffolding	Guía de implementación sobre la instalación, uso y desarrollo con el Scaffolding de la STIC	1.0	1.0	pte de especificar
Testing	Guía de implementación sobre el testing	pte de especificar	pte de especificar	pte de especificar

Guías de diseño

Oops, it seems that you need to place a table or a macro generating a table within the Table Filter macro.

Guía de diseño	Descripción	Versión Activa	Fecha de activa	Versión Pre-Release	Fecha de Pre-release
Sistema de diseño	Espacio de referencia donde se establecen las pautas que deben seguir los diseños de las aplicaciones en el sas			1.5	1 ene 2024

Árbol de páginas

Subdirección de las Tecnologías de la Información y Comunicaciones

Área de Gobernanza y Calidad

Versión

Versión: 1.0.0

Estado: Vigente

Entrada en vigor desde: 13 nov 2024

Versión: 1.0.0

Estado: PRE-RELEASE

Entrada en vigor desde: 11 oct 2023

Tabla de Contenido

Uso de las Guías de Desarrollo

Histórico de cambios

Introducción

Configuración

Web test runner

Ejemplos

Renderizar un componente

Propiedades

Renderizar un componente customizado

Ejecución

Depuración

Navegadores

Iframe

Normativa

Guías de desarrollo

Guías de diseño

Árbol de páginas

🆕 🏷 Testing

Subdirección de las Tecnologías de la Información y Comunicaciones

Área de Gobernanza y Calidad

Versión

Versión: 1.0.0

Estado: Vigente

Entrada en vigor desde: 13 nov 2024

Versión: 1.0.0

Estado: PRE-RELEASE

Entrada en vigor desde: 11 oct 2023

Tabla de Contenido

Uso de las Guías de Desarrollo

Histórico de cambios

Introducción

Configuración

Web test runner

Ejemplos

Renderizar un componente

Propiedades

Renderizar un componente customizado

Ejecución

Depuración

Navegadores

Iframe

Normativa

Guías de desarrollo

Guías de diseño