diff --git a/assets/js/realtime-notices.js b/assets/js/realtime-notices.js index d12efdb..6f39cd8 100644 --- a/assets/js/realtime-notices.js +++ b/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() { diff --git a/tests/cypress/integration/plugin-search.cy.js b/tests/cypress/integration/plugin-search.cy.js new file mode 100644 index 0000000..882c878 --- /dev/null +++ b/tests/cypress/integration/plugin-search.cy.js @@ -0,0 +1,89 @@ +// +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": "

Testing Result: Payment Plugins for PayPal WooCommerce\"\"

Developed exclusively between Payment Plugins and PayPal, PayPal for WooCommerce integrates with PayPal's newest API's.

By Payment Plugins, support@paymentplugins.com

5.0 rating based on 78 ratings
(78)
Last Updated:6 days ago
60,000+ Active Installations
Compatible with your version of WordPress
" + }, + { + id: 'test-2', + "locations": [ + { + "pages": "all", + "context": "bluehost-plugin" + }, + { + "pages": "all", + "context": "wp-plugin-search" + } + ], + "expiration": 127950904013, + "type": "html", + "query": "stripe", + "content": "

Testing Result: Payment Plugins for Stripe WooCommerce\"\"

Accept Credit Cards, Google Pay, ApplePay, Afterpay, Affirm, ACH, Klarna, iDEAL and more all in one plugin for free!

By Payment Plugins, support@paymentplugins.com

5.0 rating based on 240 ratings
(240)
Last Updated:2 weeks ago
100,000+ Active Installations
Compatible with your version of WordPress
" + }] +}; + +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'); + }); + +}); diff --git a/tests/cypress/integration/theme-search.cy.js b/tests/cypress/integration/theme-search.cy.js new file mode 100644 index 0000000..77d8c57 --- /dev/null +++ b/tests/cypress/integration/theme-search.cy.js @@ -0,0 +1,102 @@ +// +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": "
\"\"
Details & Preview
By Superb

SocialPress

Install
" + }, + { + id: 'test-1', + "locations": [ + { + "pages": "all", + "context": "bluehost-plugin" + }, + { + "pages": "all", + "context": "wp-theme-search" + } + ], + "expiration": 127950904013, + "type": "html", + "query": "paypal", + "content": "
\"\"
Details & Preview
By Superb

SocialPress

Install
" + }] +}; + +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'); + }); + +});