test(e2e): add e2e tests for Feedzy Loop

Author: HardeepAsrani

includes/gutenberg/feedzy-rss-feeds-loop-block.php

@@ -69,12 +69,24 @@ public function register_block() {
 		// Pass in REST URL
 		wp_localize_script(
 			'feedzy-rss-feeds-loop-editor-script',
-			'feedzyloopjs',
+			'feedzyData',
 			array(
 				'defaultImage' => esc_url( FEEDZY_ABSURL . 'img/feedzy.svg' ),
 				'isPro'        => feedzy_is_pro(),
 			)
 		);
+
+		wp_localize_script(
+			'feedzy-rss-feeds-loop-editor-script',
+			'feedzyConditionsData',
+			apply_filters(
+				'feedzy_conditions_data',
+				array(
+					'isPro'            => feedzy_is_pro(),
+					'operators'        => Feedzy_Rss_Feeds_Conditions::get_operators(),
+				)
+			)
+		);
 	}
 
 	/**
@@ -113,7 +125,8 @@ public function render_callback( $attributes, $content ) {
 			'refresh' => '12_hours',
 		);
 
-		$query = isset( $attributes['query'] ) ? wp_parse_args( $attributes['query'], $default_query ) : $default_query;
+		$query   = isset( $attributes['query'] ) ? wp_parse_args( $attributes['query'], $default_query ) : $default_query;
+		$filters = isset( $attributes['conditions'] ) ? $attributes['conditions'] : array();
 
 		$options = array(
 			'max'           => $query['max'],
@@ -129,6 +142,7 @@ public function render_callback( $attributes, $content ) {
 			'multiple_meta' => 'no',
 			'summary'       => 'yes',
 			'summarylength' => '',
+			'filters'       => wp_json_encode( $filters ),
 		);
 
 		$sizes = array(

js/FeedzyLoop/block.json

@@ -55,6 +55,36 @@
 				}
 			}
 		},
+		"conditions": {
+			"type": "object",
+			"properties": {
+				"match": {
+					"type": "string",
+					"enum": [ "all", "any" ],
+					"default": "all"
+				},
+				"conditions": {
+					"type": "array",
+					"items": {
+						"type": "object",
+						"properties": {
+							"field": {
+								"type": "string",
+								"default": "title"
+							},
+							"operator": {
+								"type": "string",
+								"default": "contains"
+							},
+							"value": {
+								"type": "string",
+								"default": ""
+							}
+						}
+					}
+				}
+			}
+		},
         "innerBlocksContent": {
             "type": "string",
             "default": ""

js/FeedzyLoop/edit.js

@@ -31,6 +31,7 @@ import ServerSideRender from '@wordpress/server-side-render';
  * Internal dependencies.
  */
 import Placeholder from './placeholder';
+import ConditionsControl from '../Conditions/ConditionsControl';
 
 const Edit = ({ attributes, setAttributes, clientId }) => {
 	const blockProps = useBlockProps();
@@ -214,6 +215,33 @@ const Edit = ({ attributes, setAttributes, clientId }) => {
 						}
 					/>
 				</PanelBody>
+
+				<PanelBody
+					title={[
+						__('Filter items', 'feedzy-rss-feeds'),
+						!feedzyData.isPro && (
+							<span className="fz-pro-label">Pro</span>
+						),
+					]}
+					initialOpen={false}
+					className={
+						feedzyData.isPro
+							? 'feedzy-item-filter'
+							: 'feedzy-item-filter fz-locked'
+					}
+				>
+					<ConditionsControl
+						conditions={
+							attributes?.conditions || {
+								conditions: [],
+								match: 'all',
+							}
+						}
+						setConditions={(conditions) => {
+							setAttributes({ conditions });
+						}}
+					/>
+				</PanelBody>
 			</InspectorControls>
 
 			<div {...blockProps}>
@@ -244,7 +272,7 @@ const Edit = ({ attributes, setAttributes, clientId }) => {
 								[
 									'core/image',
 									{
-										url: window.feedzyloopjs.defaultImage,
+										url: window.feedzyData.defaultImage,
 										alt: '{{feedzy_title}}',
 										href: '{{feedzy_url}}',
 									},

js/FeedzyLoop/editor.scss

@@ -4,4 +4,95 @@
             width: 100%;
         }
     }
+}
+
+.fz-condition-control {
+    padding: 0;
+
+    &.is-upsell {
+        opacity: 0.6;
+    }
+
+    .components-button {
+        width: 100%;
+        margin: 0;
+        padding: 6px 12px;
+        justify-content: center;
+    }
+}
+
+.fz-panel-tab {
+    z-index: 999999;
+    margin: 24px 0;
+
+    &__header {
+        display: flex;
+        background: #fff;
+        border: 1px solid #d5dadf;
+
+        &__label {
+            cursor: pointer;
+            flex-basis: 90%;
+            display: flex;
+            align-items: center;
+            padding-left: 15px;
+
+            &::selection {
+                background: none;
+            }
+        }
+
+        .components-button {
+            height: auto;
+            flex-basis: 10%;
+            justify-content: center;
+            padding: 10px 5px;
+            border-left: 1px solid #d5dadf;
+            border-radius: 0;
+
+            .dashicon {
+                margin: 2px;
+            }
+        }
+
+        &:hover {
+            background: #fafafb;
+        }
+    }
+
+    &__content {
+        background: #fff;
+        border: 1px solid #d5dadf;
+        border-top: none;
+        padding: 10px 15px;
+
+        .components-select-control {
+            label {
+                overflow: visible;
+                white-space: normal;
+            }
+        }
+
+        .components-base-control {
+            margin: 12px 0;
+
+            .components-dropdown {
+                width: 100%;
+
+                .components-button {
+                    display: flex;
+                    justify-content: center;
+                    width: 100%;
+                }
+            }
+
+            .components-datetime__time-field-hours-input {
+                min-width: 60px;
+            }
+
+            .components-datetime__timezone {
+                display: inline-block;
+            }
+        }
+    }
 }

