Files
chatwoot/app/javascript/shared/mixins/specs/automationMixin.spec.js
Fayaz Ahmed ce8e1ec93d chore: Migrate all instances of old vuelidate to new v2 syntax [CW-3274] (#9623)
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>
2024-07-30 15:08:22 +05:30

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
);
});
});