Hi everyone,

Series navigation
PART 1 Introduction
PART 2 Foundation
PART 3 The Walls
PART 4 The Door
PART 5 Testing
PART 6 Can you fly?
PART 7 The User

Welcome to part 5 of the series but before we jump in let's recap what we did in the fourth part:

• we created a schema

• post types

• routes for our graphql api

• our first query

It time to test if our house design(code), can face nature's power.

Section 1

Testing with ExUnit

So let's create a new feature for our test and call it 01-Testing_Posts, to do (achieve) this we are going to use gh.

I covered gh in my previous article, but to summarize what gh is:

gh is the new git wrapper that is in beta, built by Github that requested help on testing their tool and providing feedback.

So let's help Github out today!

If you followed along Dear Reader, we started the series using git then hub, so I don't think that there is a better way to test gh.

Wait a moment Wolfiton what is hub?!

hub is the unofficial git wrapper for Github, more about it in my previous article

Also to set the mood for ~twisting, I meant testing watch and listen to this

Open the song in a new tab by right clicking and selecting open in new tab

The rhymes will be changed a little.

From

Come on everybody, clap your hands!
All you looking good!
I'm gonna sing my song, it won't take long!

We're gonna do the twist and it goes like this
Come on let's twist again, like we did last summer
Yeah, let's twist again, like we did last year
Do you remember when, things were really hummin'
Yeah, let's twist again; twistin' time is here
Heeee, around and around and up and down we go again!
Oh, baby, make me know you love me so, and then
Twist again, like we did last summer
Come on, let's twist again, like we did last year
TWIST! YO!
Who's that flyin' up there?
Is it a bird? Noooooo
Is it a plane? Noooooooo
Is it the twister? YEAAAH!
Yeah, twist again, like we did last summer
Come on, let's twist again, like we did last year
Do you remember when, things were really hummin'
Come on, let's twist again, twistin' time is here
Heeee, around and around, and up and down we go again
Oh, baby, make me know, you love me so, and then
Come on, twist again, like we did last summer
Girl, let's twist again, like we did last year
Come on, twist again
Twistin' time is here

Too:

Come on everybody, clap your hands!
All you looking good!
I'm gonna sing my song, it won't take long!

We're gonna do the test and it goes like this
Come on let's test again, like we did last summer
Yeah, let's test again, like we did last year
Do you remember when, things were really hummin'
Yeah, let's test again; testing' time is here
Heeee, around and around and up and down we go again!
Oh, baby, make me know you love me so, and then
Test again, like we did last summer
Come on, let's test again, like we did last year
TEST! YO!
Who's that flyin' up there?
Is it a bird? Noooooo
Is it a plane? Noooooooo
Is it the test? YEAAAH!
Yeah, test again, like we did last summer
Come on, let's test again, like we did last year
Do you remember when, things were really hummin'
Come on, let's test again, testing' time is here
Heeee, around and around, and up and down we go again
Oh, baby, make me know, you love me so, and then
Come on, test again, like we did last summer
Girl, let's test again, like we did last year
Come on, test again
Testing' time is here

Now back to our application, I will use VSCodium(VSCode without telemetry) to import it once again and keep working on it.

Feel free Dear Reader to use anything you like,

So I will type;

cd ~/Codes/wolf_blog

codium .

First type:

gh checkout -b 01-Testing_Posts

It will not work, so our first issue we can send to Github about gh is that the checkout command doesn't accept the -b flag.

Let's move to hub

hub checkout -b 01-Testing_Posts

In our root(in our top-level) of our project there is already a folder called test, here is the location where all our tests will go.

In ~/Codes/wolf_blog/test/wolf_blog_web we are going to create:

• schema folder

• a subfolder in schema called posts

• another subfolder called queries

So we should end up with something like this:

~/Codes/wolf_blog/test/wolf_blog_web/schema/posts/queries

Good now let's create a file in the queries folder called posts_query_test.exs

Type in posts_test.exs:

defmodule WolfBlogWeb.Schema.Posts.Queries.PostsQueryTest do
  use WolfBlogWeb.ConnCase, async: true #bring the conn for testing


  setup do
    WolfBlog.Seeder.power_up() # bring data for testing
  end


  @query """ # creating our query from our previous article
    {
      posts {
        title
      }
    }
  """

  describe "Testing the Posts Query" do # creating a block where we 
                                        # explain what this test is doing
    test "Should get all posts(1 of 1)" do # what are we testing?

      conn = build_conn() # acess the conn

      res = get conn, "/graphql", query: @query # bring the data from our                                                                                                 
                                                # query using conn


      assert json_response(res, 200)["data"]["posts"] == [%{"title" => "Absinthe is great"}]
      IO.inspect(json_response(res, 200), label: "myres") 
    end
  end
end

What does it do?

So first let's introduce conn which is part of the phoenix ecosystem.

Conn is the place where everything in Phoenix can be found from:

• requests

• headers

• responses

• cookies and so on ...

So to be able to use it in tests we frist bringin in using the use WolfBlogWeb.ConnCase, async: true keyword with the async option.

Next we use the

 setup "Seed data" do
     WolfBlog.Seeder.power_up() # bring data for testing
 end

To insert data for testing in the test database.

Phoenix has separate tables for testing for development and production

Next, we create a constant called query and write our graphql query

We use the describe to explain what our test is about.

Then we use the test function to create our actual test.

assert is used to verify if 2 values match.

Learn more about pattern matching in Elixir here.

The IO.inspect(json_response(res, 200), label: "myres") is used to show you Dear Reader how the testing data looks like.

To run our test we need to in the root of our project and type in:

mix test test/wolf_blog_web/schema/posts/queries/posts_query_test.exs 

The output will look something like this:

mix test test/wolf_blog_web/schema/posts/queries/posts_query_test.exs                                                        ✔  at 11:44:42 
Compiling 19 files (.ex)
Generated wolf_blog app
myres: %{"data" => %{"posts" => [%{"title" => "Absinthe is great"}]}}
.

Finished in 0.3 seconds
1 test, 0 failures

Randomized with seed 625657

Let's add all our code to our feature 01-Testing_Posts

Type:

hub add .
hub commit -m "Testing Posts Query"
hub push --set-upstream origin 01-Testing_Posts   

Congratulations Dear Reader our first test is a success!

This is the end of this part of the series.

Special Thanks to @elchemista for the help on the pattern matching.

I hope you enjoyed the article, and if you also found it useful, share it on social.

Credits:

https://cli.github.com/manual/gh_pr_checkout

https://www.musixmatch.com/lyrics/Chubby-Checker/Let-s-Twist-Again-1

@elchemista for helping me with the pattern matching of the test

https://elixir-lang.org/getting-started/pattern-matching.html