Add E2E tests for the WP Consent API integration

tests/e2e/bin/test-env-setup.sh

@@ -6,6 +6,9 @@ wp-env run tests-cli wp theme activate twentytwentytwo
 echo -e 'Install WooCommerce \n'
 wp-env run tests-cli -- wp plugin install woocommerce --activate
 
+echo -e 'Install WP Consent API \n'
+wp-env run tests-cli -- wp plugin install wp-consent-api --activate
+
 echo -e 'Update URL structure \n'
 wp-env run tests-cli -- wp rewrite structure '/%postname%/' --hard
 

tests/e2e/specs/js-scripts/wp-consent-api.test.js

@@ -0,0 +1,157 @@
+/**
+ * External dependencies
+ */
+const { test, expect } = require( '@playwright/test' );
+
+/**
+ * Internal dependencies
+ */
+import { setSettings, clearSettings } from '../../utils/api';
+
+test.describe( 'WP Consent API Integration', () => {
+	test.beforeAll( async () => {
+		await setSettings();
+	} );
+
+	test.afterAll( async () => {
+		await clearSettings();
+	} );
+
+	test( 'window.wp_consent_type is set to `optin`', async ( { page } ) => {
+		await page.goto( 'shop' );
+
+		const consentType = await page.evaluate( () => window.wp_consent_type );
+		await expect( consentType ).toEqual( 'optin' );
+	} );
+
+	test( 'Consent update granting `analytics_storage` is sent when WP Consent API `statistics` category is `allowed`', async ( {
+		page,
+	} ) => {
+		await page.goto( 'shop?consent_default=denied' );
+		await page.evaluate( () =>
+			window.wp_set_consent( 'statistics', 'allow' )
+		);
+
+		const dataLayer = await page.evaluate( () => window.dataLayer );
+		const consentState = dataLayer.filter( ( i ) => i[ 0 ] === 'consent' );
+
+		await expect( consentState.length ).toEqual( 2 );
+
+		await expect( consentState[ 0 ] ).toEqual( {
+			0: 'consent',
+			1: 'default',
+			2: expect.objectContaining( { analytics_storage: 'denied' } ),
+		} );
+
+		await expect( consentState[ 1 ] ).toEqual( {
+			0: 'consent',
+			1: 'update',
+			2: { analytics_storage: 'granted' },
+		} );
+	} );
+
+	test( 'Consent update granting `ad_storage`, `ad_user_data`, `ad_personalization` is sent when WP Consent API `marketing` category is `allowed`', async ( {
+		page,
+	} ) => {
+		await page.goto( 'shop?consent_default=denied' );
+		await page.evaluate( () =>
+			window.wp_set_consent( 'marketing', 'allow' )
+		);
+
+		const dataLayer = await page.evaluate( () => window.dataLayer );
+		const consentState = dataLayer.filter( ( i ) => i[ 0 ] === 'consent' );
+
+		await expect( consentState.length ).toEqual( 2 );
+
+		await expect( consentState[ 0 ] ).toEqual( {
+			0: 'consent',
+			1: 'default',
+			2: expect.objectContaining( {
+				ad_storage: 'denied',
+				ad_user_data: 'denied',
+				ad_personalization: 'denied',
+			} ),
+		} );
+
+		await expect( consentState[ 1 ] ).toEqual( {
+			0: 'consent',
+			1: 'update',
+			2: {
+				ad_storage: 'granted',
+				ad_user_data: 'granted',
+				ad_personalization: 'granted',
+			},
+		} );
+	} );
+
+	test( 'Consent state is sent as update when page is loaded', async ( {
+		page,
+	} ) => {
+		await page.goto( 'shop?consent_default=denied' );
+		await page.evaluate( () =>
+			window.wp_set_consent( 'marketing', 'allow' )
+		);
+		// Go to a new page to confirm that the consent state is maintained across page loads
+		await page.goto( '/?consent_default=denied' );
+
+		const dataLayer = await page.evaluate( () => window.dataLayer );
+		const consentState = dataLayer.filter( ( i ) => i[ 0 ] === 'consent' );
+
+		await expect( consentState.length ).toEqual( 2 );
+
+		await expect( consentState[ 0 ] ).toEqual( {
+			0: 'consent',
+			1: 'default',
+			2: expect.objectContaining( {
+				ad_storage: 'denied',
+				ad_user_data: 'denied',
+				ad_personalization: 'denied',
+				analytics_storage: 'denied',
+			} ),
+		} );
+
+		await expect( consentState[ 1 ] ).toEqual( {
+			0: 'consent',
+			1: 'update',
+			2: {
+				ad_storage: 'granted',
+				ad_user_data: 'granted',
+				ad_personalization: 'granted',
+			},
+		} );
+	} );
+
+	test( 'Consent state is sent as update when page is loaded if the default is set to `granted`', async ( {
+		page,
+	} ) => {
+		await page.goto( 'shop' );
+		await page.evaluate( () =>
+			window.wp_set_consent( 'statistics', 'deny' )
+		);
+		await page.goto( 'shop' );
+
+		const dataLayer = await page.evaluate( () => window.dataLayer );
+		const consentState = dataLayer.filter( ( i ) => i[ 0 ] === 'consent' );
+
+		await expect( consentState.length ).toEqual( 2 );
+
+		await expect( consentState[ 0 ] ).toEqual( {
+			0: 'consent',
+			1: 'default',
+			2: expect.objectContaining( {
+				ad_storage: 'granted',
+				ad_user_data: 'granted',
+				ad_personalization: 'granted',
+				analytics_storage: 'granted',
+			} ),
+		} );
+
+		await expect( consentState[ 1 ] ).toEqual( {
+			0: 'consent',
+			1: 'update',
+			2: {
+				analytics_storage: 'denied',
+			},
+		} );
+	} );
+} );

tests/e2e/test-snippets/test-snippets.php

@@ -19,10 +19,17 @@
 add_filter(
 	'woocommerce_ga_gtag_consent_modes',
 	function ( $modes ) {
-		$modes[0]['analytics_storage']  = 'granted';
-		$modes[0]['ad_storage']         = 'granted';
-		$modes[0]['ad_user_data']       = 'granted';
-		$modes[0]['ad_personalization'] = 'granted';
+		$status = 'granted';
+		// Optional: Set the default consent state for tests via the `consent_default` URL parameter.
+		if ( isset( $_GET['consent_default'] ) ) { // phpcs:ignore WordPress.Security.NonceVerification.Recommended
+			$status = sanitize_text_field( wp_unslash( $_GET['consent_default'] ) ); // phpcs:ignore WordPress.Security.NonceVerification.Recommended
+		}
+
+		$modes[0]['analytics_storage']  = $status;
+		$modes[0]['ad_storage']         = $status;
+		$modes[0]['ad_user_data']       = $status;
+		$modes[0]['ad_personalization'] = $status;
+
 		return $modes;
 	}
 );