refactor: Rename getReadByText to listUsers

Author: szuperaz

docusaurus/docs/Angular/components/MessageComponent.mdx

@@ -46,7 +46,7 @@ The `Message` component uses the [`parseDate`](https://github.com/GetStream/stre
 
 ### Read by
 
-The `Message` component uses the [`getReadByText`](https://github.com/GetStream/stream-chat-angular/tree/master/projects/stream-chat-angular/src/lib/message/read-by-text.ts) utility function to display the list of people who have read a particular message in a user friendly way (for example _Bob, Sophie, Jack, Rose, John and 1 more_).
+The `Message` component uses the [`listUsers`](https://github.com/GetStream/stream-chat-angular/tree/master/projects/stream-chat-angular/src/lib/list-users.ts) utility function to display the list of people who have read a particular message in a user friendly way (for example _Bob, Sophie, Jack, Rose, John and 1 more_).
 
 ### Loading indicator
 

projects/stream-chat-angular/src/lib/list-users.spec.ts

@@ -0,0 +1,51 @@
+import { listUsers } from './list-users';
+
+describe('listUsers', () => {
+  it('should return the correct result if called with empty array', () => {
+    expect(listUsers([])).toBe('');
+  });
+
+  it('should return the correct result if called with two users', () => {
+    expect(
+      listUsers([
+        { id: 'id1', name: 'Sara' },
+        { id: 'id2', name: 'Jane' },
+      ])
+    ).toBe('Sara and Jane');
+  });
+
+  it('should return correct result if user has no name, the fallback should be id', () => {
+    expect(listUsers([{ id: 'id1' }, { id: 'id2', name: 'Jane' }])).toBe(
+      'id1 and Jane'
+    );
+  });
+
+  it(`should return the correct result if called with one user`, () => {
+    expect(listUsers([{ id: 'id2', name: 'Jane' }])).toBe('Jane ');
+  });
+
+  it('should return the correct result if called with more than two users, but less or equal than five', () => {
+    const readBy = [
+      { id: 'id1', name: 'Bob' },
+      { id: 'id2', name: 'Sophie' },
+      { id: 'id3', name: 'Jack' },
+      { id: 'id4', name: 'Rose' },
+      { id: 'id5', name: 'John' },
+    ];
+
+    expect(listUsers(readBy)).toBe('Bob, Sophie, Jack, John, and Rose');
+  });
+
+  it('should return the correct result if called with more than five users', () => {
+    const readBy = [
+      { id: 'id1', name: 'Bob' },
+      { id: 'id2', name: 'Sophie' },
+      { id: 'id3', name: 'Jack' },
+      { id: 'id4', name: 'Rose' },
+      { id: 'id5', name: 'John' },
+      { id: 'id6', name: 'Adam' },
+    ];
+
+    expect(listUsers(readBy)).toBe('Bob, Sophie, Jack, Rose, John and 1 more');
+  });
+});

projects/stream-chat-angular/src/lib/message/read-by-text.ts renamed to projects/stream-chat-angular/src/lib/list-users.ts

@@ -1,6 +1,6 @@
 import { UserResponse } from 'stream-chat';
 
-export const getReadByText = (users: UserResponse[]) => {
+export const listUsers = (users: UserResponse[]) => {
   let outStr = '';
 
   const slicedArr = users.map((item) => item.name || item.id).slice(0, 5);

projects/stream-chat-angular/src/lib/message/message.component.ts

@@ -23,10 +23,10 @@ import {
   StreamMessage,
 } from '../types';
 import { parseDate } from './parse-date';
-import { getReadByText } from './read-by-text';
 import emojiRegex from 'emoji-regex';
 import { Subscription } from 'rxjs';
 import { CustomTemplatesService } from '../custom-templates.service';
+import { listUsers } from '../list-users';
 
 type MessagePart = {
   content: string;
@@ -130,7 +130,7 @@ export class MessageComponent implements OnInit, OnChanges, OnDestroy {
   }
 
   get readByText() {
-    return getReadByText(this.message!.readBy);
+    return listUsers(this.message!.readBy);
   }
 
   get lastReadUser() {

projects/stream-chat-angular/src/lib/message/read-by-text.spec.ts

@@ -21,7 +21,7 @@ export * from './lib/channel-list/channel-list.component';
 export * from './lib/channel-list/channel-list-toggle.service';
 export * from './lib/message/message.component';
 export * from './lib/message/parse-date';
-export * from './lib/message/read-by-text';
+export * from './lib/list-users';
 export * from './lib/message-input/message-input.component';
 export * from './lib/message-input/textarea/textarea.component';
 export * from './lib/message-input/autocomplete-textarea/autocomplete-textarea.component';