add test and aria-label

routes/_components/profile/AccountProfileDetails.html

@@ -8,7 +8,9 @@
     </span>
   </div>
   <a class="account-profile-details-item"
-     href='/accounts/{{account.id}}/follows'>
+     href='/accounts/{{account.id}}/follows'
+     aria-label="{{followingLabel}}"
+  >
     <span class="account-profile-details-item-title">
       Follows
     </span>
@@ -17,7 +19,9 @@
     </span>
   </a>
   <a class="account-profile-details-item"
-     href='/accounts/{{account.id}}/followers'>
+     href='/accounts/{{account.id}}/followers'
+     aria-label="{{followersLabel}}"
+  >
     <span class="account-profile-details-item-title">
       Followers
     </span>
@@ -120,7 +124,9 @@
       numFollowers: account => account.followers_count || 0,
       numStatusesDisplay: numStatuses => numberFormat.format(numStatuses),
       numFollowingDisplay: numFollowing => numberFormat.format(numFollowing),
-      numFollowersDisplay: numFollowers => numberFormat.format(numFollowers)
+      numFollowersDisplay: numFollowers => numberFormat.format(numFollowers),
+      followersLabel: numFollowers => `Followed by ${numFollowers}`,
+      followingLabel: numFollowing => `Follows ${numFollowing}`
     },
     methods: {
       async onMoreOptionsClick () {

tests/spec/021-followers-follows.js

@@ -0,0 +1,26 @@
+import {
+  followersButton,
+  followsButton, getNthSearchResult,
+  getNthStatus, getUrl, goBack
+} from '../utils'
+import { foobarRole } from '../roles'
+
+fixture`021-followers-follows.js`
+  .page`http://localhost:4002`
+
+test('shows followers and follows', async t => {
+  await t.useRole(foobarRole)
+    .click(getNthStatus(0).find('.status-author-name'))
+    .expect(getUrl()).match(/\/accounts\/3$/)
+    .expect(followsButton.getAttribute('aria-label')).eql('Follows 2')
+    .click(followsButton)
+    .expect(getUrl()).contains('/accounts/3/follows')
+    .expect(getNthSearchResult(1).innerText).contains('@foobar')
+    .expect(getNthSearchResult(2).innerText).contains('@admin')
+  await goBack()
+  await t.expect(getUrl()).match(/\/accounts\/3$/)
+    .expect(followersButton.getAttribute('aria-label')).eql('Followed by 1')
+    .click(followersButton)
+    .expect(getUrl()).contains('/accounts/3/followers')
+    .expect(getNthSearchResult(1).innerText).contains('@admin')
+})

tests/utils.js

@@ -39,6 +39,8 @@ export const goBackButton = $('.dynamic-page-go-back')
 export const accountProfileMoreOptionsButton = $('.account-profile-more-options button')
 export const addInstanceButton = $('#submitButton')
 export const mastodonLogInButton = $('button[type="submit"]')
+export const followsButton = $('.account-profile-details > *:nth-child(2)')
+export const followersButton = $('.account-profile-details > *:nth-child(3)')
 
 export const favoritesCountElement = $('.status-favs-reblogs:nth-child(3)').addCustomDOMProperties({
   innerCount: el => parseInt(el.innerText, 10)