@webitel/ui-sdk 26.8.55 → 26.8.57

package/src/modules/UploadCsvPopup/composable/__tests__/useUploadCsv.spec.js

@@ -0,0 +1,393 @@
+import { shallowMount } from '@vue/test-utils';
+import { ref } from 'vue';
+
+import HandlingCSVMode from '../../types/WtUploadCSVHandlingMode.enum';
+import useUploadCsv from '../useUploadCsv';
+
+const Component = {
+	props: {
+		file: {
+			default: null,
+		},
+		mappingFields: {
+			type: Array,
+			default: () => [],
+		},
+		addBulkItems: {
+			type: Function,
+			default: undefined,
+		},
+		handlingMode: {
+			type: String,
+			default: HandlingCSVMode.PROCESS,
+		},
+		fileUploadHandler: {
+			type: Function,
+			default: undefined,
+		},
+	},
+	emits: [
+		'changeMappingFields',
+		'save',
+		'close',
+	],
+	setup(props, { emit }) {
+		const skipHeaders = ref(true);
+		const separator = ref(',');
+
+		return {
+			skipHeaders,
+			separator,
+			...useUploadCsv({
+				props,
+				emit,
+				skipHeaders,
+				separator,
+			}),
+		};
+	},
+	render: () => null,
+};
+
+const makeFile = (content) => {
+	const blob = new Blob(
+		[
+			content,
+		],
+		{
+			type: 'text/csv',
+		},
+	);
+
+	return new File(
+		[
+			blob,
+		],
+		'test.csv',
+		{
+			type: 'text/csv',
+		},
+	);
+};
+
+// the composable reads the file through a watcher, so give FileReader a tick
+const mountWithFile = async (csv, props = {}) => {
+	const wrapper = shallowMount(Component, {
+		props,
+	});
+
+	await wrapper.setProps({
+		file: makeFile(csv),
+	});
+
+	await new Promise((resolve) => {
+		setTimeout(resolve, 100);
+	});
+
+	return wrapper;
+};
+
+describe('useUploadCsv', () => {
+	it('mounts a component with the composable', () => {
+		const wrapper = shallowMount(Component, {
+			props: {
+				file: {},
+			},
+		});
+
+		expect(wrapper.exists()).toBe(true);
+	});
+
+	it('parses and saves simple csv', async () => {
+		const csv = `
+      col1,col2
+      John,30
+      Jane,25
+      `.replaceAll(/ +?/g, ''); // replace all whitespaces, but not newlines
+
+		const saveCallback = vi.fn();
+
+		const wrapper = await mountWithFile(csv, {
+			addBulkItems: saveCallback,
+			mappingFields: [
+				{
+					name: 'name',
+					csv: 'col1',
+				},
+				{
+					name: 'age',
+					csv: 'col2',
+				},
+			],
+		});
+
+		await wrapper.vm.processCSV();
+
+		expect(saveCallback).toHaveBeenCalledWith([
+			{
+				name: 'John',
+				age: '30',
+			},
+			{
+				name: 'Jane',
+				age: '25',
+			},
+		]);
+	});
+
+	it('parsing of csv with empty required throws error', async () => {
+		const csv = `
+      col1,col2
+      John,
+      Jane,25
+      `.replaceAll(/ +?/g, ''); // replace all whitespaces, but not newlines
+
+		const saveCallback = vi.fn();
+
+		const wrapper = await mountWithFile(csv, {
+			addBulkItems: saveCallback,
+			mappingFields: [
+				{
+					name: 'name',
+					csv: 'col1',
+					required: true,
+				},
+				{
+					name: 'age',
+					csv: 'col2',
+					required: true,
+				},
+			],
+		});
+
+		await expect(wrapper.vm.processCSV()).rejects.toBeTruthy();
+		expect(saveCallback).not.toHaveBeenCalled();
+	});
+
+	it('parsing of csv with multiple columns selected to required field', async () => {
+		const csv = `
+      col1,col2,col3
+      John,,30
+      Jane,25,
+      `.replaceAll(/ +?/g, ''); // replace all whitespaces, but not newlines
+
+		const saveCallback = vi.fn();
+
+		const wrapper = await mountWithFile(csv, {
+			addBulkItems: saveCallback,
+			mappingFields: [
+				{
+					name: 'name',
+					csv: 'col1',
+					required: true,
+				},
+				{
+					name: 'age',
+					csv: [
+						'col2',
+						'col3',
+					],
+					required: true,
+				},
+			],
+		});
+
+		await wrapper.vm.processCSV();
+
+		expect(saveCallback).toHaveBeenCalledWith([
+			{
+				name: 'John',
+				age: [
+					'',
+					'30',
+				],
+			},
+			{
+				name: 'Jane',
+				age: [
+					'25',
+					'',
+				],
+			},
+		]);
+	});
+
+	/*
+	WTEL-10058: guards the admin data that the parser never touched — queue
+	member variables, blacklist descriptions, device passwords. Type casting
+	lives in CRM now, so everything reaching a consumer is a string.
+	 */
+	it('keeps plain values as strings, so text columns are not coerced', async () => {
+		const csv = `
+      col1,col2
+      true,"[1,2]"
+      `.replaceAll(/ +?/g, ''); // replace all whitespaces, but not newlines
+
+		const saveCallback = vi.fn();
+
+		const wrapper = await mountWithFile(csv, {
+			addBulkItems: saveCallback,
+			mappingFields: [
+				{
+					name: 'flag',
+					csv: 'col1',
+				},
+				{
+					name: 'list',
+					csv: 'col2',
+				},
+			],
+		});
+
+		await wrapper.vm.processCSV();
+
+		expect(saveCallback).toHaveBeenCalledWith([
+			{
+				flag: 'true',
+				list: '[1,2]',
+			},
+		]);
+	});
+
+	it('uploads the whole file in the upload handling mode', async () => {
+		const csv = `
+      col1
+      John
+      `.replaceAll(/ +?/g, ''); // replace all whitespaces, but not newlines
+
+		const saveCallback = vi.fn();
+		const fileUploadHandler = vi.fn();
+
+		const wrapper = await mountWithFile(csv, {
+			handlingMode: HandlingCSVMode.UPLOAD,
+			addBulkItems: saveCallback,
+			fileUploadHandler,
+			mappingFields: [
+				{
+					name: 'name',
+					csv: 'col1',
+				},
+			],
+		});
+
+		await wrapper.vm.processCSV();
+
+		expect(fileUploadHandler).toHaveBeenCalled();
+		expect(saveCallback).not.toHaveBeenCalled();
+	});
+
+	/*
+	WTEL-10058: the popup owns the separator, so a consumer that ships the raw
+	file to the backend has no other way to learn which one the user picked.
+	 */
+	it('hands the chosen separator to the file upload handler', async () => {
+		const csv = 'col1;col2\nJohn;30';
+
+		const fileUploadHandler = vi.fn();
+
+		const wrapper = await mountWithFile(csv, {
+			handlingMode: HandlingCSVMode.UPLOAD,
+			fileUploadHandler,
+			mappingFields: [
+				{
+					name: 'name',
+					csv: 'col1',
+				},
+			],
+		});
+
+		wrapper.vm.separator = ';';
+		await wrapper.vm.processCSV();
+
+		expect(fileUploadHandler).toHaveBeenCalledWith({
+			separator: ';',
+		});
+	});
+
+	it('emits save and closes on a successful handleSave', async () => {
+		const csv = `
+      col1
+      John
+      `.replaceAll(/ +?/g, ''); // replace all whitespaces, but not newlines
+
+		const wrapper = await mountWithFile(csv, {
+			addBulkItems: vi.fn(),
+			mappingFields: [
+				{
+					name: 'name',
+					csv: 'col1',
+				},
+			],
+		});
+
+		await wrapper.vm.handleSave();
+
+		expect(wrapper.emitted('save')).toHaveLength(1);
+		expect(wrapper.emitted('close')).toHaveLength(1);
+	});
+
+	it('does not close the popup when saving fails', async () => {
+		const csv = `
+      col1
+      John
+      `.replaceAll(/ +?/g, ''); // replace all whitespaces, but not newlines
+
+		const wrapper = await mountWithFile(csv, {
+			addBulkItems: vi.fn(() => Promise.reject(new Error('nope'))),
+			mappingFields: [
+				{
+					name: 'name',
+					csv: 'col1',
+				},
+			],
+		});
+
+		await expect(wrapper.vm.processCSV()).rejects.toThrow();
+		expect(wrapper.emitted('close')).toBeUndefined();
+	});
+
+	it('resets the mappings when the parse options change', async () => {
+		const csv = `
+      col1,col2
+      John,30
+      `.replaceAll(/ +?/g, ''); // replace all whitespaces, but not newlines
+
+		const wrapper = await mountWithFile(csv, {
+			mappingFields: [
+				{
+					name: 'name',
+					csv: 'col1',
+				},
+				{
+					name: 'tags',
+					csv: [
+						'col2',
+					],
+					multiple: true,
+				},
+			],
+		});
+
+		wrapper.vm.separator = ';';
+
+		// the parse options watcher is debounced by 1s
+		await new Promise((resolve) => {
+			setTimeout(resolve, 1200);
+		});
+
+		const emitted = wrapper.emitted('changeMappingFields');
+
+		expect(emitted).toBeTruthy();
+		expect(emitted.at(-1)[0]).toEqual([
+			{
+				name: 'name',
+				csv: '',
+			},
+			{
+				name: 'tags',
+				csv: [],
+				multiple: true,
+			},
+		]);
+	});
+});

