added e2e test: should render Repeater block correctly

nk-crew · Nov 20, 2024 · 8dbeea7 · 8dbeea7
1 parent 8e586c8
commit 8dbeea7
Showing 1 changed file with 81 additions and 6 deletions.
diff --git a/tests/e2e/specs/editor-block-repeater-control.spec.js b/tests/e2e/specs/editor-block-repeater-control.spec.js
@@ -1,3 +1,4 @@
+/* eslint-disable jsdoc/no-undefined-types */
 /**
  * WordPress dependencies
  */
@@ -10,12 +11,16 @@ test.describe('editor block with Repeater control', () => {
 		await removeAllBlocks({ requestUtils });
 	});
 
-	test('create Repeater block manually in constructor UI', async ({
-		page,
-		editor,
-		admin,
-		requestUtils,
-	}) => {
+	/**
+	 * Manually add Repeater Block.
+	 *
+	 * @param {Page}         page         Provides methods to interact with a single tab in a Browser, or an extension background page in Chromium.
+	 * @param {Editor}       editor       End to end test utilities for the WordPress Block Editor.
+	 * @param {Admin}        admin        End to end test utilities for WordPress admin’s user interface.
+	 * @param {RequestUtils} requestUtils Playwright utilities for interacting with the WordPress REST API.
+	 * @return {number}      blockID      Block ID.
+	 */
+	async function manuallyAddRepeaterBlock(page, editor, admin, requestUtils) {
 		const blockID = await createBlock({
 			requestUtils,
 			title: 'Test Repeater Block',
@@ -67,9 +72,79 @@ test.describe('editor block with Repeater control', () => {
 
 		await expect(page.locator('role=button[name="Save"i]')).toBeDisabled();
 
+		return blockID;
+	}
+
+	test('create Repeater block manually in constructor UI', async ({
+		page,
+		editor,
+		admin,
+		requestUtils,
+	}) => {
+		const blockID = await manuallyAddRepeaterBlock(
+			page,
+			editor,
+			admin,
+			requestUtils
+		);
 		// Check for this block in the lazyblocks posts list admin.
 		await admin.visitAdminPage('edit.php?post_type=lazyblocks');
 
 		await expect(page.locator(`#post-${blockID}`)).toBeVisible();
 	});
+
+	test('should render Repeater block correctly', async ({
+		page,
+		editor,
+		admin,
+		requestUtils,
+	}) => {
+		await manuallyAddRepeaterBlock(page, editor, admin, requestUtils);
+
+		await admin.createNewPost();
+
+		await editor.insertBlock({
+			name: 'lazyblock/test-repeater-block',
+		});
+
+		await page.getByRole('button', { name: '+ Add Row' }).click();
+		await page.getByLabel('Text control nested in').click();
+		await page.getByLabel('Text control nested in').fill('Test Row 1');
+		await page.getByRole('button', { name: '+ Add Row' }).click();
+		await page.getByLabel('Text control nested in').click();
+		await page.getByLabel('Text control nested in').fill('Test Row 2');
+		await page.getByRole('button', { name: '+ Add Row' }).click();
+		await page.getByLabel('Text control nested in').click();
+		await page.getByLabel('Text control nested in').fill('Test Row 3');
+
+		// Backend render.
+		await expect(
+			editor.canvas.locator('.lzb-preview-server').getByText('Test Row 1')
+		).toBeVisible();
+
+		await expect(
+			editor.canvas.locator('.lzb-preview-server').getByText('Test Row 2')
+		).toBeVisible();
+
+		await expect(
+			editor.canvas.locator('.lzb-preview-server').getByText('Test Row 3')
+		).toBeVisible();
+
+		await page
+			.getByRole('button', { name: 'Publish', exact: true })
+			.click();
+		await page
+			.getByLabel('Editor publish')
+			.getByRole('button', { name: 'Publish', exact: true })
+			.click();
+		await page
+			.getByLabel('Editor publish')
+			.getByRole('link', { name: 'View Post' })
+			.click();
+
+		// Frontend render.
+		await expect(page.getByText('Test Row 1')).toBeVisible();
+		await expect(page.getByText('Test Row 2')).toBeVisible();
+		await expect(page.getByText('Test Row 3')).toBeVisible();
+	});
 });