oxform-core 0.1.0

package/src/tests/array/remove.spec.ts

@@ -0,0 +1,174 @@
+import { FormApi } from '#form-api';
+import type { FormOptions } from '#form-api.types';
+import { sleep } from '#utils/testing/sleep';
+import { describe, expect, it } from 'vitest';
+import z from 'zod';
+
+const schema = z.object({
+  array: z.string().array(),
+});
+
+const defaultValues = {
+  array: ['item1', 'item2', 'item3'],
+};
+
+const setup = (options?: Partial<FormOptions<typeof schema>>) => {
+  const form = new FormApi({
+    schema,
+    defaultValues,
+    ...options,
+  });
+
+  form['~mount']();
+
+  return { form };
+};
+
+describe('value updates', () => {
+  it('should remove an item from an array', () => {
+    const { form } = setup();
+
+    form.array.remove('array', 1);
+
+    expect(form.field.get('array')).toStrictEqual(['item1', 'item3']);
+  });
+
+  it('removes the first item if the index is 0', () => {
+    const { form } = setup();
+
+    form.array.remove('array', 0);
+
+    expect(form.field.get('array')).toStrictEqual(['item2', 'item3']);
+  });
+
+  it('removes the last item if the index is equal to the length', () => {
+    const { form } = setup();
+
+    form.array.remove('array', 2);
+
+    expect(form.field.get('array')).toStrictEqual(['item1', 'item2']);
+  });
+
+  it('should set the array to empty if it is undefined', () => {
+    const { form } = setup();
+
+    form.field.change('array', undefined as any);
+    form.array.remove('array', 0);
+
+    expect(form.field.get('array')).toStrictEqual([]);
+  });
+
+  it('should set the array to empty if it is null', () => {
+    const { form } = setup();
+
+    form.field.change('array', null as any);
+    form.array.remove('array', 0);
+
+    expect(form.field.get('array')).toStrictEqual([]);
+  });
+});
+
+describe('meta handling', () => {
+  it('should update the array field meta when removing', () => {
+    const { form } = setup();
+
+    form.array.remove('array', 1);
+
+    expect(form.field.meta('array').dirty).toBe(true);
+    expect(form.field.meta('array').touched).toBe(true);
+  });
+
+  it('should not update the array field meta when removing with should.dirty false', () => {
+    const { form } = setup();
+
+    form.array.remove('array', 1, { should: { dirty: false } });
+
+    expect(form.field.meta('array').dirty).toBe(false);
+    expect(form.field.meta('array').touched).toBe(true);
+  });
+
+  it('should not update the array field meta when removing with should.touch false', () => {
+    const { form } = setup();
+
+    form.array.remove('array', 1, { should: { touch: false } });
+
+    expect(form.field.meta('array').dirty).toBe(true);
+    expect(form.field.meta('array').touched).toBe(false);
+  });
+
+  it('should update the rest of the items meta when removing at the start', () => {
+    const { form } = setup();
+
+    form.field.change('array.1', 'updated', { should: { touch: false } });
+    form.field.change('array.2', 'updated', { should: { dirty: false } });
+
+    form.array.remove('array', 0);
+
+    expect(form.field.meta('array.0').dirty).toBe(true);
+    expect(form.field.meta('array.0').touched).toBe(false);
+
+    expect(form.field.meta('array.1').dirty).toBe(false);
+    expect(form.field.meta('array.1').touched).toBe(true);
+  });
+
+  it('should update the rest of the items meta when removing at the end', () => {
+    const { form } = setup();
+
+    form.field.change('array.0', 'updated', { should: { touch: false } });
+    form.field.change('array.1', 'updated', { should: { dirty: false } });
+
+    form.array.remove('array', 2);
+
+    expect(form.field.meta('array.0').dirty).toBe(true);
+    expect(form.field.meta('array.0').touched).toBe(false);
+
+    expect(form.field.meta('array.1').dirty).toBe(false);
+    expect(form.field.meta('array.1').touched).toBe(true);
+  });
+
+  it('should update the rest of the items meta when removing in the middle', () => {
+    const { form } = setup();
+
+    form.field.change('array.0', 'updated', { should: { touch: false } });
+    form.field.change('array.2', 'updated', { should: { dirty: false } });
+    form.array.remove('array', 1);
+
+    expect(form.field.meta('array.0').dirty).toBe(true);
+    expect(form.field.meta('array.0').touched).toBe(false);
+
+    expect(form.field.meta('array.1').dirty).toBe(false);
+    expect(form.field.meta('array.1').touched).toBe(true);
+  });
+});
+
+describe('edge cases', () => {
+  it('should handle negative index', () => {
+    const { form } = setup();
+
+    form.array.remove('array', -100);
+
+    expect(form.field.get('array')).toEqual(['item2', 'item3']);
+  });
+
+  it('should handle an index greater than the length', () => {
+    const { form } = setup();
+
+    form.array.remove('array', 100);
+
+    expect(form.field.get('array')).toEqual(['item1', 'item2']);
+  });
+});
+
+describe('validation', () => {
+  it('should validate on remove by default', async () => {
+    const { form } = setup({ validate: { change: schema } });
+
+    form.field.change('array.0', 0 as any);
+    form.array.remove('array', 0);
+
+    await sleep(0);
+
+    expect(form.field.meta('array.0').valid).toBe(true);
+    expect(form.field.errors('array.0')).toHaveLength(0);
+  });
+});

