Testing wizards | laravel-livewire-wizard | Spatie SPATIE Laravel Livewire Wizard ========================== spatie.be/open-source [Docs](https://spatie.be/docs) [Laravel-livewire-wizard](https://spatie.be/docs/laravel-livewire-wizard/v2) Usage Testing wizards Version v2 v1 Other versions for crawler [v2](https://spatie.be/docs/laravel-livewire-wizard/v2) [v1](https://spatie.be/docs/laravel-livewire-wizard/v1) Testing wizards - [ Introduction ](https://spatie.be/docs/laravel-livewire-wizard/v2/introduction) - [ Support us ](https://spatie.be/docs/laravel-livewire-wizard/v2/support-us) - [ Requirements ](https://spatie.be/docs/laravel-livewire-wizard/v2/requirements) - [ Installation & setup ](https://spatie.be/docs/laravel-livewire-wizard/v2/installation-setup) - [ Questions and issues ](https://spatie.be/docs/laravel-livewire-wizard/v2/questions-issues) - [ Changelog ](https://spatie.be/docs/laravel-livewire-wizard/v2/changelog) - [ About us ](https://spatie.be/docs/laravel-livewire-wizard/v2/about-us) Usage ----- - [ Creating your first wizard ](https://spatie.be/docs/laravel-livewire-wizard/v2/usage/creating-your-first-wizard) - [ Navigating steps ](https://spatie.be/docs/laravel-livewire-wizard/v2/usage/navigating-steps) - [ Rendering navigation ](https://spatie.be/docs/laravel-livewire-wizard/v2/usage/rendering-navigation) - [ Accessing state ](https://spatie.be/docs/laravel-livewire-wizard/v2/usage/accessing-state) - [ Setting initial state ](https://spatie.be/docs/laravel-livewire-wizard/v2/usage/setting-initial-state) - [ Testing wizards ](https://spatie.be/docs/laravel-livewire-wizard/v2/usage/testing-wizards) Testing wizards =============== ### On this page 1. [ Testing a wizard step without state ](#content-testing-a-wizard-step-without-state) 2. [ Testing a wizard step with state ](#content-testing-a-wizard-step-with-state) 3. [ Testing a wizard step with mount parameters ](#content-testing-a-wizard-step-with-mount-parameters) On this page we'll show you a few tips on how to test wizard steps created with this package. For explanation purposes, consider an example wizard called `CheckoutWizardComponent`. It has the following steps: - `CartStepComponent`: Displays the products in the user's cart. - `DeliveryAddressStepComponent`: Allows the user to enter their delivery address. - `ConfirmOrderStepComponent`: Displays the order details and allows the user to confirm the order. Testing a wizard step without state ----------------------------------------------------------------------------------------------------------------------------------------------------------------- The first step of our checkout wizard is a simple step that doesn't require any state. It only displays the products in the user's cart. To test this step, we can use the following test: ``` session()->put('cart', [ ['name' => 'Candle', 'price' => 400], ['name' => 'Chocolate', 'price' => 150], ]); CheckoutWizardComponent::testStep(CartStepComponent::class) ->assertSuccessful() ->assertSee('Items in your cart') ->assertSee('Candle') ->assertSee('Chocolate'); ``` The above test will assert that the step is shown successfully, and that it displays the products in the cart. Testing a wizard step with state -------------------------------------------------------------------------------------------------------------------------------------------------------- You may need to test a wizard step that requires some state from a previous step. As an example, consider the last step of our checkout wizard. ``` CheckoutWizardComponent::testStep(ConfirmOrderStepComponent::class, [ 'wizard.delivery-address-step-component' => [ 'street' => '1818 Sherman Street', 'city' => 'Hope', 'state' => 'Kansas', 'zip' => '67451', 'deliveryDate' => '2022-01-12', // Wednesday ], ]) ->assertSuccessful() ->assertSee('Please confirm your order') ->assertSee('Delivery Address: 1818 Sherman Street, Hope, Kansas, 67451') ->assertSee('Delivery on Wednesday, 12th January 2022') ->call('confirmOrder'); // Assert that the order is created and other expectations... expect(Order::count())->toBe(1); ``` In the above test, we pass the state required by the `ConfirmOrderStepComponent` as an array. In this case, it is the delivery address that the user entered in the previous step. We are then able to assert whether the text is displayed properly and call the `confirmOrder` method on the Step to submit the order. Testing a wizard step with mount parameters ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- If your wizard component accepts parameters in its `mount` method, you can pass them using the `params` argument: ``` CheckoutWizardComponent::testStep(CartStepComponent::class, params: [ 'user' => $user, 'mode' => 'edit', ]) ->assertSuccessful() ->assertSee('Items in your cart'); ``` These parameters will be forwarded to the `mount` method of the wizard component: ``` class CheckoutWizardComponent extends WizardComponent { public function mount(User $user, string $mode): void { $this->user = $user; $this->mode = $mode; } // ... } ``` You can also combine state and mount parameters: ``` CheckoutWizardComponent::testStep(ConfirmOrderStepComponent::class, [ 'wizard.delivery-address-step-component' => [ 'street' => '1818 Sherman Street', ], ], params: [ 'user' => $user, ]) ->assertSuccessful(); ``` A good match? ------------- ### What we do best - All things Laravel - Custom frontend components - Building APIs - AI-powered features - Simplifying things - Clean solutions - Integrating services ### Not our cup of tea - WordPress themes - Cutting corners - Free mockups to win a job - "Just execute the briefing" In short: we'd like to be a **substantial part** of your project. [ Get in touch via email ](mailto:info@spatie.be?subject=A%20good%20match%21&body=Tell%20us%20as%20much%20as%20you%20can%20about%0A-%20your%20online%20project%0A-%20your%20planning%0A-%20your%20budget%0A-%20%E2%80%A6%0A%0AAnything%20that%20helps%20us%20to%20start%20straightforward%21)