Testing instructions for critical flows Mailchimp

Can activate the plugin without any error

The plugin should be installed and activated without any error or trouble.

Test Steps

1. Download the Plugin zip from Github
2. Install the plugin zip in the Plugin Uploader screen of the store

Expected Result The plugin should be installed without any error

---

Mailchimp setup

Log in

Pre-requisites

Create an account in Mailchimp

Test Steps

1. Go to the Mailchimp extension menu.
2. Click on the Login button.
3. A new popup window will open.
4. Enter your valid Mailchimp credentials.
5. Authorize the Mailchimp List Subscribe Form.
6. The popup will close automatically and redirect back to the site.
7. On the right-hand side, verify that the logged-in email ID and a Logout button are displayed.

Expected Result:

1. The WordPress site should establish a successful connection with Mailchimp upon entering the correct credentials.
2. A Logout button should also be visible next to the logged-in email.
3. The Mailchimp form lists should appear in the dropdown menu for selection.

Video

login_flow.mov

Registration

Test Steps

1. Navigate to the website and click "Create an Account."
2. Enter profile and business details, then click "Activate Account."
3. Check the email inbox and confirm the account by clicking "Confirm Mail."
4. Set a password and return to the login page.
5. Log in with your email and password.
6. Select a Mailchimp plan after logging in.
7. Return to the website and verify automatic login.
8. Check the subscription list dropdown and select a list from the available options.

Expected Results

1. The account creation form should be displayed with all fields visible and functional.
2. A confirmation email should be sent immediately after clicking "Activate Account."
3. The email confirmation should successfully activate the account.
4. Password setup should be successful, and the user should be redirected to the login page.
5. The user should be able to log in with the email and password without errors.
6. The user should be prompted to select a Mailchimp plan and proceed without issues.
7. After logging in, the subscription list dropdown should display all available Mailchimp lists.
8. The user should be able to select a list from the dropdown without issues.

Video_Registraion flow

Registraion_flow.mov

---

Your Lists

Test steps:

1. Goto Wp-admin dashboard
2. Settings > Mailchimp setup
3. Navigate to Your Lists
4. Select and Update Mailchimp List:
5. Choose the Mailchimp list that you want to connect to your form from the available options.

Expected Result:

1. Verify that the dropdown or selection menu displays all available Mailchimp lists associated with your Mailchimp account.
2. Verify that all settings remain hidden until a list is selected and saved from the dropdown.
3. Verify on the front end that no form is visible until a list is selected and saved from the dropdown in the settings.
4. Select any list from the dropdown and save the settings.
5. Verify that the form on the front end appears and functions without any issues.

Screenshot

login.no.list.selected.mov

---

Create a Signup form using the shortcode

Test Steps:

1. Navigate to WordPress Admin Dashboard.
2. Click on Posts or Pages from the left-hand menu.
3. Click on Add New to create a new post or page.
4. Click on the + icon to add a new block.
5. In the Shortcode block, enter the following shortcode: [mailchimpsf_form].
6. Publish post/page
7. View Published Post/Page

Expected Result:

1. The signup form rendered by the [mailchimpsf_form] shortcode should display correctly on the published post or page.
2. The form fields (such as email, name, etc.) should be visibly laid out as configured in the Mailchimp settings.
3. Submitting valid data into the form (such as a valid email address) should successfully add the subscriber to the configured Mailchimp audience or list.
4. Error handling: If invalid data is entered or submission fails, appropriate error messages should be displayed as configured in the plugin.

Screenshot

---

Create a Signup form using the Widget

Pre-requisites

1. Install and activate Twenty Twenty-One theme

Test Steps:

1. Navigate to WordPress Admin Dashboard.
2. Navigate to the Appearance menu > Widgets
3. Click on + button
4. Seach "Mailchimp" widget
5. Add Mailchimp widget

Expected Result:

1. The Mailchimp widget should be successfully added to the chosen widget area.
2. The signup form should display correctly on the website frontend.
3. Users should be able to subscribe to the mailing list by entering their details and clicking on the subscribe button.

Screenshot

---

Mailchimp setting > Content Options

Test steps:

1. Navigate to WordPress Admin Dashboard.
2. Navigate to Settings> Mailchimp setup
3. Navigate to Content options
4. Enter text in "Header", "Sub-Header", "Submit button" like

