Changes to code components are not visible in preview-on-hover-component-list until published

This is now trivial to add test coverage for thanks to 📌 Expand `::getClientSideInfo()` test to all ComponentSource plugins Active . All we'd need to do is:

1. override ComponentSourceTestBase::testGetClientSideInfo() in JsComponentTest to create a draft component for one of the tested code components
2. update expectations.

#5.1 is conceptually super similar to 🐛 Auto-saved changes to component are not loaded in preview canvas when component is inside a slot Active  — chances are you can copy/paste some code, or, better yet, extract it into a trait for testing purposes! 😄

Just an FYI, this regression was introduced yesterday 🐛 Hovered preview for JS components in library not working Active .

I reviewed the proposed solution and merge request, and it looks good overall. However, the pipeline is still failing. I tried to solve it, but couldn't resolve the issue. I believe the failure is due to the image (600x400.png) unexpectedly being found in the iframe and the client.js script not loading correctly. Please check the image logic and ensure the script loads properly during testing.

Yep, genuine test failure:

     ✘ Get client side info
       ┐
       ├ Failed finding selector 'script[blocking="render"][src*="experience_builder/ui/lib/astro-hydration/dist/client.js"]'
       ├ Failed asserting that 0 is equal to 1 or is greater than 1.                                                         
       │
       │ /builds/issue/experience_builder-3516705/tests/src/Kernel/Plugin/ExperienceBuilder/ComponentSource/ComponentSourceTestBase.php:336
       │ /builds/issue/experience_builder-3516705/tests/src/Kernel/Plugin/ExperienceBuilder/ComponentSource/ComponentSourceTestBase.php:363
       │ /builds/issue/experience_builder-3516705/tests/src/Kernel/Plugin/ExperienceBuilder/ComponentSource/JsComponentTest.php:756
       ┴

So I'm confused about why this was marked ? 🤔

This makes the problem in 🐛 JS component slots don't appear in the preview canvas until published Active worse because since it no longer showed the saved config compiled js for hovering and since auto-save doesn't work either there is no preview on hover

@tedbow re #14 🐛 Changes to code components are not visible in preview-on-hover-component-list until published Active - are you saying that 🐛 JS component slots don't appear in the preview canvas until published Active is the root cause of the failing test here? And that issue should be resolved first?

@thoward216 nope I assume this should be able to be fixed here. Just related to the other problem. in manual testing of this MR I do see it fixing the problem of hover preview not being updated

Tests are now passing.

wim leers → credited larowlan → .

Issue 1: Preview not updating after modifying component properties

• Steps to Reproduce:
  1. Click on the + Add New button.
  2. Keep the default JS code as it is and click on Add to components from the side panel.
  3. Edit component by changing its background color to bg-blue-200.
  4. The right-hand preview section displays the correct color change.
  5. Navigate back to the Canvas page from the navigator.
  6. Hover over the card component.
• Observation: It seems that navigating back to the canvas is not triggering an update or cache refresh for the hover preview. The component is still stuck with the initial preview state.

Issue 2: Inconsistent updates after drag-drop and publish

• Steps to Reproduce:
  1. Drag and drop the component onto the page.
  2. Publish the changes and reload the page.
  3. The changes are correctly reflected.
  4. Edit the card again and change the background color to bg-blue-500.
  5. Navigate back to the Canvas page.
  6. Hover over the card component.
• Expected: The new background color should be visible both in the canvas and on hover.
• Actual: The hover preview and canvas still display the previous state (bg-blue-200).

@mayur-sose I can reproduce both issues. Could you file new issues for these? 🙏

sure @lauriii

@mayur-sose and please leave a comment here linking to those 🙏

Created 2 issues:

• #3523128 🐛 Code component preview not updating after modifications Active
• #3523130 🐛 Canvas and hover preview out of sync after drag-drop and publish Active

Automatically closed - issue fixed for 2 weeks with no activity.