Move checkout terms & conditions/privacy policy tests (#11973)

tests/e2e/tests/checkout/checkout-block.merchant.block_theme.spec.ts

@@ -2,8 +2,20 @@
  * External dependencies
  */
 import { BlockData } from '@woocommerce/e2e-types';
-import { test, expect } from '@woocommerce/e2e-playwright-utils';
+import { test as base, expect } from '@woocommerce/e2e-playwright-utils';
 
+/**
+ * Internal dependencies
+ */
+import { CheckoutPage } from './checkout.page';
+import { REGULAR_PRICED_PRODUCT_NAME } from './constants';
+
+declare global {
+	interface Window {
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		wcSettings: { storePages: any };
+	}
+}
 const blockData: BlockData = {
 	name: 'Checkout',
 	slug: 'woocommerce/checkout',
@@ -16,11 +28,157 @@ const blockData: BlockData = {
 		frontend: {},
 	},
 };
-
+const test = base.extend< { checkoutPageObject: CheckoutPage } >( {
+	checkoutPageObject: async ( { page }, use ) => {
+		const pageObject = new CheckoutPage( {
+			page,
+		} );
+		await use( pageObject );
+	},
+} );
 test.describe( 'Merchant → Checkout', () => {
 	// `as string` is safe here because we know the variable is a string, it is defined above.
 	const blockSelectorInEditor = blockData.selectors.editor.block as string;
 
+	test.describe( 'Can adjust T&S and Privacy Policy options', () => {
+		test.beforeAll( async ( { browser } ) => {
+			const page = await browser.newPage();
+			await page.goto(
+				`${ process.env.WORDPRESS_BASE_URL }/?setup_terms_and_privacy`
+			);
+			await expect(
+				page.getByText( 'Terms & Privacy pages set up.' )
+			).toBeVisible();
+			await page.close();
+		} );
+
+		test.afterAll( async ( { browser } ) => {
+			const page = await browser.newPage();
+			await page.goto(
+				`${ process.env.WORDPRESS_BASE_URL }/?teardown_terms_and_privacy`
+			);
+			await expect(
+				page.getByText( 'Terms & Privacy pages teared down.' )
+			).toBeVisible();
+			await page.close();
+		} );
+
+		test( 'Merchant can see T&S and Privacy Policy links without checkbox', async ( {
+			frontendUtils,
+			checkoutPageObject,
+		} ) => {
+			await frontendUtils.goToShop();
+			await frontendUtils.addToCart( REGULAR_PRICED_PRODUCT_NAME );
+			await frontendUtils.goToCheckout();
+			await expect(
+				frontendUtils.page.getByText(
+					'By proceeding with your purchase you agree to our Terms and Conditions and Privacy Policy'
+				)
+			).toBeVisible();
+
+			const termsAndConditions = frontendUtils.page
+				.getByRole( 'link' )
+				.getByText( 'Terms and Conditions' )
+				.first();
+			const privacyPolicy = frontendUtils.page
+				.getByRole( 'link' )
+				.getByText( 'Privacy Policy' )
+				.first();
+
+			const { termsPageUrl, privacyPageUrl } =
+				await frontendUtils.page.evaluate( () => {
+					return {
+						termsPageUrl:
+							window.wcSettings.storePages.terms.permalink,
+						privacyPageUrl:
+							window.wcSettings.storePages.privacy.permalink,
+					};
+				} );
+			await expect( termsAndConditions ).toHaveAttribute(
+				'href',
+				termsPageUrl
+			);
+			await expect( privacyPolicy ).toHaveAttribute(
+				'href',
+				privacyPageUrl
+			);
+			await checkoutPageObject.fillInCheckoutWithTestData();
+			await checkoutPageObject.placeOrder();
+			await expect(
+				frontendUtils.page.getByText(
+					'Thank you. Your order has been received.'
+				)
+			).toBeVisible();
+		} );
+		test( 'Merchant can see T&S and Privacy Policy links with checkbox', async ( {
+			frontendUtils,
+			checkoutPageObject,
+			editorUtils,
+			admin,
+			editor,
+		} ) => {
+			await admin.visitSiteEditor( {
+				postId: 'woocommerce/woocommerce//page-checkout',
+				postType: 'wp_template',
+			} );
+			await editorUtils.enterEditMode();
+			await editor.openDocumentSettingsSidebar();
+			await editor.selectBlocks(
+				blockSelectorInEditor +
+					'  [data-type="woocommerce/checkout-terms-block"]'
+			);
+			let requireTermsCheckbox = editor.page.getByRole( 'checkbox', {
+				name: 'Require checkbox',
+				exact: true,
+			} );
+			await requireTermsCheckbox.check();
+			await editor.saveSiteEditorEntities();
+			await frontendUtils.goToShop();
+			await frontendUtils.addToCart( REGULAR_PRICED_PRODUCT_NAME );
+			await frontendUtils.goToCheckout();
+			await checkoutPageObject.fillInCheckoutWithTestData();
+			await checkoutPageObject.placeOrder( false );
+
+			const checkboxWithError = frontendUtils.page.getByLabel(
+				'You must accept our Terms and Conditions and Privacy Policy to continue with your purchase.'
+			);
+			await expect( checkboxWithError ).toHaveAttribute(
+				'aria-invalid',
+				'true'
+			);
+
+			await frontendUtils.page
+				.getByLabel(
+					'You must accept our Terms and Conditions and Privacy Policy to continue with your purchase.'
+				)
+				.check();
+
+			await checkoutPageObject.placeOrder();
+			await expect(
+				frontendUtils.page.getByText(
+					'Thank you. Your order has been received'
+				)
+			).toBeVisible();
+
+			await admin.visitSiteEditor( {
+				postId: 'woocommerce/woocommerce//page-checkout',
+				postType: 'wp_template',
+			} );
+			await editorUtils.enterEditMode();
+			await editor.openDocumentSettingsSidebar();
+			await editor.selectBlocks(
+				blockSelectorInEditor +
+					'  [data-type="woocommerce/checkout-terms-block"]'
+			);
+			requireTermsCheckbox = editor.page.getByRole( 'checkbox', {
+				name: 'Require checkbox',
+				exact: true,
+			} );
+			await requireTermsCheckbox.uncheck();
+			await editor.saveSiteEditorEntities();
+		} );
+	} );
+
 	test.describe( 'in page editor', () => {
 		test.beforeEach( async ( { editorUtils, admin, editor } ) => {
 			await admin.visitSiteEditor( {

tests/e2e/tests/checkout/checkout.page.ts

@@ -78,9 +78,17 @@ export class CheckoutPage {
 		await this.page.evaluate( 'document.activeElement.blur()' );
 	}
 
-	async placeOrder() {
+	/**
+	 * Place order and wait for redirect to order received page.
+	 *
+	 * @param  waitForRedirect If false, then the method will not wait for the redirect to order received page. Useful
+	 *                         when testing for errors on the checkout page.
+	 */
+	async placeOrder( waitForRedirect = true ) {
 		await this.page.getByText( 'Place Order', { exact: true } ).click();
-		await this.page.waitForURL( /order-received/ );
+		if ( waitForRedirect ) {
+			await this.page.waitForURL( /order-received/ );
+		}
 	}
 
 	async verifyAddressDetails(