Testy

Testy jednostkowe szablonów niestandardowych Menedżera tagów Google pomagają sprawdzić działanie szablonów. Możesz utworzyć zestaw testów dla każdego szablonu które można uruchomić bez wdrażania tagu. Umożliwia to ciągle testować działanie szablonu w trakcie jego tworzenia. Każdy test może podać przykładowe wartości wejściowe, pozorowane wywołania funkcji i zachowanie kodu.

Ograniczenia

  • Testy jednostkowe nie sprawdzają reguł weryfikacji, ale możesz je sprawdzić ręcznie, klikając przycisk Uruchom kod.
  • W testach jednostkowych sprawdzanie uprawnień nie jest przeprowadzane w przypadku imitowanych interfejsów API.

Z tego przewodnika dowiesz się, jak pisać testy jednostkowe szablonu niestandardowego. W tym przykładzie tworzymy szablon zmiennej, który przyjmuje ciąg znaków i zwraca zapis tego ciągu pisany wielkimi literami.

  1. Utwórz nowy szablon zmiennej. W panelu nawigacyjnym po lewej stronie kliknij Szablony, a potem w sekcji Szablony zmiennych kliknij Nowy.

  2. Kliknij Pola.

  3. Kliknij kolejno Dodaj pole i Pole tekstowe. Nazwij pole text1, a wyświetlaną nazwę ustaw na „Tekst 1”.

  4. Na karcie Kod zastąp domyślny kod tym kodem JavaScript w trybie piaskownicy:

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

  5. Kliknij Testy, aby otworzyć kartę testowania.

  6. Kliknij Dodaj test i zmień nazwę testu z „Untitled test 1” na „Obsługa ciągów znaków”.

  7. Kliknij ikonę rozwijania (), aby wyświetlić edytor JavaScript dostępny w trybie piaskownicy. Zastąp kod tym kodem JavaScript w trybie piaskownicy:

    // 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');

    Ten test przekazuje do zmiennej ciąg 'this is a test' i sprawdza, czy zmienna zwraca oczekiwaną wartość 'THIS IS A TEST'. Interfejs API runCode służy do uruchamiania kodu szablonu na karcie Kod. Argument funkcji runCode to obiekt używany jako globalne dane. Interfejs API assertThat zwraca obiekt, którego można używać do płynnego formułowania asercji do wartości podmiotu.

  8. Aby uruchomić test, kliknij ▶ Uruchom testy. Wyniki testu pojawią się w konsoli.

    Przycisk ▶ Uruchom testy uruchamia wszystkie testy włączone w szablonie w podanej kolejności. Aby zmienić kolejność, użyj ikony przeciągania (⠿). Test można tymczasowo włączyć lub wyłączyć, klikając kółko na lewo od nazwy testu. Aby przeprowadzić pojedynczy test, kliknij przycisk ▶, który pojawia się po najechaniu kursorem na test.

    Konsola powinna wyświetlić łączną liczbę przeprowadzonych testów oraz liczbę testów, które zakończyły się niepowodzeniem (jeśli jakieś wystąpiły). W tym przypadku uruchomiono tylko 1 test, który powinien zakończyć się powodzeniem.

  9. Kliknij ponownie Dodaj test, aby dodać drugi test. Zmień nazwę testu z „Untitled test 2” na „Handles undefined”.

  10. Kliknij test, aby go rozwinąć i wyświetlić edytor JavaScript w trybie piaskownicy. Wpisz w edytorze JavaScript w trybie piaskownicy:

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

  11. Aby uruchomić wszystkie testy jednocześnie, kliknij ▶ Uruchom testy. Wynik testu pojawi się w konsoli.

    Test Niezdefiniowany nick powinien zakończyć się niepowodzeniem. Gratulacje, udało Ci się znaleźć błąd!

  12. Kliknij Kod, aby wrócić i edytować kod JavaScript szablonu w piaskownicy. Zaktualizuj JavaScript w trybie piaskownicy w ten sposób:

    const getType = require('getType');

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

    Zaktualizowany kod jest zgodny ze sprawdzonymi metodami sprawdzania zmiennej input przed jej użyciem.

  13. Kliknij Testy, aby wrócić do listy testów.

  14. Kliknij ▶ Uruchom testy, aby ponownie uruchomić wszystkie przypadki testowe. Tym razem test Niezdefiniowany uchwyt powinien zakończyć się powodzeniem.

  15. Kliknij Zapisz i zamknij Edytor szablonów.