Pruebas

Las pruebas unitarias para las plantillas personalizadas de Google Tag Manager lo ayudan a validar la funcionalidad de sus plantillas. Puede crear un conjunto de pruebas para cada plantilla que se puede ejecutar sin necesidad de implementar su etiqueta, lo que le permite probar continuamente el comportamiento de su plantilla durante el desarrollo. Cada prueba puede proporcionar valores de entrada de muestra, simulacros de llamadas a funciones y afirmar el comportamiento del código.

Limitaciones

  • Las pruebas unitarias no comprueban las reglas de validación, pero puede comprobar manualmente la validación con el botón Ejecutar código .
  • Las comprobaciones de permisos no se realizan en las API simuladas en las pruebas unitarias.

Esta guía lo guiará a través de cómo escribir pruebas unitarias para su plantilla personalizada. Este ejemplo crea una plantilla de variable que toma una cadena de entrada y devuelve la versión en mayúsculas de esa cadena.

  1. Cree una nueva plantilla de variables. Haga clic en Plantillas en la barra de navegación izquierda y haga clic en Nuevo en la sección Plantillas variables .

  2. Haga clic en Campos .

  3. Haga clic en Agregar campo y seleccione Entrada de texto . Nombre el campo text1 y establezca el nombre para mostrar en "Text 1" .

  4. En la pestaña Código , reemplace el código predeterminado con este JavaScript en espacio aislado:

    let input = data.text1;
    return input.toUpperCase();
    
  5. Haga clic en Pruebas para abrir la pestaña de pruebas.

  6. Haga clic en Agregar prueba y cambie el nombre de la prueba de "Prueba 1 sin título" a "Maneja cadenas" .

  7. Haga clic en el ícono de expansión ( ) para revelar el editor de JavaScript en espacio aislado de la prueba. Reemplace el código con este JavaScript en espacio aislado:

    // 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 la variable devuelve el valor esperado de 'THIS IS A TEST' . La API runCode se utiliza para ejecutar el código de plantilla en la pestaña Código . El argumento de runCode es un objeto que se utiliza como datos globales. La API assertThat devuelve un objeto que se puede usar para hacer afirmaciones con fluidez sobre el valor de un sujeto.

  8. Haga clic en ▶ Ejecutar pruebas para ejecutar la prueba. El resultado de la prueba aparecerá en la Consola.

    El botón ▶ Ejecutar pruebas ejecuta todas las pruebas habilitadas en la plantilla, en el orden que se muestra. Para cambiar el orden, utilice el icono de arrastrar (⠿). Una prueba se puede habilitar o deshabilitar temporalmente haciendo clic en el círculo a la izquierda del nombre de la prueba. Para ejecutar una sola prueba, haga clic en el botón ▶ que aparece cuando mueve el mouse sobre la prueba.

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

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

  10. Haga clic en la prueba para expandirla y mostrar el editor de JavaScript en espacio aislado. Ingrese JavaScript en espacio aislado en el editor:

    let variableResult = runCode({});
    assertThat(variableResult).isEqualTo(undefined);
    
  11. Haga clic en ▶ Ejecutar pruebas para ejecutar todas las pruebas a la vez. La salida de la prueba aparecerá en la consola.

    La prueba de identificadores indefinidos debería fallar. ¡Felicitaciones, encontraste un error!

  12. Haga clic en Código para volver atrás y editar el código JavaScript de espacio aislado de la plantilla. Actualice el JavaScript en espacio aislado 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 mejor práctica de validar la variable input antes de usarla.

  13. Haga clic en Pruebas para volver a la lista de casos de prueba.

  14. Haga clic en ▶ Ejecutar pruebas para volver a ejecutar todos los casos de prueba. Esta vez debería pasar la prueba de manijas indefinidas .

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