From 140796471f6234428fad2808ef191277c03f63d3 Mon Sep 17 00:00:00 2001 From: MaxwellGarceau Date: Wed, 1 Jan 2025 23:25:17 -0500 Subject: [PATCH] Revamp email validation. Add unrequired fields validation. --- tests/cypress/e2e/validation/email.test.js | 142 +++++++++++++ tests/cypress/e2e/validation/general.test.js | 190 ------------------ .../validate-unrequired-fields.test.js | 130 ++++++++++++ 3 files changed, 272 insertions(+), 190 deletions(-) create mode 100644 tests/cypress/e2e/validation/email.test.js delete mode 100644 tests/cypress/e2e/validation/general.test.js create mode 100644 tests/cypress/e2e/validation/validate-unrequired-fields.test.js diff --git a/tests/cypress/e2e/validation/email.test.js b/tests/cypress/e2e/validation/email.test.js new file mode 100644 index 0000000..981ad40 --- /dev/null +++ b/tests/cypress/e2e/validation/email.test.js @@ -0,0 +1,142 @@ +/* eslint-disable no-undef */ + +/** + * NOTE: We aren't verifying successful submission in the Mailchimp account for this test suite. + * Those assertions are covered in the submission tests. + * + * Hypothetically, it's possible that validation passes WP, but fails in Mailchimp. + * + * However, the response the API receives comes directly from Mailchimp and is displayed + * on the FE. So, if the form is submitted successfully, the submission should be in Mailchimp. + */ +describe('General merge field validation', () => { + let shortcodePostURL; + let blockPostPostURL; + + // Merge fields array for reuse + const mergeFields = [ + '#mc_mv_FNAME', + '#mc_mv_LNAME', + '#mc_mv_ADDRESS', + '#mc_mv_BIRTHDAY', + '#mc_mv_COMPANY', + '#mc_mv_PHONE' + ]; + + before(() => { + // TODO: Initialize tests from a blank state + // TODO: Wipe WP data related to a users options + // TODO: Delete all contacts in a users Mailchimp account + // TODO: Ensure the default audience list is "10up" + // TODO: Include all merge fields as "Visible" in the users Mailchimp account + + // Load the post URLs from the JSON file + cy.fixture('postUrls.json').then((urls) => { + shortcodePostURL = urls.shortcodePostURL; + blockPostPostURL = urls.blockPostPostURL; + }); + + cy.login(); // WP + cy.mailchimpLoginIfNotAlreadyLoggedIn(); + + // Set all merge fields to not required in the Mailchimp test user account + cy.getListId('10up').then((listId) => { + cy.updateMergeFieldsByList(listId, { required: false }); + }); + cy.selectList('10up'); // Ensure list is selected, refreshes Mailchimp data with WP + + // Enable all merge fields + toggleMergeFields('uncheck'); + cy.get('input[value="Update Subscribe Form Settings"]').first().click(); + }); + + after(() => { + // Cleanup + cy.visit('/wp-admin/admin.php?page=mailchimp_sf_options'); + + // Re-enable JavaScript support + cy.setJavaScriptOption(true); + }); + + // Function to toggle merge fields + function toggleMergeFields(action) { + mergeFields.forEach((field) => { + cy.get(field).should('exist')[action](); + }); + } + + function invalidEmailAssertions() { + [shortcodePostURL, blockPostPostURL].forEach((url) => { + cy.visit(url); + + // Ensure the form exists + cy.get('#mc_signup').should('exist'); + cy.get('#mc_mv_EMAIL').should('exist'); + cy.get('#mc_signup_submit').should('exist'); + + // Email assertions + cy.get('#mc_mv_EMAIL').clear(); // No email + cy.submitFormAndVerifyError(); + cy.get('.mc_error_msg').contains('Email Address: This value should not be blank.'); + + cy.get('#mc_mv_EMAIL').clear().type('user@'); // Missing domain + cy.submitFormAndVerifyError(); + cy.get('.mc_error_msg').contains('Email Address: Please enter a valid email.'); + + cy.get('#mc_mv_EMAIL').clear().type('@example.com'); // Missing username + cy.submitFormAndVerifyError(); + cy.get('.mc_error_msg').contains('Email Address: Please enter a valid email.'); + + cy.get('#mc_mv_EMAIL').clear().type('userexample.com'); // Missing '@' symbol + cy.submitFormAndVerifyError(); + cy.get('.mc_error_msg').contains('Email Address: Please enter a valid email.'); + + cy.get('#mc_mv_EMAIL').clear().type('user..name@example.com'); // Consecutive dots + cy.submitFormAndVerifyError(); + cy.get('.mc_error_msg').contains('Email Address: Please enter a valid email.'); + + cy.get('#mc_mv_EMAIL').clear().type('user!#%&*{}@example.com'); // Invalid characters + cy.submitFormAndVerifyError(); + cy.get('.mc_error_msg').contains('Email Address: Please enter a valid email.'); + + cy.get('#mc_mv_EMAIL').clear().type('user@example'); // Missing top-level domain + cy.submitFormAndVerifyError(); + cy.get('.mc_error_msg').contains('Email Address: Please enter a valid email.'); + + cy.get('#mc_mv_EMAIL').clear().type('user@-example.com'); // Domain starting with dash + cy.submitFormAndVerifyError(); + cy.get('.mc_error_msg').contains('Email Address: Please enter a valid email.'); + + cy.get('#mc_mv_EMAIL').clear().type('user@example-.com'); // Domain ending with dash + cy.submitFormAndVerifyError(); + cy.get('.mc_error_msg').contains('Email Address: Please enter a valid email.'); + + cy.get('#mc_mv_EMAIL').clear().type('"user@example.com'); // Unclosed quoted string + cy.submitFormAndVerifyError(); + cy.get('.mc_error_msg').contains('Email Address: Please enter a valid email.'); + + // Test exceeding maximum email length + let longEmail = 'a'.repeat(245) + '@example.com'; + cy.get('#mc_mv_EMAIL').clear().type(longEmail); + cy.submitFormAndVerifyError(); + cy.get('.mc_error_msg').contains('Email Address: Please enter a valid email.'); + }); + } + + context('JavaScript Disabled', () => { + before(() => { + cy.setJavaScriptOption(false); + }); + + it('Invalid email addresses fail validation', invalidEmailAssertions); + }); + + context('JavaScript Enabled', () => { + before(() => { + cy.login(); + cy.setJavaScriptOption(true); + }); + + it('Invalid email addresses fail validation', invalidEmailAssertions); + }); +}); \ No newline at end of file diff --git a/tests/cypress/e2e/validation/general.test.js b/tests/cypress/e2e/validation/general.test.js deleted file mode 100644 index 732784e..0000000 --- a/tests/cypress/e2e/validation/general.test.js +++ /dev/null @@ -1,190 +0,0 @@ -/* eslint-disable no-undef */ - -/** - * NOTE: We aren't verifying successful submission in the Mailchimp account for this test suite. - * Those assertions are covered in the submission tests. - * - * Hypothetically, it's possible that validation passes WP, but fails in Mailchimp. - * - * However, the response the API receives comes directly from Mailchimp and is displayed - * on the FE. So, if the form is submitted successfully, the submission should be in Mailchimp. - */ -describe('General merge field validation', () => { - let shortcodePostURL; - let blockPostPostURL; - - // Merge fields array for reuse - const mergeFields = [ - '#mc_mv_FNAME', - '#mc_mv_LNAME', - '#mc_mv_ADDRESS', - '#mc_mv_BIRTHDAY', - '#mc_mv_COMPANY', - '#mc_mv_PHONE' - ]; - - before(() => { - // TODO: Initialize tests from a blank state - // TODO: Wipe WP data related to a users options - // TODO: Delete all contacts in a users Mailchimp account - // TODO: Ensure the default audience list is "10up" - // TODO: Include all merge fields as "Visible" in the users Mailchimp account - - // Load the post URLs from the JSON file - cy.fixture('postUrls.json').then((urls) => { - shortcodePostURL = urls.shortcodePostURL; - blockPostPostURL = urls.blockPostPostURL; - }); - - cy.login(); // WP - cy.mailchimpLoginIfNotAlreadyLoggedIn(); - - // Set all merge fields to not required in the Mailchimp test user account - cy.getListId('10up').then((listId) => { - cy.updateMergeFieldsByList(listId, { required: false }); - }); - cy.selectList('10up'); // Ensure list is selected, refreshes Mailchimp data with WP - - // Enable all merge fields - toggleMergeFields('check'); - cy.get('input[value="Update Subscribe Form Settings"]').first().click(); - }); - - after(() => { - // Cleanup - cy.visit('/wp-admin/admin.php?page=mailchimp_sf_options'); - toggleMergeFields('uncheck'); // TODO: Do I need to uncheck all merge fields? - - // Re-enable JavaScript support - cy.get('#mc_use_javascript').check(); - cy.get('input[value="Update Subscribe Form Settings"]').first().click(); - }); - - // Function to toggle merge fields - function toggleMergeFields(action) { - mergeFields.forEach((field) => { - cy.get(field).should('exist')[action](); - }); - } - - function invalidEmailAssertions() { - cy.get('#mc_mv_EMAIL').clear(); // No email - cy.submitFormAndVerifyError(); - cy.get('.mc_error_msg').contains('Email Address: This value should not be blank.'); - - cy.get('#mc_mv_EMAIL').clear().type('user@'); // Missing domain - cy.submitFormAndVerifyError(); - cy.get('.mc_error_msg').contains('Email Address: Please enter a valid email.'); - - cy.get('#mc_mv_EMAIL').clear().type('@example.com'); // Missing username - cy.submitFormAndVerifyError(); - cy.get('.mc_error_msg').contains('Email Address: Please enter a valid email.'); - - cy.get('#mc_mv_EMAIL').clear().type('userexample.com'); // Missing '@' symbol - cy.submitFormAndVerifyError(); - cy.get('.mc_error_msg').contains('Email Address: Please enter a valid email.'); - - cy.get('#mc_mv_EMAIL').clear().type('user..name@example.com'); // Consecutive dots - cy.submitFormAndVerifyError(); - cy.get('.mc_error_msg').contains('Email Address: Please enter a valid email.'); - - cy.get('#mc_mv_EMAIL').clear().type('user!#%&*{}@example.com'); // Invalid characters - cy.submitFormAndVerifyError(); - cy.get('.mc_error_msg').contains('Email Address: Please enter a valid email.'); - - cy.get('#mc_mv_EMAIL').clear().type('user@example'); // Missing top-level domain - cy.submitFormAndVerifyError(); - cy.get('.mc_error_msg').contains('Email Address: Please enter a valid email.'); - - cy.get('#mc_mv_EMAIL').clear().type('user@-example.com'); // Domain starting with dash - cy.submitFormAndVerifyError(); - cy.get('.mc_error_msg').contains('Email Address: Please enter a valid email.'); - - cy.get('#mc_mv_EMAIL').clear().type('user@example-.com'); // Domain ending with dash - cy.submitFormAndVerifyError(); - cy.get('.mc_error_msg').contains('Email Address: Please enter a valid email.'); - - cy.get('#mc_mv_EMAIL').clear().type('"user@example.com'); // Unclosed quoted string - cy.submitFormAndVerifyError(); - cy.get('.mc_error_msg').contains('Email Address: Please enter a valid email.'); - - // Test exceeding maximum email length - let longEmail = 'a'.repeat(245) + '@example.com'; - cy.get('#mc_mv_EMAIL').clear().type(longEmail); - cy.submitFormAndVerifyError(); - cy.get('.mc_error_msg').contains('Email Address: Please enter a valid email.'); - } - - function formValidationAssertions() { - [shortcodePostURL, blockPostPostURL].forEach((url) => { - cy.visit(url); - cy.get('#mc_signup').should('exist'); - cy.get('#mc_mv_EMAIL').should('exist'); - cy.get('#mc_signup_submit').should('exist'); - - // Optional merge fields - cy.get('#mc_mv_FNAME').should('exist'); - cy.get('#mc_mv_LNAME').should('exist'); - cy.get('#mc_mv_ADDRESS-addr1').should('exist'); // The address field has several inputs - cy.get('#mc_mv_BIRTHDAY').should('exist'); - cy.get('#mc_mv_COMPANY').should('exist'); - cy.get('#mc_mv_PHONE').should('exist'); - - // Validation assertions - - // Test email error handling - cy.get('#mc_mv_EMAIL').clear(); - cy.submitFormAndVerifyError(); - - cy.get('.mc_error_msg').contains('Email Address: This value should not be blank.'); - invalidEmailAssertions(); - - // TODO: BLOCKED - After a user fills out a form successfully once none of the verification checks work (is this a bug?) - // TODO: We will have to delete the contact before each form submission via the Mailchimp API - - // // TODO: This is failing because we need to confirm the test email address subscription - // // TODO: We will also have to delete the contact before each form submission via the Mailchimp API - // Step 6: Verify that the form was submitted successfully - // cy.submitFormAndVerifyWPSuccess(); - - // // Step 7: Verify that the contact was added to the Mailchimp account via the Mailchimp API - // cy.verifyContactAddedToMailchimp(email, '10up'); - - /** - * Phone Number - Handled in /validation/us-phone.test.js - */ - - /** - * Address - Handled in /validation/address.test.js - */ - - /** - * Remaining merge fields - */ - // Test birthday - no validation - // Test company - no validation - // Test first name - no validation - // Test last name - no validation - }); - } - - it('JavaScript disabled', () => { - cy.visit('/wp-admin/admin.php?page=mailchimp_sf_options'); - - // Disable JavaScript support - cy.get('#mc_use_javascript').uncheck(); - cy.get('input[value="Update Subscribe Form Settings"]').first().click(); - - formValidationAssertions(); - }); - - it('JavaScript enabled', () => { - cy.visit('/wp-admin/admin.php?page=mailchimp_sf_options'); - - // Enable JavaScript support - cy.get('#mc_use_javascript').check(); - cy.get('input[value="Update Subscribe Form Settings"]').first().click(); - - formValidationAssertions(); - }); -}); \ No newline at end of file diff --git a/tests/cypress/e2e/validation/validate-unrequired-fields.test.js b/tests/cypress/e2e/validation/validate-unrequired-fields.test.js new file mode 100644 index 0000000..4fab6d2 --- /dev/null +++ b/tests/cypress/e2e/validation/validate-unrequired-fields.test.js @@ -0,0 +1,130 @@ +/* eslint-disable no-undef */ +describe('General merge field validation', () => { + let shortcodePostURL; + let blockPostPostURL; + + // Merge fields array for reuse + const mergeFields = [ + '#mc_mv_FNAME', + '#mc_mv_LNAME', + '#mc_mv_ADDRESS', + '#mc_mv_BIRTHDAY', + '#mc_mv_COMPANY', + '#mc_mv_PHONE' + ]; + + before(() => { + // TODO: Initialize tests from a blank state + // TODO: Wipe WP data related to a users options + // TODO: Delete all contacts in a users Mailchimp account + // TODO: Ensure the default audience list is "10up" + // TODO: Include all merge fields as "Visible" in the users Mailchimp account + + // Load the post URLs from the JSON file + cy.fixture('postUrls.json').then((urls) => { + shortcodePostURL = urls.shortcodePostURL; + blockPostPostURL = urls.blockPostPostURL; + }); + + cy.login(); // WP + cy.mailchimpLoginIfNotAlreadyLoggedIn(); + + // Set all merge fields to not required in the Mailchimp test user account + cy.getListId('10up').then((listId) => { + cy.updateMergeFieldsByList(listId, { required: false }); + }); + cy.selectList('10up'); // Ensure list is selected, refreshes Mailchimp data with WP + + // Enable all merge fields + toggleMergeFields('check'); + cy.get('input[value="Update Subscribe Form Settings"]').first().click(); + }); + + after(() => { + // Cleanup + cy.visit('/wp-admin/admin.php?page=mailchimp_sf_options'); + toggleMergeFields('uncheck'); // TODO: Do I need to uncheck all merge fields? + + // Re-enable JavaScript support + cy.get('#mc_use_javascript').check(); + cy.get('input[value="Update Subscribe Form Settings"]').first().click(); + }); + + // Function to toggle merge fields + function toggleMergeFields(action) { + mergeFields.forEach((field) => { + cy.get(field).should('exist')[action](); + }); + } + + function unrequiredFieldsSubmitWhileBlank() { + [shortcodePostURL, blockPostPostURL].forEach((url) => { + cy.visit(url); + cy.get('#mc_signup').should('exist'); + cy.get('#mc_mv_EMAIL').should('exist'); + cy.get('#mc_signup_submit').should('exist'); + + // Optional merge fields + cy.get('#mc_mv_FNAME').should('exist'); + cy.get('#mc_mv_LNAME').should('exist'); + cy.get('#mc_mv_ADDRESS-addr1').should('exist'); // Address line 1 + cy.get('#mc_mv_ADDRESS-addr2').should('exist'); // Address line 2 + cy.get('#mc_mv_ADDRESS-city').should('exist'); // City + cy.get('#mc_mv_ADDRESS-state').should('exist'); // State + cy.get('#mc_mv_ADDRESS-zip').should('exist'); // ZIP code + cy.get('#mc_mv_ADDRESS-country').should('exist'); // Country + cy.get('#mc_mv_BIRTHDAY').should('exist'); + cy.get('#mc_mv_COMPANY').should('exist'); + cy.get('#mc_mv_PHONE').should('exist'); + + // Validation assertions + + // Email is required + cy.get('#mc_mv_EMAIL').type('testemailuser1234@10up.com'); + + // TODO: BLOCKED - After a user fills out a form successfully once none of the verification checks work (is this a bug?) + // TODO: We will have to delete the contact before each form submission via the Mailchimp API + + // // TODO: This is failing because we need to confirm the test email address subscription + // // TODO: We will also have to delete the contact before each form submission via the Mailchimp API + // Step 6: Verify that the form was submitted successfully + // cy.submitFormAndVerifyWPSuccess(); + + // // Step 7: Verify that the contact was added to the Mailchimp account via the Mailchimp API + // cy.verifyContactAddedToMailchimp(email, '10up'); + + /** + * Phone Number - Handled in /validation/us-phone.test.js + */ + + /** + * Address - Handled in /validation/address.test.js + */ + + /** + * Remaining merge fields + */ + // Test birthday - no validation + // Test company - no validation + // Test first name - no validation + // Test last name - no validation + }); + } + + context('JavaScript Disabled', () => { + before(() => { + cy.setJavaScriptOption(false); + }); + + it('Unrequired fields can be submitted while blank', unrequiredFieldsSubmitWhileBlank); + }); + + context('JavaScript Enabled', () => { + before(() => { + cy.login(); + cy.setJavaScriptOption(true); + }); + + it('Unrequired fields can be submitted while blank', unrequiredFieldsSubmitWhileBlank); + }); +}); \ No newline at end of file