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: