Removes all the old vuelidate syntax and replaced it with the new `useValidate` composable and the `v$` helper. | Component | Path | Migrated | Tested | |------------------------------------|--------------------------------------------------------------|-----------------------------------------------|--------| | Login page | app/javascript/v3/views/login/Index.vue | ✅ | ✅ | | Custom Attributes settings page | app/javascript/dashboard/components/CustomAttribute.vue | ✅ | ✅ | | Account settings page | app/javascript/dashboard/routes/dashboard/settings/account/Index.vue | ✅ | ✅ | | Add Account Modal | app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue | ✅ | ✅ | | AICTA Modal | app/javascript/dashboard/components/widgets/AICTAModal.vue | ✅ | ✅ | | Conversation Advanced Filters | app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue | deprecated `$each` prop in validations object | | | Email Transript Modal | app/javascript/dashboard/components/widgets/conversation/EmailTranscriptModal.vue | ✅ | ✅ | | Linear Create Issue | app/javascript/dashboard/components/widgets/conversation/linear/CreateIssue.vue | ✅ | ✅ | | Template Parser | app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplateParser.vue | ✅ | | | Delete Confirmation Modal | app/javascript/dashboard/components/widgets/modal/ConfirmDeleteModal.vue | ✅ | ✅ | | Add Custom Attribute | app/javascript/dashboard/modules/contact/components/AddCustomAttribute.vue | ✅ | ✅ | | Merge Contacts | app/javascript/dashboard/modules/contact/components/MergeContact.vue | ✅ | ✅ | | Contacts Advanced Filters | app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue | deprecated `$each` prop in validations object | | | Contact Form | app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue | ✅ | ✅ | | Conversation Form | app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue | ✅ | ✅ | | Add Custom Views | app/javascript/dashboard/routes/dashboard/customviews/AddCustomViews.vue | ✅ | ✅ | | Add Locale | app/javascript/dashboard/routes/dashboard/helpcenter/components/AddLocale.vue | ✅ | ✅ | | Portal Settings Basic Form | /app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue | ✅ | ✅ | | Portal Settings Customization Form | /app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm.vue | ✅ | ✅ | | Add Category | app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/AddCategory.vue | ✅ | ✅ | | Edit Category | app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/EditCategory.vue | ✅ | ✅ | | CSML Bot Editor | app/javascript/dashboard/routes/dashboard/settings/agentBots/components/CSMLBotEditor.vue | ✅ | ✅ | | Add Agent | app/javascript/dashboard/routes/dashboard/settings/agents/AddAgent.vue | ✅ | ✅ | | Edit Agent | app/javascript/dashboard/routes/dashboard/settings/agents/EditAgent.vue | ✅ | ✅ | | Add Attribute | app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue | ✅ | ✅ | | Edit Attribute | app/javascript/dashboard/routes/dashboard/settings/attributes/EditAttribute.vue | ✅ | ✅ | | Add Campaign | app/javascript/dashboard/routes/dashboard/settings/campaigns/AddCampaign.vue | ✅ | ✅ | | Edit Campaign | app/javascript/dashboard/routes/dashboard/settings/campaigns/EditCampaign.vue | ✅ | ✅ | | Add Canned | app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue | ✅ | ✅ | | Edit Canned | app/javascript/dashboard/routes/dashboard/settings/canned/EditCanned.vue | ✅ | ✅ | | IMAP Settings | app/javascript/dashboard/routes/dashboard/settings/inbox/ImapSettings.vue | ✅ | ✅ | | SMTP Settings | app/javascript/dashboard/routes/dashboard/settings/inbox/SmtpSettings.vue | ✅ | ✅ | | Widget Builder | app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue | ✅ | ✅ | | 360 Dialog Whatsapp | app/javascript/dashboard/routes/dashboard/settings/inbox/channels/360DialogWhatsapp.vue | ✅ | ✅ | | Inbox API settings | app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Api.vue | ✅ | ✅ | | SMS Bandwidth settings | app/javascript/dashboard/routes/dashboard/settings/inbox/channels/BandwidthSms.vue | ✅ | ✅ | | Cloud Whatsapp Settings | app/javascript/dashboard/routes/dashboard/settings/inbox/channels/CloudWhatsapp.vue | ✅ | ✅ | | Facebook Settings | app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue | ✅ | ✅ | | Line Settings | app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Line.vue | ✅ | ✅ | | Telegram Settings | app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Telegram.vue | ✅ | ✅ | | Twillio Settings | app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twilio.vue | ✅ | ✅ | | Forward To option settings | app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/ForwardToOption.vue | ✅ | ✅ | | Microsoft settings | app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/Microsoft.vue | ✅ | ✅ | | Collaborators page | app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CollaboratorsPage.vue | ✅ | ✅ | | Configuration Page | app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue | ✅ | ✅ | | Dashboard App Modal Settings | app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/DashboardAppModal.vue | ✅ | ✅ | | Settings - Webhook Form | app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookForm.vue | ✅ | ✅ | | Macro Form | app/javascript/dashboard/routes/dashboard/settings/macros/MacroForm.vue | deprecated `$each` prop in validations object | | | Change Password | app/javascript/dashboard/routes/dashboard/settings/profile/ChangePassword.vue | ✅ | ✅ | | settings - User Basic Details | app/javascript/dashboard/routes/dashboard/settings/profile/UserBasicDetails.vue | ✅ | ✅ | | Password Edit | app/javascript/v3/views/auth/password/Edit.vue | ✅ | ✅ | | Password Reset form | app/javascript/v3/views/auth/reset/password/Index.vue | ✅ | ✅ | | Signup form | app/javascript/v3/views/auth/signup/components/Signup/Form.vue | ✅ | ✅ | | Login form | app/javascript/v3/views/login/Index.vue | ✅ | ✅ | | Custom Attributes | app/javascript/dashboard/components/CustomAttribute.vue | ✅ | ✅ | | Reply Email Head | app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue | ✅ | ✅ | | Methods Mixin | app/javascript/dashboard/mixins/automations/methodsMixin.js | ✅ | ✅ | | Validations mixin | app/javascript/dashboard/routes/dashboard/settings/labels/validationMixin.js | ✅ | ✅ | | SLA Form | app/javascript/dashboard/routes/dashboard/settings/sla/SlaForm.vue | ✅ | ✅ | | SLA Time Input | app/javascript/dashboard/routes/dashboard/settings/sla/SlaTimeInput.vue | ✅ | ✅ | | SLA Validation Mixin | app/javascript/dashboard/routes/dashboard/settings/sla/validationMixin.js | ✅ | ✅ | | Team Form | app/javascript/dashboard/routes/dashboard/settings/teams/TeamForm.vue | ✅ | ✅ | | Add Agents | app/javascript/dashboard/routes/dashboard/settings/teams/Create/AddAgents.vue | ✅ | ✅ | | Edit Agents | app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditAgents.vue | ✅ | ✅ | --------- Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com> Co-authored-by: Shivam Mishra <scm.mymail@gmail.com> Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com> Co-authored-by: Pranav <pranav@chatwoot.com>
451 lines
12 KiB
JavaScript
451 lines
12 KiB
JavaScript
import methodsMixin from '../../../dashboard/mixins/automations/methodsMixin';
|
|
import {
|
|
automation,
|
|
customAttributes,
|
|
agents,
|
|
booleanFilterOptions,
|
|
teams,
|
|
labels,
|
|
statusFilterOptions,
|
|
campaigns,
|
|
contacts,
|
|
inboxes,
|
|
languages,
|
|
countries,
|
|
slaPolicies,
|
|
MESSAGE_CONDITION_VALUES,
|
|
automationToSubmit,
|
|
savedAutomation,
|
|
} from './automationFixtures';
|
|
import {
|
|
AUTOMATIONS,
|
|
AUTOMATION_ACTION_TYPES,
|
|
} from '../../../dashboard/routes/dashboard/settings/automation/constants.js';
|
|
|
|
import { createWrapper, createLocalVue } from '@vue/test-utils';
|
|
import Vue from 'vue';
|
|
import Vuex from 'vuex';
|
|
const localVue = createLocalVue();
|
|
localVue.use(Vuex);
|
|
|
|
// Vuelidate required to test submit method
|
|
|
|
const createComponent = (
|
|
mixins,
|
|
data,
|
|
// eslint-disable-next-line default-param-last
|
|
computed = {},
|
|
// eslint-disable-next-line default-param-last
|
|
methods = {},
|
|
validations
|
|
) => {
|
|
const Component = {
|
|
render() {},
|
|
mixins,
|
|
data,
|
|
computed,
|
|
methods,
|
|
validations,
|
|
};
|
|
const Constructor = Vue.extend(Component);
|
|
const vm = new Constructor().$mount();
|
|
return createWrapper(vm);
|
|
};
|
|
|
|
const generateComputedProperties = () => {
|
|
return {
|
|
statusFilterOptions() {
|
|
return statusFilterOptions;
|
|
},
|
|
agents() {
|
|
return agents;
|
|
},
|
|
customAttributes() {
|
|
return customAttributes;
|
|
},
|
|
labels() {
|
|
return labels;
|
|
},
|
|
teams() {
|
|
return teams;
|
|
},
|
|
booleanFilterOptions() {
|
|
return booleanFilterOptions;
|
|
},
|
|
campaigns() {
|
|
return campaigns;
|
|
},
|
|
contacts() {
|
|
return contacts;
|
|
},
|
|
inboxes() {
|
|
return inboxes;
|
|
},
|
|
languages() {
|
|
return languages;
|
|
},
|
|
countries() {
|
|
return countries;
|
|
},
|
|
slaPolicies() {
|
|
return slaPolicies;
|
|
},
|
|
MESSAGE_CONDITION_VALUES() {
|
|
return MESSAGE_CONDITION_VALUES;
|
|
},
|
|
};
|
|
};
|
|
|
|
describe('automationMethodsMixin', () => {
|
|
it('getFileName returns the correct file name', () => {
|
|
const data = () => {
|
|
return {};
|
|
};
|
|
const wrapper = createComponent([methodsMixin], data);
|
|
expect(
|
|
wrapper.vm.getFileName(automation.actions[0], automation.files)
|
|
).toEqual(automation.files[0].filename);
|
|
});
|
|
|
|
it('getAttributes returns all attributes', () => {
|
|
const data = () => {
|
|
return {
|
|
automationTypes: AUTOMATIONS,
|
|
};
|
|
};
|
|
const wrapper = createComponent([methodsMixin], data);
|
|
expect(wrapper.vm.getAttributes('conversation_created')).toEqual(
|
|
AUTOMATIONS.conversation_created.conditions
|
|
);
|
|
});
|
|
|
|
it('getAttributes returns all respective attributes', () => {
|
|
const data = () => {
|
|
return {
|
|
allCustomAttributes: customAttributes,
|
|
automationTypes: AUTOMATIONS,
|
|
automation,
|
|
};
|
|
};
|
|
const wrapper = createComponent([methodsMixin], data);
|
|
expect(wrapper.vm.getInputType('status')).toEqual('multi_select');
|
|
expect(wrapper.vm.getInputType('my_list')).toEqual('search_select');
|
|
});
|
|
|
|
it('getOperators returns all respective operators', () => {
|
|
const data = () => {
|
|
return {
|
|
allCustomAttributes: customAttributes,
|
|
automationTypes: AUTOMATIONS,
|
|
automation,
|
|
};
|
|
};
|
|
const wrapper = createComponent([methodsMixin], data);
|
|
expect(wrapper.vm.getOperators('status')).toEqual(
|
|
AUTOMATIONS.conversation_created.conditions[0].filterOperators
|
|
);
|
|
});
|
|
|
|
it('getAutomationType returns the correct automationType', () => {
|
|
const data = () => {
|
|
return {
|
|
automationTypes: AUTOMATIONS,
|
|
automation,
|
|
};
|
|
};
|
|
const wrapper = createComponent([methodsMixin], data);
|
|
expect(wrapper.vm.getAutomationType('status')).toEqual(
|
|
AUTOMATIONS[automation.event_name].conditions[0]
|
|
);
|
|
});
|
|
|
|
it('getConditionDropdownValues returns respective condition dropdown values', () => {
|
|
const computed = generateComputedProperties();
|
|
const data = () => {
|
|
return {
|
|
allCustomAttributes: customAttributes,
|
|
};
|
|
};
|
|
const wrapper = createComponent([methodsMixin], data, computed);
|
|
expect(wrapper.vm.getConditionDropdownValues('status')).toEqual(
|
|
statusFilterOptions
|
|
);
|
|
expect(wrapper.vm.getConditionDropdownValues('team_id')).toEqual(teams);
|
|
expect(wrapper.vm.getConditionDropdownValues('assignee_id')).toEqual(
|
|
agents
|
|
);
|
|
expect(wrapper.vm.getConditionDropdownValues('contact')).toEqual(contacts);
|
|
expect(wrapper.vm.getConditionDropdownValues('inbox_id')).toEqual(inboxes);
|
|
expect(wrapper.vm.getConditionDropdownValues('campaigns')).toEqual(
|
|
campaigns
|
|
);
|
|
expect(wrapper.vm.getConditionDropdownValues('browser_language')).toEqual(
|
|
languages
|
|
);
|
|
expect(wrapper.vm.getConditionDropdownValues('country_code')).toEqual(
|
|
countries
|
|
);
|
|
expect(wrapper.vm.getConditionDropdownValues('message_type')).toEqual(
|
|
MESSAGE_CONDITION_VALUES
|
|
);
|
|
});
|
|
|
|
it('appendNewCondition appends a new condition to the automation data property', () => {
|
|
const condition = {
|
|
attribute_key: 'status',
|
|
filter_operator: 'equal_to',
|
|
values: '',
|
|
query_operator: 'and',
|
|
custom_attribute_type: '',
|
|
};
|
|
const data = () => {
|
|
return {
|
|
automation,
|
|
};
|
|
};
|
|
const wrapper = createComponent([methodsMixin], data);
|
|
wrapper.vm.appendNewCondition();
|
|
expect(automation.conditions[automation.conditions.length - 1]).toEqual(
|
|
condition
|
|
);
|
|
});
|
|
|
|
it('appendNewAction appends a new condition to the automation data property', () => {
|
|
const action = {
|
|
action_name: 'assign_agent',
|
|
action_params: [],
|
|
};
|
|
const data = () => {
|
|
return {
|
|
automation,
|
|
};
|
|
};
|
|
const wrapper = createComponent([methodsMixin], data);
|
|
wrapper.vm.appendNewAction();
|
|
expect(automation.actions[automation.actions.length - 1]).toEqual(action);
|
|
});
|
|
|
|
it('removeFilter removes the given condition in the automation', () => {
|
|
const data = () => {
|
|
return {
|
|
automation,
|
|
};
|
|
};
|
|
const wrapper = createComponent([methodsMixin], data);
|
|
wrapper.vm.removeFilter(0);
|
|
expect(automation.conditions.length).toEqual(1);
|
|
});
|
|
|
|
it('removeAction removes the given action in the automation', () => {
|
|
const data = () => {
|
|
return {
|
|
automation,
|
|
};
|
|
};
|
|
const wrapper = createComponent([methodsMixin], data);
|
|
wrapper.vm.removeAction(0);
|
|
expect(automation.actions.length).toEqual(1);
|
|
});
|
|
|
|
it('resetFilter resets the current automation conditions', () => {
|
|
const data = () => {
|
|
return {
|
|
automation: automationToSubmit,
|
|
automationTypes: AUTOMATIONS,
|
|
};
|
|
};
|
|
const conditionAfterReset = {
|
|
attribute_key: 'status',
|
|
filter_operator: 'equal_to',
|
|
values: '',
|
|
query_operator: 'and',
|
|
custom_attribute_type: '',
|
|
};
|
|
const wrapper = createComponent([methodsMixin], data);
|
|
wrapper.vm.resetFilter(0, automationToSubmit.conditions[0]);
|
|
expect(automation.conditions[0]).toEqual(conditionAfterReset);
|
|
});
|
|
|
|
it('showUserInput returns boolean value based on the operator type', () => {
|
|
const data = () => {
|
|
return {};
|
|
};
|
|
const wrapper = createComponent([methodsMixin], data);
|
|
expect(wrapper.vm.showUserInput('is_present')).toBeFalsy();
|
|
expect(wrapper.vm.showUserInput('is_not_present')).toBeFalsy();
|
|
expect(wrapper.vm.showUserInput('equal_to')).toBeTruthy();
|
|
expect(wrapper.vm.showUserInput('not_equal_to')).toBeTruthy();
|
|
});
|
|
|
|
it('showActionInput returns boolean value based on the action type', () => {
|
|
const data = () => {
|
|
return {
|
|
automationActionTypes: AUTOMATION_ACTION_TYPES,
|
|
};
|
|
};
|
|
const wrapper = createComponent([methodsMixin], data);
|
|
expect(wrapper.vm.showActionInput('send_email_to_team')).toBeFalsy();
|
|
expect(wrapper.vm.showActionInput('send_message')).toBeFalsy();
|
|
expect(wrapper.vm.showActionInput('send_webhook_event')).toBeTruthy();
|
|
expect(wrapper.vm.showActionInput('resolve_conversation')).toBeFalsy();
|
|
expect(wrapper.vm.showActionInput('add_label')).toBeTruthy();
|
|
});
|
|
|
|
it('resetAction resets the action to default state', () => {
|
|
const data = () => {
|
|
return {
|
|
automation,
|
|
};
|
|
};
|
|
const wrapper = createComponent([methodsMixin], data);
|
|
wrapper.vm.resetAction(0);
|
|
expect(automation.actions[0].action_params).toEqual([]);
|
|
});
|
|
|
|
it('manifestConditions resets the action to default state', () => {
|
|
const data = () => {
|
|
return {
|
|
automation: {},
|
|
allCustomAttributes: customAttributes,
|
|
automationTypes: AUTOMATIONS,
|
|
};
|
|
};
|
|
const methods = {
|
|
getConditionDropdownValues() {
|
|
return statusFilterOptions;
|
|
},
|
|
};
|
|
|
|
const manifestedConditions = [
|
|
{
|
|
values: [
|
|
{
|
|
id: 'open',
|
|
name: 'Open',
|
|
},
|
|
],
|
|
attribute_key: 'status',
|
|
filter_operator: 'equal_to',
|
|
query_operator: 'and',
|
|
},
|
|
];
|
|
const wrapper = createComponent([methodsMixin], data, {}, methods);
|
|
expect(wrapper.vm.manifestConditions(savedAutomation)).toEqual(
|
|
manifestedConditions
|
|
);
|
|
});
|
|
|
|
it('generateActionsArray return the manifested actions array', () => {
|
|
const data = () => {
|
|
return {
|
|
automationActionTypes: AUTOMATION_ACTION_TYPES,
|
|
};
|
|
};
|
|
const computed = {
|
|
agents() {
|
|
return agents;
|
|
},
|
|
labels() {
|
|
return labels;
|
|
},
|
|
teams() {
|
|
return teams;
|
|
},
|
|
};
|
|
|
|
const methods = {
|
|
getActionDropdownValues() {
|
|
return [
|
|
{
|
|
id: 2,
|
|
name: 'testlabel',
|
|
},
|
|
{
|
|
id: 1,
|
|
name: 'snoozes',
|
|
},
|
|
];
|
|
},
|
|
};
|
|
const testAction = {
|
|
action_name: 'add_label',
|
|
action_params: [2],
|
|
};
|
|
|
|
const expectedActionArray = [
|
|
{
|
|
id: 2,
|
|
name: 'testlabel',
|
|
},
|
|
];
|
|
|
|
const wrapper = createComponent([methodsMixin], data, computed, methods);
|
|
expect(wrapper.vm.generateActionsArray(testAction)).toEqual(
|
|
expectedActionArray
|
|
);
|
|
});
|
|
|
|
it('manifestActions manifest the received action and generate the correct array', () => {
|
|
const data = () => {
|
|
return {
|
|
automation: {},
|
|
allCustomAttributes: customAttributes,
|
|
automationTypes: AUTOMATIONS,
|
|
};
|
|
};
|
|
const methods = {
|
|
generateActionsArray() {
|
|
return [
|
|
{
|
|
id: 2,
|
|
name: 'testlabel',
|
|
},
|
|
];
|
|
},
|
|
};
|
|
const expectedActions = [
|
|
{
|
|
action_name: 'add_label',
|
|
action_params: [
|
|
{
|
|
id: 2,
|
|
name: 'testlabel',
|
|
},
|
|
],
|
|
},
|
|
];
|
|
const wrapper = createComponent([methodsMixin], data, {}, methods);
|
|
expect(wrapper.vm.manifestActions(savedAutomation)).toEqual(
|
|
expectedActions
|
|
);
|
|
});
|
|
|
|
it('getActionDropdownValues returns Action dropdown Values', () => {
|
|
const data = () => {
|
|
return {};
|
|
};
|
|
const computed = {
|
|
agents() {
|
|
return agents;
|
|
},
|
|
labels() {
|
|
return labels;
|
|
},
|
|
teams() {
|
|
return teams;
|
|
},
|
|
slaPolicies() {
|
|
return slaPolicies;
|
|
},
|
|
};
|
|
const expectedActionDropdownValues = [
|
|
{ id: 'testlabel', name: 'testlabel' },
|
|
{ id: 'snoozes', name: 'snoozes' },
|
|
];
|
|
const wrapper = createComponent([methodsMixin], data, computed);
|
|
expect(wrapper.vm.getActionDropdownValues('add_label')).toEqual(
|
|
expectedActionDropdownValues
|
|
);
|
|
});
|
|
});
|