fix(home): use homeImgComponent for about section SVGs#3930
fix(home): use homeImgComponent for about section SVGs#3930PierreBrisorgueil merged 4 commits intomasterfrom
Conversation
|
Warning Rate limit exceeded
Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 13 minutes and 8 seconds. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Run ID: 📒 Files selected for processing (1)
WalkthroughReplaces direct Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #3930 +/- ##
=======================================
Coverage 99.46% 99.46%
=======================================
Files 29 29
Lines 940 940
Branches 252 252
=======================================
Hits 935 935
Misses 5 5 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Pull request overview
Updates the Home “About” content section to use the shared homeImgComponent so SVGs can be inlined (theme-aware via CSS vars) and image fit behavior can follow per-item imgMode.
Changes:
- Replaced direct
<v-img>usage in the About section with<homeImgComponent>for both background-wrapped and normal images. - Passed through
imgMode(defaulting to'contain'for the background-wrapped variant) while keeping the existing responsive height/alt logic. - Registered
homeImgComponentinhome.about.component.vue.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@MIGRATIONS.md`:
- Around line 9-14: The migration note incorrectly documents the
homeImgComponent API and item field names; update the text to state that the
About section now uses <homeImgComponent :img="item.img"
:img-mode="item.imgMode" /> (or equivalent) and that item.img and item.imgMode
are the preserved fields (referencing home.about.component.vue and
home.img.component.vue), replacing all mentions of :item, item.image and
item.imgFit so downstream consumers copy the correct prop names.
In `@src/modules/home/tests/home.about.component.unit.tests.js`:
- Around line 43-48: Add a JSDoc header to the makeItem helper function:
document the overrides parameter with `@param` {Object} overrides (describe
optional override fields like subtitle, text, img) and document the return value
with `@returns` {Object} describing the constructed item object; place the JSDoc
immediately above the makeItem declaration so linting picks up the `@param` and
`@returns` annotations.
- Around line 59-62: The global fetch stub created in beforeEach via
vi.stubGlobal('fetch', vi.fn()) is never cleaned up; add an afterEach cleanup to
restore the global to avoid cross-test leakage by calling vi.unstubAllGlobals()
(or vi.unstubGlobal('fetch') if you prefer to target only fetch) in an afterEach
block in this test file so the stub is removed between tests.
- Around line 94-117: Add unit tests to cover the SVG-inline path for
HomeAboutComponent: mount HomeAboutComponent (using baseSetup) and assert that
items meant to render SVGs use the v-html path (find element/component rendering
raw HTML and assert its HTML contains an <svg ...> tag or expected SVG markup),
and add a test to verify theme-driven behavior by toggling the relevant setup
flag (e.g., an item property like imgBackground or theme flag in baseSetup) and
asserting the rendered SVG has the expected theme-dependent attribute/class (for
example a specific fill, class name, or CSS variable) rather than rendering as a
VImg; reference HomeAboutComponent, v-html, VImg, and imgBackground to locate
code paths to test.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: 45880533-f161-430f-aede-bc21acf46b26
📒 Files selected for processing (2)
MIGRATIONS.mdsrc/modules/home/tests/home.about.component.unit.tests.js
Replace raw v-img with homeImgComponent in the about section so SVGs are inlined via v-html and can access Vuetify CSS custom properties. This fixes dark/light theme mismatches and respects imgMode config. Closes #3929
Cover rendering, imgBackground resolution, video rendering, reversed layout, computed properties, fullWidth columns, and resolveImgBackground edge cases.
PierreBrisorgueil
force-pushed
the
fix/home-about-use-img-component
branch
from
c3c1ae3 to
4f4675d
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/modules/home/tests/home.about.component.unit.tests.js`:
- Around line 106-126: Add a unit test in the HomeAboutComponent tests that
verifies item.imgMode is forwarded to the child homeImgComponent: create a test
case that mounts HomeAboutComponent with a setup that includes an item having
imgMode set to a specific value, then use wrapper.findComponent({ name:
'homeImgComponent' }) (or findAllComponents and target the correct index) and
assert that the child's props('imgMode') equals the configured value; reference
existing helpers baseSetup and HomeAboutComponent to build the mount and reuse
globalOpts(vuetify) for consistency.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: 13016fa1-2275-421a-aa51-94155f9bf412
📒 Files selected for processing (3)
MIGRATIONS.mdsrc/modules/home/components/home.about.component.vuesrc/modules/home/tests/home.about.component.unit.tests.js
Summary
<v-img>withhomeImgComponentinhome.about.component.vueso SVGs are inlined viav-htmland can access Vuetify CSS custom propertiesprefers-color-scheme)imgModeconfig from content items (previously hardcoded tocover)Closes #3929
Test plan
v-htmlcontent)imgBackgroundwrapper still applies correctly with homeImgComponentSummary by CodeRabbit