Elixir Phoenix: Creating An App With Tests (Part 3: Navbar, Errors, and Homepage)

Updated: January 16th, 2019

Add a navigation bar (588e3e7) (GitHub)

We will create our navigation bar and put it in its own template. This keeps it out of the main app template and makes refactoring easier in the future. We will first write a test that verifies that our navigation bar is loading. Similar to the page_controller test, we will visit the homepage, and expect to find our navbar. We will put this test in test/catcasts_web/templates/layout/navigation_test.exs.

test/catcasts_web/templates/layout/navigation_test.exs

Running mix test shows our test as failing. Time to create our navigation bar.

We will first remove the entire header section from lib/catcasts_web/templates/layout/app.html.eex.

lib/catcasts_web/templates/layout/app.html.eex

We also want to remove class="container" from the <main> tag.

lib/catcasts_web/templates/layout/app.html.eex

Now in our lib/catcasts_web/templates/layout folder, we will create a new file called _navigation.html.eex and put in the following code. We are currently using some placeholders for links which we will add later on.

lib/catcasts_web/templates/layout/_navigation.html.eex

You will notice a tiny bit of inline Javascript. This will ensure on smaller screens our navbar collapses and the button to expand it will work.

Now we can add the navigation template by putting<%= render “_navigation.html”, conn: @conn %> in our app.html.eex. We will put it right below the opening body tag.

lib/catcasts_web/templates/layout/app.html.eex

If we run mix test again, we will see our new test passing. We will add more tests for our navigation links when we update those later on.

Update alert messages (b7c6caa)

Before we move on, we need to update the CSS classes for our alerts in app.html.eex. These were set up for us when we created the app and have some default classes that do not work with Tailwind.

lib/catcasts_web/templates/layout/app.html.eex

You will now see two empty alert fields at the top of our app. We do not want these alerts to be showing when they are empty. We will add a line of CSS to app.css so our alerts stay hidden when empty.

assets/css/app.css

When a flash message is displayed, it will stay at the top of the page until the user reloads or goes to a different page. We will add a small amount of JavaScript to our assets/js/app.js that will hide the alert after three seconds.

assets/js/app.js

Like always, when we finish making changes, we will run mix test and make sure our tests are still passing. We are currently not testing our flash messages being displayed as we do not have any code that triggers them. They will be part of our tests for adding users and videos.

If you want to see flash messages now, you can update your page_controller :index action to the below code. When your page refreshes, you should see a flash message pop up and then disappear after three seconds (be sure to change the code back!).

lib/catcasts_web/controllers/page_controller.ex

Update homepage (bdffcf0)

We already have a test to visit the homepage and check for the text “Welcome to Phoenix!” in test/catcasts_web/controllers/page_controller_test.exs. Since we will be using the page_controller for our homepage, let’s edit the test to look for “Welcome to Catcasts!” instead.

test/catcasts_web/controllers/page_controller_test.exs

If we run mix test we will have one failing test. Let’s open up lib/catcasts_web/templates/page/index.html.eex, we are going to get rid of all of the default code and add our own.

lib/catcasts_web/templates/page/index.html.eex

If we run mix test again, we are back to green! Our background is currently grey because we do not have our cat image yet. You can grab one from https://pixabay.com, rename it to cat.jpg, and place it in your assets/static/images folder (you can also delete the phoenix.png file while you are in there). After a page refresh you will have see your image on the homepage.

Part 1: The Setup
Part 2: Using Tailwind CSS
Part 3: Navbar, Errors, and Homepage

Next Up:
Part 4: Using Google Ueberauth
Part 5: Setting a Current User
Part 6: Using the YouTube API
Part 7: Setting Up Authorizations
Part 8: Making Things Look Nicer
Part 9: Search, Sort, Pagination
Part 10 Bonus: Using Elixir’s 1.6 Code Formatter

Follow me on Twitter @thebrianemory. Follow me here, click the hands below to show some appreciation, leave a comment, and get in touch!