Google 태그 관리자 맞춤 템플릿용 단위 테스트를 사용하면 템플릿의 기능을 확인할 수 있습니다. 각 템플릿에 대해 태그를 배포하지 않고도 실행할 수 있는 테스트 세트를 만들 수 있으므로 개발 과정에서 템플릿의 동작을 지속적으로 테스트할 수 있습니다. 각 테스트는 샘플 입력 값, 모의 함수 호출, 어설션 코드 동작을 제공할 수 있습니다.
제한사항
- 단위 테스트는 유효성 검사 규칙을 확인하지 않지만 코드 실행 버튼을 사용하여 유효성 검사를 수동으로 확인할 수 있습니다.
- 단위 테스트에서 모의 API에 대한 권한 검사는 수행되지 않습니다.
이 가이드에서는 맞춤 템플릿용 단위 테스트를 작성하는 방법을 설명합니다. 이 예시에서는 입력 문자열을 가져와서 해당 문자열의 대문자 버전을 반환하는 변수 템플릿을 만듭니다.
새 변수 템플릿을 만듭니다. 왼쪽 탐색 메뉴에서 템플릿을 클릭하고 변수 템플릿 섹션에서 새로 만들기를 클릭합니다.
필드를 클릭합니다.
필드 추가를 클릭하고 텍스트 입력을 선택합니다. 필드 이름을
text1
로 지정하고 표시 이름을 'Text 1'로 설정합니다.코드 탭에서 기본 코드를 샌드박스 처리된 자바스크립트로 바꿉니다.
let input = data.text1; return input.toUpperCase();
테스트를 클릭하여 테스트 탭을 엽니다.
테스트 추가를 클릭하고 테스트 이름을 'Untitled test 1'에서 'Handles strings'로 변경합니다.
확장 아이콘(expand_more)을 클릭하여 테스트의 샌드박스 처리된 자바스크립트 편집기를 표시합니다. 코드를 샌드박스 처리된 자바스크립트로 바꿉니다.
// 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');
이 테스트는
'this is a test'
문자열을 변수에 전달하고 이 변수가'THIS IS A TEST'
의 예상 값을 반환하는지 확인하는 테스트입니다.runCode
API는 코드 탭에서 템플릿 코드를 실행하는 데 사용됩니다.runCode
의 인수는 데이터 전역으로 사용되는 객체입니다.assertThat
API는 대상의 값에 대해 유연하게 어설션하는 데 사용할 수 있는 객체를 반환합니다.▶ 테스트 실행을 클릭하여 테스트를 실행합니다. 그러면 테스트 결과가 콘솔에 표시됩니다.
▶ 테스트 실행 버튼은 사용 설정된 모든 테스트를 표시된 순서대로 템플릿에서 실행합니다. 순서를 변경하려면 드래그 아이콘(⠿)을 사용합니다. 테스트 이름 왼쪽에 있는 원을 클릭하여 테스트를 일시적으로 사용 설정하거나 중지할 수 있습니다. 단일 테스트를 실행하려면 테스트 위로 마우스를 이동할 때 표시되는 ▶ 버튼을 클릭합니다.
실행된 총 테스트 수와 실패한 테스트 수(있는 경우)가 콘솔에 출력됩니다. 이 경우 하나의 테스트만 실행되었으며 테스트는 통과입니다.
테스트 추가를 다시 클릭하여 두 번째 테스트를 추가합니다. 테스트 이름을 'Untitled test 2'에서 'Handles undefined'로 변경합니다.
테스트를 클릭하여 펼친 후 샌드박스 처리된 자바스크립트 편집기를 표시합니다. 샌드박스 처리된 자바스크립트를 편집기에 입력합니다.
let variableResult = runCode({}); assertThat(variableResult).isEqualTo(undefined);
▶ 테스트 실행을 클릭하여 모든 테스트를 한 번에 실행합니다. 그러면 테스트 결과가 콘솔에 표시됩니다.
Handles undefined 테스트는 실패입니다. 축하합니다. 버그를 발견했습니다.
코드를 클릭하여 돌아가 템플릿의 샌드박스 처리된 자바스크립트 코드를 수정합니다. 샌드박스 처리된 자바스크립트를 다음과 같이 업데이트합니다.
const getType = require('getType'); let input = data.text1; if (getType(input) !== 'string') { return input; } return input.toUpperCase();
업데이트된 코드는 사용하기 전에
input
변수의 유효성을 검사하는 권장사항을 따릅니다.테스트를 클릭하여 테스트 사례 목록으로 돌아갑니다.
▶ 테스트 실행을 클릭하여 모든 테스트 사례를 다시 실행합니다. 이번에는 Handles undefined 테스트가 통과입니다.
저장을 클릭하고 템플릿 편집기를 닫습니다.