Create Ads Module E2E Tests to Cover Basic Module Setup Flow

[10upsimon]

Feature Description

As a final means to the Ads module work, comes the requirement to implement an E2E test suite that covers the basic module set up flow. This E2E test suite will cover set up flows for new and existing users, with and without the legacy Ads Module ID field present in the GA4 module.

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• Create an E2E test suite for the Ads module that covers the following requirements:

  • For new users of the plugin:

    • The Ads Module should be present and able to be set up
    • The Ads Module ID field should display as intended within the module settings during set up
    • Entering an incorrectly formatted ID should render the warning message/label as per the module functionality
    • The module should save the conversion ID correctly when the ID is valid
    • The module should be deemed connected and active once the field is saved
    • The module should appear within the connected modules list following the above

  • For existing users users of the plugin with no GA4 Ads Conversion ID present:

    • The module should appear within the "Connect More Services" view of modules
    • The Ads Module should be able to be set up correctly from this view, i.e correct settings should display when setup proceeds
    • Entering an incorrectly formatted ID should render the warning message/label as per the module functionality
    • The module should save the conversion ID correctly when the ID is valid
    • The module should be deemed connected and active once the field is saved
    • The module should appear within the connected modules list following the above

  • For existing users users of the plugin with a GA4 Ads Conversion ID present:

    • The Ads Module should be auto-activated and be connected
    • The "legacy" Ads Conversion ID field value that was in the GA4 module settings, should be present and identical within the Ads Module settings
    • Navigating to the GA4 settings should render the applicable notice informing the user that the value has moved, with correct functionality of said inline message

  • For all scenarios:

    • If an Ads Conversion ID is present and the module is connected and active, the applicable gtag (either as main tag or inline gtag config call) should be present on the frontend
    • If the Ads Conversion ID is removed entirely, and the settings saved, the module should be deemed not connected (but remain active) and the applicable inline setup CTA should be present within the modules overview/list

Implementation Brief

Add tests/e2e/specs/modules/ads/setup-no-previous-ads-cenversion-id.js

• You can name the test, say Ads setup with no Ads conversion ID present
• Before each test case call setupSiteKit() util function
• After each test case call deactivateUtilityPlugins and resetSiteKit util functions
• Add test case, say shows error message if invalid Ads conversion ID is entered
  • Go to the Settings page and switch to the connect more services tab. Then trigger the setup of Ads module. You follow this example

    site-kit-wp/tests/e2e/specs/modules/analytics/write-scope-requests.test.js

    Lines 216 to 227 in d8a3974

    	await visitAdminPage( 'admin.php', 'page=googlesitekit-settings' );
    	await page.waitForSelector( '.mdc-tab-bar' );
    	await expect( page ).toClick( '.mdc-tab', {
    	text: /connect more services/i,
    	} );
    	await page.waitForSelector(
    	'.googlesitekit-settings-connect-module--analytics'
    	);
    	await expect( page ).toClick( '.googlesitekit-cta-link', {
    	text: /set up analytics/i,
    	} );

  • Look for the text, to verify it is on the Ads module settings view: ads conversion id
  • Input invalid adsConversionID value - meaning value that does not starts with AWS, like 12345. For example `expect( page ).toFill( '#ads-conversion-id-field-id', '12345' )
  • Expect for error to appear, look it up by text: conversion ids must be in the format. Note - verify during execution if this message changed
• Add test case, say allows saving Ads conversion ID with an empty value but does not connect the module
  • Like in previous step, go to the settings, page, activate Ads module, and verify the field is present
  • Write single character for example, then empty it
  • Wait for 500ms, as notice will appear with delay
  • Verify that text Tracking for your Ads campaigns won’t work until you insert a valid ID is present
  • Click Confirm changes CTA, and wait for navigation to verify that .googlesitekit-publisher-win banner appeared notifying of successful setup of Ads module
  • Verify that Ads module is present under Connected Services tab in Settings page but with Complete setup CTA (active but not connected)
• Add test case, say connects the module when valid Ads conversion ID is saved
  • Like in previous steps, reach the module settings page, and verify setting field is present
  • Add a valid value to the field, say AWS-12345
  • Verify that clicking the save button successfully sets up the module like in previous test
  • Verify that Ads module is appearing under Connected Services tab

Add tests/e2e/specs/modules/ads/setup-with-previous-ads-cenversion-id.js

• Before each test, you can use the same util functions like previous test file
• Add new e2e plugin that will update adsConversionID setting of Analytics 4 module on request. You can pass setting as param. You can check setAnalyticsExistingPropertyID util for idea, and e2e-rest-analytics-existing-property-id.php e2e plugin
• Add test migrates the Ads conversion ID field from GA4 and activates and connects the Ads module
  • Like in previous test, go to the settings page, but navigate to the Analytics settings
  • Verify that Ads conversion ID has been moved to text is shown
  • Go to connected services tab and verify that Ads module is there
• Add test removing the Ads conversion ID field from disconnects the Ads module
  • Repeat the steps from previous steps to migrate the setting
  • Go to Ads module settings, and clean the setting value
  • Save it, and verify that Ads module is appearing in Connected services tab but with Complete setup CTA

In each test that successfully connects Ads module fetch the homepage and verify that tag is there. You can borrow the logic from toHaveAdSenseTag util function, look for Ads gtag ID, in format AWS-, example - gtag('config','AW-12345'). You might need to add e2e plugin that will return the homepage url, which can be then fetched with util function.

Test Coverage

• IB is about the test

QA Brief

• Since the issue adds e2e tests, passing tests in CI are the only needed verification, this one can skip the QA and go to the approval

Changelog entry

• N/A

[eugene-manuilov]

AC ✔️

[eugene-manuilov]

IB ✔️

[tofumatt]

(Moving directly to Approval as no QA is needed for this issue.)