Cypress/Testing Dynamic Forms - cypress

Question

I just got into Cypress testing and tried to integrate it into a Project but got kind of stumped with testing a form on a site.
What should I be testing on the form ?
My Goal is to make sure that you can't submit the form without entering all fields that are absolutely neccessary and that the information that is provided is "correct".
So my instinct was to write a test like that
it('Submit Form without selecting Gender, Gender shows an Error')
Another test would be then
it('Submit Form without selecting Gender, Gender shows an Error, selecting Gender removes Error')
Would this be a "good" approach ? Is there a "better" one ?

Answer 1

First of all, understand how those frontend validations work. Are they JavaScript validations? Or HTML validations? If HTML, you can check required attribute on elements you need.
How many inputs does the form have? You might be typing a lot of similar test code, therefore I'd go for a data driven approach:
const testData = require('../fixtures/formData.json');
[
{
name: "name",
selector: "#name",
type: "input",
},
{
name: "gender",
selector: "#gender",
type: "checkbox",
},
].forEach(field => {
it(`Cannot send form without ${field}`, () => {
// fill in the form
// e.g. you can prepare a custom command for that
cy
.fillInForm(testData);
// delete one field
if (field.type === 'checkbox') {
cy
.get(field.selector)
.uncheck();
} else {
cy
.get(field.selector)
.clear();
}
// try to submit it
cy
.get('#submitBtn')
.click();
// check it has not been submitted
});
})
Than you can just edit or add data and the test code remains the same, no more typing.