php - Twig 模板单元测试

Question

我开始考虑在 Symfony 中为 twig 模板进行持续集成。

1. 模板是独立的逻辑。
2. 模板中有错误。但在开发过程中，我不想被视觉检查分心。

是否有任何现成的解决方案可以在 Symfony 中对 twig 文件进行单元测试？

Answer 1

测试树枝模板中的语法错误：

您可以使用命令行将所有 twig 模板测试到一个 Bundle 中，方法是：

php app/console twig:lint @name of Bundle

例子：

php app/console twig:lint @AcmeDemoBundle

结果将是：

如果没有任何语法错误：

OK in /var/www/SymBlog/src/Acme/DemoBundle/Resources/views/layout.html.twig
OK in /var/www/SymBlog/src/Acme/DemoBundle/Resources/views/Demo/hello.html.twig
OK in /var/www/SymBlog/src/Acme/DemoBundle/Resources/views/Demo/contact.html.twig
OK in /var/www/SymBlog/src/Acme/DemoBundle/Resources/views/Demo/index.html.twig
OK in /var/www/SymBlog/src/Acme/DemoBundle/Resources/views/Secured/layout.html.twig
OK in /var/www/SymBlog/src/Acme/DemoBundle/Resources/views/Secured/login.html.twig
OK in /var/www/SymBlog/src/Acme/DemoBundle/Resources/views/Secured/helloadmin.html.twig
OK in /var/www/SymBlog/src/Acme/DemoBundle/Resources/views/Secured/hello.html.twig
OK in /var/www/SymBlog/src/Acme/DemoBundle/Resources/views/Welcome/index.html.twig

如果存在语法错误，它将检测其中的语法错误行以及语法错误的原因：

OK in /var/www/SymBlog/src/Acme/DemoBundle/Resources/views/layout.html.twig
OK in /var/www/SymBlog/src/Acme/DemoBundle/Resources/views/Demo/hello.html.twig
KO in /var/www/SymBlog/src/Acme/DemoBundle/Resources/views/Demo/contact.html.twig (line 6)
   4      
   5      {% block content %}
>> 6          <form action="{{ ath('_demo_contact') }}" method="POST" id="contact_form">
>> The function "ath" does not exist. Did you mean "path", "logout_path" 
   7              {{ form_errors(form) }}
   8      
OK in /var/www/SymBlog/src/Acme/DemoBundle/Resources/views/Demo/index.html.twig
OK in /var/www/SymBlog/src/Acme/DemoBundle/Resources/views/Secured/layout.html.twig
OK in /var/www/SymBlog/src/Acme/DemoBundle/Resources/views/Secured/login.html.twig
OK in /var/www/SymBlog/src/Acme/DemoBundle/Resources/views/Secured/helloadmin.html.twig
OK in /var/www/SymBlog/src/Acme/DemoBundle/Resources/views/Secured/hello.html.twig
OK in /var/www/SymBlog/src/Acme/DemoBundle/Resources/views/Welcome/index.html.twig

Answer 2

除了通过 linting 验证 Twig 模板文件的结构和语法正确性之外，您还可以对 Twig 模板的逻辑进行单元测试。

例如，您可以验证if-elseif-else-endif构造的正确行为，并且可以单独进行，也就是说，无需通过控制器及其所有依赖项。

看看https://github.com/journeymonitor/control/blob/2645c69/src/AppBundle/Resources/views/testcases/_testresults-overview-testresult-label.html.twig。这是一个非常简单的模板，但它确实有一些行为 - 根据 的值testresult.exitCode，必须输出不同的标签名称。

在https://github.com/journeymonitor/control/blob/bc42e78/tests/AppBundle/Resources/views/testcases/_testresults-overview-testresult-label.html.twig.test.php可以看到单元测试用例对于这个模板。

测试用例设置了一个新的Twig_Environment，它使您能够加载 Twig 模板文件，并将其与作为参数传入的render不同对象一起加载。Testresult然后可以像在任何其他 PHPUnit 测试中一样断言渲染操作的结果：

$loader = new Twig_Loader_Filesystem(__DIR__ . '/../../../../../src/AppBundle/Resources/views/testcases/');
$twig = new Twig_Environment($loader, array(
    'cache' => '/var/tmp/journeymonitor-twig-tests-cache',
));
$template = $twig->loadTemplate('_testresults-overview-testresult-label.html.twig');

$testresult = new \AppBundle\Entity\Testresult();
$testresult->setExitCode(0);

$this->assertSame('success', $template->render(['testresult' => $testresult]));

注意第 8 行和第 9 行的 shell 命令 - Twig 环境缓存其模板文件，为了进行可靠的测试，您需要确保在每次测试运行之前擦除缓存位置：

`rm -rf /var/tmp/journeymonitor-twig-tests-cache`;
`mkdir -p /var/tmp/journeymonitor-twig-tests-cache`;

Answer 3

内部WebTestCase（TestCase自 Symfony 2.0 以来的 phpunit 扩展）/ KernelTestCase（TestCase自 Symfony 2.5 以来 phpunit 的扩展）

    $twig = self::$kernel->getContainer()->get('twig');
    $html = $twig->render('AppBundle::app/something.html.twig', ['content' => 'I am some variable value']);
    self::assertEquals($html, $response->getContent());

Answer 4

使用 symfony 来测试一个单独的 twig 文件，如下所示：

./app/console twig:lint /yourproject/yourtwigs/views/yourtwig.html.twig

正常的结果：

OK in /yourproject/yourtwigs/views/yourtwig.html.twig

结果如果不正常（我在不属于的地方添加了一个花括号）：

/yourproject/yourtwigs/views/yourtwig.html.twig (line 2)
   1      {% include 'YourBundle:Includes:jquery.html.twig' %} 
>> 2      {{% include 'YourBundle:Includes:datatables.html.twig' %}
>> Unexpected "}" 
   3      <script>
   4      $(document).ready(function()