@farm-investimentos/front-mfe-components-vue3 1.1.0 → 1.1.2

package/src/components/MultipleFilePicker/__tests__/MultipleFilePicker.spec.js

@@ -1,184 +1,102 @@
-import { shallowMount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 
 import MultipleFilePicker from '../index';
 
 describe('MultipleFilePicker component', () => {
 	let wrapper;
-	let component;
 
 	beforeEach(() => {
-		wrapper = shallowMount(MultipleFilePicker, {
-			propsData: {
+		wrapper = mount(MultipleFilePicker, {
+			props: {
 				maxFileSize: 1,
 				maxFilesNumber: 10,
 				downloadFiles: [],
 				acceptedFileTypes: 'application/pdf,image/jpeg,image/jpg,image/png',
 			},
+			global: {
+				mocks: {
+					'farm-icon': { template: '<i></i>' },
+					'farm-btn': { template: '<button><slot /></button>' },
+					'farm-subtitle': { template: '<div><slot /></div>' },
+					'farm-bodysmall': { template: '<span><slot /></span>' },
+				},
+			},
 		});
-		component = wrapper.vm;
 	});
 
-	test('MultipleFilePicker created', () => {
-		expect(wrapper).toBeDefined();
+	test('MultipleFilePicker is created', () => {
+		expect(wrapper.exists()).toBe(true);
 	});
 
 	describe('Methods', () => {
-		describe('handlerFunctionHighlight', () => {
-			it('Should add class', () => {
-				const spyObj = jest.spyOn(wrapper.vm.dropArea.classList, 'add');
-				wrapper.vm.handlerFunctionHighlight();
-				expect(spyObj).toHaveBeenCalled();
-			});
-		});
-
-		describe('handlerFunctionUnhighlight', () => {
-			it('Should add class', () => {
-				const spyObj = jest.spyOn(wrapper.vm.dropArea.classList, 'remove');
-				wrapper.vm.handlerFunctionUnhighlight();
-				expect(spyObj).toHaveBeenCalled();
-			});
-		});
-
-		describe('addListeners', () => {
-			it('Should add listeners', () => {
-				const spyObj = jest.spyOn(wrapper.vm.dropArea, 'addEventListener');
-				wrapper.vm.addListeners();
-				expect(spyObj).toHaveBeenCalled();
-			});
-		});
+		it('handleFileChange should update files and emit event', async () => {
+			const file = new File(['file content'], 'test.pdf', { type: 'application/pdf' });
+			const input = wrapper.find('input[type="file"]');
 		
-		describe('fileChange', () => {
-			it('should open file input', () => {
-				const file = new File([], 'test');
-				component.fileChange([file]);
-				expect(component.files).toEqual([file]);
+			Object.defineProperty(input.element, 'files', {
+				value: [file],
 			});
+		
+			await input.trigger('change');
+			expect(wrapper.vm.files).toHaveLength(1);
+			expect(wrapper.emitted().onFileChange).toBeTruthy();
 		});
+		
 
-		describe('reset', () => {
-			it('should reset', () => {
-				const file = new File([], 'test');
-				component.files = [file];
-				component.reset();
-				expect(component.files.length).toEqual(0);
-			});
+		it('remove should remove file and emit onFileChange', () => {
+			wrapper.vm.files = [{ name: 'test.pdf', size: 1000 }];
+			wrapper.vm.remove(0);
+			expect(wrapper.vm.files).toHaveLength(0);
+			expect(wrapper.emitted().onFileChange).toBeTruthy();
 		});
 
-		describe('remove', () => {
-			it('should remove an item and call reset method when files length is 1', () => {
-				const spy = jest.spyOn(component, 'reset');
-				const file = new File([], 'test');
-				component.files = [file];
-				component.remove(0);
-				expect(component.files).toEqual([]);
-				expect(spy).toHaveBeenCalled();
-			});
-
-			it('should remove an item', () => {
-				const spy = jest.spyOn(component, 'reset');
-				const file = new File([], 'test');
-				const file2 = new File([], 'test2');
-				component.files = [file, file2];
-				component.remove(0);
-				expect(component.files).toEqual([file2]);
-				expect(spy).not.toHaveBeenCalled();
-			});
-		});
-		describe('onDownload', () => {
-			it('should remove an item', () => {
-				component.onDownload(1);
-				expect(wrapper.emitted().onDownload[0][0]).toBe(1);
-			});
+		it('addMoreFiles should trigger input click', async () => {
+			const input = wrapper.find('input[type="file"]');		
+			await wrapper.vm.addMoreFiles();
+			expect(input.exists()).toBe(true);
 		});
+		
 	});
 
 	describe('Computed', () => {
-		describe('hasFiles', () => {
-			it('should return false', () => {
-				expect(component.hasFiles).toBeFalsy();
-			});
-
-			it('should return true when files length is more than zero', () => {
-				component.files = [new File([], 'test')];
-				expect(component.hasFiles).toBeTruthy();
-			});
-
-			it('should return true when files length is more than zero', async () => {
-				await wrapper.setProps({
-					downloadFiles: [new File([], 'test')],
-				});
-				expect(component.hasFiles).toBeTruthy();
-			});
-		});
-		describe('filesLength', () => {
-			it('should return files and downloadFiles length', async () => {
-				await wrapper.setProps({
-					downloadFiles: [new File([], 'test')],
-				});
-				component.files = [new File([], 'test2')];
-				expect(component.filesLength).toBe(2);
-			});
-		});
-		describe('disabledButton', () => {
-			it('should return files and downloadFiles length', async () => {
-				await wrapper.setProps({
-					maxFilesNumber: 0,
-				});
-
-				expect(component.disabledButton).toBeFalsy();
-			});
-
-			it('should return files and downloadFiles length', async () => {
-				await wrapper.setProps({
-					maxFilesNumber: 2,
-					downloadFiles: [new File([], 'test')],
-				});
-				component.files = [new File([], 'test2')];
-
-				expect(component.disabledButton).toBeTruthy();
-			});
+		it('hasFiles should return true if there are files', () => {
+			wrapper.vm.files = [{ name: 'test.pdf', size: 1000 }];
+			expect(wrapper.vm.hasFiles).toBe(true);
 		});
 
-		describe('canAddMoreFiles', () => {
-			it('should return files and downloadFiles length', async () => {
-				await wrapper.setProps({
-					maxFilesNumber: 2,
-					downloadFiles: [new File([], 'test')],
-				});
-				component.files = [new File([], 'test2')];
-
-				expect(component.canAddMoreFiles).toBeFalsy();
-			});
+		it('canAddMoreFiles should return false if maxFilesNumber is reached', () => {
+			wrapper.vm.files = Array(10).fill({ name: 'test.pdf', size: 1000 });
+			expect(wrapper.vm.canAddMoreFiles).toBe(false);
 		});
 	});
 
-	describe('Watch', () => {
-		describe('files', () => {
-			it('should emit an onMaxFilesNumberWarning event when there are more files added who maxFilesNumber', () => {
-				wrapper.vm.$options.watch.files.call(
-					component,
-					Array.from(Array(11).keys()).map(() => ({ type: 'image/jpeg' }))
-				);
-				expect(wrapper.emitted().onMaxFilesNumberWarning).toBeDefined();
-			});
-
-			it('should emit an onMaxFileSizeWarning event when one file size is bigger than maxFileSize prop', async () => {
-				await wrapper.setProps({
-					maxFileSize: 3,
-				});
-				wrapper.vm.$options.watch.files.call(component, [
-					{ size: 4145728, type: 'image/jpeg' },
-				]);
-				expect(wrapper.emitted().onMaxFileSizeWarning).toBeDefined();
-			});
-
-			it('should not add invalid types files', () => {
-				wrapper.vm.$options.watch.files.call(
-					component,
-					Array.from(Array(1).keys()).map(() => ({ type: 'image/test' }))
-				);
-				expect(component.files).toEqual([]);
-			});
+	describe('Watchers', () => {
+		it('should emit onMaxFilesNumberWarning if maxFilesNumber is exceeded', async () => {
+			wrapper.setProps({ maxFilesNumber: 10 });
+	
+			const files = Array(11).fill(new File(['content'], 'test.pdf', { type: 'application/pdf' }));
+			const input = wrapper.find('input[type="file"]');
+			Object.defineProperty(input.element, 'files', { value: files });
+	
+			await input.trigger('change');
+			expect(wrapper.vm.files).toHaveLength(10);
+			expect(wrapper.emitted().onMaxFilesNumberWarning).toBeTruthy();
 		});
+	
+		it('should emit onInvalidFiles if a file exceeds maxFileSize', async () => {
+			wrapper.setProps({ maxFileSize: 1 });
+			
+			//cria um arquivo de 3MB
+			const file = new File(['a'.repeat(3 * 1024 * 1024)], 'test.pdf', { type: 'application/pdf' }); 
+			const input = wrapper.find('input[type="file"]');
+
+			Object.defineProperty(input.element, 'files', { value: [file] });
+
+			await input.trigger('change');
+			expect(wrapper.vm.files).toHaveLength(0);
+			expect(wrapper.emitted().onInvalidFiles).toBeTruthy();
+		});
+		
 	});
+	
 });

package/src/components/TextFieldV2/TextFieldV2.vue

@@ -29,8 +29,9 @@
 				<farm-icon
 					color="gray"
 					size="20px"
-					>{{ icon }}</farm-icon
 				>
+					{{ icon }}
+				</farm-icon>
 			</button>
 			<input
 				v-bind="delete { ...$attrs }.class"

package/src/examples/Table.stories.js

@@ -270,7 +270,7 @@ export const TableWithCustomHeaderAndSelect = () => ({
 			headers: [
 				{
 					title: 'check',
-					sortable: true,
+					sortable: false,
 					key: 'data-table-select',
 					align: 'left',
 				},

package/src/scss/CollapseFX.scss

@@ -0,0 +1,15 @@
+.collapse-enter-active,
+.collapse-leave-active {
+  overflow: hidden;
+  transition: max-height 0.5s ease;
+}
+
+.collapse-enter-from,
+.collapse-leave-to {
+  max-height: 0;
+}
+
+.collapse-enter-to,
+.collapse-leave-from {
+  max-height: 400px;
+}