js/FeedzyLoop/extension.js

@@ -16,7 +16,7 @@ import { useSelect } from '@wordpress/data';
 
 import { addFilter } from '@wordpress/hooks';
 
-const defaultImage = window.feedzyloopjs.defaultImage;
+const defaultImage = window.feedzyData.defaultImage;
 
 const withFeedzyLoopImage = createHigherOrderComponent((BlockEdit) => {
 	return (props) => {

js/FeedzyLoop/placeholder.js

@@ -123,7 +123,14 @@ const BlockPlaceholder = ({ attributes, setAttributes, onSaveFeed }) => {
 						/>
 					)}
 
-					<Button variant="primary" onClick={onSaveFeed}>
+					<Button
+						variant="primary"
+						onClick={onSaveFeed}
+						disabled={
+							!attributes?.feed?.source ||
+							attributes?.feed?.source.length === 0
+						}
+					>
 						{__('Save', 'feedzy-rss-feeds')}
 					</Button>
 				</>

tests/e2e/specs/loop.spec.js

@@ -0,0 +1,73 @@
+/**
+ * WordPress dependencies
+ */
+import { test, expect } from '@wordpress/e2e-test-utils-playwright';
+
+test.describe('Feedzy Loop', () => {
+	const FEED_URL =
+		'https://s3.amazonaws.com/verti-utils/sample-feed-import.xml';
+
+	test('add Feedzy Loop Block', async ({ editor, page }) => {
+		await page.goto('/wp-admin/post-new.php');
+
+		if (
+			(await page.$(
+				'.edit-post-welcome-guide .components-modal__header button'
+			)) !== null
+		) {
+			await page.click(
+				'.edit-post-welcome-guide .components-modal__header button'
+			);
+		}
+
+		await page.getByLabel('Add title').click();
+		await page.keyboard.type('Feedzy Loop Test');
+
+		await page.getByLabel('Toggle block inserter').click();
+
+		await page.getByPlaceholder('Search').click();
+		await page.keyboard.type('Feedzy Loop');
+		await page.waitForTimeout(1000);
+
+		await page.getByRole('option', { name: ' Feedzy Loop' }).click();
+		await page.waitForTimeout(1000);
+		await page.getByLabel('Feed URL').click();
+
+		await page.getByPlaceholder('Enter feed URLs separated by').click();
+		await page.keyboard.type(FEED_URL);
+
+		await page.getByRole('button', { name: 'Save', exact: true }).click();
+		await page.waitForTimeout(1000);
+
+		await page
+			.getByRole('button', { name: 'Publish', exact: true })
+			.click();
+		await page.waitForTimeout(1000);
+
+		await page
+			.getByLabel('Editor publish')
+			.getByRole('button', { name: 'Publish', exact: true })
+			.click();
+		await page.waitForTimeout(5000);
+
+		const snackbar = await page.getByTestId('snackbar');
+		const snackbarText = await snackbar.textContent();
+		expect(snackbarText).toContain('Post published.');
+	});
+
+	test('visit Feedzy Loop Page', async ({ editor, page }) => {
+		await page.goto('/wp-admin/edit.php');
+
+		await page.hover('a.row-title');
+		await page.getByLabel('View “Feedzy Loop Test”').click();
+
+		await page.waitForTimeout(5000);
+
+		// We want to confirm .wp-block-feedzy-rss-feeds-loop is present and it has 5 children
+		const feedzyLoop = await page.$('.wp-block-feedzy-rss-feeds-loop');
+		expect(feedzyLoop).not.toBeNull();
+
+		const feedzyLoopChildren = await feedzyLoop.$$(':scope > *');
+		expect(feedzyLoopChildren.length).toBe(5);
+	});
+});