• Header: "Subscribe to our Newsletter"
• Sub-Header: "Stay updated with our latest news and offers!"
• Submit button: "Subscribe Now"

5. Click on "Update subscription form setting"

Expected Result:

1. The text entered in the "Header", "Sub-Header", and "Submit Button" fields should be saved successfully without any error messages.
2. When viewing the Mailchimp subscription form on the frontend of the WordPress site (e.g., using a shortcode or widget), the updated text should be displayed as configured.

Screenshot

---

Mailchimp setting > Remove Mailchimp CSS

Test steps:

1. Navigate to WordPress Admin Dashboard.
2. Navigate to Settings> Mailchimp setup
3. Navigate to Remove Mailchimp CSS
4. Checkmark the option to remove Mailchimp CSS styles from the subscription form.
5. Click on update subscribe form settings

Expected Result:

1. Upon checking the "Remove Mailchimp CSS" option and updating the settings, all Mailchimp-provided CSS styles should be disabled or removed from the subscription form.
2. Verify that the subscription form now uses default styles provided by your WordPress theme or any custom styles applied separately.

Screenshot

---

Mailchimp setting > Custom styling

Test steps:

1. Navigate to WordPress Admin Dashboard.
2. Navigate to Settings> Mailchimp setup
3. Navigate to Custom styling
4. Checkmark the option to enable the custom styling
5. Save the setting

Expected Result:

1. Able to customize various aspects of the Mailchimp subscription form, such as border styles (width, color), background colors, and text color.
2. Verify that changes made to these styling options are applied consistently across all the Mailchimp subscription forms.
3. Custom styling should not interfere with the functionality of the subscription form.
4. If there are any predefined default styles from Mailchimp, they should be overridden by the custom styles set through this setting.

Video

Custom_styling.mov

---

Mailchimp setting > List Options > Use JavaScript Support?

Test steps:

1. Navigate to WordPress Admin Dashboard.
2. Navigate to Settings> Mailchimp setup
3. Navigate to List Options > Use JavaScript Support?
4. Checkmark the option to enable/disable
5. Click on "Update subscribe form setting"

Expected Result:

1. Ensure that JavaScript degrades for users who do not have JavaScript enabled, allowing them to still submit the form using standard HTML form submission methods.
2. Verify that form submission and validation behaviors are consistent across different browsers and devices.

Regardless of whether JavaScript support is enabled or disabled, ensure that:

1. The subscription form continues to collect and process user input correctly.
2. Error handling mechanisms are in place to notify users of any submission issues.

---

Mailchimp setting > List Options > Use JavaScript Datepicker?

Test steps:

1. Navigate to WordPress Admin Dashboard.
2. Navigate to Settings> Mailchimp setup
3. Navigate to List Options > Use JavaScript Datepicker?
4. Checkmark the option to enable or disable
5. Click on "Update subscribe form setting"

Expected Result:

1. If Enabled Datepicker The plugin should utilize a JavaScript-based Datepicker UI component for date input fields within the subscription form.

2. If Disable Datepicker

   • JavaScript Datepicker functionality should be turned off.
   • Date input fields within the subscription form should revert to standard HTML date input controls.
   • The form should accept and process birthdate inputs where the month and day fall within the valid ranges (01-12 for month, 01-31 for day).

Video

Date_picker.mov

---

Mailchimp setting > List Options > Use Double Opt-In (Recommended)?

Test steps:

1. Navigate to WordPress Admin Dashboard.
2. Navigate to Settings> Mailchimp setup
3. Navigate to List Options > Use Double Opt-In (Recommended)?
4. Checkmark the option to enable or disable
5. Click on "Update subscribe form setting"

Expected Result:

If Enabled (Double Opt-In is Recommended):

1. New subscribers added through the Mailchimp integration plugin will receive an email requesting them to confirm their email address before they are officially added to the subscriber list.
2. Verify that the confirmation email is sent promptly after a user subscribes.
3. Upon clicking the confirmation link in the email, the subscriber's email address should be confirmed and added to the Mailchimp audience or list.

If Disabled:

1. Subscribers added via the plugin will be directly added to the Mailchimp audience or list without requiring confirmation of their email address.

---

