From 53215726e1e861bf47bd06200795dbf9b2556a3f Mon Sep 17 00:00:00 2001
From: 0ko <0ko@noreply.codeberg.org>
Date: Tue, 18 Jun 2024 20:53:27 +0500
Subject: [PATCH] Add headers to follower lists

---
 options/locale/locale_en-US.ini               |   4 +
 routers/web/user/profile.go                   |   2 +
 templates/repo/user_cards.tmpl                |   6 +-
 .../integration/user_profile_follows_test.go  | 132 ++++++++++++++++++
 web_src/css/repo.css                          |   2 +-
 5 files changed, 142 insertions(+), 4 deletions(-)
 create mode 100644 tests/integration/user_profile_follows_test.go

diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini
index fda155644..051a44d95 100644
--- a/options/locale/locale_en-US.ini
+++ b/options/locale/locale_en-US.ini
@@ -655,6 +655,10 @@ change_avatar = Change your avatar…
 joined_on = Joined on %s
 repositories = Repositories
 activity = Public activity
+followers.title.one = Follower
+followers.title.few = Followers
+following.title.one = Following
+following.title.few = Following
 followers_one = %d follower
 followers_few = %d followers
 following_one = %d following
diff --git a/routers/web/user/profile.go b/routers/web/user/profile.go
index 64ce93b6c..a83d7f733 100644
--- a/routers/web/user/profile.go
+++ b/routers/web/user/profile.go
@@ -183,9 +183,11 @@ func prepareUserProfileTabData(ctx *context.Context, showPrivate bool, profileDb
 	case "followers":
 		ctx.Data["Cards"] = followers
 		total = int(numFollowers)
+		ctx.Data["CardsTitle"] = ctx.TrN(total, "user.followers.title.one", "user.followers.title.few")
 	case "following":
 		ctx.Data["Cards"] = following
 		total = int(numFollowing)
+		ctx.Data["CardsTitle"] = ctx.TrN(total, "user.following.title.one", "user.following.title.few")
 	case "activity":
 		date := ctx.FormString("date")
 		pagingNum = setting.UI.FeedPagingNum
diff --git a/templates/repo/user_cards.tmpl b/templates/repo/user_cards.tmpl
index 5accc2c7a..9061b1771 100644
--- a/templates/repo/user_cards.tmpl
+++ b/templates/repo/user_cards.tmpl
@@ -1,8 +1,8 @@
 <div class="user-cards">
 	{{if .CardsTitle}}
-	<h2 class="ui dividing header">
-		{{.CardsTitle}}
-	</h2>
+		<h2 class="tw-mb-0">
+			{{.CardsTitle}}
+		</h2>
 	{{end}}
 	<ul class="list">
 		{{range .Cards}}
diff --git a/tests/integration/user_profile_follows_test.go b/tests/integration/user_profile_follows_test.go
new file mode 100644
index 000000000..bad0944d8
--- /dev/null
+++ b/tests/integration/user_profile_follows_test.go
@@ -0,0 +1,132 @@
+// Copyright 2024 The Forgejo Authors. All rights reserved.
+// SPDX-License-Identifier: MIT
+
+package integration
+
+import (
+	"fmt"
+	"net/http"
+	"net/url"
+	"strings"
+	"testing"
+
+	"github.com/stretchr/testify/assert"
+)
+
+// TestUserProfileFollows is a test for user following counters, pages and titles.
+// It tests that:
+// - Followers and Following tabs always have titles present and always use correct plurals
+// - Followers and Following lists have correct amounts of items
+// - %d followers and %following counters are always present and always have correct numbers and use correct plurals
+func TestUserProfileFollows(t *testing.T) {
+	onGiteaRun(t, func(t *testing.T, giteaURL *url.URL) {
+		// This test needs 3 users to check for all possible states
+		// The accounts of user3 and user4 are not functioning
+		user1 := loginUser(t, "user1")
+		user2 := loginUser(t, "user2")
+		user5 := loginUser(t, "user5")
+
+		followersLink := "#profile-avatar-card a[href='/user1?tab=followers']"
+		followingLink := "#profile-avatar-card a[href='/user1?tab=following']"
+		listHeader := ".user-cards h2"
+		listItems := ".user-cards .list"
+
+		// = No follows =
+
+		var followCount int
+
+		// Request the profile of user1, the Followers tab
+		response := user1.MakeRequest(t, NewRequest(t, "GET", "/user1?tab=followers"), http.StatusOK)
+		page := NewHTMLParser(t, response.Body)
+
+		// Verify that user1 has no followers
+		testSelectorEquals(t, page, followersLink, "0 followers")
+		testSelectorEquals(t, page, listHeader, "Followers")
+		testListCount(t, page, listItems, followCount)
+
+		// Request the profile of user1, the Following tab
+		response = user1.MakeRequest(t, NewRequest(t, "GET", "/user1?tab=following"), http.StatusOK)
+		page = NewHTMLParser(t, response.Body)
+
+		// Verify that user1 does not follow anyone
+		testSelectorEquals(t, page, followingLink, "0 following")
+		testSelectorEquals(t, page, listHeader, "Following")
+		testListCount(t, page, listItems, followCount)
+
+		// Make user1 and user2 follow each other
+		testUserFollowUser(t, user1, "user2")
+		testUserFollowUser(t, user2, "user1")
+
+		// = 1 follow each =
+
+		followCount++
+
+		// Request the profile of user1, the Followers tab
+		response = user1.MakeRequest(t, NewRequest(t, "GET", "/user1?tab=followers"), http.StatusOK)
+		page = NewHTMLParser(t, response.Body)
+
+		// Verify it is now followed by 1 user
+		testSelectorEquals(t, page, followersLink, "1 follower")
+		testSelectorEquals(t, page, listHeader, "Follower")
+		testListCount(t, page, listItems, followCount)
+
+		// Request the profile of user1, the Following tab
+		response = user1.MakeRequest(t, NewRequest(t, "GET", "/user1?tab=following"), http.StatusOK)
+		page = NewHTMLParser(t, response.Body)
+
+		// Verify it now follows follows 1 user
+		testSelectorEquals(t, page, followingLink, "1 following")
+		testSelectorEquals(t, page, listHeader, "Following")
+		testListCount(t, page, listItems, followCount)
+
+		// Make user1 and user3 follow each other
+		testUserFollowUser(t, user1, "user5")
+		testUserFollowUser(t, user5, "user1")
+
+		// = 2 follows =
+
+		followCount++
+
+		// Request the profile of user1, the Followers tab
+		response = user1.MakeRequest(t, NewRequest(t, "GET", "/user1?tab=followers"), http.StatusOK)
+		page = NewHTMLParser(t, response.Body)
+
+		// Verify it is now followed by 2 users
+		testSelectorEquals(t, page, followersLink, "2 followers")
+		testSelectorEquals(t, page, listHeader, "Followers")
+		testListCount(t, page, listItems, followCount)
+
+		// Request the profile of user1, the Following tab
+		response = user1.MakeRequest(t, NewRequest(t, "GET", "/user1?tab=following"), http.StatusOK)
+		page = NewHTMLParser(t, response.Body)
+
+		// Verify it now follows follows 2 users
+		testSelectorEquals(t, page, followingLink, "2 following")
+		testSelectorEquals(t, page, listHeader, "Following")
+		testListCount(t, page, listItems, followCount)
+	})
+}
+
+// testUserFollowUser simply follows a user `following` by session of user `follower`
+func testUserFollowUser(t *testing.T, follower *TestSession, following string) {
+	t.Helper()
+	follower.MakeRequest(t, NewRequestWithValues(t, "POST", fmt.Sprintf("/%s?action=follow", following),
+		map[string]string{
+			"_csrf": GetCSRF(t, follower, fmt.Sprintf("/%s", following)),
+		}), http.StatusOK)
+}
+
+// testSelectorEquals prevents duplication of a lot of code for tests with many checks
+func testSelectorEquals(t *testing.T, page *HTMLDoc, selector, expectedContent string) {
+	t.Helper()
+	element := page.Find(selector)
+	content := strings.TrimSpace(element.Text())
+	assert.Equal(t, expectedContent, content)
+}
+
+// testListCount checks that the list on the page has the right amount of items
+func testListCount(t *testing.T, page *HTMLDoc, selector string, expectedCount int) {
+	t.Helper()
+	itemCount := page.Find(selector).Children().Length()
+	assert.Equal(t, expectedCount, itemCount)
+}
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index af27a6600..4ca8148fb 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -2106,7 +2106,7 @@ td .commit-summary {
   padding: 0;
   display: flex;
   flex-wrap: wrap;
-  margin-bottom: 10px;
+  margin: 10px 0;
 }
 
 .user-cards .list .item {