Çoxölçülü formalar ilə işləmək üçün nə istifadə olundu, təsdiqləmə üçün, hansı problemlərlə qarşılaşıldı, necə test olundu?

Çox qatlı formalarla işləmək üçün tez-tez Yup, Joi və ya React Hook Form və ya Formik əsasında öz həllər istifadə olunur. Əsas çətinlik — iç-içə strukturları və dinamik dəyişən sahələri düzgün şəkildə doğrulamaq.

Yüzlərlə qarşılaşdığım problemlər:

• İç-içə massivlər və obyektlərin doğrulanması, xüsusən də elementlərin dinamik əlavə və silinməsi zamanı.
• Asinxron doğrulama (məsələn, məlumatların serverdə unikal olub-olmamasını yoxlamaq).
• Hər sahə üçün səhvlərin idarə olunması və göstərilməsi.

Testlər üçün Jest ilə vahid testlər istifadə edirəm, burada müxtəlif məlumatlar üçün doğrulama sxemasının düzgünlüyünü yoxlayıram, həmçinin brauzerdə formanın davranışını yoxlamaq üçün end-to-end testlər (Cypress).

Yup ilə iç-içə struktura nümunəsi:

const schema = yup.object().shape({
  users: yup.array().of(
    yup.object().shape({
      name: yup.string().required(),
      contacts: yup.array().of(
        yup.object().shape({
          type: yup.string().required(),
          value: yup.string().required(),
        })
      )
    })
  )
});

// Məlumatların doğrulanması
schema.validate(data).catch(err => console.log(err.errors));