Blog de marzo, 2025

En este artículo se detallan los pasos necesarios para configurar Karma y Jasmine de manera adecuada, garantizando su correcto funcionamiento dentro de los entornos de IC. Esta configuración es esencial para asegurar que nuestras pruebas unitarias se ejecuten de forma efectiva y eficiente.


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

Área de Gobernanza y Calidad

Tabla de Contenido


Histórico de cambios


Los cambios en el documento 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ónPre-release AdopciónActivaRetiroAlcance
v01r00

 




  • Versión inicial del documento

1. Introducción

Esta guía técnica aporta información sobre cómo configurar diferentes test runner  en soluciones Front-End.


1.1 Karma JS

Karma, junto con Jasmine, permite probar el mismo código Javascript en varios navegadores web  de una manera completamente automatizada.

Para su configuración se requiere establecer unos flags que dependerá de las necesidades concretas de cada proyecto Angular.

A continuación se define los flags más utilizados que el proveedor deberá probar y comprobar que funciona para la configuración de su proyecto en particular:


FlagsDescripción
--no-sandbox

Requerido para ejecutarse sin privilegios en docker.

Cuando se ejecutan pruebas JS (usando Karma) con Headless Chrome en un contenedor docker, las pruebas fallan, informándose del siguiente error "Running as root without --no-sandbox is not supported".

--headlesshabilita el modo headles de Chromes, sin interfaz gráfica.
--disable-dev-shm-usageSolo se agrega cuando se establece la variable de entorno del sistema CI o cuando se encuentra dentro de una instancia de Docker. La partición /dev/shm es demasiado pequeña en ciertos entornos de VM, lo que hace que Chrome falle o se bloquee
--disable-web-securityDeshabilitar la seguridad web en el navegador.
--disable-software-rasterizerDeshabilita el uso de Software 3D de rasterización (una serie de píxeles, puntos o líneas, que, cuando se muestran juntos, crean la imagen que se representó a través de formas)
--disable-gpuDeshabilita la aceleración de hardware GPU en el servidor



A continuación se muestra un ejemplo de configuración de Karma para desarrollo (modo Debug establecido a true)


1 Ejemplo configuración Karma: karma.conf.js
  // Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html
process.env.CHROME_BIN = require("puppeteer").executablePath();

module.exports = function (config) {
  config.set({
    basePath: "",
    frameworks: ["jasmine", "@angular-devkit/build-angular"],
    plugins: [
      require("karma-jasmine"),
      require("karma-chrome-launcher"),
      require("karma-jasmine-html-reporter"),
      require("karma-coverage"),
      require("@angular-devkit/build-angular/plugins/karma"),
      require("karma-spec-reporter"),
    ],
    client: {
      jasmine: {
        // you can add configuration options for Jasmine here
        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
        // for example, you can disable the random execution with `random: false`
        // or set a specific seed with `seed: 4321`
      },
      clearContext: false, // leave Jasmine Spec Runner output visible in browser
    },
    jasmineHtmlReporter: {
      suppressAll: true, // removes the duplicated traces
      suppressFailed: true, // Suppress failed messages
    },
    coverageReporter: {
      dir: require("path").join(__dirname, "./coverage"),
      subdir: ".",
      reporters: [{ type: "html" }, { type: "text-summary" }, { type: "lcov" }],
      check: {
        global: {
          statements: 65,
          branches: 65,
          functions: 65,
          lines: 65,
        },
      },
    },
    reporters: ["progress", "spec", "kjhtml"],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ["ChromeHeadlessNoSandbox"],
    customLaunchers: {
      ChromeHeadlessNoSandbox: {
        base: "ChromeHeadless",
        flags: [
          "--no-sandbox", // required to run without privileges in docker
          "--user-data-dir=/tmp/chrome-test-profile",
          "--disable-web-security",
          "--remote-debugging-port=9222",
        ],
        debug: true,
      },
    },
    singleRun: false,
    restartOnFileChange: true,
  });
}; 


La configuración de Karma en Producción debe de contener únicamente los flags estrictamente necesarios. Por ejemplo, no debería de configurar los parámetros --watch  o --debug

También es necesario que el proyecto esté configurado con las últimas versiones estables de Jasmine y Karma para que no se produzca errores como el siguiente por versiones deprecadas:


2 Ejemplo de error ejecución de test por versión deprecada de componentes
> ng test

'karma-coverage-istanbul-reporter' usage has been deprecated since version 11.