Mailchimp setting > List Options > Update existing subscribers?

Test steps:

1. Navigate to WordPress Admin Dashboard.
2. Navigate to Settings> Mailchimp setup
3. Navigate to List Options > Update existing subscribers?
4. Checkmark the option to enable or disable
5. Click on "Update subscribe form setting"

Expected Result: If Enabled:

1. Existing subscriber records in the Mailchimp audience or list should be updated with the new information.
2. Verify that existing subscriber data is updated accurately without creating duplicate records.

If Disabled:

2. New data submitted via the plugin should not update existing subscriber records in the Mailchimp audience or list.

---

Mailchimp setting > List Options > Include Unsubscribe link?

Test steps:

1. Navigate to WordPress Admin Dashboard.
2. Navigate to Settings> Mailchimp setup
3. Navigate to List Options > Include Unsubscribe link?
4. Checkmark the option to enable or disable
5. Click on "Update subscribe form setting"
6. Goto front side and click on "unsubscribe from list"
7. After clicking the unsubscribe link, you should be redirected to a confirmation page or a Mailchimp-hosted page where you can confirm your email address to unsubscribe request.
8. On the unsubscribe confirmation page, enter the email address you wish to unsubscribe from the list.
9. Click on the "Unsubscribe" button or similar action to confirm your decision to unsubscribe.

Expected Result:

If Enabled:

1. Emails sent through Mailchimp should include an unsubscribe link that allows recipients to easily opt-out from future communications.
2. After entering the email address and clicking "Unsubscribe," Mailchimp should process the request and confirm the successful unsubscribe action.
3. Upon searching for the email address in the Mailchimp audience or list, the status should reflect as "Unsubscribed".

If Disabled:

1. The "unsubscribe from list" link should disappear.

Video

Unsubscribe.mov

---

Mailchimp setting > Merge Fields Included

1. Navigate to WordPress Admin Dashboard.
2. Navigate to Settings> Mailchimp setup
3. Navigate to Merge Fields Included
4. Review the available merge fields such as address, birthdate, firstname, lastname, phone number, and company.
5. For each merge field, locate the "Include?" checkbox or toggle that allows enabling or disabling the visibility of these fields in the subscription form on the frontend.
6. Checkmark or toggle the "Include?" option for each merge field as needed to enable them for display in the subscription form.

Expected Result:

1. Each merge field (address, birthdate, firstname, lastname, phone number, company) should have an "Include?" option that allows enabling or disabling its visibility in the subscription form.

2. Confirm that only the merge fields marked as "Included" are visible and accessible for users to fill out during the subscription process.

Video

Merge.Fields.Included.mov

---

Ensure settings persist between logging out and logging back in

Test Steps:

1. Log in with the first Mailchimp account.
2. Navigate to the Mailchimp settings page.
3. Save the settings (including selecting a list).
4. Log out of the account.
5. Log in again with the same account.
6. Verify that the previously saved settings and the selected list are still displayed as they were.
7. Log out again.
8. Log in with a different Mailchimp account.
9. Check that the list is not selected in the Mailchimp settings.
10. Verify that the signup form on the front end does not render until the list is selected and saved in the settings for this account.

Expected Result:

1. Settings and list selection remain persistent between logging out and logging back in with the same account.
2. The signup form is not displayed on the front end unless a list is selected and saved in the settings.

---

Convert Mailchimp Shortcode to Gutenberg Block

Test steps:

1. Navigate to Posts → Add New.
2. Ensure the Classic Editor is enabled.
3. Insert the following Mailchimp shortcode inside the post content:
4. [mailchimpsf_form]
5. Save the post as a Draft or Publish it.
6. Navigate to Plugin > turn Classic Editor off (Switch to Block Editor).
7. Open the previously created post in the Block Editor.
8. Click the "Convert to blocks" button that appears in the post editor.
9. Observe the converted content.

Expected Result:

The shortcode should be transformed into a Mailchimp Gutenberg block instead of remaining as raw shortcode text.

Screenshot

---

Ensure Double Opt-In is Not Triggered When Disabled

Test Steps:

