feat: added test cases and fallbacks for unresolved cases

logaretm · Dec 18, 2020 · 71bda03 · 71bda03
1 parent e82e28e
commit 71bda03
Show file tree

Hide file tree

Showing 21 changed files with 367 additions and 15 deletions.
diff --git a/packages/vee-validate/src/useFieldError.ts b/packages/vee-validate/src/useFieldError.ts
@@ -1,7 +1,7 @@
 import { computed, unref } from 'vue';
 import { FormErrorsSymbol } from './symbols';
 import { MaybeReactive } from './types';
-import { getFromPath, injectWithSelf } from './utils';
+import { injectWithSelf } from './utils';
 
 /**
  * Gives access to a single field error
@@ -10,6 +10,6 @@ export function useFieldError(path: MaybeReactive<string>) {
   const errors = injectWithSelf(FormErrorsSymbol);
 
   return computed(() => {
-    return getFromPath(errors?.value, unref(path)) as string | undefined;
+    return errors?.value?.[unref(path)] as string | undefined;
   });
 }
diff --git a/packages/vee-validate/src/useFormErrors.ts b/packages/vee-validate/src/useFormErrors.ts
@@ -1,11 +1,15 @@
+import { computed } from 'vue';
 import { FormErrorsSymbol } from './symbols';
 import { injectWithSelf } from './utils';
 
 /**
  * Gives access to all form errors
  */
 export function useFormErrors() {
-  const errors = injectWithSelf(FormErrorsSymbol);
+  const errors = injectWithSelf(
+    FormErrorsSymbol,
+    computed(() => ({}))
+  );
 
   return errors;
 }
diff --git a/packages/vee-validate/src/useIsFieldDirty.ts b/packages/vee-validate/src/useIsFieldDirty.ts
@@ -9,6 +9,6 @@ export function useIsFieldDirty(path: string) {
   const form = injectWithSelf(FormSymbol);
 
   return computed(() => {
-    return form?.fields.value[path]?.meta.dirty;
+    return form?.fields.value[path]?.meta.dirty as boolean | undefined;
   });
 }
diff --git a/packages/vee-validate/src/useIsFieldTouched.ts b/packages/vee-validate/src/useIsFieldTouched.ts
@@ -9,6 +9,6 @@ export function useIsFieldTouched(path: string) {
   const form = injectWithSelf(FormSymbol);
 
   return computed(() => {
-    return form?.fields.value[path]?.meta.touched;
+    return form?.fields.value[path]?.meta.touched as boolean | undefined;
   });
 }
diff --git a/packages/vee-validate/src/useIsFieldValid.ts b/packages/vee-validate/src/useIsFieldValid.ts
@@ -9,6 +9,6 @@ export function useIsFieldValid(path: string) {
   const form = injectWithSelf(FormSymbol);
 
   return computed(() => {
-    return form?.fields.value[path]?.meta.valid;
+    return form?.fields.value[path]?.meta.valid as boolean | undefined;
   });
 }
diff --git a/packages/vee-validate/src/useResetForm.ts b/packages/vee-validate/src/useResetForm.ts
@@ -1,11 +1,16 @@
 import { FormSymbol } from './symbols';
 import { FormState } from './types';
-import { injectWithSelf } from './utils';
+import { injectWithSelf, warn } from './utils';
 
 export function useResetForm<TValues = Record<string, any>>() {
   const form = injectWithSelf(FormSymbol);
 
   return function resetForm(state?: Partial<FormState<TValues>>) {
-    return form?.resetForm(state);
+    if (!form) {
+      warn('No form context was detected');
+      return;
+    }
+
+    return form.resetForm(state);
   };
 }
diff --git a/packages/vee-validate/src/useValidateField.ts b/packages/vee-validate/src/useValidateField.ts
@@ -1,6 +1,6 @@
 import { FormSymbol } from './symbols';
 import { ValidationResult } from './types';