La versión 1.60.0 del catálogo de componentes web transversal, se ha liberado en los repositorios digitales de medios de la STIC.

Versión Actual

Versión: 1.60.0
Fecha Publicación:

Próxima Release

Versión: 1.61.0
Fecha Prevista de Publicación:


Podréis consultarlos desde el Storybook del SAS.

Otros recursos

Recordad que el acceso a los Storybook es a través de la red corporativa del SAS.

Para cualquier duda pueden escribirnos a la Lista de Arquitectura( l-arquitectura.stic.sspa@juntadeandalucia.es ) y trataremos de daros soporte con la mayor brevedad que nos sea posible


CHANGELOG

Sistema de Diseño

  •  Componentes
    • Nos complace anunciar la publicación del nuevo componente Uploader, diseñado para facilitar la carga de archivos con una experiencia optimizada y accesible.

    • Este componente permite a los usuarios adjuntar archivos de manera intuitiva, ofreciendo soporte para arrastrar y soltar (drag & drop), previsualización de archivos y validaciones configurables.

      📌 Características principales:
      ✔️ Soporte para múltiples archivos
      ✔️ Indicadores de progreso y estados de carga
      ✔️ Configuración flexible para restricciones de formato y tamaño
      ✔️ Interfaz accesible y adaptable a distintos contextos de uso

      Consulta la documentación completa aquí 👉 Uploader en Zeroheight


Catálogo de componentes

Añadido

Deprecado

  • @sas/wc-stic-paginator
    • Se depreca el componente <stic-paginator>. En su lugar usar <stic-pagination>.

Candidatos para la siguiente versión


La versión 1.59.0 del catálogo de componentes web transversal, se ha liberado en los repositorios digitales de medios de la STIC.

Versión Actual

Versión: 1.59.0
Fecha Publicación:

Próxima Release

Versión: 1.60.0
Fecha Prevista de Publicación:


Podréis consultarlos desde el Storybook del SAS.

Otros recursos

Recordad que el acceso a los Storybook es a través de la red corporativa del SAS.

Para cualquier duda pueden escribirnos a la Lista de Arquitectura( l-arquitectura.stic.sspa@juntadeandalucia.es ) y trataremos de daros soporte con la mayor brevedad que nos sea posible


CHANGELOG

Catálogo de componentes

Añadido

  • @sas/wc-stic-table
    • Se añade el componente switch a la lista de acciones de la tabla, el cual, si se pulsa, lanza el evento table:switchChange.

Modificado

  • @sas/wc-stic-filter-chip-date, @sas/wc-stic-filter-chip-date-range
    • Actualización de ambos componentes usando <stic-calendar-v2> en lugar de <stic-calendar>.

Corregido

  • @sas/wc-stic-calendar-v2

    • Arreglado funcionamiento del rango cuando seleccionas una fecha que incluye dos meses distintos.

Candidatos para la siguiente versión

¡Nueva versión de MacoApiClient disponible!

Se publica MacoApiClient 3.0.1, que ahora se actualiza a Java 21 para aprovechar las mejoras de rendimiento, seguridad y mantenimiento a largo plazo.

🔹 ¿Qué es MacoApiClient?
Esta librería permite interactuar con la API de Maco y acceder a utilidades clave para su operativa.

🔹 Funcionalidades principales:
Autenticación:
✔️ Autenticación con Maco.
✔️ Comprobación de autorización a servicios.

Operadores:
✔️ Búsqueda de operadores.
✔️ Cambio de contraseña de operadores.

Profesionales:
✔️ Búsqueda de profesionales.

Tickets:
✔️ Validación de tickets.

💡 ¿Necesitas funcionalidades adicionales?
Si algún proveedor requiere nuevas funcionalidades, puede comunicarlo a 📩 l-arquitectura.stic.sspa@juntadeandalucia.es.

La versión 1.58.0 del catálogo de componentes web transversal, se ha liberado en los repositorios digitales de medios de la STIC.

Versión Actual

Versión: 1.58.0
Fecha Publicación:

Próxima Release

Versión: 1.59.0
Fecha Prevista de Publicación:


Podréis consultarlos desde el Storybook del SAS.

Otros recursos

Recordad que el acceso a los Storybook es a través de la red corporativa del SAS.

Para cualquier duda pueden escribirnos a la Lista de Arquitectura( l-arquitectura.stic.sspa@juntadeandalucia.es ) y trataremos de daros soporte con la mayor brevedad que nos sea posible


