Laravel API Development & Vue JS SPA [COURSE]

Laravel API Development & Vue JS SPA – e08 – TDD Setup & Basic Test

[Music] [Applause] [Music] [Applause]

[Music] welcome to level API development with view Jas single page application from scratch the following episode is going to be an

excerpt from the full course now available on udemy if you are interested in developing robust laravel api's with a front-end built on view and tailed when CSS then this is the course for you

we go into great detail talking about things like authentication testing tailwind CSS view j/s levo PHP unit and so much more so I hope you'll join me for the full course go ahead and click

on the link in the description to get sent to the udemy page where you can purchase the full course I hope you enjoy this episode in order to get this TDD workflow working there's a couple of

setup steps that we have to take so let's take care of that right now if you scroll down through your project there's going to be a PHP unit dot XML file PHP unit is just simply the testing suite

that we're going to use to develop this API this file is in charge of setting up our test Suites with all of the required settings that we need now it ships with some settings already in there but

specifically we need to set up a testing database now for testing purposes I typically use SQLite because it is very quick and for most cases it is very comparable to MySQL which is typically

what you're going to deploy your real production application in so to set up an end memory testing database let's add a new line I simply duplicated the line and let's go ahead and add a new DB

connection all uppercase and the DB connection is going to be for SQLite and then we need a database so for DB underscore database we're simply going to do : memory :

and that's it that is good enough to set up an in-memory database that is going to run very very quick throughout all of our tests the other thing that we need to do is let's check out that test

directory now there is a features directory and a unit directory we're most gonna be working around the features directory because typically an API is

driven through an actual feature test and not through a unit test but laravel does ship with two example tests already in and this is what it looks like now to run this test back inside our project we

can run the following command inside the vendor directory we can look inside the bin directory and then there is a PHP unit bin right in there and if you run that command you should get something

like this so there are two tests as I mentioned because laravel ships with both of them and they're both currently green this green state is what we want green state means good it means our code

is doing everything that the test is asking it to do so that's good now you're going to run this command over and over and over and there's no reason for you to retype this over and over so

what I like to do is I like to make a quick alias so that I can simply run this command very very quickly and that is the following you could say alias and then I use pu4 PHP unit and that is

going to be equal to the following command so whenever we run just PU it's gonna run whatever is inside this string so I like to start all of my PHP unit commands with a clear command this just

simply clears out the console so that it's very easy to see where my tests start so let's do a clear and then using the ampersand ampersand let's run the same command vendor slash bin slash PHP

unit so this will make a temporary alias for PU now there is a way of making these actually persist and it does change from machine to machine depending on what operating system you are using

so if I then into my user directory and then inside of here so that's Z as H RC file ignore all of this down here has to do with my theme but right here I've got a couple of aliases set up and you see

here I have that PU which is simply just a clear command with my vendor bin PHP unit and I have another version for PF which clears the screen as well but it also adds a filter and doing so will

actually allow you to filter down to a particular test so very useful thing to have so for me because of the setup all I need to do is just type in PU enter and notice how it clears my screen

that's a nice thing because every time I run my test I get a clear screen and I know exactly what I'm working with so that is the way that I have this setup and I've found this to be very very

useful so why don't we get started with our very first test let's use PHP artisan to make a new test and the very first test that we're going to handle is our contacts test of course we have this

entire concept around contacts so it makes sense that a feature test is called contacts test so let's go ahead and run that command and then jump back to phpstorm

so now we have a new feature test here called contacts test we can actually get rid of this example test so let me delete it altogether and let's open up contacts test let's go ahead and delete

the test that it comes with and let's start our very first test now every test if you're not familiar it needs to start with this notation in order for PHP unit to know that this is a test so let's

start with a very basic contact test let's just say a contact can't be added so what do we need to do in here well first of all this is all going to be code that doesn't work and that's the

way that TDD driven development works you basically write the test to reflect what you want your program to do and then step by step you implement the code to make the test be green so what is the

very very basic thing that we can do well because this is an API of course we're going to hit some sort of end point and then I expect there to be a contact so let's implement that now so

