test(conform-yup,conform-zod): setup unit tests

tests/conform-yup.spec.ts

@@ -0,0 +1,142 @@
+import { test, expect } from '@playwright/test';
+import { formatError, getFieldsetConstraint, validate } from '@conform-to/yup';
+import * as yup from 'yup';
+import { parse } from '@conform-to/dom';
+import { installGlobals } from '@remix-run/node';
+
+function createFormData(entries: Array<[string, string | File]>): FormData {
+	const formData = new FormData();
+
+	for (const [name, value] of entries) {
+		formData.append(name, value);
+	}
+
+	return formData;
+}
+
+test.beforeAll(() => {
+	installGlobals();
+});
+
+test.describe('conform-yup', () => {
+	const schema = yup
+		.object({
+			text: yup
+				.string()
+				.min(1, 'min')
+				.max(100, 'max')
+				.matches(/^[A-Z]{1-100}$/, 'regex'),
+			tag: yup.string().required('required').oneOf(['x', 'y', 'z'], 'invalid'),
+			number: yup.number().required().min(1, 'min').max(10, 'max'),
+			timestamp: yup
+				.date()
+				.min(new Date(1), 'min')
+				.max(new Date(), 'max')
+				.default(new Date()),
+			options: yup
+				.array(yup.string().oneOf(['a', 'b', 'c'], 'invalid'))
+				.min(3, 'min'),
+			nested: yup
+				.object({
+					key: yup.string().required('required'),
+				})
+				.test('nested', 'error', () => false),
+			list: yup
+				.array(
+					yup
+						.object({
+							key: yup.string().required('required'),
+						})
+						.test('list-object', 'error', () => false),
+				)
+				.max(0, 'max'),
+		})
+		.test('root', 'error', () => false);
+
+	const value = {
+		text: '',
+		tag: '',
+		number: '99',
+		timestamp: new Date(0).toISOString(),
+		options: ['a', 'd'],
+		nested: { key: '' },
+		list: [{ key: '' }],
+	};
+	const error = [
+		['text', 'min'],
+		['text', 'regex'],
+		['tag', 'required'],
+		['tag', 'invalid'],
+		['number', 'max'],
+		['timestamp', 'min'],
+		['options[1]', 'invalid'],
+		['options', 'min'],
+		['nested.key', 'required'],
+		['nested', 'error'],
+		['list[0].key', 'required'],
+		['list[0]', 'error'],
+		['list', 'max'],
+		['', 'error'],
+	];
+
+	test('formatError', () => {
+		expect(formatError(null)).toEqual([['', 'Oops! Something went wrong.']]);
+		expect(formatError(null, 'Error found')).toEqual([['', 'Error found']]);
+		expect(formatError(new Error('Test error'))).toEqual([['', 'Test error']]);
+
+		try {
+			schema.validateSync(value, {
+				abortEarly: false,
+			});
+			throw new Error('Validation should be failed');
+		} catch (exception) {
+			expect(formatError(exception)).toEqual(error);
+		}
+	});
+
+	test('getFieldsetConstraint', () => {
+		expect(getFieldsetConstraint(schema)).toEqual({
+			text: {
+				minLength: 1,
+				maxLength: 100,
+				pattern: '^[A-Z]{1-100}$',
+			},
+			tag: {
+				required: true,
+				pattern: 'x|y|z',
+			},
+			number: {
+				required: true,
+				min: 1,
+				max: 10,
+			},
+			timestamp: {},
+			options: {},
+			nested: {},
+			list: {},
+		});
+	});
+
+	test('validate', () => {
+		const formData = createFormData([
+			['text', value.text],
+			['tag', value.tag],
+			['number', value.number],
+			['timestamp', value.timestamp],
+			['options[0]', value.options[0]],
+			['options[1]', value.options[1]],
+			['nested.key', value.nested.key],
+			['list[0].key', value.list[0].key],
+		]);
+		const submission = parse(formData);
+
+		expect(submission.value).toEqual(value);
+		expect(validate(formData, schema)).toEqual({
+			...submission,
+			error,
+		});
+
+		// TODO: Fallback to server validation when non zod error is caught on client validation
+		// expect(() => validate(formData, undefined as any)).toThrow();
+	});
+});

tests/conform-zod.spec.ts

