gochat/frontend/app/javascript/widget/components/specs/agentName.spec.js

import { mount } from '@vue/test-utils';
import VueDOMPurifyHTML from 'vue-dompurify-html';
import visitorPayload from '../../../../../testdata/visitor_ws_payload.json';
import AgentMessage from '../AgentMessage.vue';
import UnreadMessage from '../UnreadMessage.vue';

const context = {
  channelConfig: {
    websiteName: 'GoChat',
    enabledFeatures: [],
    avatarUrl: '',
  },
  useInboxAvatarForBot: false,
  $t: key => key,
};

window.chatwootWebChannel = context.channelConfig;

const mountAgentMessage = message =>
  mount(AgentMessage, {
    props: {
      message: { ...message, showAvatar: true },
    },
    global: {
      plugins: [VueDOMPurifyHTML],
      stubs: {
        AgentMessageBubble: { template: '<div />' },
        Avatar: { template: '<div />' },
        FileBubble: { template: '<div />' },
        ImageBubble: { template: '<div />' },
        MessageReplyButton: { template: '<div />' },
        ReplyToChip: { template: '<div />' },
        UserMessage: { template: '<div />' },
        VideoBubble: { template: '<div />' },
      },
    },
  });

describe('widget agent name', () => {
  it.each([
    [
      'available_name',
      {
        sender: { available_name: 'Available', name: 'Name' },
        additional_attributes: { sender_name: 'Visitor service' },
      },
      'Available',
    ],
    [
      'name',
      {
        sender: { name: 'Name' },
        additional_attributes: { sender_name: 'Visitor service' },
      },
      'Name',
    ],
    [
      'message sender_name',
      { additional_attributes: { sender_name: 'Visitor service' } },
      'Visitor service',
    ],
    ['inbox name', {}, 'GoChat'],
  ])('conversation message prefers %s', (_source, message, expected) => {
    expect(AgentMessage.computed.agentName.call({ ...context, message })).toBe(
      expected
    );
  });

  it('returns an empty name when the sanitized inbox name is unavailable', () => {
    expect(
      AgentMessage.computed.agentName.call({
        ...context,
        channelConfig: { ...context.channelConfig, websiteName: '' },
        message: {},
      })
    ).toBe('');
  });

  it.each([
    [
      'available_name',
      { available_name: 'Available', name: 'Name' },
      'Available',
    ],
    ['name', { name: 'Name' }, 'Name'],
    ['inbox name', {}, 'GoChat'],
  ])('unread message prefers %s', (_source, sender, expected) => {
    expect(
      UnreadMessage.computed.agentName.call({
        ...context,
        sender,
        isSenderExist: UnreadMessage.methods.isSenderExist,
      })
    ).toBe(expected);
  });

  it('returns an empty unread name when the inbox name is unavailable', () => {
    expect(
      UnreadMessage.computed.agentName.call({
        ...context,
        channelConfig: { ...context.channelConfig, websiteName: '' },
        sender: {},
        isSenderExist: UnreadMessage.methods.isSenderExist,
      })
    ).toBe('');
  });

  it('mounts the visitor WS output with the inbox name', () => {
    const wrapper = mountAgentMessage(visitorPayload.data);

    expect(wrapper.get('.agent-name').text()).toBe('GoChat');
  });
});