package/src/tests/array/swap.spec.ts

@@ -0,0 +1,152 @@
+import { FormApi } from '#form-api';
+import type { FormOptions } from '#form-api.types';
+import { sleep } from '#utils/testing/sleep';
+import { describe, expect, it } from 'vitest';
+import z from 'zod';
+
+const schema = z.object({
+  array: z.string().array(),
+});
+
+const defaultValues = {
+  array: ['item1', 'item2'],
+};
+
+const setup = (options?: Partial<FormOptions<typeof schema>>) => {
+  const form = new FormApi({
+    schema,
+    defaultValues,
+    ...options,
+  });
+
+  form['~mount']();
+
+  return { form };
+};
+
+describe('value updates', () => {
+  it('should swap two items in an array', () => {
+    const { form } = setup();
+
+    form.array.swap('array', 0, 1);
+
+    expect(form.field.get('array')).toStrictEqual(['item2', 'item1']);
+  });
+
+  it('should swap two items when one is not in the array', () => {
+    const { form } = setup();
+
+    form.array.swap('array', 0, 2);
+
+    expect(form.field.get('array')).toStrictEqual([undefined, 'item2', 'item1']);
+  });
+
+  it('should swap two items when both are not in the array', () => {
+    const { form } = setup();
+
+    form.array.swap('array', 2, 3);
+
+    expect(form.field.get('array')).toStrictEqual(['item1', 'item2', undefined, undefined]);
+  });
+});
+
+describe('meta handling', () => {
+  it('should update the array field meta when swapping', () => {
+    const { form } = setup();
+
+    form.array.swap('array', 0, 1);
+
+    expect(form.field.meta('array').dirty).toBe(true);
+    expect(form.field.meta('array').touched).toBe(true);
+  });
+
+  it('should not update the array field meta when swapping with should.dirty false', () => {
+    const { form } = setup();
+
+    form.array.swap('array', 0, 1, { should: { dirty: false } });
+
+    expect(form.field.meta('array').dirty).toBe(false);
+    expect(form.field.meta('array').touched).toBe(true);
+  });
+
+  it('should not update the array field meta when swapping with should.touch false', () => {
+    const { form } = setup();
+
+    form.array.swap('array', 0, 1, { should: { touch: false } });
+
+    expect(form.field.meta('array').dirty).toBe(true);
+    expect(form.field.meta('array').touched).toBe(false);
+  });
+
+  it('should update the swapped item meta when swapping', () => {
+    const { form } = setup();
+
+    form.field.change('array.0', 'updated', { should: { touch: false } });
+    form.field.change('array.1', 'updated', { should: { dirty: false } });
+    form.array.swap('array', 0, 1);
+
+    expect(form.field.meta('array.0').dirty).toBe(false);
+    expect(form.field.meta('array.0').touched).toBe(true);
+
+    expect(form.field.meta('array.1').dirty).toBe(true);
+    expect(form.field.meta('array.1').touched).toBe(false);
+  });
+
+  it('should leave the rest of the items untouched when swapping', () => {
+    const { form } = setup();
+
+    form.field.change('array', ['item1', 'item2', 'item3', 'item4']);
+    form.array.swap('array', 0, 2);
+
+    expect(form.field.meta('array.1').dirty).toEqual(false);
+    expect(form.field.meta('array.3').dirty).toEqual(false);
+  });
+});
+
+describe('edge cases', () => {
+  it('should handle negative index', () => {
+    const { form } = setup();
+
+    form.array.swap('array', -100, 1);
+
+    expect(form.field.get('array')).toEqual(['item2', 'item1']);
+  });
+
+  it('should handle swapping with the same index', () => {
+    const { form } = setup();
+
+    form.array.swap('array', 0, 0);
+
+    expect(form.field.get('array')).toEqual(['item1', 'item2']);
+  });
+});
+
+describe('validation', () => {
+  it('should validate on swap by default', async () => {
+    const { form } = setup({ validate: { change: schema } });
+
+    form.field.change('array.0', 0 as any, { should: { validate: false } });
+    form.array.swap('array', 0, 1);
+
+    await sleep(0);
+
+    expect(form.field.meta('array.1').valid).toBe(false);
+    expect(form.field.errors('array.1')).toHaveLength(1);
+
+    expect(form.field.meta('array.0').valid).toBe(true);
+    expect(form.field.errors('array.0')).toHaveLength(0);
+  });
+
+  it('should not validate on swap by default when should.validate is false', async () => {
+    const { form } = setup({ validate: { change: schema } });
+
+    form.field.change('array.0', 0 as any, { should: { validate: false } });
+    form.array.swap('array', 0, 1, { should: { validate: false } });
+
+    expect(form.field.meta('array.1').valid).toBe(true);
+    expect(form.field.errors('array.1')).toHaveLength(0);
+
+    expect(form.field.meta('array.0').valid).toBe(true);
+    expect(form.field.errors('array.0')).toHaveLength(0);
+  });
+});

