test: add validation tests for invalid feed URLs in classic block

Author: RaduCristianPopescu

js/FeedzyLoop/placeholder.js

@@ -115,7 +115,7 @@ const BlockPlaceholder = ({ attributes, setAttributes, onSaveFeed }) => {
 		return (
 			<div
 				className="feedzy-validation-results"
-				style={{ 
+				style={{
 					display: 'flex',
 					flexDirection: 'column',
 					gap: '10px',
@@ -154,7 +154,8 @@ const BlockPlaceholder = ({ attributes, setAttributes, onSaveFeed }) => {
 						{isValidating
 							? __(
 									'Validating and fetching feed…',
-									'feedzy-rss-feeds')
+									'feedzy-rss-feeds'
+								)
 							: __('Loading…', 'feedzy-rss-feeds')}
 					</p>
 				</div>
@@ -195,11 +196,7 @@ const BlockPlaceholder = ({ attributes, setAttributes, onSaveFeed }) => {
 					</BaseControl>
 
 					<div>
-						<Button
-							variant="primary"
-							onClick={handleLoadFeed}
-							disabled={!attributes?.feed?.source}
-						>
+						<Button variant="primary" onClick={handleLoadFeed}>
 							{__('Load Feed', 'feedzy-rss-feeds')}
 						</Button>
 					</div>

tests/e2e/specs/classic-block.spec.js

@@ -4,6 +4,68 @@
 import { test, expect } from '@wordpress/e2e-test-utils-playwright';
 
 test.describe('Feedzy Classic Block', () => {
+	test('check validation for invalid URL', async ({
+		editor,
+		page,
+		admin,
+	}) => {
+		await admin.createNewPost();
+
+		await editor.insertBlock({
+			name: 'feedzy-rss-feeds/feedzy-block',
+		});
+
+		await page
+			.getByPlaceholder('Enter URL or group of your')
+			.fill('http://invalid-url.com/feed');
+
+		await page.getByRole('button', { name: 'Load Feed' }).click();
+
+		await page.waitForSelector('.feedzy-validation-results');
+
+		await expect(
+			page
+				.locator('.feedzy-validation-results .is-error')
+				.getByText('http://invalid-url.com/feed', { exact: true })
+		).toBeVisible();
+	});
+
+	test('check validation for invalid and valid URL', async ({
+		editor,
+		page,
+		admin,
+	}) => {
+		await admin.createNewPost();
+
+		await editor.insertBlock({
+			name: 'feedzy-rss-feeds/feedzy-block',
+		});
+
+		await page
+			.getByPlaceholder('Enter URL or group of your')
+			.fill(
+				'http://invalid-url.com/feed, https://www.nasa.gov/feeds/iotd-feed/'
+			);
+
+		await page.getByRole('button', { name: 'Load Feed' }).click();
+
+		await page.waitForSelector('.feedzy-validation-results');
+
+		await expect(
+			page
+				.locator('.feedzy-validation-results .is-error')
+				.getByText('http://invalid-url.com/feed', { exact: true })
+		).toBeVisible();
+
+		await expect(
+			page
+				.locator('.feedzy-validation-results .is-success')
+				.getByText('https://www.nasa.gov/feeds/iotd-feed/', {
+					exact: true,
+				})
+		).toBeVisible();
+	});
+
 	test('check aspect ratio default', async ({ editor, page, admin }) => {
 		await admin.createNewPost();
 

tests/e2e/specs/loop.spec.js

@@ -106,4 +106,40 @@ test.describe('Feedzy Loop', () => {
 		const feedzyLoopChildren = await feedzyLoop.$$(':scope > *');
 		expect(feedzyLoopChildren.length).toBe(5);
 	});
+
+	test('check validation for invalid URL', async ({ editor, page, admin }) => {
+		await admin.createNewPost();
+
+		await editor.insertBlock({
+			name: 'feedzy-rss-feeds/loop',
+		});
+
+		await page.getByPlaceholder('Enter URLs or select a Feed').fill(
+			'http://invalid-url.com/feed'
+		);
+		await page.getByRole('button', { name: 'Load Feed' }).click();
+
+		await page.waitForSelector('.feedzy-validation-results');
+
+		await expect( page.locator('.feedzy-validation-results .is-error').getByText('http://invalid-url.com/feed', { exact: true }) ).toBeVisible();
+	});
+
+	test('check validation for invalid and valid url', async ({ editor, page, admin }) => {
+		await admin.createNewPost();
+
+		await editor.insertBlock({
+			name: 'feedzy-rss-feeds/loop',
+		});
+
+		await page.getByPlaceholder('Enter URLs or select a Feed').fill(
+			'http://invalid-url.com/feed, https://www.nasa.gov/feeds/iotd-feed/'
+		);
+		await page.getByRole('button', { name: 'Load Feed' }).click();
+
+		await page.waitForSelector('.feedzy-validation-results');
+
+		await expect( page.locator('.feedzy-validation-results .is-error').getByText('http://invalid-url.com/feed', { exact: true }) ).toBeVisible();
+
+		await expect( page.locator('.feedzy-validation-results .is-success').getByText('https://www.nasa.gov/feeds/iotd-feed/', { exact: true }) ).toBeVisible();
+	});
 });