Add tests

Author: arnautov-anton

src/components/Message/__tests__/QuotedMessage.test.js

@@ -2,6 +2,7 @@ import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
 import { toHaveNoViolations } from 'jest-axe';
 import React from 'react';
+import { nanoid } from 'nanoid';
 import { axe } from '../../../../axe-helper';
 
 import {
@@ -106,13 +107,46 @@ describe('QuotedMessage', () => {
     expect(results).toHaveNoViolations();
   });
 
-  it('should rendered text', async () => {
-    const { container, queryByTestId, queryByText } = await renderQuotedMessage({
+  it('renders proper markdown (through default renderText fn)', async () => {
+    const messageText = 'hey @John Cena';
+    const { container, findByTestId, findByText, queryByTestId } =
+      await renderQuotedMessage({
+        customProps: {
+          message: {
+            quoted_message: {
+              mentioned_users: [{ id: 'john', name: 'John Cena' }],
+              text: messageText,
+            },
+          },
+        },
+      });
+
+    expect(await findByText('@John Cena')).toHaveAttribute('data-user-id');
+    expect((await findByTestId('quoted-message-text')).textContent).toEqual(messageText);
+    expect(queryByTestId(quotedAttachmentListTestId)).not.toBeInTheDocument();
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it('uses custom renderText fn if provided', async () => {
+    const messageText = nanoid();
+    const fn = jest
+      .fn()
+      .mockReturnValue(<div data-testid={messageText}>{messageText}</div>);
+
+    const { container, findByTestId, queryByTestId } = await renderQuotedMessage({
       customProps: {
-        message: { quoted_message: { text: quotedText } },
+        message: {
+          quoted_message: {
+            text: messageText,
+          },
+        },
+        renderText: fn,
       },
     });
-    expect(queryByText(quotedText)).toBeInTheDocument();
+
+    expect(fn).toHaveBeenCalled();
+    expect((await findByTestId('quoted-message-text')).textContent).toEqual(messageText);
     expect(queryByTestId(quotedAttachmentListTestId)).not.toBeInTheDocument();
     const results = await axe(container);
     expect(results).toHaveNoViolations();

src/components/MessageInput/__tests__/MessageInput.test.js

@@ -26,6 +26,7 @@ import {
   initClientWithChannels,
 } from '../../../mock-builders';
 import { generatePoll } from '../../../mock-builders/generator/poll';
+import { QuotedMessagePreview } from '../QuotedMessagePreview';
 
 expect.extend(toHaveNoViolations);
 
@@ -1520,8 +1521,10 @@ describe(`MessageInputFlat only`, () => {
     });
   };
 
-  const initQuotedMessagePreview = async (message) => {
-    await waitFor(() => expect(screen.queryByText(message.text)).not.toBeInTheDocument());
+  const initQuotedMessagePreview = async () => {
+    await waitFor(() =>
+      expect(screen.queryByTestId('quoted-message-preview')).not.toBeInTheDocument(),
+    );
 
     const quoteButton = await screen.findByText(/^reply$/i);
     await waitFor(() => expect(quoteButton).toBeInTheDocument());
@@ -1550,6 +1553,38 @@ describe(`MessageInputFlat only`, () => {
       await quotedMessagePreviewIsDisplayedCorrectly(mainListMessage);
     });
 
+    it('renders proper markdown (through default renderText fn)', async () => {
+      const m = generateMessage({
+        mentioned_users: [{ id: 'john', name: 'John Cena' }],
+        text: 'hey @John Cena',
+        user,
+      });
+      await renderComponent({ messageContextOverrides: { message: m } });
+      await initQuotedMessagePreview(m);
+
+      expect(await screen.findByText('@John Cena')).toHaveAttribute('data-user-id');
+    });
+
+    it('uses custom renderText fn if provided', async () => {
+      const m = generateMessage({
+        text: nanoid(),
+        user,
+      });
+      const fn = jest.fn().mockReturnValue(<div data-testid={m.text}>{m.text}</div>);
+      await renderComponent({
+        channelProps: {
+          QuotedMessagePreview: (props) => (
+            <QuotedMessagePreview {...props} renderText={fn} />
+          ),
+        },
+        messageContextOverrides: { message: m },
+      });
+      await initQuotedMessagePreview(m);
+
+      expect(fn).toHaveBeenCalled();
+      expect(await screen.findByTestId(m.text)).toBeInTheDocument();
+    });
+
     it('is updated on original message update', async () => {
       const { channel, client } = await renderComponent();
       await initQuotedMessagePreview(mainListMessage);