Skip to content

Commit

Permalink
Merge pull request #28 from newfold-labs/feature-press0-1818
Browse files Browse the repository at this point in the history 
Add Cypress Tests to Validate Premium Theme and Plugin Search Results Feature
  • Loading branch information
@circlecube
circlecube authored Oct 31, 2024
2 parents 75fa857 + c5d2410 commit 4c9854e
Show file tree
Hide file tree
Showing 3 changed files with 225 additions and 9 deletions.
43 changes: 34 additions & 9 deletions assets/js/realtime-notices.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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() {
Expand Down
89 changes: 89 additions & 0 deletions tests/cypress/integration/plugin-search.cy.js
View file
Original file line number Diff line number Diff line change
@@ -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');
});

});
102 changes: 102 additions & 0 deletions tests/cypress/integration/theme-search.cy.js
View file
Original file line number Diff line number Diff line change
@@ -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');
});

});

0 comments on commit 4c9854e

Please sign in to comment.