CHANGELOG

Sistema de Diseño

  • Patrones de diseño
    • :altavoz_sonando: Nuevo Patrón de Formularios disponible (v1.5.1)
      Nos complace anunciar la publicación de nuestro nuevo patrón de formularios, disponible en nuestra guía de diseño. Este recurso proporciona directrices clave para la creación de formularios más accesibles, intuitivos y eficientes:
      • Estructura clara y coherente para mejorar la experiencia del usuario.
      • Etiquetas y validaciones adecuadas para facilitar la interacción.
      • Mensajes de error descriptivos que orientan al usuario.
      • Diseño accesible y adaptable para distintos dispositivos.

Consulta todos los detalles en la documentación :apuntando_hacia_la_derecha: [Enlace al patrón]

  •  Componentes
    • Publicación del nuevo componente Input (v1.5.1), diseñado para ofrecer una experiencia de usuario optimizada, accesible y altamente configurable.

      Características principales:

      • Soporte para distintos estados (activo, inactivo, error, éxito, etc.).
      • Personalización avanzada, incluyendo variantes de tamaño e iconografía.
      • Accesibilidad mejorada, cumpliendo con los estándares WCAG.
      • Compatibilidad con validaciones y mensajes de error dinámicos.

      Este componente ya está disponible en nuestra librería de sistema de diseño. Consulta la documentación completa: ZeroHeight - Input.

    •  📢 Nuevo componente: Pagination

      •  Publicado el nuevo componente Pagination en su version 1.5.1 diseñado para mejorar la navegación en listas extensas y ofrecer una experiencia de usuario más intuitiva.


        • Características principales:
          ✔ Diseño accesible y flexible.
          ✔ Soporte para paginación con números, botones de avance/retroceso y accesos rápidos.
          ✔ Adaptabilidad a distintos contextos de UI.


Este componente ya está disponible en nuestra librería de sistema de diseño. Consulta la documentación completa: ZeroHeight - Pagination.


Catálogo de componentes

Añadido

Corregido

  • @sas/wc-stic-input-checkbox

    • Refactorización del componente para igualarlo a la estructura y vista de wc-stic-input-radio según lo establecido en la versión 1.5.1 del componente en Sistema de Diseño.

Candidatos para la siguiente versión

La versión 1.57.0 del catálogo de componentes web transversal, se ha liberado en los repositorios digitales de medios de la STIC.

Versión Actual

Versión: 1.57.0
Fecha Publicación:

Próxima Release

Versión: 1.58.0
Fecha Prevista de Publicación:


Podréis consultarlos desde el Storybook del SAS.

Otros recursos

Recordad que el acceso a los Storybook es a través de la red corporativa del SAS.

Para cualquier duda pueden escribirnos a la Lista de Arquitectura( l-arquitectura.stic.sspa@juntadeandalucia.es ) y trataremos de daros soporte con la mayor brevedad que nos sea posible


CHANGELOG

Añadido

  • Publicación el nuevo componente


  • Modificaciones en componentes existentes

    • @sas/wc-stic-checkbox-group

      • Se añaden las nuevas propiedades:
        • description: para incluir una descripción al componente
        • required, validationMessage, reset y validate: para la realización del proceso de validación del componente y 
      • Se añade el evento sticCheckboxGroup:validated para informar de manera global sobre la validacion del componente.
    • @sas/wc-stic-filters-area

      • Se añade la propiedad showInfoButton para mostrar u ocultar el boton (info.)  de la parte superior derecha del componente.
    • @sas/wc-stic-radio-group

      • Se añaden la propiedades:
        • description: para incluir una descripción al componente
        • size: para controlar de manera global el tamaño del componente.

Modificado

  • @sas/wc-stic-filters-area

    • Los filtros se muestran visibles por defecto.
    • Modificado el contenedor del componente para corregir el error de espacio que se producía al pulsar sobre el icono (info.)  cuando se ocultaba la notificación.
  • @sas/wc-stic-radio-group

Corregido

  • @sas/wc-stic-icon

    • Corregido el tamaño del contenedor exterior del icono en función de la propiedad size del componente.

Deprecado

  • @sas/wc-stic-radio-group
    • Se deprecan las propiedades nowrap, reducedTouchTarget, spaceBetween y alignEnd.
    • Se deprecan todas las variables CSS.

Candidatos para la siguiente versión