we can say this let's go ahead and post now notice that I'm using post remember to store your use the post not get so we're gonna hit slash API slash contacts

and to it let's pass some data let's start very very basic and just pass in a name and we'll just say test name so when I run that I expect there to be one contact inside my database so let's say

this assert count of one whenever I fetch all of my contacts now none of this exists so all of this is going to blow up we know that it's part of doing TDD so now I can copy this and then

again I can go back here and I can run PF instead of P you remember that's the one that I have which basically all it does is clear and vendor bin phpunit – – filter and then my test name so it's

just a shortcut for that and when we run that of course a very first error that we arrive at is that there is no contact class there is no such thing of course contact is going to be a model so let's

say PHP artisan make model for contact and I do want a migration for that so we'll run the – M flag but to move on to the next error of course we need to import this new contact class so let's

go ahead and import that class and it's up here at the top use app contact okay let's run that test again so now we have a new error there is no such table as contacts of course yes we

have our database setup but we are not migrating our database so let's go back to phpstorm and to do that we use this refresh database trait so let's say use refresh

database and let's see if we can get another error and sure enough we're back to the point where it says that it failed a certain that there's an actual size of zero instead of the expected one

and this makes total sense however this test went through an entire endpoint that doesn't exist which is that slash API slash contact this endpoint right here and it didn't

complain about the fact that that doesn't even exist now this is common with feature tests and that is because laravel is handling all of the exceptions for us and bubbling them up

into an HTTP response to disable that feature we're gonna run this without exception handling and now we should change our error and sure enough now we get a

different error and if we scroll up we say the post method is not supported of course there is no such thing as that end point so let's make that pass back to phpstorm

we're gonna use the api routes file which is inside routes / api dot PHP now this route automatically gets the prefix of slash API and that's just the way that level is set up and ready to go for

us so inside this routes file we are not going to use this slash API it's already in there for us so let's add a new route for post and that's gonna be slash contacts this is going to hit the

contacts controller at store now of course the store method came from our restful verbs if we are posting meaning we are storing then the action that we're going to take is store so that is

what we're going to name that particular method inside the controller so with that let's go ahead and run our test again and now let's see what error we got so it says well the contacts

controller does not exist okay let's make one PHP artisan make controller contacts controller and let's run the test again and now the error that we get is that there is no store method inside

that contacts controller of course go back to phpstorm let's go to contacts controller and let's add a new method here for store and now we finally get back to the same

error and of course at this stage it is because we are not actually doing anything inside that store method so let's do a very naive implementation of this and simply call the contact that is

being imported up here at the top use app contact and then let's just create and then let's pass an array of name is equal to request name we are not doing any validation or anything at all we're

gonna work on this one step at a time let's go ahead and run our test and let's see what error we get now now it's saying well contact doesn't allow name to be fillable this is a property of

laravel and in the way that it protects us so let's go back into our contact model and let's just turn that off completely I am actually gonna be very good about this so we can set guarded

equal to none and that essentially disables mass assignment protection all together okay let's go back to our test run it again let's see what we get now now it says well the table contacts

doesn't have a column for name of course yes we created a migration but it's still empty so let's pull open they create contacts table migration and let's add a new column here for that

name so we'll just use a string for that and we'll simply call it name okay let's run our test again and we're back to green so with that we've completed the basic first test for our restful api

In order to get the TDD workflow working, we need to take some extra steps to finish the setup.

Buy the full course at https://www.udemy.com/laravel-api-development-vue-js-spa-from-scratch/

In this episode, we cover:

Setting up Testing Database

Bash aliases for PHPUnit

Creating our first feature test

First stab at adding contacts to the database test

About the course
Learn how to develop a robust API with Laravel and a Single-Page Application in Vue JS from Scratch

What you’ll learn
– RESTful API Development with Laravel
– Vue JS Single Page Application Methodology
– Front-End Design Using Tailwind CSS
– Implementing Search Functionality Using Laravel Scout
– Build a Complete SPA from Scratch