1. Log in to the WordPress admin panel.
2. Navigate to Mailchimp WP Plugin Settings.
3. Ensure that Double Opt-In is disabled in the settings.
4. Save the settings.
5. Open the frontend (FE) of the website where the Mailchimp form is embedded.
6. Fill in the form with a test email address you control (e.g., max.garceau+newsubmission@10up.com).
7. Submit the form.
8. Check your email inbox to verify whether a confirmation email is received.
9. Log in to your Mailchimp account and check the contact list.
10. Verify that the submitted email address is added without requiring confirmation.

Expected Result:

1. No confirmation email should be sent to the submitted email address.
2. The contact should be immediately added to the Mailchimp audience/list without requiring any action from the user.

Video

401381771-c5f8d2d5-2cb9-448b-88f1-05867df832ec.mp4

---

Ensure Pending Users Remain Pending When Updating Information with Double Opt-In Enabled

Test Steps:

1. Log in to the WordPress admin panel.
2. Navigate to Mailchimp WP Plugin Settings.
3. Enable Double Opt-In.
4. Enable "Update Existing Subscribers?".
5. Save the settings if any changes were made.
6. Open the frontend (FE) of the website where the Mailchimp form is embedded.
7. Sign up using a new email address (e.g., testuser+pending@10up.com).
8. Do not confirm the email when the confirmation email is received.
9. Log in to your Mailchimp account and verify that the contact is in a pending state and not fully added to the audience.
10. Go back to the form and sign up again with the same email address, but modify some other details (e.g., name, phone number).
11. Check your email inbox and verify that you do not receive another confirmation email.
12. Confirm the original confirmation email received in Step 8.
13. Log in to Mailchimp and verify that the contact has been created and includes the updated information entered in Step 10.

Expected Result:

1. A pending subscriber should not be duplicated when updating information.
2. The user should not receive another confirmation email after updating their details.
3. Once the original confirmation email is confirmed, the contact should be created in Mailchimp with the updated details.

Video

401386642-0a49070a-afe1-482b-ac71-ba2e95fb9bac.mp4

---

Ensure Existing Subscribers Cannot Sign Up Again When "Update Existing Subscriber?" is Disabled

Test Steps:

1. Log in to the WordPress admin panel.
2. Navigate to Mailchimp WP Plugin Settings.
3. Disable "Update Existing Subscriber?".
4. Save the settings if any changes were made.
5. Open the frontend (FE) where the Mailchimp subscription form is embedded.
6. Sign up using a new email address (e.g., testuser@10up.com).
7. Verify that the new subscriber is successfully added to the Mailchimp audience.
8. Attempt to sign up again using the same email address.
9. Check if the system displays an error message:
10. Expected error: "This email address has already been subscribed to this list."

Expected Result:

• The first signup attempt should be successful.
• The second signup attempt with the same email should fail, and an error message should be displayed.
• The subscriber's details in Mailchimp should remain unchanged.

Video

401387577-8bbf31f2-a6cb-429c-b918-2cf99a49aea7.mp4

---

Ensure Any Existing Subscriber (Subscribed, Unsubscribed, Pending) Cannot Sign Up When "Update Existing Subscriber?" is Disabled.

Test Steps:

1. Turn "Update Existing Subscriber?" off in the Mailchimp WP settings
2. subscribed - Sign up with an already subscribed email on the FE submission form. You should see "This email address has already been subscribed to this list."
3. unsubscribed - Sign up with an email that has been unsubscribed from this list. You should see "This email address has already been subscribed to this list."
4. Enable Double Opt-In
5. Sign up with a new email
6. DO NOT CONFIRM THE EMAIL
7. pending - Try signing up again with the email. You should see "This email address has already been subscribed to this list."

Expected Result:

1. Subscribed users cannot sign up again and receive an error.
2. Unsubscribed users cannot sign up again and receive an error.
3. Pending users cannot sign up again and receive an error.

Video

401389231-b03403ed-8c40-4bf7-83b9-cd32abbdc83d.mp4

---

Merge Fields Not Marked as "Visible?" Should Not Appear in WP Mailchimp Settings

Test steps:

1. Uncheck the "Visible?" column in a sampling of merge fields in the test user Mailchimp account
2. On the Mailchimp WP settings page click "Update List" to refresh the data from Mailchimp
3. In the "Merge Fields Included" section, you should only see checkboxes for the merge fields that have the "Visible?" column checked in the Mailchimp account
4. (optional) Navigate to the front end to ensure that the non visible merge fields do not display.