@@ -0,0 +1,166 @@
+import { test, expect } from '@playwright/test';
+import {
+	formatError,
+	getFieldsetConstraint,
+	validate,
+	ifNonEmptyString,
+} from '@conform-to/zod';
+import { z } from 'zod';
+import { parse } from '@conform-to/dom';
+import { installGlobals } from '@remix-run/node';
+
+function createFormData(entries: Array<[string, string | File]>): FormData {
+	const formData = new FormData();
+
+	for (const [name, value] of entries) {
+		formData.append(name, value);
+	}
+
+	return formData;
+}
+
+test.beforeAll(() => {
+	installGlobals();
+});
+
+test.describe('conform-zod', () => {
+	const schema = z
+		.object({
+			text: z
+				.string()
+				.min(1, 'min')
+				.max(100, 'max')
+				.regex(/^[A-Z]{1-100}$/, 'regex')
+				.refine(() => false, 'refine'),
+			number: z.preprocess(
+				ifNonEmptyString(Number),
+				z.number().min(1, 'min').max(10, 'max').step(2, 'step'),
+			),
+			timestamp: z.preprocess(
+				ifNonEmptyString((value) => new Date(value)),
+				z
+					.date()
+					.min(new Date(1), 'min')
+					.max(new Date(), 'max')
+					.default(new Date()),
+			),
+			flag: z.preprocess(
+				ifNonEmptyString((value) => value === 'Yes'),
+				z.boolean().optional(),
+			),
+			options: z
+				.array(z.enum(['a', 'b', 'c']).refine(() => false, 'refine'))
+				.min(3, 'min'),
+			nested: z
+				.object({
+					key: z.string().refine(() => false, 'refine'),
+				})
+				.refine(() => false, 'refine'),
+			list: z
+				.array(
+					z
+						.object({
+							key: z.string().refine(() => false, 'refine'),
+						})
+						.refine(() => false, 'refine'),
+				)
+				.max(0, 'max'),
+		})
+		.refine(() => false, 'refine');
+
+	const value = {
+		text: '',
+		number: '3',
+		timestamp: new Date(0).toISOString(),
+		flag: 'no',
+		options: ['a', 'b'],
+		nested: { key: '' },
+		list: [{ key: '' }],
+	};
+	const error = [
+		['text', 'min'],
+		['text', 'regex'],
+		['text', 'refine'],
+		['number', 'step'],
+		['timestamp', 'min'],
+		['options', 'min'],
+		['options[0]', 'refine'],
+		['options[1]', 'refine'],
+		['nested.key', 'refine'],
+		['nested', 'refine'],
+		['list', 'max'],
+		['list[0].key', 'refine'],
+		['list[0]', 'refine'],
+		['', 'refine'],
+	];
+
+	test('formatError', () => {
+		const result = schema.safeParse(value);
+
+		if (result.success) {
+			throw new Error('Validation should be failed');
+		}
+
+		expect(formatError(null)).toEqual([['', 'Oops! Something went wrong.']]);
+		expect(formatError(null, 'Error found')).toEqual([['', 'Error found']]);
+		expect(formatError(new Error('Test error'))).toEqual([['', 'Test error']]);
+		expect(formatError(result.error)).toEqual(error);
+	});
+
+	test('getFieldsetConstraint', () => {
+		expect(getFieldsetConstraint(schema)).toEqual({
+			text: {
+				required: true,
+				minLength: 1,
+				maxLength: 100,
+				pattern: '^[A-Z]{1-100}$',
+			},
+			number: {
+				required: true,
+				min: 1,
+				max: 10,
+			},
+			timestamp: {
+				required: false,
+			},
+			flag: {
+				required: false,
+			},
+			options: {
+				required: true,
+				pattern: 'a|b|c',
+				multiple: true,
+			},
+			nested: {
+				required: true,
+			},
+			list: {
+				required: true,
+				multiple: true,
+			},
+		});
+	});
+
+	test('validate', () => {
+		const formData = createFormData([
+			['text', value.text],
+			['number', value.number],
+			['timestamp', value.timestamp],
+			['flag', value.flag],
+			['options[0]', value.options[0]],
+			['options[1]', value.options[1]],
+			['nested.key', value.nested.key],
+			['list[0].key', value.list[0].key],
+		]);
+		const submission = parse(formData);
+
+		expect(submission.value).toEqual(value);
+		expect(validate(formData, schema)).toEqual({
+			...submission,
+			error,
+		});
+
+		// TODO: Fallback to server validation when non zod error is caught on client validation
+		// expect(() => validate(formData, undefined as any)).toThrow();
+	});
+});