7.1 Showing Users

In this section, we’ll take the first steps toward the final profile by
making a page to display a user’s name and profile photo, as indicated
by the mockup in Figure 7.1.1 Our eventual goal for the user profile
pages is to show the user’s profile image, basic user data, and a list
of microposts, as mocked up in Figure 7.2.2 (Figure 7.2 has our first
example of lorem ipsum text, which has a fascinating story that you
should definitely read about some time.) We’ll complete this task, and
with it the sample application, in Chapter 11.
7.1.3 Testing the user show page (with factories)

Now that we have a minimal working profile, it’s time to start working
on the version mocked up in Figure 7.1. As with the creation of static
pages (Chapter 3) and the User model (Chapter 6), we’ll proceed using
test-driven development.

Recall from Section 5.4.2 that we have elected to use integration tests
for the pages associated with the Users resource. In the case of the
signup page, our test first visits the signup_path and then checks for
the right h1 and title tags, as seen in Listing 5.34 and reproduced in
Listing 7.6. (Note that we’ve omitted the full_title helper from Section
5.3.4 since the full title is already adequately tested there.)
7.1.4 A Gravatar Im age and a Sidebar

Having defined a basic user page in the previous section, we’ll now
flesh it out a little with a profile image for each user and the first
cut of the user sidebar. When making views, we’ll focus on the visual
appearance and not worry too much about the exact structure of the page,
which means that (at least for now) we won’t be writing tests. When we
come to more error-prone aspects of view, such as pagination (Section
9.3.3), we’ll resume test-driven development.

We’ll start by adding a “globally recognized avatar”, or Gravatar, to
the user profile.6 Originally created by Tom Preston-Werner (cofounder
of GitHub) and later acquired and scaled by Automattic (the makers of
WordPress), Gravatar is a free service that allows users to upload
images and associate them with email addresses they control. Gravatars
are a convenient way to include user profile images without going
through the trouble of managing image upload, cropping, and storage; all
we need to do is construct the proper Gravatar image URL using the
user’s email address and the corresponding Gravatar image will
automatically appear