Тестване на HTML в WordPress с assertEqualHTML(): Урок стъпка по стъпка за WordPress разработчици

Какво ще изградим

Ако някога сте опитвали да сравнявате HTML фрагменти в модулните си тестове и сте били разочаровани от противоречиви резултати, този урок е за вас. Ще използваме функцията assertEqualHTML() за опростяване на тестването на HTML тагове в WordPress. Това е насочено към WordPress разработчици, които искат да гарантират валидността и последователността на своя HTML изход, особено тези, които работят върху сложни плъгини или теми.

Ще научите как да използвате този метод за писане на надеждни модулни тестове и да избягвате грешки при рендиране на HTML. Това ще бъде особено полезно за тези, които работят върху сайтове, изискващи стриктна проверка за съвместимост, като например сайтове с Divi 5 интеграции.

Стъпка 1: Инициализирайте тестовата среда

Първата стъпка е да конфигурирате тестовата среда. Уверете се, че сте инсталирали PHPUnit на вашата система. Ето един основен пример за конфигурация, за да започнете с PHPUnit в WordPress.


{
  "require-dev": {
    "phpunit/phpunit": "^9.5"
  }
}

Уверете се, че файлът ви phpunit.xml.dist е правилно конфигуриран. Ето един минимален пример:


<?xml version="1.0" encoding="UTF-8"?>
<phpunit bootstrap="tests/bootstrap.php" >
    <testsuites>
        <testsuite name="Plugin Test Suite">
            <directory suffix=".php">tests</directory>
        </testsuite>
    </testsuites>
</phpunit>

Проверете дали PHPUnit е правилно инсталиран, като изпълните phpunit --version във вашия терминал. Трябва да видите текущата версия на PHPUnit.

Стъпка 2: Напишете основен тест, използвайки assertEqualHTML()

След като средата е готова, нека преминем към писането на основен тест за сравняване на два HTML фрагмента. Създайте тестов файл във вашата директория tests, например test-html.php.


<?php
use PHPUnitFrameworkTestCase;

class HtmlTest extends TestCase {
    public function testHtmlEquality() {
        $expected = '<div><p>Hello, World!</p></div>';
        $actual = '<div> <p>Hello, World!</p> </div>';
        
        $this->assertEquals(
            trim(preg_replace('/s+/', '', $expected)), 
            trim(preg_replace('/s+/', '', $actual))
        );
    }
}

Очакваният резултат е тестът да премине успешно, потвърждавайки, че двата HTML фрагмента са еквивалентни въпреки разликите в разстоянието между тях.

Вариант: Тестване с HTML атрибути

Често срещан проблем, с който се сблъсквам, е свързан с HTML атрибутите в различен ред. Ето как можете да адаптирате теста:


<?php
public function testHtmlAttributes() {
    $expected = '<input type="text" name="username" />';
    $actual = '<input name="username" type="text" />';
    
    $this->assertEqualHTML($expected, $actual);
}

Чрез нормализиране на пространствата и реда на атрибутите, вие гарантирате, че тестът ще премине успешно, дори ако редът не е идентичен.

Стъпка 3: Използване на assertEqualHTML() на практика

За да направим тестовете по-надеждни, нека сега използваме метод, по-специфичен за WordPress, за да проверим равенството на HTML кода. Принципът е да се нормализира HTML кодът преди сравнение.


<?php
class HtmlTest extends TestCase {
    public function assertEqualHTML($expected, $actual) {
        $normalize = function($html) {
            return trim(preg_replace('/>s*</', '><', $html));
        };
        
        $this->assertEquals($normalize($expected), $normalize($actual));
    }

    public function testHtmlEqualityWithCustomAssert() {
        $expected = '<div><p>Hello, World!</p></div>';
        $actual = '<div> <p>Hello, World!</p> </div>';
        
        $this->assertEqualHTML($expected, $actual);
    }
}

Като бягам отново phpunitТрябва да видите, че тестът преминава успешно, което показва, че двата HTML фрагмента се третират като равни.

Edge Case: Самозатварящи се маяци

Самозатварящите се етикети могат да причинят проблеми, ако не са еднакви. Например:


<?php
public function testSelfClosingTags() {
    $expected = '<br/>';
    $actual = '<br>';
    
    $this->assertEqualHTML($expected, $actual);
}

Този тест ще покаже как се обработват самозатварящите се тагове, за да се осигури съвместимост с различни версии на HTML.

Пълният резултат

Ето пълния код за нашия тест, използващ метода assertEqualHTML() :


<?php
use PHPUnitFrameworkTestCase;

class HtmlTest extends TestCase {
    public function assertEqualHTML($expected, $actual) {
        $normalize = function($html) {
            return trim(preg_replace('/>s*</', '><', $html));
        };
        
        $this->assertEquals($normalize($expected), $normalize($actual));
    }

    public function testHtmlEquality() {
        $expected = '<div><p>Hello, World!</p></div>';
        $actual = '<div> <p>Hello, World!</p> </div>';
        
        $this->assertEqualHTML($expected, $actual);
    }
}

За да персонализирате, просто променете HTML фрагментите, които ще бъдат сравнявани. Можете да разширите този метод до по-сложни случаи на употреба, като например валидиране на рендирането на персонализирани блокове в Gutenberg.

Адаптер за Divi 5

Ако работите с Divi 5, където HTML често се генерира динамично, този подход е особено полезен. Можете да създавате тестове за вашите персонализирани модули, като гарантирате, че HTML изходът остава последователен дори след актуализации на Divi.

Divi 5 въвежда специфични куки, като например et_builder_module_renderс които можете да тествате assertEqualHTML() за да проверите HTML кода, изобразен от тези куки.

Ако това не проработи

Синтаксична грешка: Проверете дали вашият PHP е правилно форматиран. Синтактичните грешки са често срещани и лесно се допускат.
PHPUnit не е намерен: Уверете се, че PHPUnit е правилно инсталиран и достъпен от вашия терминал.
HTML не е равно на: Проверете отново HTML фрагментите си за фини разлики, като например интервали или нови редове.
Неправилна конфигурация на PHPUnit: Проверете файла си phpunit.xml.dist за да се уверите, че пътищата са правилни.

Често срещани капани

Често срещан недостатък е да се предположи, че интервалите са маловажни в HTML. Въпреки това, в определени контексти, като например тагове <pre>Интервалите са важни. Уверете се, че вземате предвид контекста на използването на HTML кода, когато го нормализирате.

За да се отиде по-далеч

Можете да разширите този метод, за да тествате по-сложни рендери, като цели страници или JavaScript компоненти с имаИнтегрирайте този подход с автоматизирани инструменти за изграждане за непрекъснато тестване.

ресурси

Често задавани въпроси

Защо да използвам assertEqualHTML() ? Това позволява надеждно сравняване на HTML фрагменти, без да се притеснявате за разлики в разстоянието или форматирането.

Какви са предварителните изисквания за следване на този урок? Трябва да имате основни познания за PHP и WordPress средата, както и за PHPUnit.

Съвместим ли е с всички теми на WordPress? Да, стига генерираният HTML код да може да бъде заснет и тестван. Това работи особено добре с модулни теми като Divi.