package/src/tests/array/update.spec.ts

@@ -0,0 +1,148 @@
+import { FormApi } from '#form-api';
+import type { FormOptions } from '#form-api.types';
+import { sleep } from '#utils/testing/sleep';
+import { describe, expect, it } from 'vitest';
+import z from 'zod';
+
+const schema = z.object({
+  array: z.string().array(),
+});
+
+const defaultValues = {
+  array: ['item1', 'item2', 'item3'],
+};
+
+const setup = (options?: Partial<FormOptions<typeof schema>>) => {
+  const form = new FormApi({
+    schema,
+    defaultValues,
+    ...options,
+  });
+
+  form['~mount']();
+
+  return { form };
+};
+
+describe('value updates', () => {
+  it('should update an item in an array', () => {
+    const { form } = setup();
+
+    form.array.update('array', 1, 'updated');
+
+    expect(form.field.get('array')).toStrictEqual(['item1', 'updated', 'item3']);
+  });
+
+  it('should update an item if the array is undefined', () => {
+    const { form } = setup();
+
+    form.field.change('array', undefined as any);
+    form.array.update('array', 0, 'updated');
+
+    expect(form.field.get('array')).toStrictEqual(['updated']);
+  });
+
+  it('should update an item if the array is null', () => {
+    const { form } = setup();
+
+    form.field.change('array', null as any);
+    form.array.update('array', 0, 'updated');
+
+    expect(form.field.get('array')).toStrictEqual(['updated']);
+  });
+
+  it('should update an item if the array is empty', () => {
+    const { form } = setup();
+
+    form.field.change('array', []);
+    form.array.update('array', 0, 'updated');
+
+    expect(form.field.get('array')).toStrictEqual(['updated']);
+  });
+
+  it('should allow passing an updater function', () => {
+    const { form } = setup();
+
+    form.array.update('array', 0, value => value.length + ' updated');
+
+    expect(form.field.get('array')).toStrictEqual(['3 updated', 'item2', 'item3']);
+  });
+});
+
+describe('meta handling', () => {
+  it('should update the array field meta when updating', () => {
+    const { form } = setup();
+
+    form.array.update('array', 1, 'updated');
+
+    expect(form.field.meta('array').dirty).toBe(true);
+    expect(form.field.meta('array').touched).toBe(true);
+  });
+
+  it('should not update the array field meta when updating with should.dirty false', () => {
+    const { form } = setup();
+
+    form.array.update('array', 1, 'updated', { should: { dirty: false } });
+
+    expect(form.field.meta('array').dirty).toBe(false);
+    expect(form.field.meta('array').touched).toBe(true);
+  });
+
+  it('should not update the array field meta when updating with should.touch false', () => {
+    const { form } = setup();
+
+    form.array.update('array', 1, 'updated', { should: { touch: false } });
+
+    expect(form.field.meta('array').dirty).toBe(true);
+    expect(form.field.meta('array').touched).toBe(false);
+  });
+
+  it('should update the updated item meta when updating', () => {
+    const { form } = setup();
+
+    form.array.update('array', 0, 'updated');
+
+    expect(form.field.meta('array.0').dirty).toBe(true);
+    expect(form.field.meta('array.0').touched).toBe(true);
+  });
+});
+
+describe('edge cases', () => {
+  it('should handle negative index', () => {
+    const { form } = setup();
+
+    form.array.update('array', -100, 'updated');
+
+    expect(form.field.get('array')).toEqual(['updated', 'item2', 'item3']);
+  });
+
+  it('should handle updating an index out of bounds', () => {
+    const { form } = setup();
+
+    form.array.update('array', 5, 'updated');
+
+    expect(form.field.get('array')).toEqual(['item1', 'item2', 'updated']);
+  });
+});
+
+describe('validation', () => {
+  it('should validate on update by default', async () => {
+    const { form } = setup({ validate: { change: schema } });
+
+    form.array.update('array', 0, 0 as any);
+
+    await sleep(0);
+
+    expect(form.field.meta('array.0').valid).toBe(false);
+    expect(form.field.errors('array.0')).toHaveLength(1);
+  });
+
+  it('should not validate on update by default when should.validate is false', async () => {
+    const { form } = setup({ validate: { change: schema } });
+
+    form.array.update('array', 0, 0 as any, { should: { validate: false } });
+
+    expect(form.field.meta('array.0').valid).toBe(true);
+    expect(form.field.errors('array.0')).toHaveLength(0);
+  });
+});

