assertSeeHtml

Метод assertSeeHtml класса Testable проверяет, содержится ли заданный HTML-код в отрендеренном содержимом компонента Livewire. В отличие от метода assertSee, который ищет простой текст, этот метод позволяет проверять наличие сложных HTML-фрагментов с атрибутами и вложенными элементами. Метод принимает один параметр - строку с HTML-кодом или массив строк для проверки.

Синтаксис

<?php
	$component->assertSeeHtml($html);
?>

Пример

Давайте проверим наличие кнопки с определенными классами и текстом в компоненте с счетчиком:

<?php
	namespace AppLivewire;

	use LivewireComponent;

	class Counter extends Component
	{
		public $num = 0;

		public function increment()
		{
			$this->num++;
		}

		public function render()
		{
			return view('livewire.counter');
		}
	}
?>

<div class="counter-wrapper">
	<button class="btn btn-primary" wire:click="increment">
		Click me
	</button>
	<span class="badge">{{ $num }}</span>
</div>

<?php
	namespace TestsFeatureLivewire;

	use AppLivewireCounter;
	use LivewireLivewire;
	use TestsTestCase;

	class CounterTest extends TestCase
	{
		public function test_component_contains_button_html()
		{
			$component = Livewire::test(Counter::class);

			$component->assertSeeHtml(
				'<button class="btn btn-primary" wire:click="increment">'
			);
		}
	}
?>

Результат выполнения кода:

OK (1 test, 1 assertion)

Пример

Проверим наличие целого блока HTML с несколькими элементами:

<?php
	namespace AppLivewire;

	use LivewireComponent;

	class UserProfile extends Component
	{
		public $name = 'John';
		public $email = 'john@example.com';
		public $role = 'admin';

		public function render()
		{
			return view('livewire.user-profile');
		}
	}
?>

<div class="profile-card">
	<h3>{{ $name }}</h3>
	<p class="email">{{ $email }}</p>
	<span class="role">{{ $role }}</span>
</div>

<?php
	namespace TestsFeatureLivewire;

	use AppLivewireUserProfile;
	use LivewireLivewire;
	use TestsTestCase;

	class UserProfileTest extends TestCase
	{
		public function test_component_contains_profile_html()
		{
			$component = Livewire::test(UserProfile::class);

			$html = '<div class="profile-card">'
				  . '<h3>John</h3>'
				  . '<p class="email">john@example.com</p>'
				  . '<span class="role">admin</span>'
				  . '</div>';

			$component->assertSeeHtml($html);
		}
	}
?>

Результат выполнения кода:

OK (1 test, 1 assertion)

Пример

Метод может принимать массив строк HTML для проверки нескольких элементов:

<?php
	namespace TestsFeatureLivewire;

	use AppLivewireUserProfile;
	use LivewireLivewire;
	use TestsTestCase;

	class UserProfileTest extends TestCase
	{
		public function test_component_contains_multiple_html_elements()
		{
			$component = Livewire::test(UserProfile::class);

			$component->assertSeeHtml([
				'<h3>John</h3>',
				'<p class="email">john@example.com</p>',
				'<span class="role">admin</span>',
			]);
		}
	}
?>

Результат выполнения кода:

OK (1 test, 3 assertions)

Пример

Рассмотрим проверку HTML с динамическими данными, которые меняются после вызова метода компонента:

<?php
	namespace AppLivewire;

	use LivewireComponent;

	class Counter extends Component
	{
		public $num = 0;

		public function increment()
		{
			$this->num++;
		}

		public function render()
		{
			return view('livewire.counter');
		}
	}
?>

<div>
	<button wire:click="increment">+</button>
	<span class="counter-value">{{ $num }}</span>
</div>

<?php
	namespace TestsFeatureLivewire;

	use AppLivewireCounter;
	use LivewireLivewire;
	use TestsTestCase;

	class CounterTest extends TestCase
	{
		public function test_counter_html_updates_after_increment()
		{
			$component = Livewire::test(Counter::class);

			$component->assertSeeHtml('<span class="counter-value">0</span>');

			$component->call('increment');

			$component->assertSeeHtml('<span class="counter-value">1</span>');
			$component->assertDontSeeHtml('<span class="counter-value">0</span>');
		}
	}
?>

Результат выполнения кода:

OK (1 test, 3 assertions)

Смотрите также

метод assertSee,
который проверяет наличие текста в рендере компонента
метод assertDontSee,
который проверяет отсутствие текста в рендере компонента
метод assertSet,
который проверяет значение свойства компонента
метод call,
который вызывает метод компонента из теста