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) 4. [ Testing a step of a class-based wizard ](#content-testing-a-step-of-a-class-based-wizard) 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 `checkout-wizard`. It has the following steps: - `checkout.cart-step`: Displays the products in the user's cart. - `checkout.delivery-address-step`: Allows the user to enter their delivery address. - `checkout.confirm-order-step`: 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 `testStep` method on the wizard's test instance: ``` session()->put('cart', [ ['name' => 'Candle', 'price' => 400], ['name' => 'Chocolate', 'price' => 150], ]); Livewire::test('checkout-wizard') ->testStep('checkout.cart-step') ->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. ``` Livewire::test('checkout-wizard') ->testStep('checkout.confirm-order-step', [ 'checkout.delivery-address-step' => [ '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 confirm order step as an array, keyed by step name. 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. `testStep()` preserves the wizard's existing state. State passed to it replaces the state of the specified steps. It also selects the tested step on the wizard, so events forwarded with `emitEvents()->in($wizard)` navigate from that step. Testing a wizard step with mount parameters ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- If your wizard component accepts parameters in its `mount` method, pass them to `Livewire::test` as usual: ``` Livewire::test('checkout-wizard', [ 'user' => $user, 'mode' => 'edit', ]) ->testStep('checkout.cart-step') ->assertSuccessful() ->assertSee('Items in your cart'); ``` These parameters will be forwarded to the `mount` method of the wizard component: ``` {{-- resources/views/components/⚡checkout-wizard.blade.php --}} @include('livewire-wizard::wizard') ``` Testing a step of a class-based wizard -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- A class-based wizard can also be tested through the static `testStep` method on its class, passing the step's class. State is keyed by step name as before, and mount parameters go in the `params` argument. ``` CheckoutWizardComponent::testStep(CartStepComponent::class) ->assertSuccessful() ->assertSee('Items in your cart'); CheckoutWizardComponent::testStep(ConfirmOrderStepComponent::class, [ 'delivery-address-step' => [ '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)