HEX
Server: LiteSpeed
System: Linux server342.web-hosting.com 4.18.0-553.124.4.lve.el8.x86_64 #1 SMP Fri May 15 13:02:13 UTC 2026 x86_64
User: ksonpoau (1099)
PHP: 8.2.31
Disabled: NONE
Upload Files
File: //proc/self/cwd/wp-content/plugins/extendify/tests/unit/QuickEdit/state/edit-mode.embedded.test.js
// The `extendify-quick-edit-on` html class must never be applied inside
// another tool's iframe. edit-mode.js ships in both the QuickEdit and Agent
// bundles, so guarding the class here is what keeps the Customizer preview
// (and page-builder previews) from looking edit-on even when the QE bundle
// itself is gone.

jest.mock('zustand/middleware', () => ({
	devtools: (fn) => fn,
	persist: (config) => config,
}));
jest.mock('@quick-edit/lib/insights', () => ({ track: jest.fn() }));
jest.mock('@shared/lib/embedded-guard', () => ({ isEmbedded: jest.fn() }));

const HTML_CLASS = 'extendify-quick-edit-on';

const loadStore = async ({ embedded, defaultOn }) => {
	require('@shared/lib/embedded-guard').isEmbedded.mockReturnValue(embedded);
	window.extQuickEditData = defaultOn ? { defaultOn: true } : undefined;
	const mod = await import('@quick-edit/state/edit-mode');
	return mod.useEditModeStore;
};

beforeEach(() => {
	jest.resetModules();
	jest.clearAllMocks();
	document.documentElement.className = '';
	window.extQuickEditData = undefined;
});

describe('edit-mode: extendify-quick-edit-on guarded by isEmbedded', () => {
	it('applies the on-class at import on a top-level render', async () => {
		await loadStore({ embedded: false, defaultOn: true });
		expect(document.documentElement.classList.contains(HTML_CLASS)).toBe(true);
	});

	it('does NOT apply the on-class at import when embedded', async () => {
		await loadStore({ embedded: true, defaultOn: true });
		expect(document.documentElement.classList.contains(HTML_CLASS)).toBe(false);
	});

	it('keeps the on-class off when an embedded state change turns edit mode on', async () => {
		const useEditModeStore = await loadStore({
			embedded: true,
			defaultOn: false,
		});
		useEditModeStore.getState().setOn(true);
		expect(document.documentElement.classList.contains(HTML_CLASS)).toBe(false);
	});

	it('applies the on-class on a top-level state change (control)', async () => {
		const useEditModeStore = await loadStore({
			embedded: false,
			defaultOn: false,
		});
		useEditModeStore.getState().setOn(true);
		expect(document.documentElement.classList.contains(HTML_CLASS)).toBe(true);
	});
});