Hello dev.to :) My first post here :)
I've been playing lately with AdonisJs a NodeJS MVC framework who look a lot like Laravel a really popular PHP framework. I really started to love the Adonis approach, more convention than configuration. I also love the fact they say in the headline.
Writing micro-services or you are a fan of TDD, it all boils down to confidence. AdonisJs simplicity will make you feel confident about your code.
In the past few month, I wrote all my backend project with the TDD pattern, and I really feel this help me getting more productive, and more confident with my code. I know TDD is not perfect, can slow you down, when you start, but I really think this can improved your code in the long term.
About this tutorial
So in this tutorial we gonna build kind of a bucket list for movies to watch. A user can create a challenge, and put movies to this one. I know, this is not the most awesome project ever, but this will help you see how Lucid, the Adonis ORM work with relationship. We gonna also see how easy this framework will make our live.
At the end of this tutorial, we gonna create a service where a user can finally enter just the name of the movie and the year. Us we will use TheMovieDB Api and find info about this movie.
Getting Started
First we need to install the Adonis cli
npm i -g @adonisjs/cli
To make sure everything work run the command in your terminal
adonis --help
If you see a list of command that mean this is working :)
For creating the project we will run this command in the terminal
adonis new movies_challenges --api-only
Here this will create a new project call movies_challenges and this will be an api only boilerplate, so no ui with this.
Follow the instructions
cd movies_challenges
For running the project the command will be
adonis serve --dev
But for us we don't really need cause all the interaction will be done from the testing.
Open the project in your text-editor of choice. For myself I use VSCode it's free and awesome.
Setup the db
Adonis have setup lot of stuff for us. But they let us choosing some stuff like which db to use etc. If you open the file config/database.js you will see sqlite, mysql and postgresql config. For this project I will be using Posgresql
To make it work we need to follow the instruction they provide at the bottom of this file.
npm i --save pg
After this go inside your .env file and setup the connection for your db. For me this will look like
DB_CONNECTION=pg
DB_HOST=127.0.0.1
DB_PORT=5432
DB_USER=postgres
DB_PASSWORD=postgres
DB_DATABASE=movies_challenges_dev
After I make sure I create the db from my terminal
createdb movies_challenges_dev
Setup the testing environnment
Adonis don't came with a testing framework out-of-the-box, but it's really easy to make it work.
Run the command
adonis install @adonisjs/vow
What is that ? Adonis have a way to install dependency by using npm internally. But the beauty of this it's they can add other stuff also. Like if you look what happen after this is done, they will open a a url in your browser with other instructions.
They have create 3 new files.
.env.testing
vowfile.js
example.spec.js
First we will setup the .env.testing file to make sure we it a test db and not the dev one.
Append that to the end of the file
DB_CONNECTION=pg
DB_HOST=127.0.0.1
DB_PORT=5432
DB_USER=postgres
DB_PASSWORD=postgres
DB_DATABASE=movies_challenges_test
After I make sure I create the db from my terminal
createdb movies_challenges_test
Writing your first test
So the way the app will work is a User can have many Challenges. Those challenge can have many movie to it. But movie can be to many challenge.
So in relationship this will look like
If you have check a bit the folder structure you will see Adonis give use User model and Auth of the box.
We will use this in the future.
So for making your first test file we will need to think about what we need to do.
The first thing I want to test is the fact a user can create a challenge. A challenge need to have a title, and a description is optionnal. I want to make sure only a authenticate user can create a challenge. When a challenge is create I need to put the current_user id to the data. So we will know who is the owner.
Adonis give us lot of tool to make our live easier. One of them is generator command thank to ace. We will use a command to make our first test. But to be able to do this we need to register the vow test framework to the provider of the project. Open start/app.js and add this to your aceProvider
const aceProviders = [
'@adonisjs/lucid/providers/MigrationsProvider',
'@adonisjs/vow/providers/VowProvider',
]
Now we can run the command
adonis make:test CreateChallenge
When you get ask unit or functionnal test use functionnal and click enter.
This will create a file
test/functional/create-challenge.spec.js
Nice first test file create :)
We will change the title of this test to be more useful.
test('can create a challenge if valid data', async ({ assert }) => {})
Now the way I wrote test is by creating the assertion first. After I then go backward and create the step I need to make it work.
test('can create a challenge if valid data', async ({ assert }) => {
const response = // do api call
response.assertStatus(201)
response.assertJSONSubset({
title: 'Top 5 2018 Movies to watch',
description: 'A list of 5 movies from 2018 to absolutely watched',
user_id: // to do
})
})
Here I test than I want to receive back from my api call a 201 created with a certain object who will have the title a provide, the description I provide, and my current user id.
Next we need to write the code for the response
const { test, trait } = use('Test/Suite')('Create Challenge')
trait('Test/ApiClient')
test('can create a challenge if valid data', async ({ assert, client }) => {
const data = {
title: 'Top 5 2018 Movies to watch',
description: 'A list of 5 movies from 2018 to absolutely watched'
}
const response = await client.post('/api/challenges').send(data).end()
response.assertStatus(201)
response.assertJSONSubset({
title: data.title,
description: data.description,
user_id: // to do
})
})
To make a api call we need to import first trait from the test suite. We need to told the test we want the api client. This will give us now access to client in the callback. I then put my data I want to an object and send it to a route with the verb POST.
Now I want to test with a current user jwt in the headers. How can we do this ? This is so easy with Adonis
'use strict'
const Factory = use('Factory')
const { test, trait } = use('Test/Suite')('Create Challenge')
trait('Test/ApiClient')
trait('Auth/Client')
test('can create a challenge if valid data', async ({ assert, client }) => {
const user = await Factory.model('App/Models/User').create()
const data = {
title: 'Top 5 2018 Movies to watch',
description: 'A list of 5 movies from 2018 to absolutely watched',
}
const response = await client
.post('/api/challenges')
.loginVia(user, 'jwt')
.send(data)
.end()
response.assertStatus(201)
response.assertJSONSubset({
title: data.title,
description: data.description,
user_id: user.id,
})
})
OMG !!! Too much. DONT WORRY. We just need to break it down a bit. So first what is Factory. Factory is a way to make dummy data easier. This come with a really nice api. Here the Factory will create a user to the db. But how can the factory know the data we want ? Easy just open the database/factory.js file and add this at the bottom
const Factory = use('Factory')
Factory.blueprint('App/Models/User', faker => {
return {
username: faker.username(),
email: faker.email(),
password: 'password123',
}
})
Here we create a Factory for the Models user we have in the db. This use faker also who is a library who make dummy data so much easier. Here I put a fake username and email. But why I don't do this to password ? It's because when I will need to test login I want to be able to log, and because the password will become hash I need to know what is the original version.
So this line
const user = await Factory.model('App/Models/User').create()
We create a user to the db, now we can use this same user here in the request
const response = await client
.post('/api/challenges')
.loginVia(user, 'jwt')
.send(data)
.end()
As you can see we can now use loginVia and pass the user at first argument, the second argument is the type of auth here I say jwt. I can use .loginVia cause of this trait at the top
trait('Auth/Client')
Now in my json response I can now check the user id is really the one of the current user
response.assertJSONSubset({
title: data.title,
description: data.description,
user_id: user.id,
})
One think we need to do before going further and run the test is we need to see the error from the response to do a real tdd.
So we will add this line before the assertion
console.log('error', response.error)
Now we can run the test with the command adonis test
You will see the error
error: relation "users" does not exist
What that mean ? It's because Vow by default don't run migration. But us a developer we don't want to run it manually on every test that will be painful. What can we do ? Adonis make again our live easy. Go in the file vowfile.js and uncomment the code already wrote for this
On line 14: const ace = require('@adonisjs/ace')
On line 37: await ace.call('migration:run', {}, { silent: true })
On line 60: await ace.call('migration:reset', {}, { silent: true })
Now if you rerun the test you will see
error { Error: cannot POST /api/challenges (404)
Nice one step further :) This error mean we don't have a route. We need to create it. Open start/routes.js and add this code
Route.post('/api/challenges', 'ChallengeController.store')
Here I say, when we get a post request to the route /api/challenges pass the data to the controller ChallengeController and the methods store. Remember Adonis is MVC so yes we need controller :)
Save the code and rerun the test
Now in the text of the error you will see
Error: Cannot find module \'/Users/equimper/coding/tutorial/movies_challenges/app/Controllers/Http/ChallengeController\'
This mean the controller don't exist :) So we need to create one. Again adonis have a generator for this
adonis make:controller ChallengeController
When ask choose http not websocket
Rerun the test
'RuntimeException: E_UNDEFINED_METHOD: Method store missing on App/Controllers/Http/ChallengeController\n> More details: https://err.sh/adonisjs/errors/E_UNDEFINED_METHOD'
Method store is missing. Fine this is normal the controller is empty. Add this to your file
// app/Controllers/Http/ChallengeController.js
class ChallengeController {
store() {}
}
Rerun the test
expected 204 to equal 201
204 => 201
So now this is where the fun start, we expected 201 but received 204. We can fix this error by adding
class ChallengeController {
store({ response }) {
return response.created({})
}
}
Adonis give us the response object who can be destructuring from the arguments of the method. Here I want to return 201 who mean created so I can use the created function. I pass an empty object so I can see my test failing further
expected {} to contain subset { Object (title, description, ...) }
{
+ title: "Top 5 2018 Movies to watch"
+ description: "A list of 5 movies from 2018 to absolutely watched"
+ user_id: 1
}
Here the error mean we send nothing but expected stuff. Now time to do the logic.
const Challenge = use('App/Models/Challenge')
class ChallengeController {
async store({ response, request }) {
const challenge = await Challenge.create(
request.only(['title', 'description'])
)
return response.created(challenge)
}
}
I add an import at the top, this is my challenge model I plan to created in future test. Now I can make use of async and also the request object to create a challenge. The only method info can be see here.
Now if I rerun the test I see
'Error: Cannot find module \'/Users/equimper/coding/tutorial/movies_challenges/app/Models/Challenge\''
Fine make sense the model don't exist
adonis make:model Challenge -m
The -m give you the migration file also
This command will created
✔ create app/Models/Challenge.js
✔ create database/migrations/1546449691298_challenge_schema.js
Now if we return the test
'error: insert into "challenges" ("created_at", "description", "title", "updated_at") values ($1, $2, $3, $4) returning "id" - column "description" of relation "challenges" does not exist'
Make sense the table don't have a column description. So we should add one
So open your migration file for the challenge_schema
class ChallengeSchema extends Schema {
up() {
this.create('challenges', table => {
table.text('description')
table.increments()
table.timestamps()
})
}
down() {
this.drop('challenges')
}
}
Here I add a colum text call description
Rerun the test
'error: insert into "challenges" ("created_at", "description", "title", "updated_at") values ($1, $2, $3, $4) returning "id" - column "title" of relation "challenges" does not exist'
Now is the same error but for title
class ChallengeSchema extends Schema {
up() {
this.create('challenges', table => {
table.string('title')
table.text('description')
table.increments()
table.timestamps()
})
}
down() {
this.drop('challenges')
}
}
Here title will be a string. Now rerun the test
expected { Object (title, description, ...) } to contain subset { Object (title, description, ...) }
{
- created_at: "2019-01-02 12:28:37"
- id: 1
- updated_at: "2019-01-02 12:28:37"
+ user_id: 1
}
The error mean the title and description are save, but the user_id don't exist, so we need to add the relation in the migration and the model
Again in the migration file add
class ChallengeSchema extends Schema {
up() {
this.create('challenges', table => {
table.string('title')
table.text('description')
table
.integer('user_id')
.unsigned()
.references('id')
.inTable('users')
table.increments()
table.timestamps()
})
}
down() {
this.drop('challenges')
}
}
Here the user_id is a integer, reference the id of a user in the users table
Now open the Challenge model in app/Models/Challenge.js and add this code
class Challenge extends Model {
user() {
return this.belongsTo('App/Models/User')
}
}
And we need to do the other way of relation so open app/Models/User.js and add at the bottom after tokens
challenges() {
return this.hasMany('App/Models/Challenge')
}
Wow I love this syntax and how easy we can see the relations. Thank to Adonis team and Lucid ORM :)
Run the test
expected { Object (title, description, ...) } to contain subset { Object (title, description, ...) }
{
- created_at: "2019-01-02 12:35:20"
- id: 1
- updated_at: "2019-01-02 12:35:20"
+ user_id: 1
}
Same error ? Yes when we create we didn't put the user_id. So we need to
class ChallengeController {
async store({ response, request, auth }) {
const user = await auth.getUser()
const challenge = await Challenge.create({
...request.only(['title', 'description']),
user_id: user.id,
})
return response.created(challenge)
}
}
Here I make use of auth, who is a object we method touching the authentication. Here I can use the current user with the function auth.getUser. This will return the user from the jwt. Now I can then merge this to the object when create.
Now if you run your test all should work. BUTTTTT this is not done. We need a test to make sure the user is really authenticate, cause now this endpoint is accessible by everyone.
Add to our test file
test('cannot create a challenge if not authenticated', async ({
assert,
client,
}) => {})
Again we gonna work with the same idea, building the assertion first and going backward
test('cannot create a challenge if not authenticated', async ({
assert,
client,
}) => {
response.assertStatus(401)
})
Here we want the status to be 401 unauthorized
test('cannot create a challenge if not authenticated', async ({
assert,
client,
}) => {
const data = {
title: 'Top 5 2018 Movies to watch',
description: 'A list of 5 movies from 2018 to absolutely watched',
}
const response = await client
.post('/api/challenges')
.send(data)
.end()
console.log('error', response.error)
response.assertStatus(401)
})
First make sure to delete the console.log from the other test. Now your test should look like that here.
Open your routes file
Route.post('/api/challenges', 'ChallengeController.store').middleware(['auth'])
If you run the test all will be green :)
But now I will like to test the fact then title is required and both description and title need to be a string how can I do this ?
Adonis give us access to another really nice tool can validator.
We need to install the validator library
adonis install @adonisjs/validator
Go to start/app.js and add the provider
const providers = [
'@adonisjs/framework/providers/AppProvider',
'@adonisjs/auth/providers/AuthProvider',
'@adonisjs/bodyparser/providers/BodyParserProvider',
'@adonisjs/cors/providers/CorsProvider',
'@adonisjs/lucid/providers/LucidProvider',
'@adonisjs/validator/providers/ValidatorProvider',
]
Now go back to our test file for challenge and add a new one
test('cannot create a challenge if no title', async ({ assert }) => {})
Before going further, I don't like the fact I need to manually wrote the title and description. I would like to be able to make the factory create it for us. This is possible, first go to database/factory.js
We need to create a Factory for the Challenge
Factory.blueprint('App/Models/Challenge', faker => {
return {
title: faker.sentence(),
description: faker.sentence()
}
});
Now we can use this with the help of make
const { title, description } = await Factory.model(
'App/Models/Challenge'
).make()
This will give us a fake title and description but without being save to the db.
Going back to the test will would like to receive error if the title is not in the body
test('cannot create a challenge if no title', async ({ assert, client }) => {
response.assertStatus(400)
response.assertJSONSubset([
{
message: 'title is required',
field: 'title',
validation: 'required',
},
])
})
Now we need to write the code to get to this. I will skip some process, but hey continue it, this is how we get better. I will just not wrote it cause that take lot and lot of line :)
test('cannot create a challenge if no title', async ({ assert, client }) => {
const user = await Factory.model('App/Models/User').create()
const { description } = await Factory.model('App/Models/Challenge').make()
const data = {
description,
}
const response = await client
.post('/api/challenges')
.loginVia(user, 'jwt')
.send(data)
.end()
response.assertStatus(400)
response.assertJSONSubset([
{
message: 'title is required',
field: 'title',
validation: 'required',
},
])
})
First we create a user to be able to log, cause we need to be authenticated remember :)
Second I get a fake description from my factory. I just send this one.
I assert I receive a 400 for bad request and a json array of error message.
If I run the test now I receive
expected 201 to equal 400
201 => 400
That mean the Challenge get create but shouldn't
So we need to add a validator for this
adonis make:validator CreateChallenge
Go inside your routes file and we want to use this
Route.post('/api/challenges', 'ChallengeController.store')
.validator('CreateChallenge')
.middleware(['auth'])
Now if you run the test you will see
expected 201 to equal 400
201 => 400
Make sense the validator break stuff. Time to wrote some code. Open app/Validators/CreateChallenge.js
class CreateChallenge {
get rules() {
return {
title: 'required|string',
description: 'string',
}
}
get messages() {
return {
required: '{{ field }} is required',
string: '{{ field }} is not a valid string',
}
}
get validateAll() {
return true
}
async fails(errorMessages) {
return this.ctx.response.status(400).json(errorMessages)
}
}
Here I add some rules, messages, and I also show the fails with a status 400 for bad request. I also put the validateAll to make sure I validate all stuff, not just one by one.
If you run the test now all should work :)
We can also add the notNullable field to the title column in the migrations
table.string('title').notNullable()
A last test can be create to test both description and title need to be a string.
test('cannot create a challenge if title and description are not a string', async ({
assert,
client,
}) => {
const user = await Factory.model('App/Models/User').create()
const data = {
title: 123,
description: 123,
}
const response = await client
.post('/api/challenges')
.loginVia(user, 'jwt')
.send(data)
.end()
response.assertStatus(400)
response.assertJSONSubset([
{
message: 'title is not a valid string',
field: 'title',
validation: 'string',
},
{
message: 'description is not a valid string',
field: 'description',
validation: 'string',
},
])
})
And if we run again the test BOOM all green.
End word
I hope you enjoy the part 1 of this tutorial. Don't forget to subscribe to get notifications when I will post the part 2.
If you find any typo, or your want to let me know something about this project, don't hesitate to let a comment below :)
The code can be find here on github
This is a cross-platform post from my blog. You can read the original here: https://equimper.com/blog/build-a-rest-api-with-adonisjs-and-tdd-part-1
Top comments (0)