Testing Our Frontend

Build a Twitter Analytics App

1 Introduction: Start Here

2 The First Step: Design Your Solution

3 In Which I Rant a Little

4  Design Solution

5 Writing Great Code

6 Writing the Backend Twitter Server

Writing the Code in Small Parts: Part 1, The Basic App

Part 2: Adding a Counter to Exit

Part 3: Adding Language and Retweet Count

Part 4: Organising Our Code

7 Adding the Data to a Database

8 Testing: What and How to Test

8.1 Testing Our Frontend

8.2 Testing Our Backend

9 Displaying our Data using the Flask Webserver

9.1 Introduction to Flask

9.2 Adding templates to our Flask app

9.3 Displaying our Tweets in the Flask Web Server

10 Future Work and Improvements

For the front end, which is our webserver running on Flask, we will write the tests first, in pure TDD fashion.

What does our user expect on the page?

• There will be some graphs with the languages and top languages statistics
• They will see the top tweets
• They will see the trends on Twitter

We need to write tests for these.

We will be using Selenium to test our browser. If you have never used it, Selenium is a cool tool to automate the browser. We’ll be using it with Unittest.

The code is here.

Let’s look at the very first test:

This is a very basic test, but very important.

It checks if our wbserver is running at all. You might have made a minor change that kills your webapp completely; so the first thing to do is test that the server is running. If our test can’t find a running server at http://127.0.0.1:5000/, which is where the development server runs, it will exit.

Next, we will test the features one by one.

The first is to test the languages on our page.

We get our webserver page, and search for the text Most used languages on Twitter: All Tweets in it. If we can’t find it, the test fails.

A very basic test, but it will show our app is up and running. The next test is to check we can view the top tweets:

Same as before, we search for the strong Most popular tweets. This time, we have an extra search: blockquote class=”twitter-tweet

This is how the embedded tweets start. So this time, we are looking for some embedded tweets in the page, in addition to our text.

Finally, we test the trends:

Run the tests. They should all fail. This is expected, as we don’t have any code for our webserver yet.

Code Review

The tests are very basic, and are not testing everything. For example, we are testing that the languages are there on the page, but not if the graphs are. Similarly, we are only searching for one embedded tweet.

While basic, these tests are good enough for us to get started with. Let’s write some backend tests now.