@farm-investimentos/front-mfe-components 14.1.4 → 14.1.5

package/package.json

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

package/src/components/DatePicker/DatePicker.stories.js

@@ -66,3 +66,13 @@ export const Readonly = () => ({
     </div>`,
 });
 
+export const IsNull = () => ({
+	data() {
+		return {
+			date: null,
+		};
+	},
+	template: `<div style='max-width: 320px'>
+        <farm-input-datepicker inputId="input-custom-id-8" v-model="date" :required="true" />
+    </div>`,
+});

package/src/components/DatePicker/DatePicker.vue

@@ -26,7 +26,12 @@
 				Cancelar
 			</farm-btn>
 
-			<farm-btn class="ml-2" title="Confirmar" :disabled="!dateField.length" @click="save()">
+			<farm-btn
+				class="ml-2"
+				title="Confirmar"
+				:disabled="isDateFieldDisabled"
+				@click="save()"
+			>
 				Confirmar <farm-icon>check</farm-icon>
 			</farm-btn>
 		</v-date-picker>
@@ -206,7 +211,16 @@ export default Vue.extend({
 			},
 		},
 		isDisabled(): boolean {
-			return this.value.length === 0 ? true : false;
+			if (this.value) {
+				return this.value.length === 0 ? true : false;
+			}
+			return true;
+		},
+		isDateFieldDisabled() {
+			if (this.dateField) {
+				return this.dateField.length === 0 ? true : false;
+			}
+			return true;
 		},
 	},
 });

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

@@ -33,6 +33,46 @@ describe('DatePicker component', () => {
 			component.inputVal = 'teste';
 			expect(wrapper.emitted().input).toBeDefined();
 		});
+		it('isDisabled to be true when value is empty', async () => {
+			await wrapper.setProps({
+				value: '',
+			});
+			expect(component.isDisabled).toBe(true);
+		});
+
+		it('isDisabled to be true when value is empty', async () => {
+			await wrapper.setProps({
+				value: null,
+			});
+			expect(component.isDisabled).toBe(true);
+		});
+		it('isDisabled to be false when value is valid', async () => {
+			await wrapper.setProps({
+				value: '2023-02-02',
+			});
+			expect(component.isDisabled).toBe(false);
+		});
+
+		it('isDateFieldDisabled to be true when dateField is empty', async () => {
+			await wrapper.setProps({
+				value: '',
+			});
+			expect(component.isDateFieldDisabled).toBe(true);
+		});
+
+		it('isDateFieldDisabled to be true when dateField is empty', async () => {
+			await wrapper.setProps({
+				value: null,
+			});
+			expect(component.isDateFieldDisabled).toBe(true);
+		});
+
+		it('isDateFieldDisabled to be false when dateField is valid', async () => {
+			await wrapper.setProps({
+				value: '2023-02-02',
+			});
+			expect(component.isDateFieldDisabled).toBe(false);
+		});
 	});
 
 	describe('methods', () => {

package/src/components/RangeDatePicker/RangeDatePicker.vue

@@ -31,7 +31,12 @@
 				Cancelar
 			</farm-btn>
 
-			<farm-btn class="ml-2" title="Confirmar" :disabled="!dateField.length" @click="save()">
+			<farm-btn
+				class="ml-2"
+				title="Confirmar"
+				:disabled="isDateFieldDisabled"
+				@click="save()"
+			>
 				Confirmar <farm-icon>check</farm-icon>
 			</farm-btn>
 		</v-date-picker>
@@ -111,6 +116,9 @@ export default Vue.extend({
 	},
 	watch: {
 		value(newValue) {
+			if (newValue?.length === 1) {
+				newValue.push(newValue[0]);
+			}
 			this.dateField = newValue;
 			this.fieldRange = this.formatDateRange(newValue);
 		},
@@ -160,7 +168,16 @@ export default Vue.extend({
 			return !this.dateField || this.dateField.length == 1;
 		},
 		isDisabled() {
-			return this.value?.length === 0 ? true : false;
+			if (this.value) {
+				return this.value.length === 0 ? true : false;
+			}
+			return true;
+		},
+		isDateFieldDisabled() {
+			if (this.dateField) {
+				return this.dateField.length === 0 ? true : false;
+			}
+			return true;
 		},
 		isInvertedDate() {
 			if (this.dateField.length === 2) {

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

@@ -25,6 +25,48 @@ describe('RangeDatePicker component', () => {
 	});
 
 	describe('computed values', () => {
+		it('isDisabled to be true when value is empty', async () => {
+			await wrapper.setProps({
+				value: [],
+			});
+			expect(component.isDisabled).toBe(true);
+		});
+
+		it('isDisabled to be true when value is null', async () => {
+			await wrapper.setProps({
+				value: null,
+			});
+			expect(component.isDisabled).toBe(true);
+		});
+
+		it('isDisabled to be false when value is valid', async () => {
+			await wrapper.setProps({
+				value: ['2023-02-02'],
+			});
+			expect(component.isDisabled).toBe(false);
+		});
+
+		it('isDateFieldDisabled to be true when dateField is empty', async () => {
+			await wrapper.setProps({
+				value: [],
+			});
+			expect(component.isDateFieldDisabled).toBe(true);
+		});
+
+		it('isDateFieldDisabled to be true when dateField is null', async () => {
+			await wrapper.setProps({
+				value: null,
+			});
+			expect(component.isDateFieldDisabled).toBe(true);
+		});
+
+		it('isDateFieldDisabled to be false when dateField is valid', async () => {
+			await wrapper.setProps({
+				value: ['2023-02-02'],
+			});
+			expect(component.isDateFieldDisabled).toBe(false);
+		});
+
 		it('min max correctly', async () => {
 			await wrapper.setProps({
 				inputId: 'someid',
@@ -48,4 +90,18 @@ describe('RangeDatePicker component', () => {
 			expect(component.menuField).toBeFalsy();
 		});
 	});
+
+	describe('watchs', () => {
+		it('should show dateField and fieldRange correctly when it has one date', () => {
+			component.$options.watch.value.call(component, ['2023-02-27']);
+			expect(component.dateField).toEqual(['2023-02-27', '2023-02-27']);
+			expect(component.fieldRange).toEqual('27/02/2023 a 27/02/2023');
+		});
+
+		it('should show dateField and fieldRange correctly when it has two dates', () => {
+			component.$options.watch.value.call(component, ['2023-02-27', '2023-02-28']);
+			expect(component.dateField).toEqual(['2023-02-27', '2023-02-28']);
+			expect(component.fieldRange).toEqual('27/02/2023 a 28/02/2023');
+		});
+	});
 });