test(e2e): add Modal and Popup anchor check

Codeinwp · Aug 7, 2024 · f981a59 · f981a59
1 parent ce610a5
commit f981a59
Show file tree

Hide file tree

Showing 2 changed files with 128 additions and 0 deletions.
diff --git a/src/blocks/test/e2e/blocks/modal.spec.js b/src/blocks/test/e2e/blocks/modal.spec.js
@@ -0,0 +1,89 @@
+/**
+ * WordPress dependencies
+ */
+import { test, expect } from '@wordpress/e2e-test-utils-playwright';
+
+test.describe( 'Modal', () => {
+	test.beforeEach( async({ admin }) => {
+		await admin.createNewPost();
+	});
+
+	test( 'anchor to a button', async({ editor, page }) => {
+		await editor.insertBlock({
+			name: 'core/buttons',
+			attributes: {},
+			innerBlocks: [
+				{
+					name: 'core/button',
+					attributes: {
+						text: 'Open Modal',
+						anchor: 'modal-trigger'
+					}
+				}
+			]
+		});
+
+		await editor.insertBlock({
+			name: 'themeisle-blocks/modal',
+			attributes: {
+				anchor: 'modal-trigger'
+			},
+			innerBlocks: [
+				{
+					name: 'core/paragraph',
+					attributes: {
+						content: 'Popup Content Test'
+					}
+				}
+			]
+		});
+
+		const postId = await editor.publishPost();
+		await page.goto( `/?p=${postId}` );
+
+		await page.locator( 'div' ).filter({ hasText: /^Open Modal$/ }).click();
+
+		await expect( page.getByText( 'Popup Content Test' ) ).toBeVisible();
+	});
+
+	test( 'close on escape', async({ editor, page }) => {
+
+		await editor.insertBlock({
+			name: 'core/buttons',
+			attributes: {},
+			innerBlocks: [
+				{
+					name: 'core/button',
+					attributes: {
+						text: 'Open Modal',
+						anchor: 'modal-trigger'
+					}
+				}
+			]
+		});
+
+		await editor.insertBlock({
+			name: 'themeisle-blocks/modal',
+			attributes: {
+				anchor: 'modal-trigger'
+			},
+			innerBlocks: [
+				{
+					name: 'core/paragraph',
+					attributes: {
+						content: 'Popup Content Test'
+					}
+				}
+			]
+		});
+
+		const postId = await editor.publishPost();
+		await page.goto( `/?p=${postId}` );
+
+		await page.locator( 'div' ).filter({ hasText: /^Open Modal$/ }).click();
+
+		await expect( page.getByText( 'Popup Content Test' ) ).toBeVisible();
+		await page.keyboard.press( 'Escape' );
+		await expect( page.getByText( 'Popup Content Test' ) ).toBeHidden();
+	});
+});
diff --git a/src/blocks/test/e2e/blocks/popup.spec.js b/src/blocks/test/e2e/blocks/popup.spec.js
@@ -8,6 +8,45 @@ test.describe( 'Popup', () => {
 		await admin.createNewPost();
 	});
 
+	test( 'anchor to a button', async({ editor, page }) => {
+		await editor.insertBlock({
+			name: 'core/buttons',
+			attributes: {},
+			innerBlocks: [
+				{
+					name: 'core/button',
+					attributes: {
+						text: 'Open Popup',
+						anchor: 'popup-trigger'
+					}
+				}
+			]
+		});
+
+		await editor.insertBlock({
+			name: 'themeisle-blocks/popup',
+			attributes: {
+				anchor: 'popup-trigger',
+				trigger: 'onClick'
+			},
+			innerBlocks: [
+				{
+					name: 'core/paragraph',
+					attributes: {
+						content: 'Popup Content Test'
+					}
+				}
+			]
+		});
+
+		const postId = await editor.publishPost();
+		await page.goto( `/?p=${postId}` );
+
+		await page.locator( 'div' ).filter({ hasText: /^Open Popup$/ }).click();
+
+		await expect( page.getByText( 'Popup Content Test' ) ).toBeVisible();
+	});
+
 	test( 'close on escape', async({ editor, page }) => {
 
 		await editor.insertBlock({