fix: Hide deleted messages on widget side (#2614)

app/javascript/widget/mixins/messageMixin.js

@@ -0,0 +1,13 @@
+export default {
+  computed: {
+    messageContentAttributes() {
+      const { content_attributes: attribute = {} } = this.message;
+      return attribute;
+    },
+    hasAttachments() {
+      return !!(
+        this.message.attachments && this.message.attachments.length > 0
+      );
+    },
+  },
+};

app/javascript/widget/mixins/specs/messageFixture.js

@@ -0,0 +1,27 @@
+export default {
+  nonDeletedMessage: {
+    content: 'Hey',
+    content_attributes: {},
+    attachments: [
+      {
+        data_url: 'https://assets.com/kseb-bill.pdf',
+        extension: null,
+        file_type: 'file',
+      },
+    ],
+    content_type: 'text',
+    conversation_id: 1,
+    created_at: 1626111625,
+    id: 1,
+    message_type: 0,
+  },
+  deletedMessage: {
+    content: 'This message was deleted',
+    content_attributes: { deleted: true },
+    content_type: null,
+    conversation_id: 1,
+    created_at: 1626111634,
+    id: 2,
+    message_type: 1,
+  },
+};

app/javascript/widget/mixins/specs/messageMixin.spec.js

@@ -0,0 +1,37 @@
+import { shallowMount } from '@vue/test-utils';
+import messageMixin from '../messageMixin';
+import messages from './messageFixture';
+
+describe('messageMixin', () => {
+  let Component = {
+    render() {},
+    title: 'TestComponent',
+    mixins: [messageMixin],
+  };
+
+  it('deleted messages', async () => {
+    const wrapper = shallowMount(Component, {
+      data() {
+        return {
+          message: messages.deletedMessage,
+        };
+      },
+    });
+    expect(wrapper.vm.messageContentAttributes).toEqual({
+      deleted: true,
+    });
+    expect(wrapper.vm.hasAttachments).toBe(false);
+  });
+  it('non-deleted messages', async () => {
+    const wrapper = shallowMount(Component, {
+      data() {
+        return {
+          message: messages.nonDeletedMessage,
+        };
+      },
+    });
+    expect(wrapper.vm.deletedMessage).toBe(undefined);
+    expect(wrapper.vm.messageContentAttributes).toEqual({});
+    expect(wrapper.vm.hasAttachments).toBe(true);
+  });
+});