Pruebas

Las pruebas de unidades para las plantillas personalizadas de Google Tag Manager te ayudan a validar la funcionalidad de tus plantillas. Puedes crear un conjunto de pruebas para cada plantilla que pueden ejecutarse sin necesidad de implementar su etiqueta, lo que le permite probar de forma continua el comportamiento de la plantilla durante el desarrollo. Cada prueba puede proporcionar valores de entrada de muestra, simular llamadas a funciones y comportamiento de código de aserción.

Limitaciones

  • Las pruebas de unidades no comprueban las reglas de validación, pero puedes comprobar la validación manualmente con el botón Ejecutar código.
  • Las verificaciones de permisos no se realizan en APIs simuladas en pruebas de unidades.

En esta guía, aprenderás a escribir pruebas de unidades para tu plantilla personalizada. En este ejemplo, se crea una plantilla de variables que toma una cadena de entrada y muestra la versión en mayúsculas de esa cadena.

  1. Crea una nueva plantilla de variables. Haz clic en Templates en el panel de navegación izquierdo y, luego, en New en la sección Variable Templates.

  2. Haz clic en Campos.

  3. Haz clic en Agregar campo y selecciona Entrada de texto. Asigna el nombre text1 al campo y establece el nombre visible en "Text 1".

  4. En la pestaña Code, reemplaza el código predeterminado por este JavaScript de zona de pruebas:

    let input = data.text1;
return input.toUpperCase();

  5. Haz clic en Pruebas para abrir la pestaña de pruebas.

  6. Haz clic en Agregar prueba y cambia el nombre de la prueba de "Untitled test 1" a "Handles strings".

  7. Haz clic en el ícono de expandir () para acceder al editor de JavaScript de la zona de pruebas. Reemplaza el código con este JavaScript de zona de pruebas:

    // Call runCode to run the template's code with a lowercase string
let variableResult = runCode({text1: 'this is a test'});
// Validate that the result of runCode is an uppercase string.
assertThat(variableResult).isEqualTo('THIS IS A TEST');

    Esta prueba pasa la cadena 'this is a test' a la variable y verifica que esta muestre el valor esperado de 'THIS IS A TEST'. La API de runCode se usa para ejecutar el código de plantilla en la pestaña Code. El argumento para runCode es un objeto que se usa como el global de datos. La API de assertThat muestra un objeto que se puede usar para realizar aserciones sobre el valor de un sujeto con fluidez.

  8. Haz clic en ▶ Run Tests para ejecutar la prueba. El resultado de la prueba aparecerá en la consola.

    El botón ▶ Run Tests ejecuta todas las pruebas habilitadas en la plantilla, en el orden que se muestra. Para cambiar el orden, usa el ícono de arrastrar (⠿). Para habilitar o inhabilitar temporalmente una prueba, haz clic en el círculo que se encuentra a la izquierda de su nombre. Para ejecutar una sola prueba, haz clic en el botón ▶ que aparece cuando mueves el mouse sobre la prueba.

    La consola debería imprimir la cantidad total de pruebas ejecutadas y la cantidad de pruebas que fallaron, si las hubiera. En este caso, solo se ejecutó una prueba, que debería ser exitosa.

  9. Vuelve a hacer clic en Agregar prueba para agregar una segunda prueba. Cambia el nombre de la prueba de "Untitled test 2" a "Handles undefined".

  10. Haz clic en la prueba para expandirla y abrir el editor de JavaScript de la zona de pruebas. Ingresa JavaScript de zona de pruebas en el editor:

    let variableResult = runCode({});
assertThat(variableResult).isEqualTo(undefined);

  11. Haz clic en ▶ Run Tests para ejecutar todas las pruebas a la vez. El resultado de la prueba aparecerá en la consola.

    La prueba Handles undefined debería fallar. ¡Felicitaciones! Encontraste un error.

  12. Haz clic en Código para volver y editar el código JavaScript de la zona de pruebas de la plantilla. Actualiza el código JavaScript de la zona de pruebas de la siguiente manera:

    const getType = require('getType');

let input = data.text1;
if (getType(input) !== 'string') {
  return input;
}
return input.toUpperCase();

    El código actualizado sigue la práctica recomendada de validar la variable input antes de usarla.

  13. Haz clic en Tests para volver a la lista de casos de prueba.

  14. Haz clic en ▶ Run Tests para volver a ejecutar todos los casos de prueba. Esta vez, debería aprobarse la prueba Handles undefined.

  15. Haz clic en Guardar y cierra el Editor de plantillas.