nits fixes

test/components/views/messages/MessageActionBar-test.tsx

@@ -59,6 +59,7 @@ describe('<MessageActionBar />', () => {
             msgtype: MsgType.Text,
             body: 'Hello',
         },
+        event_id: "$alices_message",
     });
 
     const bobsMessageEvent = new MatrixEvent({
@@ -69,6 +70,7 @@ describe('<MessageActionBar />', () => {
             msgtype: MsgType.Text,
             body: 'I am bob',
         },
+        event_id: "$bobs_message",
     });
 
     const redactedEvent = new MatrixEvent({
@@ -82,6 +84,25 @@ describe('<MessageActionBar />', () => {
         ...mockClientMethodsEvents(),
         getRoom: jest.fn(),
     });
+
+    const localStorageMock = (() => {
+        let store = {};
+        return {
+            getItem: jest.fn().mockImplementation(key => store[key] ?? null),
+            setItem: jest.fn().mockImplementation((key, value) => {
+                store[key] = value;
+            }),
+            clear: jest.fn().mockImplementation(() => {
+                store = {};
+            }),
+            removeItem: jest.fn().mockImplementation((key) => delete store[key]),
+        };
+    })();
+    Object.defineProperty(window, 'localStorage', {
+        value: localStorageMock,
+        writable: true,
+    });
+
     const room = new Room(roomId, client, userId);
     jest.spyOn(room, 'getPendingEvents').mockReturnValue([]);
 
@@ -464,4 +485,86 @@ describe('<MessageActionBar />', () => {
             });
         });
     });
+
+    describe('favourite button', () => {
+        //for multiple event usecase
+        const favButton = (evt: MatrixEvent) => {
+            return getComponent({ mxEvent: evt }).getByTestId(evt.getId());
+        };
+
+        describe('when favourite_messages feature is enabled', () => {
+            beforeEach(() => {
+                jest.spyOn(SettingsStore, 'getValue')
+                    .mockImplementation(setting => setting === 'feature_favourite_messages');
+                localStorageMock.clear();
+            });
+
+            it('renders favourite button on own actionable event', () => {
+                const { queryByLabelText } = getComponent({ mxEvent: alicesMessageEvent });
+                expect(queryByLabelText('Favourite')).toBeTruthy();
+            });
+
+            it('renders favourite button on other actionable events', () => {
+                const { queryByLabelText } = getComponent({ mxEvent: bobsMessageEvent });
+                expect(queryByLabelText('Favourite')).toBeTruthy();
+            });
+
+            it('does not render Favourite button on non-actionable event', () => {
+                //redacted event is not actionable
+                const { queryByLabelText } = getComponent({ mxEvent: redactedEvent });
+                expect(queryByLabelText('Favourite')).toBeFalsy();
+            });
+
+            it('remembers favourited state of multiple events, and handles the localStorage of the events accordingly',
+                () => {
+                    const alicesAction = favButton(alicesMessageEvent);
+                    const bobsAction = favButton(bobsMessageEvent);
+
+                    //default state before being clicked
+                    expect(alicesAction.classList).not.toContain('mx_MessageActionBar_favouriteButton_fillstar');
+                    expect(bobsAction.classList).not.toContain('mx_MessageActionBar_favouriteButton_fillstar');
+                    expect(localStorageMock.getItem('io_element_favouriteMessages')).toBeNull();
+
+                    //if only alice's event is fired
+                    act(() => {
+                        fireEvent.click(alicesAction);
+                    });
+
+                    expect(alicesAction.classList).toContain('mx_MessageActionBar_favouriteButton_fillstar');
+                    expect(bobsAction.classList).not.toContain('mx_MessageActionBar_favouriteButton_fillstar');
+                    expect(localStorageMock.setItem)
+                        .toHaveBeenCalledWith('io_element_favouriteMessages', '["$alices_message"]');
+
+                    //when bob's event is fired,both should be styled and stored in localStorage
+                    act(() => {
+                        fireEvent.click(bobsAction);
+                    });
+
+                    expect(alicesAction.classList).toContain('mx_MessageActionBar_favouriteButton_fillstar');
+                    expect(bobsAction.classList).toContain('mx_MessageActionBar_favouriteButton_fillstar');
+                    expect(localStorageMock.setItem)
+                        .toHaveBeenCalledWith('io_element_favouriteMessages', '["$alices_message","$bobs_message"]');
+
+                    //finally, at this point the localStorage should contain the two eventids
+                    expect(localStorageMock.getItem('io_element_favouriteMessages'))
+                        .toEqual('["$alices_message","$bobs_message"]');
+
+                    //if decided to unfavourite bob's event by clicking again
+                    act(() => {
+                        fireEvent.click(bobsAction);
+                    });
+                    expect(bobsAction.classList).not.toContain('mx_MessageActionBar_favouriteButton_fillstar');
+                    expect(alicesAction.classList).toContain('mx_MessageActionBar_favouriteButton_fillstar');
+                    expect(localStorageMock.getItem('io_element_favouriteMessages')).toEqual('["$alices_message"]');
+                });
+        });
+
+        describe('when favourite_messages feature is disabled', () => {
+            it('does not render', () => {
+                jest.spyOn(SettingsStore, 'getValue').mockReturnValue(false);
+                const { queryByLabelText } = getComponent({ mxEvent: alicesMessageEvent });
+                expect(queryByLabelText('Favourite')).toBeFalsy();
+            });
+        });
+    });
 });