From 8f699f8e170ae153e52e2d858983a16ac6a05ffd Mon Sep 17 00:00:00 2001
From: martincupela <martin.cupela@gmail.com>
Date: Fri, 21 Jun 2024 14:32:27 +0200
Subject: [PATCH] test: remove MessageStatus tests for legacy styles

---
 .../Message/__tests__/MessageStatus.test.js   | 314 +++++++++---------
 .../__snapshots__/MessageStatus.test.js.snap  | 167 +---------
 2 files changed, 161 insertions(+), 320 deletions(-)

diff --git a/src/components/Message/__tests__/MessageStatus.test.js b/src/components/Message/__tests__/MessageStatus.test.js
index e5ef071d0..b9f5c1cd0 100644
--- a/src/components/Message/__tests__/MessageStatus.test.js
+++ b/src/components/Message/__tests__/MessageStatus.test.js
@@ -56,184 +56,182 @@ const renderComponent = ({ chatCtx, componentCtx, messageCtx, props } = {}) =>
   );
 
 describe('MessageStatus', () => {
-  describe.each(['1', '2'])('theme v%s', (themeVersion) => {
-    it('renders nothing for not own messages', async () => {
-      const client = await getTestClientWithUser(user);
-      const { container } = renderComponent({
-        chatCtx: { client, themeVersion },
-        messageCtx: { isMyMessage: () => false, message: foreignMsg },
-      });
-      expect(container).toBeEmptyDOMElement();
+  it('renders nothing for not own messages', async () => {
+    const client = await getTestClientWithUser(user);
+    const { container } = renderComponent({
+      chatCtx: { client },
+      messageCtx: { isMyMessage: () => false, message: foreignMsg },
     });
-    it('renders nothing for error messages', async () => {
-      const client = await getTestClientWithUser(user);
-      const { container } = renderComponent({
-        chatCtx: { client, themeVersion },
-        messageCtx: { message: errorMsg },
-      });
-      expect(container).toBeEmptyDOMElement();
+    expect(container).toBeEmptyDOMElement();
+  });
+  it('renders nothing for error messages', async () => {
+    const client = await getTestClientWithUser(user);
+    const { container } = renderComponent({
+      chatCtx: { client },
+      messageCtx: { message: errorMsg },
     });
+    expect(container).toBeEmptyDOMElement();
+  });
 
-    it('renders default sending UI for the last message', async () => {
-      const client = await getTestClientWithUser(user);
-      renderComponent({
-        chatCtx: { client, themeVersion },
-        messageCtx: { lastReceivedId: sendingMsg.id, message: sendingMsg },
-      });
-      expect(screen.getByTestId(MESSAGE_STATUS_SENDING_TEST_ID)).toMatchSnapshot();
+  it('renders default sending UI for the last message', async () => {
+    const client = await getTestClientWithUser(user);
+    renderComponent({
+      chatCtx: { client },
+      messageCtx: { lastReceivedId: sendingMsg.id, message: sendingMsg },
     });
+    expect(screen.getByTestId(MESSAGE_STATUS_SENDING_TEST_ID)).toMatchSnapshot();
+  });
 
-    it('renders custom sending UI for the last message', async () => {
-      const text = 'CustomMessageSendingStatus';
-      const MessageSendingStatus = () => <div>{text}</div>;
-      const client = await getTestClientWithUser(user);
-      renderComponent({
-        chatCtx: { client, themeVersion },
-        messageCtx: { lastReceivedId: sendingMsg.id, message: sendingMsg },
-        props: { MessageSendingStatus },
-      });
-      expect(screen.getByText(text)).toBeInTheDocument();
+  it('renders custom sending UI for the last message', async () => {
+    const text = 'CustomMessageSendingStatus';
+    const MessageSendingStatus = () => <div>{text}</div>;
+    const client = await getTestClientWithUser(user);
+    renderComponent({
+      chatCtx: { client },
+      messageCtx: { lastReceivedId: sendingMsg.id, message: sendingMsg },
+      props: { MessageSendingStatus },
     });
+    expect(screen.getByText(text)).toBeInTheDocument();
+  });
 
-    it('renders default sending UI for not the last message', async () => {
-      const client = await getTestClientWithUser(user);
-      renderComponent({ chatCtx: { client, themeVersion }, messageCtx: { message: sendingMsg } });
-      expect(screen.getByTestId(MESSAGE_STATUS_SENDING_TEST_ID)).toMatchSnapshot();
-    });
+  it('renders default sending UI for not the last message', async () => {
+    const client = await getTestClientWithUser(user);
+    renderComponent({ chatCtx: { client }, messageCtx: { message: sendingMsg } });
+    expect(screen.getByTestId(MESSAGE_STATUS_SENDING_TEST_ID)).toMatchSnapshot();
+  });
 
-    it('renders custom sending UI for not the last message', async () => {
-      const text = 'CustomMessageSendingStatus';
-      const MessageSendingStatus = () => <div>{text}</div>;
-      const client = await getTestClientWithUser(user);
-      renderComponent({
-        chatCtx: { client, themeVersion },
-        messageCtx: { message: sendingMsg },
-        props: { MessageSendingStatus },
-      });
-      expect(screen.getByText(text)).toBeInTheDocument();
+  it('renders custom sending UI for not the last message', async () => {
+    const text = 'CustomMessageSendingStatus';
+    const MessageSendingStatus = () => <div>{text}</div>;
+    const client = await getTestClientWithUser(user);
+    renderComponent({
+      chatCtx: { client },
+      messageCtx: { message: sendingMsg },
+      props: { MessageSendingStatus },
     });
+    expect(screen.getByText(text)).toBeInTheDocument();
+  });
 
-    // here
-    it('renders default delivered UI for the last message', async () => {
-      const client = await getTestClientWithUser(user);
-      renderComponent({
-        chatCtx: { client, themeVersion },
-        messageCtx: { lastReceivedId: deliveredMsg.id, message: deliveredMsg },
-      });
-      expect(screen.getByTestId(MESSAGE_STATUS_DELIVERED_TEST_ID)).toMatchSnapshot();
+  // here
+  it('renders default delivered UI for the last message', async () => {
+    const client = await getTestClientWithUser(user);
+    renderComponent({
+      chatCtx: { client },
+      messageCtx: { lastReceivedId: deliveredMsg.id, message: deliveredMsg },
     });
+    expect(screen.getByTestId(MESSAGE_STATUS_DELIVERED_TEST_ID)).toMatchSnapshot();
+  });
 
-    it('renders custom delivered UI for the last message', async () => {
-      const text = 'CustomMessageDeliveredStatus';
-      const MessageDeliveredStatus = () => <div>{text}</div>;
-      const client = await getTestClientWithUser(user);
-      renderComponent({
-        chatCtx: { client, themeVersion },
-        messageCtx: { lastReceivedId: deliveredMsg.id, message: deliveredMsg },
-        props: { MessageDeliveredStatus },
-      });
-      expect(screen.getByText(text)).toBeInTheDocument();
+  it('renders custom delivered UI for the last message', async () => {
+    const text = 'CustomMessageDeliveredStatus';
+    const MessageDeliveredStatus = () => <div>{text}</div>;
+    const client = await getTestClientWithUser(user);
+    renderComponent({
+      chatCtx: { client },
+      messageCtx: { lastReceivedId: deliveredMsg.id, message: deliveredMsg },
+      props: { MessageDeliveredStatus },
     });
+    expect(screen.getByText(text)).toBeInTheDocument();
+  });
 
-    it('renders empty container without default delivered UI for not the last message', async () => {
-      const client = await getTestClientWithUser(user);
-      const { container } = renderComponent({
-        chatCtx: { client, themeVersion },
-        messageCtx: { message: deliveredMsg },
-      });
-      expect(container.children[0]).toHaveClass(rootClassName);
-      expect(container.children[0]).toBeEmptyDOMElement();
+  it('renders empty container without default delivered UI for not the last message', async () => {
+    const client = await getTestClientWithUser(user);
+    const { container } = renderComponent({
+      chatCtx: { client },
+      messageCtx: { message: deliveredMsg },
     });
+    expect(container.children[0]).toHaveClass(rootClassName);
+    expect(container.children[0]).toBeEmptyDOMElement();
+  });
 
-    it('renders empty container without custom delivered UI for not the last message', async () => {
-      const text = 'CustomMessageDeliveredStatus';
-      const MessageDeliveredStatus = () => <div>{text}</div>;
-      const client = await getTestClientWithUser(user);
-      const { container } = renderComponent({
-        chatCtx: { client, themeVersion },
-        messageCtx: { message: deliveredMsg },
-        props: { MessageDeliveredStatus },
-      });
-      expect(container.children[0]).toHaveClass(rootClassName);
-      expect(container.children[0]).toBeEmptyDOMElement();
-    });
+  it('renders empty container without custom delivered UI for not the last message', async () => {
+    const text = 'CustomMessageDeliveredStatus';
+    const MessageDeliveredStatus = () => <div>{text}</div>;
+    const client = await getTestClientWithUser(user);
+    const { container } = renderComponent({
+      chatCtx: { client },
+      messageCtx: { message: deliveredMsg },
+      props: { MessageDeliveredStatus },
+    });
+    expect(container.children[0]).toHaveClass(rootClassName);
+    expect(container.children[0]).toBeEmptyDOMElement();
+  });
 
-    it('renders default read UI for the last message', async () => {
-      const client = await getTestClientWithUser(user);
-      renderComponent({
-        chatCtx: { client, themeVersion },
-        messageCtx: {
-          lastReceivedId: deliveredMsg.id,
-          message: deliveredMsg,
-          readBy: readByOthers,
-        },
-      });
-      expect(screen.getByTestId(MESSAGE_STATUS_READ_TEST_ID)).toMatchSnapshot();
-    });
-    it('renders custom read UI for the last message', async () => {
-      const text = 'CustomMessageReadStatus';
-      const MessageReadStatus = () => <div>{text}</div>;
-      const client = await getTestClientWithUser(user);
-      renderComponent({
-        chatCtx: { client, themeVersion },
-        messageCtx: {
-          lastReceivedId: deliveredMsg.id,
-          message: deliveredMsg,
-          readBy: readByOthers,
-        },
-        props: { MessageReadStatus },
-      });
-      expect(screen.getByText(text)).toBeInTheDocument();
-    });
-    it('renders empty container without default read UI for not the last message', async () => {
-      const client = await getTestClientWithUser(user);
-      const { container } = renderComponent({
-        chatCtx: { client, themeVersion },
-        messageCtx: { message: deliveredMsg },
-      });
-      expect(container.children[0]).toHaveClass(rootClassName);
-      expect(container.children[0]).toBeEmptyDOMElement();
-    });
+  it('renders default read UI for the last message', async () => {
+    const client = await getTestClientWithUser(user);
+    renderComponent({
+      chatCtx: { client },
+      messageCtx: {
+        lastReceivedId: deliveredMsg.id,
+        message: deliveredMsg,
+        readBy: readByOthers,
+      },
+    });
+    expect(screen.getByTestId(MESSAGE_STATUS_READ_TEST_ID)).toMatchSnapshot();
+  });
+  it('renders custom read UI for the last message', async () => {
+    const text = 'CustomMessageReadStatus';
+    const MessageReadStatus = () => <div>{text}</div>;
+    const client = await getTestClientWithUser(user);
+    renderComponent({
+      chatCtx: { client },
+      messageCtx: {
+        lastReceivedId: deliveredMsg.id,
+        message: deliveredMsg,
+        readBy: readByOthers,
+      },
+      props: { MessageReadStatus },
+    });
+    expect(screen.getByText(text)).toBeInTheDocument();
+  });
+  it('renders empty container without default read UI for not the last message', async () => {
+    const client = await getTestClientWithUser(user);
+    const { container } = renderComponent({
+      chatCtx: { client },
+      messageCtx: { message: deliveredMsg },
+    });
+    expect(container.children[0]).toHaveClass(rootClassName);
+    expect(container.children[0]).toBeEmptyDOMElement();
+  });
 
-    it('renders empty container without custom read UI for not the last message', async () => {
-      const text = 'CustomMessageReadStatus';
-      const MessageReadStatus = () => <div>{text}</div>;
-      const client = await getTestClientWithUser(user);
-      const { container } = renderComponent({
-        chatCtx: { client, themeVersion },
-        messageCtx: { message: deliveredMsg },
-        props: { MessageReadStatus },
-      });
-      expect(container.children[0]).toHaveClass(rootClassName);
-      expect(container.children[0]).toBeEmptyDOMElement();
-    });
+  it('renders empty container without custom read UI for not the last message', async () => {
+    const text = 'CustomMessageReadStatus';
+    const MessageReadStatus = () => <div>{text}</div>;
+    const client = await getTestClientWithUser(user);
+    const { container } = renderComponent({
+      chatCtx: { client },
+      messageCtx: { message: deliveredMsg },
+      props: { MessageReadStatus },
+    });
+    expect(container.children[0]).toHaveClass(rootClassName);
+    expect(container.children[0]).toBeEmptyDOMElement();
+  });
 
-    it('renders custom Avatar in default read status', async () => {
-      const text = 'CustomAvatar';
-      const Avatar = () => <div>{text}</div>;
-      const client = await getTestClientWithUser(user);
-      renderComponent({
-        chatCtx: { client, themeVersion },
-        messageCtx: {
-          lastReceivedId: deliveredMsg.id,
-          message: deliveredMsg,
-          readBy: readByOthers,
-        },
-        props: { Avatar },
-      });
-      expect(screen.getByText(text)).toBeInTheDocument();
-      expect(screen.queryByTestId('avatar')).not.toBeInTheDocument();
-    });
+  it('renders custom Avatar in default read status', async () => {
+    const text = 'CustomAvatar';
+    const Avatar = () => <div>{text}</div>;
+    const client = await getTestClientWithUser(user);
+    renderComponent({
+      chatCtx: { client },
+      messageCtx: {
+        lastReceivedId: deliveredMsg.id,
+        message: deliveredMsg,
+        readBy: readByOthers,
+      },
+      props: { Avatar },
+    });
+    expect(screen.getByText(text)).toBeInTheDocument();
+    expect(screen.queryByTestId('avatar')).not.toBeInTheDocument();
+  });
 
-    it('reflects messageType prop in root class', async () => {
-      const client = await getTestClientWithUser(user);
-      const { container } = renderComponent({
-        chatCtx: { client, themeVersion },
-        messageCtx: { message: deliveredMsg },
-        props: { messageType: 'XXX' },
-      });
-      expect(container.children[0]).not.toHaveClass('str-chat__message-simple-status');
-      expect(container.children[0]).toHaveClass('str-chat__message-XXX-status');
+  it('reflects messageType prop in root class', async () => {
+    const client = await getTestClientWithUser(user);
+    const { container } = renderComponent({
+      chatCtx: { client },
+      messageCtx: { message: deliveredMsg },
+      props: { messageType: 'XXX' },
     });
+    expect(container.children[0]).not.toHaveClass('str-chat__message-simple-status');
+    expect(container.children[0]).toHaveClass('str-chat__message-XXX-status');
   });
 });
diff --git a/src/components/Message/__tests__/__snapshots__/MessageStatus.test.js.snap b/src/components/Message/__tests__/__snapshots__/MessageStatus.test.js.snap
index 3eb0c1c60..abac79d65 100644
--- a/src/components/Message/__tests__/__snapshots__/MessageStatus.test.js.snap
+++ b/src/components/Message/__tests__/__snapshots__/MessageStatus.test.js.snap
@@ -1,162 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`MessageStatus theme v1 renders default delivered UI for the last message 1`] = `
-<span
-  class="str-chat__message-simple-status str-chat__message-status"
-  data-testid="message-status-received"
->
-  <div
-    class="str-chat__tooltip"
-  >
-    Delivered
-  </div>
-  <svg
-    height="16"
-    width="16"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zm3.72 6.633a.955.955 0 1 0-1.352-1.352L6.986 8.663 5.633 7.31A.956.956 0 1 0 4.28 8.663l2.029 2.028a.956.956 0 0 0 1.353 0l4.058-4.058z"
-      fill="#006CFF"
-      fill-rule="evenodd"
-    />
-  </svg>
-</span>
-`;
-
-exports[`MessageStatus theme v1 renders default read UI for the last message 1`] = `
-<span
-  class="str-chat__message-simple-status str-chat__message-status"
-  data-testid="message-status-read-by"
->
-  <div
-    class="str-chat__tooltip"
-  >
-    other-user 
-  </div>
-  <div
-    class="str-chat__avatar str-chat__avatar--circle str-chat__message-sender-avatar"
-    data-testid="avatar"
-    style="flex-basis: 15px; font-size: 7.5px; height: 15px; line-height: 15px; width: 15px;"
-    title="other-user"
-  >
-    <div
-      class="str-chat__avatar-fallback"
-      data-testid="avatar-fallback"
-    >
-      o
-    </div>
-  </div>
-</span>
-`;
-
-exports[`MessageStatus theme v1 renders default sending UI for not the last message 1`] = `
-<span
-  class="str-chat__message-simple-status str-chat__message-status"
-  data-testid="message-status-sending"
->
-  <div
-    class="str-chat__tooltip"
-  >
-    Sending...
-  </div>
-  <div
-    class="str-chat__loading-indicator"
-    data-testid="loading-indicator-wrapper"
-    style="height: 15px; width: 15px;"
-  >
-    <svg
-      height="15"
-      viewBox="0 0 30 30"
-      width="15"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <defs>
-        <lineargradient
-          id="a"
-          x1="50%"
-          x2="50%"
-          y1="0%"
-          y2="100%"
-        >
-          <stop
-            offset="0%"
-            stop-color="#FFF"
-            stop-opacity="0"
-          />
-          <stop
-            data-testid="loading-indicator-circle"
-            offset="100%"
-            stop-color="#006CFF"
-            stop-opacity="1"
-            style="stop-color: rgb(0, 108, 255);"
-          />
-        </lineargradient>
-      </defs>
-      <path
-        d="M2.518 23.321l1.664-1.11A12.988 12.988 0 0 0 15 28c7.18 0 13-5.82 13-13S22.18 2 15 2V0c8.284 0 15 6.716 15 15 0 8.284-6.716 15-15 15-5.206 0-9.792-2.652-12.482-6.679z"
-        fill="url(#a)"
-        fill-rule="evenodd"
-      />
-    </svg>
-  </div>
-</span>
-`;
-
-exports[`MessageStatus theme v1 renders default sending UI for the last message 1`] = `
-<span
-  class="str-chat__message-simple-status str-chat__message-status"
-  data-testid="message-status-sending"
->
-  <div
-    class="str-chat__tooltip"
-  >
-    Sending...
-  </div>
-  <div
-    class="str-chat__loading-indicator"
-    data-testid="loading-indicator-wrapper"
-    style="height: 15px; width: 15px;"
-  >
-    <svg
-      height="15"
-      viewBox="0 0 30 30"
-      width="15"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <defs>
-        <lineargradient
-          id="a"
-          x1="50%"
-          x2="50%"
-          y1="0%"
-          y2="100%"
-        >
-          <stop
-            offset="0%"
-            stop-color="#FFF"
-            stop-opacity="0"
-          />
-          <stop
-            data-testid="loading-indicator-circle"
-            offset="100%"
-            stop-color="#006CFF"
-            stop-opacity="1"
-            style="stop-color: rgb(0, 108, 255);"
-          />
-        </lineargradient>
-      </defs>
-      <path
-        d="M2.518 23.321l1.664-1.11A12.988 12.988 0 0 0 15 28c7.18 0 13-5.82 13-13S22.18 2 15 2V0c8.284 0 15 6.716 15 15 0 8.284-6.716 15-15 15-5.206 0-9.792-2.652-12.482-6.679z"
-        fill="url(#a)"
-        fill-rule="evenodd"
-      />
-    </svg>
-  </div>
-</span>
-`;
-
-exports[`MessageStatus theme v2 renders default delivered UI for the last message 1`] = `
+exports[`MessageStatus renders default delivered UI for the last message 1`] = `
 <span
   class="str-chat__message-simple-status str-chat__message-status"
   data-testid="message-status-received"
@@ -179,15 +23,14 @@ exports[`MessageStatus theme v2 renders default delivered UI for the last messag
 </span>
 `;
 
-exports[`MessageStatus theme v2 renders default read UI for the last message 1`] = `
+exports[`MessageStatus renders default read UI for the last message 1`] = `
 <span
   class="str-chat__message-simple-status str-chat__message-status"
   data-testid="message-status-read-by"
 >
   <div
-    class="str-chat__avatar str-chat__avatar--circle str-chat__message-sender-avatar"
+    class="str-chat__avatar str-chat__message-sender-avatar str-chat__avatar--message-status str-chat__avatar--one-letter"
     data-testid="avatar"
-    style="flex-basis: 15px; font-size: 7.5px; height: 15px; line-height: 15px; width: 15px;"
     title="other-user"
   >
     <div
@@ -200,7 +43,7 @@ exports[`MessageStatus theme v2 renders default read UI for the last message 1`]
 </span>
 `;
 
-exports[`MessageStatus theme v2 renders default sending UI for not the last message 1`] = `
+exports[`MessageStatus renders default sending UI for not the last message 1`] = `
 <span
   class="str-chat__message-simple-status str-chat__message-status"
   data-testid="message-status-sending"
@@ -248,7 +91,7 @@ exports[`MessageStatus theme v2 renders default sending UI for not the last mess
 </span>
 `;
 
-exports[`MessageStatus theme v2 renders default sending UI for the last message 1`] = `
+exports[`MessageStatus renders default sending UI for the last message 1`] = `
 <span
   class="str-chat__message-simple-status str-chat__message-status"
   data-testid="message-status-sending"