Suggested follows copy changes (#19596)

* Suggested follows copy changes

* See if this makes codecov happier?

* Still trying to appease codecov

---------

Co-authored-by: Ben Halpern <bendhalpern@gmail.com>

app/javascript/onboarding/components/FollowUsers.jsx

@@ -7,18 +7,18 @@ import { Navigation } from './Navigation';
 
 function groupFollowsByType(array) {
   return array.reduce((returning, item) => {
-    const type = item.type_identifier
+    const type = item.type_identifier;
     returning[type] = (returning[type] || []).concat(item);
     return returning;
-  }, {})
+  }, {});
 }
 
 function groupFollowIdsByType(array) {
   return array.reduce((returning, item) => {
-    const type = item.type_identifier
-    returning[type] = (returning[type] || []).concat({id: item.id});
+    const type = item.type_identifier;
+    returning[type] = (returning[type] || []).concat({ id: item.id });
     return returning;
-  }, {})
+  }, {});
 }
 
 export class FollowUsers extends Component {
@@ -77,8 +77,9 @@ export class FollowUsers extends Component {
         'Content-Type': 'application/json',
       },
       body: JSON.stringify({
-        users: idsGroupedByType["user"],
-        organizations: idsGroupedByType["organization"] }),
+        users: idsGroupedByType['user'],
+        organizations: idsGroupedByType['organization'],
+      }),
       credentials: 'same-origin',
     });
 
@@ -120,19 +121,28 @@ export class FollowUsers extends Component {
 
     let followingStatus;
     if (selectedFollows.length === 0) {
-      followingStatus = locale("core.not_following");
-    } else if (selectedFollows.length === follows.length) {
-      followingStatus = `${locale("core.following_everyone")  }`;
+      followingStatus = locale('core.not_following');
     } else {
       const groups = groupFollowsByType(selectedFollows);
-      let together = []
+      let together = [];
       for (const type in groups) {
-        const counted = locale(`core.counted_${type}`, {count: groups[type].length});
-        together = together.concat(counted)
+        const counted = locale(`core.counted_${type}`, {
+          count: groups[type].length,
+        });
+        together = together.concat(counted);
       }
 
-      const anded_together = together.join(` ${locale("core.and")} `);
-      followingStatus = `${locale("core.you_are_following")} ${anded_together}`;
+      const anded_together = together.join(` ${locale('core.and')} `);
+
+      if (selectedFollows.length === follows.length) {
+        followingStatus = `${locale('core.following_everyone', {
+          details: anded_together,
+        })}`;
+      } else {
+        followingStatus = `${locale(
+          'core.you_are_following',
+        )} ${anded_together}`;
+      }
     }
 
     const klassName =
@@ -194,10 +204,10 @@ export class FollowUsers extends Component {
           <div className="onboarding-content toggle-bottom">
             <header className="onboarding-content-header">
               <h1 id="title" className="title">
-                Suggested people to follow
+                Suggested follows
               </h1>
               <h2 id="subtitle" className="subtitle">
-                Let&apos;s review a few things first
+                Kickstart your community
               </h2>
               <div className="onboarding-selection-status">
                 {this.renderFollowCount()}

app/javascript/onboarding/components/__tests__/FollowUsers.test.jsx

@@ -95,6 +95,34 @@ describe('FollowUsers', () => {
     expect(queryByText(/Continue/i)).toExist();
   });
 
+  it('should properly pluralize with small follower count', async () => {
+    fetch.mockResponseOnce(
+      JSON.stringify(JSON.parse(fakeUsersResponse).slice(-1)),
+    );
+
+    const { queryByText, findByText, findAllByLabelText, queryAllByLabelText } =
+      renderFollowUsers();
+
+    const selectedUsers = await findAllByLabelText('Following');
+    expect(selectedUsers).toHaveLength(1);
+    expect(queryByText(/Continue/i)).toExist();
+
+    // deselect all then test following count
+    const deselectAllSelector = await findByText(/Deselect all/i);
+
+    fireEvent.click(deselectAllSelector);
+
+    expect(queryAllByLabelText('Follow')).toHaveLength(1);
+    expect(queryByText('Following')).not.toExist();
+    expect(queryByText(/You're not following anyone/i)).toExist();
+
+    // select all then test following count
+    const followAllSelector = await findByText(/Select 1/i);
+
+    fireEvent.click(followAllSelector);
+    expect(queryByText(/You're following 1 person \(everyone\)/i)).toExist();
+  });
+
   it('should update the navigation button text and follow status when you follow/unfollow users', async () => {
     fetch.mockResponse(fakeUsersResponse);
 
@@ -106,7 +134,7 @@ describe('FollowUsers', () => {
     );
 
     expect(queryAllByLabelText('Following')).toHaveLength(3);
-    expect(queryByText(/You're following everyone/i)).toExist();
+    expect(queryByText(/You're following 3 people \(everyone\)/i)).toExist();
     expect(queryByText(/Continue/i)).toExist();
 
     // Unfollow the first user
@@ -159,7 +187,7 @@ describe('FollowUsers', () => {
 
     expect(queryByText('Follow')).not.toExist();
     expect(queryAllByLabelText('Following')).toHaveLength(3);
-    expect(queryByText(/You're following everyone/i)).toExist();
+    expect(queryByText(/You're following 3 people \(everyone\)/i)).toExist();
   });
 
   it('should render a stepper', () => {
@@ -168,6 +196,23 @@ describe('FollowUsers', () => {
     expect(queryByTestId('stepper')).toExist();
   });
 
+  it('should be able to continue to the next step', async () => {
+    fetch.mockResponseOnce(fakeUsersResponse);
+
+    const { queryByText, findAllByLabelText } = renderFollowUsers();
+
+    const selectedUsers = await findAllByLabelText('Following');
+    expect(selectedUsers).toHaveLength(3);
+
+    const clickToContinue = queryByText(/Continue/i);
+    fireEvent.click(clickToContinue);
+
+    const idsToFollow = '{"users":[{"id":1},{"id":2},{"id":3}]}';
+    const [uri, request] = fetch.mock.calls.slice(-1)[0];
+    expect(uri).toEqual('/api/follows');
+    expect(request['body']).toEqual(idsToFollow);
+  });
+
   it('should render a back button', () => {
     const { queryByTestId } = renderFollowUsers();
 

config/locales/en.yml

@@ -26,7 +26,7 @@ en:
       one: "%{count} person"
       other: "%{count} people"
     not_following: "You're not following anyone"
-    following_everyone: "You're following everyone"
+    following_everyone: "You're following %{details} (everyone)"
     you_are_following: "You're following"
     and: "and"
   datetime:

config/locales/fr.yml

@@ -26,7 +26,7 @@ fr:
       one: "%{count} personne"
       other: "%{count} personnes"
     not_following: "Vous ne suivez personne"
-    following_everyone: "Vous les suivez tous"
+    following_everyone: "Vous suivez %{details} (toutes)"
     you_are_following: "Vous suivez"
     and: "et"
   date: