Pruebas

Organízate con las colecciones Guarda y clasifica el contenido según tus preferencias.

Las pruebas de unidades para las plantillas personalizadas de Google Tag Manager lo ayudan a validar la funcionalidad de sus plantillas. Puedes crear un conjunto de pruebas para cada plantilla que se pueda ejecutar sin necesidad de implementar tu etiqueta, lo que te permite probar de forma continua el comportamiento de tu plantilla durante el desarrollo. Cada prueba puede proporcionar valores de entrada de muestra, llamadas de función simuladas y confirmar el comportamiento del código.

Limitaciones

  • Las pruebas de unidades no comprueban las reglas de validación, pero puedes verificarlas manualmente mediante el botón Run Code.
  • 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 variable que toma una string de entrada y muestra la versión en mayúscula de esa string.

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

  2. Haz clic en Campos (Fields).

  3. Haz clic en Agregar campo y selecciona Entrada de texto. Asígnale el nombre text1 al campo y configura el nombre visible en "Texto 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 “Prueba sin título 1” a “Administra strings”.

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

    // 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 string '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 la plantilla en la pestaña Código. 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 con fluidez sobre el valor de un sujeto.

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

    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 (⠿). Una prueba se puede habilitar o inhabilitar temporalmente haciendo clic en el círculo a la izquierda del nombre de la prueba. Para ejecutar una sola prueba, haz clic en el botón ▶ que aparece cuando mueves el mouse sobre la prueba.

    La consola debe 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 y esta debe aprobarse.

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

  10. Haz clic en la prueba para expandirla y ver el editor de zona de pruebas de JavaScript. Ingresar 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. Haga clic en Code para volver y editar el código de zona de pruebas de la plantilla en JavaScript. Actualiza el código de 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 Pruebas 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, la prueba Handles undefined debe aprobarse.

  15. Haga clic en Guardar y cierre el Editor de plantillas.