-import { injectWithSelf } from './utils';
+import { injectWithSelf, warn } from './utils';
 
 /**
  * Validates a single field
@@ -10,6 +10,12 @@ export function useValidateField(path: string) {
 
   return function validateField(): Promise<ValidationResult> {
     const field = form?.fields.value[path];
+    if (!field) {
+      warn(`field with name ${path} was not found`);
+      return Promise.resolve({
+        errors: [],
+      });
+    }
 
     if (Array.isArray(field)) {
       return field[0].validate();

diff --git a/packages/vee-validate/src/useValidateForm.ts b/packages/vee-validate/src/useValidateForm.ts
@@ -1,5 +1,5 @@
 import { FormSymbol } from './symbols';
-import { injectWithSelf } from './utils';
+import { injectWithSelf, warn } from './utils';
 
 /**
  * Validate multiple fields
@@ -8,6 +8,11 @@ export function useValidateForm() {
   const form = injectWithSelf(FormSymbol);
 
   return function validateField() {
-    return form?.validate();
+    if (!form) {
+      warn('No form context was detected, undefined is returned');
+      return Promise.resolve(undefined);
+    }
+
+    return form.validate();
   };
 }
diff --git a/packages/vee-validate/src/utils/common.ts b/packages/vee-validate/src/utils/common.ts
@@ -128,3 +128,7 @@ export function injectWithSelf<T>(symbol: InjectionKey<T>, def: T | undefined =
 
   return inject(symbol, vm?.provides[symbol as any] || def);
 }
+
+export function warn(message: string) {
+  console.warn(`[vee-validate]: ${message}`);
+}
diff --git a/packages/vee-validate/tests/useFieldErrors.spec.ts b/packages/vee-validate/tests/useFieldErrors.spec.ts
@@ -31,4 +31,43 @@ describe('useFieldError()', () => {
     await flushPromises();
     expect(error?.textContent).toBe(REQUIRED_MESSAGE);
   });
+
+  test('returns undefined if field not found', async () => {
+    mountWithHoc({
+      setup() {
+        useForm();
+        const message = useFieldError('something');
+
+        return {
+          message,
+        };
+      },
+      template: `
+      <span>{{ message }}</span>
+    `,
+    });
+
+    await flushPromises();
+    const error = document.querySelector('span');
+    expect(error?.textContent).toBe('');
+  });
+
+  test('returns undefined if form is not found', async () => {
+    mountWithHoc({
+      setup() {
+        const message = useFieldError('something');
+
+        return {
+          message,
+        };
+      },
+      template: `
+      <span>{{ message }}</span>
+    `,
+    });
+
+    await flushPromises();
+    const error = document.querySelector('span');
+    expect(error?.textContent).toBe('');
+  });
 });
diff --git a/packages/vee-validate/tests/useFormErrors.spec.ts b/packages/vee-validate/tests/useFormErrors.spec.ts
@@ -31,4 +31,23 @@ describe('useFormErrors()', () => {
     await flushPromises();
     expect(error?.textContent).toBe(REQUIRED_MESSAGE);
   });
+
+  test('returns empty object if form is not found', async () => {
+    mountWithHoc({
+      setup() {
+        const messages = useFormErrors();
+
+        return {
+          messages,
+        };
+      },
+      template: `
+      <span>{{ messages }}</span>
+    `,
+    });
+
+    await flushPromises();
+    const error = document.querySelector('span');
+    expect(error?.textContent).toBe('{}');
+  });
 });
diff --git a/packages/vee-validate/tests/useIsFieldDirty.spec.ts b/packages/vee-validate/tests/useIsFieldDirty.spec.ts
@@ -31,4 +31,43 @@ describe('useIsFieldDirty()', () => {
     await flushPromises();
     expect(error?.textContent).toBe('true');
   });
+
+  test('returns undefined if field does not exist', async () => {
+    mountWithHoc({
+      setup() {
+        useForm();
+        const isDirty = useIsFieldDirty('something');
+
+        return {
+          isDirty,
+        };
+      },
+      template: `
+      <span>{{ isDirty }}</span>
+    `,
+    });
+
+    await flushPromises();
+    const error = document.querySelector('span');
+    expect(error?.textContent).toBe('');
+  });
+
+  test('returns undefined if form does not exist', async () => {
+    mountWithHoc({
+      setup() {
+        const isDirty = useIsFieldDirty('something');
+
+        return {
+          isDirty,
+        };
+      },
+      template: `
+      <span>{{ isDirty }}</span>
+    `,
+    });
+
+    await flushPromises();
+    const error = document.querySelector('span');
+    expect(error?.textContent).toBe('');
+  });
 });
diff --git a/packages/vee-validate/tests/useIsFieldTouched.spec.ts b/packages/vee-validate/tests/useIsFieldTouched.spec.ts
@@ -32,4 +32,43 @@ describe('useIsFieldTouched()', () => {
     await flushPromises();
     expect(error?.textContent).toBe('true');
   });
+
+  test('returns undefined if field does not exist', async () => {
+    mountWithHoc({
+      setup() {
+        useForm();
+        const isTouched = useIsFieldTouched('something');
+
+        return {
+          isTouched,
+        };
+      },
+      template: `
+      <span>{{ isTouched }}</span>
+    `,
+    });
+
+    await flushPromises();
+    const error = document.querySelector('span');
+    expect(error?.textContent).toBe('');
+  });
+
+  test('returns undefined if form does not exist', async () => {
+    mountWithHoc({
+      setup() {
+        const isTouched = useIsFieldTouched('something');
+
+        return {
+          isTouched,
+        };
+      },
+      template: `
+      <span>{{ isTouched }}</span>
+    `,
+    });
+
+    await flushPromises();
+    const error = document.querySelector('span');
+    expect(error?.textContent).toBe('');
+  });
 });
diff --git a/packages/vee-validate/tests/useIsFieldValid.spec.ts b/packages/vee-validate/tests/useIsFieldValid.spec.ts
@@ -34,4 +34,43 @@ describe('useIsFieldValid()', () => {
     await flushPromises();
     expect(span?.textContent).toBe('true');
   });
+
+  test('returns undefined if field is not found', async () => {
+    mountWithHoc({
+      setup() {
+        useForm();
+        const isValid = useIsFieldValid('test');
+
+        return {
+          isValid,
+        };
+      },
+      template: `
+      <span>{{ isValid }}</span>
+    `,
+    });
+
+    await flushPromises();
+    const span = document.querySelector('span');
+    expect(span?.textContent).toBe('');
+  });
+
+  test('returns undefined if form is not found', async () => {
+    mountWithHoc({
+      setup() {
+        const isValid = useIsFieldValid('test');
+
+        return {
+          isValid,
+        };
+      },
+      template: `
+      <span>{{ isValid }}</span>
+    `,
+    });
+
+    await flushPromises();
+    const span = document.querySelector('span');
+    expect(span?.textContent).toBe('');
+  });
 });
diff --git a/packages/vee-validate/tests/useIsFormDirty.spec.ts b/packages/vee-validate/tests/useIsFormDirty.spec.ts
@@ -30,4 +30,24 @@ describe('useIsFormDirty()', () => {
     await flushPromises();
     expect(error?.textContent).toBe('true');
   });
+
+  test('returns undefined if form is not found', async () => {
+    mountWithHoc({
+      setup() {
+        const isDirty = useIsFormDirty();
+
+        return {
+          isDirty,
+        };
+      },
+      template: `
+      <span>{{ isDirty }}</span>
+    `,
+    });
+
+    const error = document.querySelector('span');
+
+    await flushPromises();
+    expect(error?.textContent).toBe('');
+  });
 });
diff --git a/packages/vee-validate/tests/useIsFormTouched.spec.ts b/packages/vee-validate/tests/useIsFormTouched.spec.ts
@@ -30,4 +30,23 @@ describe('useIsFormTouched()', () => {
     await flushPromises();
     expect(error?.textContent).toBe('true');
   });
+
+  test('returns undefined if form is not found', async () => {
+    mountWithHoc({
+      setup() {
+        const isTouched = useIsFormTouched();
+
+        return {
+          isTouched,
+        };
+      },
+      template: `
+      <span>{{ isTouched }}</span>
+    `,
+    });
+
+    await flushPromises();
+    const error = document.querySelector('span');
+    expect(error?.textContent).toBe('');
+  });
 });
diff --git a/packages/vee-validate/tests/useIsFormValid.spec.ts b/packages/vee-validate/tests/useIsFormValid.spec.ts
@@ -34,4 +34,23 @@ describe('useIsFormValid()', () => {
     await flushPromises();
     expect(span?.textContent).toBe('true');
   });
+
+  test('returns undefined if form is not found', async () => {
+    mountWithHoc({
+      setup() {
+        const isValid = useIsFormValid();
+
+        return {
+          isValid,
+        };
+      },
+      template: `
+      <span>{{ isValid }}</span>
+    `,
+    });
+
+    await flushPromises();
+    const span = document.querySelector('span');
+    expect(span?.textContent).toBe('');
+  });
 });