package/src/tests/field/change.spec.ts

@@ -0,0 +1,226 @@
+import { FormApi } from '#form-api';
+import type { FormOptions } from '#form-api.types';
+import { sleep } from '#utils/testing/sleep';
+import { describe, expect, it } from 'vitest';
+import z from 'zod';
+
+const schema = z.object({
+  string: z.string(),
+  optional: z.string().optional(),
+  nullable: z.string().nullable(),
+  nullish: z.string().nullish(),
+  number: z.number(),
+  boolean: z.boolean(),
+  array: z.string().array(),
+  object: z.object({
+    nested: z.object({
+      deep: z.string(),
+    }),
+  }),
+});
+
+const defaultValues = {
+  string: 'string',
+  optional: undefined,
+  nullable: null,
+  nullish: null,
+  number: 1,
+  boolean: true,
+  array: ['array'],
+  object: {
+    nested: {
+      deep: 'deep',
+    },
+  },
+};
+
+const setup = (options?: Partial<FormOptions<typeof schema>>) => {
+  const form = new FormApi({
+    schema,
+    defaultValues,
+    ...options,
+  });
+
+  form['~mount']();
+
+  return { form };
+};
+
+describe('value updates', () => {
+  it('should update string field value', () => {
+    const { form } = setup();
+
+    form.field.change('string', 'updated');
+
+    expect(form.field.get('string')).toBe('updated');
+  });
+
+  it('should update optional field value', () => {
+    const { form } = setup();
+
+    form.field.change('optional', 'updated');
+
+    expect(form.field.get('optional')).toBe('updated');
+  });
+
+  it('should update nullable field value', () => {
+    const { form } = setup();
+
+    form.field.change('nullable', 'updated');
+
+    expect(form.field.get('nullable')).toBe('updated');
+  });
+
+  it('should update nullish field value', () => {
+    const { form } = setup();
+
+    form.field.change('nullish', 'updated');
+
+    expect(form.field.get('nullish')).toBe('updated');
+  });
+
+  it('should update number field value', () => {
+    const { form } = setup();
+
+    form.field.change('number', 2);
+
+    expect(form.field.get('number')).toBe(2);
+  });
+
+  it('should update boolean field value', () => {
+    const { form } = setup();
+
+    form.field.change('boolean', false);
+
+    expect(form.field.get('boolean')).toBe(false);
+  });
+
+  it('should update array field value', () => {
+    const { form } = setup();
+
+    const newArray = ['new1', 'new2'];
+    form.field.change('array', newArray);
+
+    expect(form.field.get('array')).toStrictEqual(newArray);
+  });
+
+  it('should update an array index field value', () => {
+    const { form } = setup();
+
+    form.field.change('array.2', 'updated');
+
+    expect(form.field.get('array.2')).toEqual('updated');
+    expect(form.field.get('array')).toEqual(['array', undefined, 'updated']);
+  });
+
+  it('should update object field value', () => {
+    const { form } = setup();
+
+    const newObject = {
+      nested: {
+        deep: 'new',
+      },
+    };
+    form.field.change('object', newObject);
+
+    expect(form.field.get('object')).toStrictEqual(newObject);
+  });
+
+  it('should update nested field value', () => {
+    const { form } = setup();
+
+    form.field.change('object.nested.deep', 'updated');
+
+    expect(form.field.get('object.nested.deep')).toBe('updated');
+  });
+
+  it('should allow passing an updater function', () => {
+    const { form } = setup();
+
+    form.field.change('string', value => value + ' updated');
+
+    expect(form.field.get('string')).toBe('string updated');
+  });
+});
+
+describe('should update field metadata', () => {
+  it('on first change', () => {
+    const { form } = setup();
+
+    form.field.change('string', 'updated');
+
+    expect(form.field.meta('string').dirty).toBe(true);
+    expect(form.field.meta('string').touched).toBe(true);
+    expect(form.field.meta('string').blurred).toBe(false);
+    expect(form.field.meta('string').pristine).toBe(false);
+    expect(form.field.meta('string').default).toBe(false);
+    expect(form.field.meta('string').valid).toBe(true);
+  });
+
+  it('on second change', () => {
+    const { form } = setup();
+
+    form.field.change('string', 'updated');
+    form.field.change('string', 'updated again');
+
+    expect(form.field.meta('string').dirty).toBe(true);
+    expect(form.field.meta('string').touched).toBe(true);
+    expect(form.field.meta('string').blurred).toBe(false);
+    expect(form.field.meta('string').pristine).toBe(false);
+    expect(form.field.meta('string').default).toBe(false);
+    expect(form.field.meta('string').valid).toBe(true);
+  });
+
+  it('should not mark fields as dirty if should.dirty is false', () => {
+    const { form } = setup();
+
+    form.field.change('string', 'updated', { should: { dirty: false } });
+
+    expect(form.field.meta('string').dirty).toBe(false);
+  });
+
+  it('should not mark fields as touched if should.touch is false', () => {
+    const { form } = setup();
+
+    form.field.change('string', 'updated', { should: { touch: false } });
+
+    expect(form.field.meta('string').touched).toBe(false);
+  });
+});
+
+describe('if form.options.validate.change is provided ', () => {
+  it('should validate on update by default', async () => {
+    const { form } = setup({ validate: { change: schema } });
+
+    form.field.change('string', 2 as any);
+
+    await sleep(0);
+
+    expect(form.field.get('string')).toBe(2);
+    expect(form.field.meta('string').valid).toBe(false);
+    expect(form.field.errors('string')).toHaveLength(1);
+  });
+
+  it('should skip validation if should.validate is false', async () => {
+    const { form } = setup({ validate: { change: schema } });
+
+    form.field.change('string', 2 as any, { should: { validate: false } });
+
+    expect(form.field.get('string')).toBe(2);
+    expect(form.field.meta('string').valid).toBe(true);
+    expect(form.field.errors('string')).toHaveLength(0);
+  });
+});
+
+describe('if form.options.validate.change is not provided ', () => {
+  it('should not validate on update by default', async () => {
+    const { form } = setup();
+
+    form.field.change('string', 2 as any);
+    await sleep(0);
+
+    expect(form.field.get('string')).toBe(2);
+    expect(form.field.meta('string').valid).toBe(true);
+    expect(form.field.errors('string')).toHaveLength(0);
+  });
+});