package/src/modules/UploadCsvPopup/composable/useUploadCsv.ts

@@ -1,6 +1,11 @@
 import { computed, type Ref, ref, watch } from 'vue';
 
-import { debounce, isEmpty } from '../../../scripts';
+import { useEventBus } from '../../../composables';
+import {
+	debounce,
+	eventBus as defaultEventBus,
+	isEmpty,
+} from '../../../scripts';
 import normalizeCSVData, {
 	type CsvDataRow,
 	type CsvMappingField,
@@ -17,12 +22,20 @@ import HandlingCSVMode from '../types/WtUploadCSVHandlingMode.enum';
  * @param {import('vue').Ref<boolean>} params.skipHeaders
  * @param {import('vue').Ref<string>} params.separator
  */
+
+export interface UploadCsvParseSettings {
+	separator: string;
+}
+
 export interface UseUploadCsvProps {
 	file?: File | null;
 	mappingFields?: CsvMappingField[];
 	addBulkItems?: (items: unknown[]) => unknown | Promise<unknown>;
-	handlingMode?: string;
-	fileUploadHandler?: () => unknown | Promise<unknown>;
+	handlingMode?: HandlingCSVMode;
+	fileUploadHandler?: (
+		settings: UploadCsvParseSettings,
+	) => unknown | Promise<unknown>;
+	charset?: string;
 }
 
 interface UseUploadCsvParams {
@@ -39,11 +52,12 @@ const useUploadCsv = ({
 	skipHeaders,
 	separator,
 }: UseUploadCsvParams) => {
+	const eventBus = useEventBus() ?? defaultEventBus;
+
 	const isReadingFile = ref(false);
 	const isParsingCSV = ref(false);
 	const parsedFile = ref<unknown>(null);
 	const isParsingPreview = ref(false);
-	const parseErrorStackTrace = ref<unknown>('');
 	const csvPreview = ref<unknown[]>([
 		[],
 	]);
@@ -101,15 +115,21 @@ const useUploadCsv = ({
 		),
 	);
 
+	function notifyError(err: unknown) {
+		eventBus.$emit('notification', {
+			type: 'error',
+			text: err instanceof Error ? err.message : String(err),
+		});
+	}
+
 	async function createCSVPreview(file = parsedFile.value) {
 		try {
-			parseErrorStackTrace.value = '';
 			csvPreview.value = await parseCSV(file as string, {
 				...parseCSVOptions.value,
 				toLine: 4,
 			});
 		} catch (err) {
-			parseErrorStackTrace.value = err;
+			notifyError(err);
 			csvPreview.value = [
 				[],
 			];
@@ -138,7 +158,9 @@ const useUploadCsv = ({
 
 		isReadingFile.value = true;
 
-		parsedFile.value = await processFile(props.file as File, {});
+		parsedFile.value = await processFile(props.file as File, {
+			charset: props.charset,
+		});
 		await createCSVPreview(parsedFile.value);
 
 		isReadingFile.value = false;
@@ -165,20 +187,17 @@ const useUploadCsv = ({
 		isParsingCSV.value = true;
 
 		try {
-			parseErrorStackTrace.value = '';
-
-			const handler =
-				props.handlingMode === HandlingCSVMode.PROCESS
-					? handleCSVProcessing
-					: props.fileUploadHandler;
-
-			if (handler) {
-				await handler();
+			if (props.handlingMode === HandlingCSVMode.PROCESS) {
+				await handleCSVProcessing();
+			} else {
+				await props.fileUploadHandler?.({
+					separator: separator.value,
+				});
 			}
 
 			close();
 		} catch (err) {
-			parseErrorStackTrace.value = err;
+			notifyError(err);
 			throw err;
 		} finally {
 			isParsingCSV.value = false;
@@ -194,7 +213,6 @@ const useUploadCsv = ({
 		emit('close');
 	}
 
-	// watchers (те, що були в mixin.watch)
 	watch(skipHeaders, async () => {
 		await handleParseOptionsChange();
 	});
@@ -214,7 +232,6 @@ const useUploadCsv = ({
 		isReadingFile,
 		isParsingCSV,
 		isParsingPreview,
-		parseErrorStackTrace,
 		csvPreviewTableData,
 		csvPreviewTableHeaders,
 		filteredCsvPreviewTableHeaders,

package/src/modules/UploadCsvPopup/index.ts

@@ -0,0 +1,11 @@
+export { default as WtUploadCsvPopup } from './components/wt-upload-csv-popup.vue';
+export type {
+	UploadCsvParseSettings,
+	UseUploadCsvProps,
+} from './composable/useUploadCsv';
+export { default as useUploadCsv } from './composable/useUploadCsv';
+export type {
+	CsvDataRow,
+	CsvMappingField,
+} from './scripts/normalizeCSVData';
+export { HandlingCSVMode } from './types/WtUploadCSVHandlingMode.enum';

package/src/modules/UploadCsvPopup/scripts/__tests__/normalizeCSVData.spec.js

@@ -0,0 +1,125 @@
+import normalizeCSVData from '../normalizeCSVData';
+
+describe('normalizeCSVData', () => {
+	const mappings = [
+		{
+			// webitel field name
+			name: 'name',
+			// csv column name
+			csv: 'col1',
+			// is this webitel field required?
+			required: true,
+			// ui
+			locale: '',
+		},
+		{
+			name: 'phone',
+			csv: [
+				'col2',
+				'col3',
+			],
+			required: true,
+		},
+	];
+
+	it('normalizes simple data', () => {
+		const input = [
+			{
+				col1: 'John',
+				col2: '123',
+				col3: '456',
+			},
+			{
+				col1: 'Jane',
+				col2: '789',
+				col3: '012',
+			},
+		];
+		const result = normalizeCSVData({
+			data: input,
+			mappings,
+		});
+		const output = [
+			{
+				name: 'John',
+				phone: [
+					'123',
+					'456',
+				],
+			},
+			{
+				name: 'Jane',
+				phone: [
+					'789',
+					'012',
+				],
+			},
+		];
+		expect(result).toEqual(output);
+	});
+
+	it('throws an error at normalizing data with required (!) empty value', () => {
+		const input = [
+			{
+				col1: '',
+				col2: '123',
+				col3: '3424',
+			},
+			{
+				col1: 'name',
+				col2: '131312',
+				col3: '012',
+			},
+		];
+		try {
+			normalizeCSVData({
+				data: input,
+				mappings,
+			});
+		} catch (err) {
+			expect(err).toBeTruthy();
+			return;
+		}
+		expect(false).toBe(true); // reject test if no error
+	});
+
+	it(`returns correct fields for mapping, including empty fields,
+   if one of them is empty`, () => {
+		const input = [
+			{
+				col1: 'name',
+				col2: '123',
+				col3: '',
+			},
+			{
+				col1: 'name',
+				col2: '123',
+				col3: '012',
+			},
+		];
+
+		const result = normalizeCSVData({
+			data: input,
+			mappings,
+		});
+
+		const output = [
+			{
+				name: 'name',
+				phone: [
+					'123',
+					'',
+				],
+			},
+			{
+				name: 'name',
+				phone: [
+					'123',
+					'012',
+				],
+			},
+		];
+
+		expect(result).toEqual(output);
+	});
+});

package/src/modules/UploadCsvPopup/scripts/__tests__/parseCSV.spec.js

@@ -0,0 +1,63 @@
+import parseCSV from '../parseCSV';
+
+describe('parseCSV', () => {
+	it('parses a csv into rows keyed by the header', async () => {
+		const csv = 'col1,col2\nJohn,30';
+
+		const result = await parseCSV(csv, {
+			columns: true,
+		});
+
+		expect(result).toEqual([
+			{
+				col1: 'John',
+				col2: '30',
+			},
+		]);
+	});
+
+	/*
+	WTEL-10058: the parser used to coerce 'true'/'false' and JSON-looking cells
+	for every consumer. Type casting belongs to whoever knows the field types —
+	CRM does it in prepareCsvLookupRows. Everything here stays a string.
+	 */
+	it.each([
+		'true',
+		'false',
+		'[1,2]',
+		'{"a":1}',
+		'42',
+	])('keeps %s as a string', async (value) => {
+		const csv = `col1\n"${value.replaceAll('"', '""')}"`;
+
+		const result = await parseCSV(csv, {
+			columns: true,
+		});
+
+		expect(result[0].col1).toBe(value);
+	});
+
+	it('respects a custom delimiter', async () => {
+		const csv = 'col1;col2\nJohn;30';
+
+		const result = await parseCSV(csv, {
+			columns: true,
+			delimiter: ';',
+		});
+
+		expect(result[0]).toEqual({
+			col1: 'John',
+			col2: '30',
+		});
+	});
+
+	it('rejects on a malformed csv', async () => {
+		const csv = 'col1,col2\n"unterminated,30\nJane,25';
+
+		await expect(
+			parseCSV(csv, {
+				columns: true,
+			}),
+		).rejects.toBeTruthy();
+	});
+});