From a4419a249a710a53ab4a0ac7b03d67fcb9816c2a Mon Sep 17 00:00:00 2001 From: Joshua Wehner Date: Wed, 21 Jun 2023 09:40:39 +0200 Subject: [PATCH] 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 --- .../onboarding/components/FollowUsers.jsx | 44 ++++++++++------- .../components/__tests__/FollowUsers.test.jsx | 49 ++++++++++++++++++- config/locales/en.yml | 2 +- config/locales/fr.yml | 2 +- 4 files changed, 76 insertions(+), 21 deletions(-) diff --git a/app/javascript/onboarding/components/FollowUsers.jsx b/app/javascript/onboarding/components/FollowUsers.jsx index 9fca8b475..91ea85d82 100644 --- a/app/javascript/onboarding/components/FollowUsers.jsx +++ b/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 {

- Suggested people to follow + Suggested follows

- Let's review a few things first + Kickstart your community

{this.renderFollowCount()} diff --git a/app/javascript/onboarding/components/__tests__/FollowUsers.test.jsx b/app/javascript/onboarding/components/__tests__/FollowUsers.test.jsx index 9eb737bf5..ca35314c3 100644 --- a/app/javascript/onboarding/components/__tests__/FollowUsers.test.jsx +++ b/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(); diff --git a/config/locales/en.yml b/config/locales/en.yml index ba2fd9c6a..5ba04e241 100644 --- a/config/locales/en.yml +++ b/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: diff --git a/config/locales/fr.yml b/config/locales/fr.yml index 59cd8f256..c0cc429e6 100644 --- a/config/locales/fr.yml +++ b/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: