@farm-investimentos/front-mfe-components 15.6.0 → 15.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "15.6.0",
+	"version": "15.6.1",
 	"author": "farm investimentos",
 	"private": false,
 	"main": "./dist/front-mfe-components.common.js",

package/src/components/Form/Form.stories.js

@@ -20,10 +20,16 @@ const styles = {
 	vForm: {
 		maxWidth: '480px',
 	},
+	dynamicField: {
+		display: 'flex',
+	},
 	footer: {
 		display: 'flex',
 		justifyContent: 'end',
 	},
+	footerMargin: {
+		marginTop: '16px',
+	},
 };
 
 export const Primary = () => ({
@@ -141,6 +147,79 @@ export const Secondary = () => ({
     `,
 });
 
+export const WithDynamicFields = () => ({
+	data() {
+		return {
+			form: {
+				document: null,
+				name: null,
+				checkbox: null,
+				birthDate: '',
+				selectId: null,
+				rangeDate: [],
+				dynamics: [],
+			},
+			validForm: true,
+			rules: {
+				required: value => !!value || 'Campo obrigatório',
+				checked: value => !!value || 'Deve estar marcado',
+			},
+			items: [
+				{ value: null, text: '' },
+				{ value: 1, text: 'label 1' },
+				{ value: 2, text: 'label 2' },
+			],
+			styles,
+		};
+	},
+	methods: {
+		addDynamic() {
+			const dynamic = {
+				name2: '',
+				selectId2: null,
+			};
+			this.form.dynamics.push({ ...dynamic });
+			this.$refs.form.restart();
+		},
+		removeDynamic(index) {
+			this.form.dynamics.splice(index, 1);
+			this.$refs.form.restart();
+		},
+	},
+	template: `
+	<div>
+		<farm-btn @click="addDynamic">Add field</farm-btn>
+
+		<farm-form v-model="validForm" :style="[styles.vForm]" ref="form">
+			<farm-label :required="true">Nome</farm-label>
+			<farm-textfield-v2 v-model="form.name" :rules="[rules.required]" />
+			
+			<farm-label :required="true">Select</farm-label>
+			<farm-select :rules="[rules.required]" :items="items" v-model="form.selectId"/>
+
+			<div :style="[styles.dynamicField]" v-for="(dynamic, index) in form.dynamics">
+				<div>
+					<farm-label :key="index + 'label'" :required="true">Dynamic</farm-label>
+					<farm-textfield-v2 :key="index" v-model="dynamic.name2" :rules="[rules.required]" />
+				</div>
+
+				<farm-icon @click="removeDynamic(index)">delete</farm-icon>
+			</div>
+
+			Is valid form: {{ validForm }}
+
+			<farm-line />
+			
+			<footer class="footer" :style="[styles.footer, styles.footerMargin]">
+				<farm-btn outlined @click="$refs.form.restart()" class="mr-3">Restart</farm-btn>
+				<farm-btn outlined @click="$refs.form.restartValidation()" class="mr-3">Restart Validation</farm-btn>
+				<farm-btn outlined @click="$refs.form.reset()" class="mr-3">Reset</farm-btn>
+				<farm-btn :disabled="!validForm">Salvar</farm-btn>
+			</footer>
+		</farm-form>
+	</div>`,
+});
+
 export const InitInvalid = () => ({
 	data() {
 		return {

package/src/components/Form/Form.vue

@@ -2,7 +2,7 @@
 	<form class="farm-form"><slot></slot></form>
 </template>
 <script lang="ts">
-import { onMounted, reactive, ref, getCurrentInstance, defineComponent } from 'vue';
+import { onMounted, ref, getCurrentInstance, defineComponent } from 'vue';
 
 type ErrorsBag = Record<number, boolean>;
 
@@ -14,13 +14,13 @@ export default defineComponent({
 	inheritAttrs: true,
 	setup(props, { emit }) {
 		const innerValue = ref(props.value);
-		let errorsBag = reactive({} as ErrorsBag);
+		let errorsBag = ref({} as ErrorsBag);
 		let validationFields = [];
 		const instance = getCurrentInstance().proxy;
 
 		const dispatchError = () => {
-			const keys = Object.keys(errorsBag);
-			const errorsIds = keys.filter(key => !errorsBag[key]);
+			const keys = Object.keys(errorsBag.value);
+			const errorsIds = keys.filter(key => !errorsBag.value[key]);
 			emit('input', errorsIds.length === 0);
 		};
 
@@ -28,7 +28,7 @@ export default defineComponent({
 			field.$watch(
 				'hasError',
 				() => {
-					errorsBag[field._uid] = field.valid;
+					errorsBag.value[field._uid] = field.valid;
 					dispatchError();
 				},
 				{ immediate: true }
@@ -67,7 +67,7 @@ export default defineComponent({
 
 		const restartValidation = () => {
 			validationFields = [];
-			errorsBag = {};
+			errorsBag.value = {};
 			recursiveFormField(instance);
 			validationFields.forEach(field => {
 				watchInput(field);
@@ -78,10 +78,14 @@ export default defineComponent({
 
 		const restart = () => {
 			validationFields = [];
-			errorsBag = {};
-			recursiveFormField(instance);
-			validationFields.forEach(field => {
-				watchInput(field);
+			errorsBag.value = {};
+
+			instance.$nextTick(() => {
+				recursiveFormField(instance);
+
+				validationFields.forEach(field => {
+					watchInput(field);
+				});
 			});
 		};
 

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

@@ -1,14 +1,76 @@
 import { shallowMount } from '@vue/test-utils';
 import Form from '../Form';
+import { formWithChildrenFactory, getDeepErrorsBag } from './helpers';
 
 describe('Form component', () => {
-	let wrapper;
+	let wrapper, component;
 
 	beforeEach(() => {
 		wrapper = shallowMount(Form);
+		component = wrapper.vm;
 	});
 
 	test('Created hook', () => {
 		expect(wrapper).toBeDefined();
 	});
+
+	describe('errors bag', () => {
+		beforeEach(() => {
+			const helper = formWithChildrenFactory(Form);
+
+			wrapper = helper.wrapper;
+			component = helper.component;
+		});
+
+		it('should have errors bag after mount form', () => {
+			const { errorsBag, errorsBagLength } = getDeepErrorsBag(component);
+
+			expect(component.errorsBag).toStrictEqual(errorsBag.value);
+			expect(Object.keys(component.errorsBag).length).toBe(errorsBagLength);
+		});
+
+		it('should update errors bag after change validatable items', async () => {
+			const { errorsBag, errorsBagLength } = getDeepErrorsBag(component);
+
+			expect(component.errorsBag).toStrictEqual(errorsBag.value);
+			expect(Object.keys(component.errorsBag).length).toBe(errorsBagLength);
+
+			await component.addDynamic();
+			await component.restart();
+
+			const { errorsBag: plusOneErrorsBag, errorsBagLength: plusOneErrorsBagLength } =
+				getDeepErrorsBag(component);
+
+			expect(Object.keys(component.errorsBag).length).toBe(plusOneErrorsBagLength);
+			expect(component.errorsBag).toStrictEqual(plusOneErrorsBag.value);
+
+			await component.removeDynamic(1);
+			await component.restart();
+
+			const { errorsBag: minusOneErrorsBag, errorsBagLength: minusOneErrorsBagLength } =
+				getDeepErrorsBag(component);
+
+			expect(Object.keys(component.errorsBag).length).toBe(minusOneErrorsBagLength);
+			expect(component.errorsBag).toStrictEqual(minusOneErrorsBag.value);
+		});
+	});
+
+	describe('isValidForm', () => {
+		let isValidForm;
+
+		beforeEach(() => {
+			const helper = formWithChildrenFactory(Form);
+
+			wrapper = helper.wrapper;
+			component = helper.component;
+			isValidForm = helper.isValidForm;
+		});
+
+		it('should be invalid until all validatable fields are valid', () => {
+			const { errorsBag } = getDeepErrorsBag(component);
+
+			expect(isValidForm.value).toBeFalsy();
+			expect(Object.values(errorsBag.value)).toEqual([false, false, false]);
+		});
+	});
 });

package/src/components/Form/__tests__/helpers.js

@@ -0,0 +1,106 @@
+import { mount } from '@vue/test-utils';
+import { ref } from 'vue';
+
+export const errorsBag = ref({});
+
+export function getDeepErrorsBag($node) {
+	const getDeep = $node => {
+		$node.$children.forEach($leaf => {
+			if ($leaf.validate) {
+				errorsBag.value[$leaf._uid] = $leaf.valid;
+			} else if ($leaf.$children.length > 1) {
+				getDeep($leaf);
+			} else if ($leaf.$children[0] && $leaf.$children[0].validate) {
+				errorsBag.value[$leaf.$children[0]._uid] = $leaf.$children[0].valid;
+			} else if ($leaf.validatable) {
+				errorsBag.value[$leaf._uid] = $leaf.valid;
+			} else {
+				getDeep($leaf);
+			}
+		});
+	};
+
+	getDeep($node);
+
+	return {
+		errorsBag,
+		errorsBagLength: errorsBag.value ? Object.keys(errorsBag.value).length : 0,
+	};
+}
+
+export function resetErrorsBag() {
+	errorsBag.value = {};
+}
+
+function mountSlot() {
+	const normalComponent = {
+		props: {
+			form: {
+				type: Object,
+				required: true,
+			},
+		},
+		template: `
+		<div>
+			<farm-textfield-v2 :rules=[rules.required] />
+			<farm-textfield-v2 :rules=[rules.required] />
+			<farm-textfield-v2 :rules=[rules.required] />
+	
+			section id="dynamics">
+					<farm-textfield-v2 v-for="(dynamic, index) in form?.dynamics" :key="index" :name="'dynamic-' + index" />
+			</section>
+		</div>
+	`,
+	};
+
+	return {
+		normalComponent,
+	};
+}
+
+export function formWithChildrenFactory(formComponent) {
+	resetErrorsBag();
+
+	const { normalComponent } = mountSlot();
+
+	const form = ref({
+		dynamics: [],
+	});
+	const isValidForm = ref(false);
+
+	const wrapper = mount(formComponent, {
+		propsData: {
+			value: isValidForm,
+		},
+		slots: {
+			default: '<normal-component :form="form" />',
+		},
+		mocks: {
+			form,
+			rules: {
+				required: value => !!value || 'Campo obrigatório',
+			},
+			addDynamic() {
+				form.value.dynamics.push({
+					name: '',
+				});
+
+				return form.value.dynamics;
+			},
+			removeDynamic(index) {
+				form.value.dynamics.splice(index, 1);
+
+				return form.value.dynamics;
+			},
+		},
+		stubs: {
+			'normal-component': normalComponent,
+		},
+	});
+
+	return {
+		isValidForm,
+		wrapper,
+		component: wrapper.vm,
+	};
+}