diff --git a/tests/e2e/bin/test-env-setup.sh b/tests/e2e/bin/test-env-setup.sh index 92e92f9a..b06ed26c 100755 --- a/tests/e2e/bin/test-env-setup.sh +++ b/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 diff --git a/tests/e2e/specs/js-scripts/wp-consent-api.test.js b/tests/e2e/specs/js-scripts/wp-consent-api.test.js new file mode 100644 index 00000000..c4573056 --- /dev/null +++ b/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', + }, + } ); + } ); +} ); diff --git a/tests/e2e/test-snippets/test-snippets.php b/tests/e2e/test-snippets/test-snippets.php index a0ff0af8..844da3b8 100644 --- a/tests/e2e/test-snippets/test-snippets.php +++ b/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; } );