Skip to content

Commit 58e3a84

Browse files
officiallygodofficiallygod
committed
Test it out
1 parent 2af0cf1 commit 58e3a84

File tree

3 files changed

+160
-67
lines changed

3 files changed

+160
-67
lines changed

‎src/Scripts/onboarding-restart-button/onboarding-restart-button.js

Lines changed: 87 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,88 @@
1-
window.addEventListener( 'load', function( ) {
2-
// Find the Add New Theme button
3-
const themeDiv = document.querySelector( '.add-new-theme' );
4-
5-
// Check if the element exists
6-
if ( themeDiv ) {
7-
// Create a new 'Build with AI' element with a custom class
8-
const buildWithAIElement = document.createElement( 'div' );
9-
buildWithAIElement.classList.add( 'theme', 'build-with-ai' );
10-
11-
buildWithAIElement.style.height = `${ themeDiv.offsetHeight }px`;
12-
13-
// Create an span (<span>) element
14-
const newLink = document.createElement( 'span' );
15-
newLink.classList.add( 'build-with-ai__link' );
16-
17-
// Create the theme screenshot div
18-
const themeScreenshot = document.createElement( 'div' );
19-
themeScreenshot.classList.add( 'build-with-ai__icon' );
20-
const span = document.createElement( 'span' );
21-
span.classList.add( 'build-with-ai__icon-span' );
22-
// Create the SVG element with the correct namespace
23-
const svg = document.createElementNS(
24-
'http://www.w3.org/2000/svg',
25-
'svg'
26-
);
27-
svg.setAttribute( 'xmlns', 'http://www.w3.org/2000/svg' );
28-
svg.setAttribute( 'viewBox', '0 0 384 512' );
29-
svg.setAttribute( 'width', '50px' );
30-
svg.setAttribute( 'height', '50px' );
31-
32-
// Add the path element inside the SVG
33-
const path = document.createElementNS(
34-
'http://www.w3.org/2000/svg',
35-
'path'
36-
);
37-
path.setAttribute(
38-
'd',
39-
'M162.4 6c-1.5-3.6-5-6-8.9-6l-19 0c-3.9 0-7.5 2.4-8.9 6L104.9 57.7c-3.2 8-14.6 8-17.8 0L66.4 6c-1.5-3.6-5-6-8.9-6L48 0C21.5 0 0 21.5 0 48L0 224l0 22.4L0 256l9.6 0 364.8 0 9.6 0 0-9.6 0-22.4 0-176c0-26.5-21.5-48-48-48L230.5 0c-3.9 0-7.5 2.4-8.9 6L200.9 57.7c-3.2 8-14.6 8-17.8 0L162.4 6zM0 288l0 32c0 35.3 28.7 64 64 64l64 0 0 64c0 35.3 28.7 64 64 64s64-28.7 64-64l0-64 64 0c35.3 0 64-28.7 64-64l0-32L0 288zM192 432a16 16 0 1 1 0 32 16 16 0 1 1 0-32z'
40-
);
41-
path.setAttribute( 'fill', '#8c8f94' );
42-
43-
// Append the path to the SVG
44-
svg.appendChild( path );
45-
46-
// Append the SVG to the span element
47-
span.appendChild( svg );
48-
themeScreenshot.appendChild( span );
49-
50-
// Create the theme name (h2) element
51-
const themeName = document.createElement( 'h2' );
52-
themeName.classList.add( 'build-with-ai__text' );
53-
themeName.textContent = window.nfdOnboardingRestartMeta?.buttonText;
54-
55-
// Assemble the new element
56-
newLink.appendChild( themeScreenshot );
57-
newLink.appendChild( themeName );
58-
buildWithAIElement.appendChild( newLink );
59-
60-
// Add the new 'Build with AI' element before the 'Add New Theme' Button
61-
themeDiv.parentNode.insertBefore( buildWithAIElement, themeDiv );
62-
63-
buildWithAIElement.addEventListener( 'click', () => {
64-
window.location.href =
65-
window.nfdOnboardingRestartMeta?.buttonHref + '&restart=theme';
66-
} );
1+
let buildWithAIInserted = false; // Flag to track if the Build with AI element is already inserted
2+
3+
// Function to create an SVG icon element
4+
function createSVGIcon() {
5+
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
6+
svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
7+
svg.setAttribute('viewBox', '0 0 384 512');
8+
svg.setAttribute('width', '50px');
9+
svg.setAttribute('height', '50px');
10+
11+
const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
12+
path.setAttribute(
13+
'd',
14+
'M162.4 6c-1.5-3.6-5-6-8.9-6l-19 0c-3.9 0-7.5 2.4-8.9 6L104.9 57.7c-3.2 8-14.6 8-17.8 0L66.4 6c-1.5-3.6-5-6-8.9-6L48 0C21.5 0 0 21.5 0 48L0 224l0 22.4L0 256l9.6 0 364.8 0 9.6 0 0-9.6 0-22.4 0-176c0-26.5-21.5-48-48-48L230.5 0c-3.9 0-7.5 2.4-8.9 6L200.9 57.7c-3.2 8-14.6 8-17.8 0L162.4 6zM0 288l0 32c0 35.3 28.7 64 64 64l64 0 0 64c0 35.3 28.7 64 64 64s64-28.7 64-64l0-64 64 0c35.3 0 64-28.7 64-64l0-32L0 288zM192 432a16 16 0 1 1 0 32 16 16 0 1 1 0-32z'
15+
);
16+
path.setAttribute('fill', '#8c8f94');
17+
svg.appendChild(path);
18+
19+
return svg;
20+
}
21+
22+
// Function to create the 'Build with AI' element
23+
function createBuildWithAIElement(themeDiv) {
24+
const buildWithAIElement = document.createElement('div');
25+
buildWithAIElement.classList.add('theme', 'build-with-ai');
26+
buildWithAIElement.style.height = `${themeDiv.offsetHeight}px`;
27+
28+
const newLink = document.createElement('span');
29+
newLink.classList.add('build-with-ai__link');
30+
31+
const themeScreenshot = document.createElement('div');
32+
themeScreenshot.classList.add('build-with-ai__icon');
33+
34+
const iconSpan = document.createElement('span');
35+
iconSpan.classList.add('build-with-ai__icon-span');
36+
iconSpan.appendChild(createSVGIcon());
37+
themeScreenshot.appendChild(iconSpan);
38+
39+
const themeName = document.createElement('h2');
40+
themeName.classList.add('build-with-ai__text');
41+
themeName.textContent = window.nfdOnboardingRestartMeta?.buttonText;
42+
43+
newLink.appendChild(themeScreenshot);
44+
newLink.appendChild(themeName);
45+
buildWithAIElement.appendChild(newLink);
46+
47+
buildWithAIElement.addEventListener('click', () => {
48+
window.location.href =
49+
window.nfdOnboardingRestartMeta?.buttonHref + '&restart=theme';
50+
});
51+
52+
return buildWithAIElement;
53+
}
54+
55+
// Function to handle the appearance of the themeDiv
56+
function handleThemeDivAppearance() {
57+
const themeDiv = document.querySelector('.add-new-theme');
58+
59+
if (themeDiv && !buildWithAIInserted) {
60+
// Check if the element exists and hasn't been inserted yet
61+
62+
const buildWithAIElement = createBuildWithAIElement(themeDiv);
63+
themeDiv.parentNode.insertBefore(buildWithAIElement, themeDiv);
64+
65+
buildWithAIInserted = true; // Set the flag to true after insertion
6766
}
68-
} );
67+
}
68+
69+
// Setting up MutationObserver to detect the appearance of the themeDiv element
70+
function observeForThemeDiv() {
71+
const observer = new MutationObserver((mutationsList, observer) => {
72+
mutationsList.forEach((mutation) => {
73+
if (mutation.type === 'childList') {
74+
handleThemeDivAppearance(); // Check for the element whenever the DOM changes
75+
}
76+
});
77+
});
78+
79+
observer.observe(document.body, {
80+
childList: true,
81+
subtree: true,
82+
});
83+
}
84+
85+
// Wait for the DOM to be fully loaded and then start observing
86+
window.addEventListener('DOMContentLoaded', function () {
87+
observeForThemeDiv();
88+
});

‎tests/cypress/integration/5-AI-SiteGen-onboarding-flow/8-restart-onboarding.cy.js

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
// <reference types="Cypress" />
2+
3+
const {
4+
SingleEventsAPI,
5+
} = require('../wp-module-support/single-events-track.cy');
6+
7+
describe('Restart Onboarding', function () {
8+
before(() => {
9+
cy.visit('wp-admin/themes.php');
10+
cy.wait(2000);
11+
});
12+
13+
it('Check for the Build with AI Button', () => {
14+
cy.get('.theme.build-with-ai', { timeout: 30000 })
15+
.scrollIntoView()
16+
.should('be.visible');
17+
});
18+
19+
it('Check if onboarding restarts', () => {
20+
cy.get('.theme.build-with-ai', { timeout: 10000 })
21+
.scrollIntoView()
22+
.click();
23+
cy.url().should('include', '?page=nfd-onboarding', { timeout: 10000 });
24+
});
25+
26+
it('Check if Event triggers', () => {
27+
SingleEventsAPI('onboarding_restarted', 'location', 'theme');
28+
});
29+
});

‎tests/cypress/integration/wp-module-support/single-events-track.cy.js

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
// API routes for a single Event in Onboarding
2+
const SingleEventsAPIURL =
3+
'/index.php?rest_route=%2Fnewfold-onboarding%2Fv1%2Fevents&_locale=user';
4+
5+
// Function to handle event validation from the API responses
6+
export const SingleEventsAPI = (actionValue, keyName, keyValue) => {
7+
let foundValidEvent = false;
8+
const requests = []; // Array to store intercepted requests
9+
10+
// Intercept the API request for Single Event
11+
cy.intercept(SingleEventsAPIURL).as('events');
12+
13+
// Wait for all the requests to be made (We need to wait for multiple requests)
14+
cy.wait('@events', { timeout: 10000 }).then((interception) => {
15+
requests.push(interception);
16+
});
17+
18+
cy.wait('@events', { timeout: 10000 }).then((interception) => {
19+
requests.push(interception);
20+
});
21+
22+
cy.wait('@events', { timeout: 10000 }).then((interception) => {
23+
requests.push(interception);
24+
});
25+
26+
// Loop and find the event you are looking for
27+
cy.wrap(requests)
28+
.each((request) => {
29+
// Access the request body or payload
30+
const payload = request.request.body;
31+
expect(request.response.statusCode).to.eq(202);
32+
if (
33+
payload &&
34+
payload.action === actionValue &&
35+
payload.data.label_key === keyName &&
36+
payload.data[keyName] === keyValue
37+
) {
38+
foundValidEvent = true;
39+
}
40+
})
41+
.then(() => {
42+
expect(foundValidEvent).to.equal(true);
43+
});
44+
};

0 commit comments

Comments
 (0)