fix[ENG-8003]: Changing the entry on a symbol does not update the preview window

[yash-builder]

Description

This PR fixes an issue where symbol content was not updating correctly. The fix compares the previous symbol entry with the incoming symbol entry—if they are not equal, it triggers fetchSymbolContent to ensure the latest content is loaded.

Changes Made:

• Added a comparison check between the previous and incoming symbol entries.
• Triggered fetchSymbolContent if the entries differ to update the content.

Why This Change Was Made:
To ensure symbol content updates correctly when the symbol entry changes, improving accuracy and consistency in the preview.

Screenshot
Adding loom soon

[changeset-bot]

⚠️ No Changeset found

Latest commit: 0ad71f6

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 0ad71f6.

Command	Status	Duration	Result
nx test @e2e/nuxt	❌ Failed	8m	View ↗
nx test @e2e/qwik-city	❌ Failed	7m 18s	View ↗
nx test @e2e/sveltekit	❌ Failed	5m 28s	View ↗
nx test @e2e/svelte	❌ Failed	5m 26s	View ↗
nx test @e2e/vue	❌ Failed	5m	View ↗
nx test @e2e/nextjs-sdk-next-app	✅ Succeeded	8m 23s	View ↗
nx test @e2e/angular-16	✅ Succeeded	6m 57s	View ↗
nx test @e2e/solid-start	✅ Succeeded	6m 26s	View ↗
Additional runs (36)	✅ Succeeded	...	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-03-26 13:58:43 UTC

[gitguardian]

️✅ There are no secrets present in this pull request anymore.

If these secrets were true positive and are still valid, we highly recommend you to revoke them.
While these secrets were previously flagged, we no longer have a reference to the
specific commits where they were detected. Once a secret has been leaked into a git
repository, you should consider it compromised, even if it was deleted immediately.
Find here more information about risks.

---

^{_{🦉 GitGuardian detects secrets in your source code to help developers and security teams secure the modern development process. You are seeing this because you or someone else with access to this repository has authorized GitGuardian to scan your pull request.}}

[sidmohanty11]

you're missing a few things, i created a loom explaining what all changes you need to do so that you can properly mock the fetch calls

https://www.loom.com/share/62e673c3668342949f1df71b72b921f3

let me know if you have any questions

[yash-builder]

@samijaber

Interestingly, when I run them individually, my fix resolves the issue, but the test case still fails. I’m wondering if I’m missing something. I’ve recorded a Loom

https://www.loom.com/share/ac1bd9c4d6c346efa3899250ce9b8220?sid=25f81646-040e-4c42-856b-ed13d938e772

[samijaber]

This test fails because when in the visual editor, the Symbol API call you're mocking is made twice for each entry instead of once. It's an issue somewhere in our reactivity that we haven't completely fixed yet.

You're checking for the 1st VS 2nd fetch which is why you get the wrong symbol. Instead, check the query.id param received in the request to decide on the entry and it will work.

Suggested change

	test('Symbol should update the data when nested values are updated', async ({
	page,
	sdk,
	packageName,
	basePort
	}) => {
	test.skip(excludeGen1(sdk));
	test.skip(packageName === 'nextjs-sdk-next-app');
	let fetchCount = 0;
	const symbolRequests: URL[] = [];
	const urlMatch = /https:\/\/cdn\.builder\.io\/api\/v3\/content\/symbol/;
	await page.route(urlMatch, route => {
	fetchCount++;
	const url = new URL(route.request().url());
	symbolRequests.push(url);
	return route.fulfill({
	status: 200,
	json: {
	results: [
	fetchCount === 1
	? GET_CONTENT_SYMBOL_UPDATE_ENTRY_ONE
	: GET_CONTENT_SYMBOL_UPDATE_ENTRY__TWO,
	],
	},
	});
	});
	await launchEmbedderAndWaitForSdk({ path: '/symbol-update-entries', basePort, page, sdk });
	const newContent = cloneContent(MAIN_CONTENT);
	await page.frameLocator('iframe').getByText('Green Potato').waitFor();
	newContent.data.blocks[0].component.options.symbol.entry = 'aa024e6851e94b49b99f41a2294fd423';
	await sendContentUpdateMessage({ page, newContent, model: 'page' });
	await page.frameLocator('iframe').getByText('Red tomato').waitFor();
	expect(fetchCount).toBe(2);
	});
	test('Symbol should update the data when nested values are updated', async ({
	page,
	sdk,
	packageName,
	basePort,
	}) => {
	test.skip(excludeGen1(sdk));
	test.skip(packageName === 'nextjs-sdk-next-app');
	const urlMatch = /https:\/\/cdn\.builder\.io\/api\/v3\/content\/symbol/;
	await page.route(urlMatch, route => {
	const url = new URL(route.request().url());
	const queryIdParam = url.searchParams.get('query.id');
	let symbolToReturn = null;
	if (queryIdParam === '"e2a166f7d9544ed9ade283abf9491af3"') {
	symbolToReturn = GET_CONTENT_SYMBOL_UPDATE_ENTRY_ONE;
	} else if (queryIdParam === '"aa024e6851e94b49b99f41a2294fd423"') {
	symbolToReturn = GET_CONTENT_SYMBOL_UPDATE_ENTRY__TWO;
	} else {
	throw new Error(`Unknown query id: ${queryIdParam}`);
	}
	return route.fulfill({
	status: 200,
	json: {
	results: [symbolToReturn],
	},
	});
	});
	await launchEmbedderAndWaitForSdk({ path: '/symbol-update-entries', basePort, page, sdk });
	const newContent = cloneContent(MAIN_CONTENT);
	await page.frameLocator('iframe').getByText('Green Potato').waitFor();
	newContent.data.blocks[0].component.options.symbol.entry = 'aa024e6851e94b49b99f41a2294fd423';
	await sendContentUpdateMessage({ page, newContent, model: 'page' });
	await page.frameLocator('iframe').getByText('Red tomato').waitFor();
	})