Add Cypress Tests to Validate Premium Theme and Plugin Search Results Feature

assets/js/realtime-notices.js

@@ -166,7 +166,7 @@
 					this.cardSelector = 'plugin-card';
 				break;
 				case 'theme_search':
-					this.wpContainerSelector = 'div.themes.wp-clearfix';
+					this.wpContainerSelector = '#wpbody-content > div.wrap > div.theme-browser.content-filterable.rendered > div';
 					this.cardSelector = 'theme';
 				break;
 			}
@@ -232,7 +232,7 @@
 
 		createElement() {
 			const el = document.createElement('div');
-			el.setAttribute('class', this.cardSelector+' newfold-search-results');
+			el.setAttribute('class', `${this.cardSelector} newfold-search-results`);
 			el.setAttribute('data-id', this.id);
 			el.innerHTML = this.content;
 			this.el = el;
@@ -278,14 +278,39 @@
 		}
 
 		enable() {
-			document
-				.getElementById(this.searchInputSelector)
-				.addEventListener('input', this.inputHandler);
-			if (this.typeSelector) {
-				document
-				.getElementById(this.typeSelector)
-				.addEventListener('change', this.onPluginSearch.bind(this));
+			const addEventListeners = () => {
+				const searchInput = document.getElementById(this.searchInputSelector);
+				if (searchInput) {
+					searchInput.addEventListener('input', this.inputHandler);
+				}
+
+				if (this.typeSelector) {
+					const typeSelector = document.getElementById(this.typeSelector);
+					if (typeSelector) {
+						typeSelector.addEventListener('change', this.onPluginSearch.bind(this));
+					}
+				}
+			};
+
+			// Check if elements are already in the DOM
+			if (document.getElementById(this.searchInputSelector) && (!this.typeSelector || document.getElementById(this.typeSelector))) {
+				addEventListeners();
+				return;
 			}
+
+			// Set up a MutationObserver to watch for changes in the DOM
+			const observer = new MutationObserver(() => {
+				const searchInputExists = document.getElementById(this.searchInputSelector);
+				const typeSelectorExists = !this.typeSelector || document.getElementById(this.typeSelector);
+
+				if (searchInputExists && typeSelectorExists) {
+					addEventListeners();
+					observer.disconnect();  // Stop observing once elements are found
+				}
+			});
+
+			// Start observing the document for child elements being added
+			observer.observe(document.body, { childList: true, subtree: true });
 		}
 
 		disable() {

tests/cypress/integration/plugin-search.cy.js

@@ -0,0 +1,89 @@
+// <reference types="Cypress" />
+const notifications = {
+  "data": [{
+    id: 'test-1',
+    "locations": [
+      {
+        "pages": "all",
+        "context": "bluehost-plugin"
+      },
+      {
+        "pages": "all",
+        "context": "wp-plugin-search"
+      }
+    ],
+    "expiration": 127950904013,
+    "type": "html",
+    "query": "paypal",
+    "content": "<div class=\"plugin-card-top\"><div class=\"name column-name\"><h3><a href=\"http://localhost:10003/wp-admin/plugin-install.php?tab=plugin-information&amp;plugin=pymntpl-paypal-woocommerce&amp;TB_iframe=true&amp;width=600&amp;height=550\" class=\"thickbox open-plugin-details-modal\">Testing Result: Payment Plugins for PayPal WooCommerce<img src=\"https://ps.w.org/pymntpl-paypal-woocommerce/assets/icon-256x256.png?rev=2718338\" class=\"plugin-icon\" alt=\"\"></a></h3></div><div class=\"action-links\"><ul class=\"plugin-action-buttons\"><li><a class=\"install-now button\" data-slug=\"pymntpl-paypal-woocommerce\" href=\"http://localhost:10003/wp-admin/update.php?action=install-plugin&amp;plugin=pymntpl-paypal-woocommerce&amp;_wpnonce=77a1fb3637\" aria-label=\"Install Payment Plugins for PayPal WooCommerce 1.0.47 now\" data-name=\"Payment Plugins for PayPal WooCommerce 1.0.47\">Install Now</a></li><li><a href=\"http://localhost:10003/wp-admin/plugin-install.php?tab=plugin-information&amp;plugin=pymntpl-paypal-woocommerce&amp;TB_iframe=true&amp;width=600&amp;height=550\" class=\"thickbox open-plugin-details-modal\" aria-label=\"More information about Payment Plugins for PayPal WooCommerce 1.0.47\" data-title=\"Payment Plugins for PayPal WooCommerce 1.0.47\">More Details</a></li></ul></div><div class=\"desc column-description\"><p>Developed exclusively between Payment Plugins and PayPal, PayPal for WooCommerce integrates with PayPal's newest API's.</p><p class=\"authors\"> <cite>By Payment Plugins, [email protected]</cite></p></div></div><div class=\"plugin-card-bottom\"><div class=\"vers column-rating\"><div class=\"star-rating\"><span class=\"screen-reader-text\">5.0 rating based on 78 ratings</span><div class=\"star star-full\" aria-hidden=\"true\"></div><div class=\"star star-full\" aria-hidden=\"true\"></div><div class=\"star star-full\" aria-hidden=\"true\"></div><div class=\"star star-full\" aria-hidden=\"true\"></div><div class=\"star star-full\" aria-hidden=\"true\"></div></div><span class=\"num-ratings\" aria-hidden=\"true\">(78)</span></div><div class=\"column-updated\"><strong>Last Updated:</strong>6 days ago</div><div class=\"column-downloaded\">60,000+ Active Installations</div><div class=\"column-compatibility\"><span class=\"compatibility-compatible\"><strong>Compatible</strong> with your version of WordPress</span></div></div>"
+  },
+  {
+    id: 'test-2',
+    "locations": [
+      {
+        "pages": "all",
+        "context": "bluehost-plugin"
+      },
+      {
+        "pages": "all",
+        "context": "wp-plugin-search"
+      }
+    ],
+    "expiration": 127950904013,
+    "type": "html",
+    "query": "stripe",
+    "content": "<div class=\"plugin-card-top\"><div class=\"name column-name\"><h3><a href=\"http://localhost:10003/wp-admin/plugin-install.php?tab=plugin-information&amp;plugin=woo-stripe-payment&amp;TB_iframe=true&amp;width=600&amp;height=550\" class=\"thickbox open-plugin-details-modal\">Testing Result: Payment Plugins for Stripe WooCommerce<img src=\"https://ps.w.org/woo-stripe-payment/assets/icon-256x256.png?rev=2611337\" class=\"plugin-icon\" alt=\"\"></a></h3></div><div class=\"action-links\"><ul class=\"plugin-action-buttons\"><li><a class=\"install-now button\" data-slug=\"woo-stripe-payment\" href=\"http://localhost:10003/wp-admin/update.php?action=install-plugin&amp;plugin=woo-stripe-payment&amp;_wpnonce=69d79d7f2e\" aria-label=\"Install Payment Plugins for Stripe WooCommerce 3.3.61 now\" data-name=\"Payment Plugins for Stripe WooCommerce 3.3.61\">Install Now</a></li><li><a href=\"http://localhost:10003/wp-admin/plugin-install.php?tab=plugin-information&amp;plugin=woo-stripe-payment&amp;TB_iframe=true&amp;width=600&amp;height=550\" class=\"thickbox open-plugin-details-modal\" aria-label=\"More information about Payment Plugins for Stripe WooCommerce 3.3.61\" data-title=\"Payment Plugins for Stripe WooCommerce 3.3.61\">More Details</a></li></ul></div><div class=\"desc column-description\"><p>Accept Credit Cards, Google Pay, ApplePay, Afterpay, Affirm, ACH, Klarna, iDEAL and more all in one plugin for free!</p><p class=\"authors\"> <cite>By Payment Plugins, [email protected]</cite></p></div></div><div class=\"plugin-card-bottom\"><div class=\"vers column-rating\"><div class=\"star-rating\"><span class=\"screen-reader-text\">5.0 rating based on 240 ratings</span><div class=\"star star-full\" aria-hidden=\"true\"></div><div class=\"star star-full\" aria-hidden=\"true\"></div><div class=\"star star-full\" aria-hidden=\"true\"></div><div class=\"star star-full\" aria-hidden=\"true\"></div><div class=\"star star-full\" aria-hidden=\"true\"></div></div><span class=\"num-ratings\" aria-hidden=\"true\">(240)</span></div><div class=\"column-updated\"><strong>Last Updated:</strong>2 weeks ago</div><div class=\"column-downloaded\">100,000+ Active Installations</div><div class=\"column-compatibility\"><span class=\"compatibility-compatible\"><strong>Compatible</strong> with your version of WordPress</span></div></div>"
+  }]
+};
+
+describe('Plugin Search', () => {
+
+  before(() => {
+    cy.exec('npx wp-env run cli wp transient delete newfold_notifications', { failOnNonZeroExit: false });
+    cy.visit('/wp-admin/plugin-install.php');
+    cy.intercept(
+      {
+        method: 'POST',
+        url: /newfold-notifications(\/|%2F)v1(\/|%2F)notifications(\/|%2F)events/,
+      },
+      {
+        statusCode: 201,
+        body: notifications,
+      }
+    ).as('notifications');
+
+
+    cy.get('#search-plugins').type('paypal');
+
+
+    cy.wait('@notifications');
+    cy.get('#the-list', { timeout: 30000 }).should('be.visible');
+
+  });
+
+
+  it('should display matching plugin search results', () => {
+
+    cy.get('#the-list > div.plugin-card.newfold-search-results').should(
+      'exist'
+    );
+
+    cy.get('#the-list > div.plugin-card.newfold-search-results')
+      .scrollIntoView()
+      .should('be.visible')
+      .should('have.attr', 'data-id')
+      .and('equal', 'test-1');
+
+  });
+
+  it('should not display non-matching plugin search results', () => {
+
+    // Verify that the search field contains the typed text
+    cy.get('#the-list > div.plugin-card.newfold-search-results')
+      .scrollIntoView()
+      .should('be.visible')
+      .should('have.attr', 'data-id')
+      .and('not.equal', 'test-2');
+  });
+
+});

tests/cypress/integration/theme-search.cy.js

@@ -0,0 +1,102 @@
+// <reference types="Cypress" />
+const notifications = {
+  "data": [{
+    id: 'test-1',
+    "locations": [
+      {
+        "pages": "all",
+        "context": "bluehost-plugin"
+      },
+      {
+        "pages": "all",
+        "context": "wp-theme-search"
+      }
+    ],
+    "expiration": 127950904013,
+    "type": "html",
+    "query": "stripe",
+    "content": "<div class=\"theme-screenshot\"><img src=\"//xssts.w.org/wp-content/themes/socialpress/screenshot.png?ver=1.1?ver=1.1\" alt=\"\"></div><span class=\"more-details\">Details &amp; Preview</span><div class=\"theme-author\">By Superb</div><div class=\"theme-id-container\"><h3 class=\"theme-name\">SocialPress</h3><div class=\"theme-actions\"><a class=\"button button-primary theme-install\" data-name=\"SocialPress\" data-slug=\"paypal\" href=\"http://localhost:10013/wp-admin/update.php?action=install-theme&amp;theme=socialpress&amp;_wpnonce=06be73870b\" aria-label=\"Install SocialPress\">Install</a><button class=\"button preview install-theme-preview\">Preview</button></div></div>"
+  },
+  {
+    id: 'test-1',
+    "locations": [
+      {
+        "pages": "all",
+        "context": "bluehost-plugin"
+      },
+      {
+        "pages": "all",
+        "context": "wp-theme-search"
+      }
+    ],
+    "expiration": 127950904013,
+    "type": "html",
+    "query": "paypal",
+    "content": "<div class=\"theme-screenshot\"><img src=\"//ts.w.org/wp-content/themes/socialpress/screenshot.png?ver=1.1?ver=1.1\" alt=\"\"></div><span class=\"more-details\">Details &amp; Preview</span><div class=\"theme-author\">By Superb</div><div class=\"theme-id-container\"><h3 class=\"theme-name\">SocialPress</h3><div class=\"theme-actions\"><a class=\"button button-primary theme-install\" data-name=\"SocialPress\" data-slug=\"themetwo\" href=\"http://localhost:10013/wp-admin/update.php?action=install-theme&amp;theme=socialpress&amp;_wpnonce=06be73870b\" aria-label=\"Install SocialPress\">Install</a><button class=\"button preview install-theme-preview\">Preview</button></div></div>"
+  }]
+};
+
+describe('Theme Search', () => {
+  const appClass = '.' + Cypress.env('appId');
+
+  before(() => {
+    cy.exec('npx wp-env run cli wp transient delete newfold_notifications', { failOnNonZeroExit: false });
+    cy.visit('/wp-admin/theme-install.php?browse=popular');
+
+    cy.get('#wp-filter-search-input').type('paypal');
+    cy.intercept(
+      {
+        method: 'POST',
+        url: /newfold-notifications(\/|%2F)v1(\/|%2F)notifications(\/|%2F)events/,
+      },
+      {
+        statusCode: 201,
+        body: notifications,
+      }
+    ).as('notifications');
+
+    cy.wait('@notifications');
+
+  });
+
+  it('should display matching theme search results', () => {
+
+    cy.get('#wp-filter-search-input').clear();
+    cy.get('#wp-filter-search-input').type('stripe');
+    cy.intercept(
+      {
+        method: 'POST',
+        url: /newfold-notifications(\/|%2F)v1(\/|%2F)notifications(\/|%2F)events/,
+      },
+      {
+        statusCode: 201,
+        body: notifications,
+      }
+    ).as('notifications');
+
+    cy.wait('@notifications');
+
+    cy.get('#wpbody-content > div.wrap > div.theme-browser.content-filterable.rendered > div > div.theme.newfold-search-results', { timeout: 30000 }).should(
+      'exist'
+    );
+
+    cy.get('#wpbody-content > div.wrap > div.theme-browser.content-filterable.rendered > div > div.theme.newfold-search-results')
+      .scrollIntoView()
+      .should('be.visible')
+      .should('have.attr', 'data-id')
+      .and('equal', 'test-1');
+
+  });
+
+
+  it('should not display non-matching theme search results', () => {
+
+    // Verify that the search field contains the typed text
+    cy.get('#wpbody-content > div.wrap > div.theme-browser.content-filterable.rendered > div > div.theme.newfold-search-results')
+      .scrollIntoView()
+      .should('be.visible')
+      .should('have.attr', 'data-id')
+      .and('not.equal', 'test-2');
+  });
+
+});