Part IV – Template Inheritance, Website files and Testing with coverage

We will start this section of the Taskbuster tutorial by finishing template inheritance between the base and the home page.

Next, we’ll talk about how to configure files that are used in normal websites.

The file robots.txt is very important at the beginning of a project, because you don’t want that Google indexes any of your pages. Imagine what would happen if a user gets into your website while looking for something in Google and finds your site in development, with bad CSS styles and nonsense text!

Moreover, you will learn how to implement Coverage in your tests. As you might know, this tool gives you a measure of how much your code is covered by tests.

This is the outline of this part:

Before starting with this post, have you checked that all the tests we wrote pass? 😉

Template Inheritance

In the last part of this tutorial, we set index.html to inherit from base.html. However, the only content that was different between these two files was the title.

Let’s prepare our base.html template to be more flexible. You can find the final version of these files here: base.html and index.html.

We will add two blocks at the end of the head tag in the base.html file:

to be able to include more css or javascript files on our templates. Next, we’ll add a navbar block that wraps the navbar element:

This way, we can substitute the contents of the navbar in our templates, but if we don’t specify any, this navbar will appear by default.

The main contents have to be in a separate content block, named block content. However, as we don’t need any value by default, we’ll cut all the content inside the jumbotron and container divs and paste it into the index.html file. The index.html file becomes:

And in the base.html you just need to add this replacing missing content:

In some versions of the HTML boilerplate, the <footer> element is inside the <container>. You might want to preserve this element into the base.html file.

Finally, sometimes we need to add scripts at the end of the html document, so before the </body> tag, add the line:

Save both files and run the tests. The home page should look exactly the same, so all tests should pass!

Robots.txt and humans.txt files

Usually search engines look for these files at:

  • /robots.txt
  • /humans.txt

So let’s make them available at those urls. Before, as you may have guessed, we will create a functional test for them 😉

Inside the same functional_tests/test_all_users.py define the next method on the HomeNewVisitorTest class:

which checks that when going to the corresponding url we don’t see the Not Found 404 page (If your browser displays a different message when a page is not found, you should change the test text accordingly).

Run the test and see it fail. Next, update your urls.py file with:

and

which is a regular expression that takes the desired urls and passes as an argument the filename, i.e. robots.txt or humans.txt.

Next, edit the views.py and add the corresponding home_files view:

Run the tests again, they should pass now! 😉

But, what should these files contain?

While I am developing a website, I don’t want that Google indexes any of my pages. Therefore, I write the following on my robots.txt file:

On the other hand, on humans.txt you should write information about your Team. For example,

When your page is live, you have to remember to edit again the robots.txt and let Google index your pages. Otherwise, people won’t be able to find your website when looking for something on the search engines!

The favicon.ico image

If you don’t know what’s the favicon image, look for the spherical cow icon of this website at the top of your browser 🙂

You’ve probably seen that even we have a favicon.ico file inside taskbuster/static folder, it’s not visible on our home page. This is because we forgot to include it on the template!

So, go to the base.html template and add the following line after the title tag:

Reload your page and you’ll see your icon on the page tag of your browser.

Testing with Coverage

Coverage is a useful tool for testing. It tells you which parts of your code are covered by some test. It’s important that before going into production, your code has a big percentage of coverage.

We will only install it in the testing environment, so activate tb_test and run:

check the version installed with pip freeze and add it into the requirements/testing.txt file.

Next, run your tests with coverage using:

which will run both unittests and functional tests. You can see the coverage report with:

If you want a nicer representation in html, use:

And then, you can see the results in htmlcov/index.html, where you’ll see which lines have been covered by a test, in each file! Nice!

However, these commands have created files that we don’t want to keep in version control. So type:

That’s all for this part of the tutorial!

 

On the next part, we’ll talk about Internationalization. We’ll configure two different languages and make our website to work with both.

Go to the next part – Internationalization and Localization. Multiple languages and Time zones.

Do you like the Taskbuster tutorial? Share it with your friends! 🙂

Google+TwitterLinkedInFacebookReddit

Please, add +Marina Mele in your comments. This way I will get a notification email and I will answer you as soon as possible! :-)