Expected Result:

• The "Merge Fields Included" section in the Mailchimp WP settings should only display checkboxes for merge fields that have the "Visible?" column checked in Mailchimp.
• Any merge fields with the "Visible?" column unchecked in Mailchimp should not appear in the list of available merge fields in the WP settings.
• (Optional) On the frontend signup form, non-visible merge fields should not be displayed for users filling out the form.

Video

404526815-cf41d2f4-c44e-435a-865b-f522f44dfe74.mov

Required Field Does Not Display as Required in WP Mailchimp Settings Page

Test Steps:

1. Log into the test user Mailchimp account.
2. Set a sampling of merge fields to "Required" in Mailchimp.
3. Log into the WordPress site and navigate to the Mailchimp settings page.
4. Click "Update List" to refresh the Mailchimp data.
5. Scroll down to the Merge Field Tags section.
6. Verify whether the "Required" labels correctly reflect the settings from the Mailchimp account.

Expected Result:

1. Fields that were marked as "Required" in Mailchimp should be labeled as "Required" in the Merge Field Tags section of WP Mailchimp settings.
2. Fields that were not required in Mailchimp should not display a "Required" label.
3. If any required fields do not show as required, it should be reported as a bug.

Video

407306935-9b3afb45-7f62-48a5-9dab-aff35143cedf.mov

---

Prevent Fatal Error When US Phone Number or Address Is Not Included in Mailchimp Form

Test steps:

Phone Number Validation

1. Log into the test Mailchimp account.
2. Navigate to Lists → Settings → Merge Tags.
3. Set the Phone Number format to US Style.

Update Mailchimp Data in WP

1. Log into WordPress and go to Mailchimp settings.
2. Click "Update List" to refresh the Mailchimp data.
3. Ensure that Phone Number is NOT included in the Merge Fields list.

Submit the Form Without Phone Number

1. Go to the frontend signup form.
2. Fill out the form using only the email field (other merge fields are optional).
3. Click Submit.

Expected Result

The form should submit successfully without a fatal error.

Address Validation

With Address Enabled in Mailchimp

1. Log into Mailchimp and ensure Address is an included merge field.
2. Fill out the frontend signup form, including the address field.
3. Click Submit.

Expected Result

The form should submit successfully.

Without Address in Mailchimp

1. Log into Mailchimp and remove the Address field from merge fields.
2. Go to the frontend signup form and fill it out without an address field.
3. Click Submit.

Expected Result

The form should submit successfully, without errors.

Video

403889551-51340133-f8e7-4ffa-807c-1288309ca275.mov

---

Validate Phone Number Input for Correct Format in Mailchimp Form

Test Steps

Set Up Phone Number Format in Mailchimp

1. Log into the test Mailchimp account.
2. Navigate to Lists → Settings → Merge Tags.
3. Change the Phone Number format to US format.

Update Mailchimp Data in WP

4. Log into WordPress and go to Mailchimp settings.

5. Click "Update List" to refresh the Mailchimp data.

6. Ensure that the Phone Number merge field is included.

7. Navigate to the Frontend (FE) Form

8. Open the Mailchimp subscription form on the frontend.

9. Attempt to submit the form with various invalid phone number inputs.

Test Input	Expected Result	Error Message
abc1234567	❌ Fail	"Phone number must contain only numbers."
123-456-789A	❌ Fail	"Phone number must contain only numbers."
123@456#7890	❌ Fail	"Phone number must contain only numbers."
123 456 7890 (extra spaces)	❌ Fail	"Phone number must not contain spaces."
1 3 - 12 - 234	❌ Fail	"Phone number does not have enough digits."
--1234567890	❌ Fail	"Phone number format is incorrect."
123(456)7890))	❌ Fail	"Phone number format is incorrect."
+1 123-456-7890	✅ Pass	No error, valid phone format.
1234567890	✅ Pass	No error, valid phone format.

Expected Result:

1. The phone number field should only accept numbers (0–9).
2. Any letters, special characters, excessive spaces, or incorrect formatting should trigger a clear and specific error message.
3. Valid US phone numbers should be accepted without errors.

Video

404541462-62ec47d6-8b1d-4171-8b2c-c9960ef4c134.mov

---