How to get started with testing in Laravel Livewire

a lot of people seem to struggle to get started with testing i hope to show how easy it is to get started when using live wire in this video we will take a look at how we can test the live wire component to do so we will create a podcast component in the required laravel files to support it to keep the focus on testing we will only be concerned with the livewire php class and ignore the view for now let's get started before we start writing our test we will need to set up our domain we will keep the domain as simple as possible the domain will be a podcast that can be published let's create the podcast model factory and migration okay let's add the required fields to the migration let's give it a name and let's give it a field to manage the state of the podcast a boolean published with that out of the way we can now generate our livewire component let's call it postcast form and let's create a test as well there's one more thing we want to do before we start testing and that's setting up our factory so let's go to the cost factory let's give published a default value of false now we have our domain setup we can start writing some code and some tests for the purposes of testing our livewire component we will give it a few different ways to publish a podcast the first way will be to use our model we will write our tests more or less tdd meaning we first write the failing test and then write the code to make it pass let's head over to the test podcast forum test there it is let's give the test a better description a user can publish a podcast and we don't need that let's try to set the podcast published podcasts dot published and let's assert that was in fact published okay let's run the test and see it fail the first error we encounter is that the podcast form component does not actually have any property podcast so let's give it one public let's type in it podcast we run the test the next error is the type property podcast form must not be accessed before initialization what this means is that we are trying to set property on podcasts but podcast is in fact null at this moment on the podcast forum to solve this error we need to mount the podcast so let's add it here let's use our factory podcast factory create that should solve this error we're going to test and now we get an error about the table missing so let's add refresh database rerun the test the next error we encounter is about missing validation rules this error may not make a lot of sense if you're getting started with live wire what you have to know is that for security reasons livewire does not allow you to wire model to a public property that is a model without having any rules so to make this test pass we need to do one more thing let's add rules methods and return some validation for the podcast podcasts published is required you're on the test and now it's passing let's try publishing our podcast in a different way by calling a method so again we'll first write a fake test a user can publish a podcast by clicking a button we'll just basically copy this and instead of setting publish to true we'll call a method call published let's run the test we should fail because we don't actually have any methods published in our component there we go unable to call components methods public method published not found to components so let's add it public function published this podcast published is true let's rerun the test and now it's passing the last scenario we will look at is publishing the podcast by listening to an event so imagine that there is another live fire component that the user interacts with and that component emits an event when a user tries to publish a podcast we'll start by writing a failing test again so let's create another test it can publish a podcast by listening to event let's change this to emit emit means that another component emitted this event and not that this component emitted this event so that's good to know let's change this to podcast published and let's run the test the test fails because we don't actually have any listener for this event so let's add listener there we go we run the test and now it's complaining that we are missing a method what you have to know is that when you define a listener the default default behavior of live fire is to trigger a method with the same name so let's add a podcast published method we run our test and now it failed because the podcast was not set to published because we didn't write any code for that let's add that code podcast published it's true let's rerun a test and our passes and in fact we could have just done this press publish published because we already had that method from a previous test it should still work and something else it's nice to know if you want the name of the listener to be different than the name of the method you can just use a different syntax for example we could pass the podcast published event straight to the publish method so that will make even more sense shoots the pass and fails because it's got published we're on the test and now it's passing so far the published state isn't actually saved to the database so let's rewrite our test and our code to make it persist podcast test let's start off by adding an assertion which is just a regular laravel assertion podcasts and then it would be nice to have the id and serve that is actually set to true in database introduce very well podcasts just save that in a temporary variable so we can use it in our insertion id let's rerun this test should fill there we go record was found in the database but published was false in the database so let's add some code to actually save it which is actually fun here because we were just modeling it so one way would be to write a hook updated podcast published and then save the podcast whenever the published property of the podcast gets changed and it passes that's all folks thank you for watching i hope you learned something enjoy testing live fire

Channel: TALL Programmer

Views: 330

Keywords: Laravel, Livewire, Laravel Livewire, Testing, TDD, Livewire Laravel

Id: 2ReWoRV4saY

Length: 12min 1sec (721 seconds)

Published: Sun Nov 21 2021