chore: rename .ce.vue files to .standalone.vue#1690
Conversation
WalkthroughRepository-wide switch from “.ce.vue” to “.standalone.vue” component variants across docs, tests, type declarations, component registry, and page imports. No logic, API, or behavior changes; updates are limited to import paths, names in descriptions, and global component typings. Changes
Sequence Diagram(s)Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Pre-merge checks (3 passed)✅ Passed checks (3 passed)
Poem
✨ Finishing Touches
🧪 Generate unit tests
Comment |
|
Claude finished @elibosley's task —— View job Code Review CompleteTodo List
Review Results✅ No critical issues found in changes This PR performs a systematic renaming of Changes Analyzed:
Quality Checks:
The renaming appears to be part of a naming convention standardization, changing from "Custom Element" (ce) to "standalone" terminology. |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #1690 +/- ##
=======================================
Coverage 58.39% 58.39%
=======================================
Files 636 636
Lines 31178 31178
Branches 3645 3645
=======================================
Hits 18206 18206
Misses 12935 12935
Partials 37 37 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
|
This plugin has been deployed to Cloudflare R2 and is available for testing. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (10)
web/CONTRIBUTING.md (1)
7-8: Fix leftover “ce” wording after rename to “standalone”.The sentence explains the suffix as “custom element (ce)” while the new convention is “.standalone.vue”. Suggest clarifying the wording to match the rename.
- Vue components that are built as top-level web components are suffixed with `*.standalone.vue` - for "**c**ustom **e**lement", which comes from the tool used for compilation: `nuxt-custom-elements`. + Vue components that are built as top-level web components are suffixed with `*.standalone.vue`. + They are compiled into custom elements using the `nuxt-custom-elements` module.web/src/pages/login.vue (1)
10-10: Nit: align local symbol/tag name with “standalone” import.Keeping the
Cesuffix on the local symbol can be confusing post-rename. Consider renaming the import and template tag for clarity.-import SsoButtonCe from '~/components/SsoButton.standalone.vue'; +import SsoButtonStandalone from '~/components/SsoButton.standalone.vue';- <SsoButtonCe /> + <SsoButtonStandalone />Also applies to: 139-139
web/src/pages/welcome.vue (1)
8-9: Optional: drop “Ce” suffix in local identifiers for clarityNow that these are not “.ce.vue” files, consider renaming the local component identifiers and template tags to avoid confusion.
Apply within the changed imports:
-import WelcomeModalCe from '~/components/Activation/WelcomeModal.standalone.vue'; -import ModalsCe from '~/components/Modals.standalone.vue'; +import WelcomeModal from '~/components/Activation/WelcomeModal.standalone.vue'; +import Modals from '~/components/Modals.standalone.vue';Also update related usages outside this hunk:
-const welcomeModalRef = ref<InstanceType<typeof WelcomeModalCe>>(); +const welcomeModalRef = ref<InstanceType<typeof WelcomeModal>>(); - <WelcomeModalCe ref="welcomeModalRef" /> - <ModalsCe /> + <WelcomeModal ref="welcomeModalRef" /> + <Modals />web/src/pages/index.vue (2)
143-143: Nit: fix typo in heading text“DowngraadeOsCe” → “DowngradeOsCe”.
- <h3 class="font-mono text-lg font-semibold">DowngraadeOsCe</h3> + <h3 class="font-mono text-lg font-semibold">DowngradeOsCe</h3>
13-22: Optional: consider dropping “Ce” suffix in local namesNow that imports are *.standalone.vue, consider renaming local identifiers (and matching template tags) to remove “Ce”. Pure readability; no functional impact.
web/__test__/components/DowngradeOs.test.ts (1)
55-55: Nit: align suite name with other testsRename describe to include “.standalone.vue” for consistency with peer suites.
-describe('DowngradeOs', () => { +describe('DowngradeOs.standalone.vue', () => {web/__test__/components/Activation/WelcomeModal.test.ts (2)
129-134: Await the async mount helper to avoid timing flakiness.mountComponent is async. A few tests call it without awaiting. Make these awaits to align with our test guidelines and ensure DOM updates complete before assertions.
- mountComponent(); + await mountComponent();Apply to the tests at:
- Lines 129–134
- Lines 135–145
- Lines 147–157
- Lines 207–212
Also applies to: 135-145, 147-157, 207-212
214-227: Redundant timer stubbing.beforeEach already calls vi.useFakeTimers(); this test re-stubs timers unnecessarily. Remove the extra call here or drop the beforeEach stubbing if you want per-test control.
- vi.useFakeTimers(); + // Timers already faked in beforeEach; no need to re-stub hereweb/src/components/Wrapper/component-registry.ts (2)
12-15: *Rename local variables from Ce to avoid confusion.These imports are now standalone SFCs, not custom elements. Rename the variables to drop the Ce suffix for clarity.
-import HeaderOsVersionCe from '@/components/HeaderOsVersion.standalone.vue'; -import ModalsCe from '@/components/Modals.standalone.vue'; -import ThemeSwitcherCe from '@/components/ThemeSwitcher.standalone.vue'; -import UserProfileCe from '@/components/UserProfile.standalone.vue'; +import HeaderOsVersion from '@/components/HeaderOsVersion.standalone.vue'; +import Modals from '@/components/Modals.standalone.vue'; +import ThemeSwitcher from '@/components/ThemeSwitcher.standalone.vue'; +import UserProfile from '@/components/UserProfile.standalone.vue'; - component: HeaderOsVersionCe, // Static import - always present in header + component: HeaderOsVersion, // Static import - always present in header ... - component: ModalsCe, // Static import - global modals + component: Modals, // Static import - global modals ... - component: UserProfileCe, // Static import - always present in header + component: UserProfile, // Static import - always present in header ... - component: ThemeSwitcherCe, // Static import - theme switcher + component: ThemeSwitcher, // Static import - theme switcherAlso applies to: 49-62, 129-132
34-37: Add id alias to Auth selector to match tests and common placeholders.Tests create a node with id="unraid-auth". Add '#unraid-auth' to the selector list to ensure mounting works for both tag and id.
- { - loader: () => import('../Auth.standalone.vue'), - selector: 'unraid-auth', - appId: 'auth', - }, + { + loader: () => import('../Auth.standalone.vue'), + selector: ['unraid-auth', '#unraid-auth'], + appId: 'auth', + },
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (21)
web/CONTRIBUTING.md(1 hunks)web/__test__/components/Activation/WelcomeModal.test.ts(2 hunks)web/__test__/components/Auth.test.ts(1 hunks)web/__test__/components/ColorSwitcher.test.ts(1 hunks)web/__test__/components/DowngradeOs.test.ts(1 hunks)web/__test__/components/DownloadApiLogs.test.ts(1 hunks)web/__test__/components/HeaderOsVersion.test.ts(1 hunks)web/__test__/components/Registration.test.ts(2 hunks)web/__test__/components/ThemeSwitcher.test.ts(1 hunks)web/__test__/components/UpdateOs.test.ts(2 hunks)web/__test__/components/UserProfile.test.ts(2 hunks)web/__test__/components/WanIpCheck.test.ts(1 hunks)web/__test__/components/WelcomeModal.test.ts(1 hunks)web/__test__/components/component-registry.test.ts(1 hunks)web/components.d.ts(6 hunks)web/src/components/ConnectSettings/ConnectSettings.standalone.vue(2 hunks)web/src/components/Wrapper/component-registry.ts(5 hunks)web/src/pages/index.vue(1 hunks)web/src/pages/login.vue(1 hunks)web/src/pages/tools/apikeyauthorize.vue(1 hunks)web/src/pages/welcome.vue(1 hunks)
🧰 Additional context used
📓 Path-based instructions (7)
{**/*.test.ts,**/__test__/{components,store}/**/*.ts}
📄 CodeRabbit inference engine (.cursor/rules/web-testing-rules.mdc)
{**/*.test.ts,**/__test__/{components,store}/**/*.ts}: Use .rejects.toThrow() without arguments when asserting that async functions throw; avoid checking exact error message strings unless the message format is explicitly under test
Focus tests on observable behavior and outcomes, not implementation details such as exact error messages
Use await nextTick() for DOM update assertions and flushPromises() for complex async chains; always await async operations before asserting
Place module mock declarations (vi.mock) at the top level of the test file to avoid hoisting issues
Use factory functions in vi.mock calls to define mocks and avoid hoisting pitfalls
Use vi.spyOn() to specify return values or behavior of methods under test
Reset/clear mocks between tests using vi.clearAllMocks() (and vi.resetAllMocks() when appropriate) to ensure isolation
Do not rely on Nuxt auto-imports in tests; import required Vue utilities explicitly in test files
Remember that vi.mock calls are hoisted; avoid mixing mock declarations and module mocks incorrectly
Files:
web/__test__/components/ColorSwitcher.test.tsweb/__test__/components/Auth.test.tsweb/__test__/components/UpdateOs.test.tsweb/__test__/components/component-registry.test.tsweb/__test__/components/WanIpCheck.test.tsweb/__test__/components/Registration.test.tsweb/__test__/components/ThemeSwitcher.test.tsweb/__test__/components/Activation/WelcomeModal.test.tsweb/__test__/components/HeaderOsVersion.test.tsweb/__test__/components/DownloadApiLogs.test.tsweb/__test__/components/UserProfile.test.tsweb/__test__/components/DowngradeOs.test.tsweb/__test__/components/WelcomeModal.test.ts
**/__test__/components/**/*.ts
📄 CodeRabbit inference engine (.cursor/rules/web-testing-rules.mdc)
**/__test__/components/**/*.ts: Component tests should use mount from @vue/test-utils
Stub complex child components that are not the focus of a component test
Mock external dependencies and services in component tests (e.g., vi.mock for helper modules)
Use createTestingPinia() to mock Pinia stores when testing Vue components
Test that expected elements are rendered and verify component output rather than internals
Test component interactions (clicks, inputs) using await element.trigger and setValue, and verify emitted events via wrapper.emitted()
Prefer semantic queries like find('button') or CSS selectors; avoid relying on data-test IDs unless necessary
Assert rendered text with wrapper.text(), check attributes via element.attributes(), and verify element existence with expect(element.exists()).toBe(true)
In component tests that use real store implementations, configure createTestingPinia with stubActions: false when you need real action behavior
Use findComponent(ComponentName) for locating child components and findAll for collections
Files:
web/__test__/components/ColorSwitcher.test.tsweb/__test__/components/Auth.test.tsweb/__test__/components/UpdateOs.test.tsweb/__test__/components/component-registry.test.tsweb/__test__/components/WanIpCheck.test.tsweb/__test__/components/Registration.test.tsweb/__test__/components/ThemeSwitcher.test.tsweb/__test__/components/Activation/WelcomeModal.test.tsweb/__test__/components/HeaderOsVersion.test.tsweb/__test__/components/DownloadApiLogs.test.tsweb/__test__/components/UserProfile.test.tsweb/__test__/components/DowngradeOs.test.tsweb/__test__/components/WelcomeModal.test.ts
{api,web}/**/*.{spec,test}.@(ts|tsx|js|jsx)
📄 CodeRabbit inference engine (CLAUDE.md)
{api,web}/**/*.{spec,test}.@(ts|tsx|js|jsx): When testing for errors, use .rejects.toThrow() without asserting specific message strings
Focus tests on behavior, not implementation details like exact error messages
Avoid brittle tests that depend on non-essential details (e.g., log formats)
Use mocks as nouns (objects), not verbs (functions)
Files:
web/__test__/components/ColorSwitcher.test.tsweb/__test__/components/Auth.test.tsweb/__test__/components/UpdateOs.test.tsweb/__test__/components/component-registry.test.tsweb/__test__/components/WanIpCheck.test.tsweb/__test__/components/Registration.test.tsweb/__test__/components/ThemeSwitcher.test.tsweb/__test__/components/Activation/WelcomeModal.test.tsweb/__test__/components/HeaderOsVersion.test.tsweb/__test__/components/DownloadApiLogs.test.tsweb/__test__/components/UserProfile.test.tsweb/__test__/components/DowngradeOs.test.tsweb/__test__/components/WelcomeModal.test.ts
web/__test__/**/*.@(ts|tsx|js|jsx)
📄 CodeRabbit inference engine (CLAUDE.md)
Web tests are located under web/test
Files:
web/__test__/components/ColorSwitcher.test.tsweb/__test__/components/Auth.test.tsweb/__test__/components/UpdateOs.test.tsweb/__test__/components/component-registry.test.tsweb/__test__/components/WanIpCheck.test.tsweb/__test__/components/Registration.test.tsweb/__test__/components/ThemeSwitcher.test.tsweb/__test__/components/Activation/WelcomeModal.test.tsweb/__test__/components/HeaderOsVersion.test.tsweb/__test__/components/DownloadApiLogs.test.tsweb/__test__/components/UserProfile.test.tsweb/__test__/components/DowngradeOs.test.tsweb/__test__/components/WelcomeModal.test.ts
web/**/*.{spec,test}.@(ts|tsx|js|jsx)
📄 CodeRabbit inference engine (CLAUDE.md)
web/**/*.{spec,test}.@(ts|tsx|js|jsx): Use mount from Vue Test Utils for component tests
Stub complex child components that are not the focus of the test
Mock external dependencies and services in component tests
Test component behavior and rendered output, not internal implementation details
Use createTestingPinia() when mocking stores in component tests
Prefer semantic element queries like find('button') over data-test IDs
Use await nextTick() for DOM updates before assertions
Always await async operations before making assertions
Files:
web/__test__/components/ColorSwitcher.test.tsweb/__test__/components/Auth.test.tsweb/__test__/components/UpdateOs.test.tsweb/__test__/components/component-registry.test.tsweb/__test__/components/WanIpCheck.test.tsweb/__test__/components/Registration.test.tsweb/__test__/components/ThemeSwitcher.test.tsweb/__test__/components/Activation/WelcomeModal.test.tsweb/__test__/components/HeaderOsVersion.test.tsweb/__test__/components/DownloadApiLogs.test.tsweb/__test__/components/UserProfile.test.tsweb/__test__/components/DowngradeOs.test.tsweb/__test__/components/WelcomeModal.test.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Never use the any type; prefer proper typing
Avoid using type assertions/casting; prefer proper typing from the start
Files:
web/__test__/components/ColorSwitcher.test.tsweb/__test__/components/Auth.test.tsweb/__test__/components/UpdateOs.test.tsweb/__test__/components/component-registry.test.tsweb/__test__/components/WanIpCheck.test.tsweb/__test__/components/Registration.test.tsweb/__test__/components/ThemeSwitcher.test.tsweb/__test__/components/Activation/WelcomeModal.test.tsweb/__test__/components/HeaderOsVersion.test.tsweb/__test__/components/DownloadApiLogs.test.tsweb/__test__/components/UserProfile.test.tsweb/__test__/components/DowngradeOs.test.tsweb/components.d.tsweb/src/components/Wrapper/component-registry.tsweb/__test__/components/WelcomeModal.test.ts
**/components/**/*.vue
📄 CodeRabbit inference engine (.cursor/rules/web-testing-rules.mdc)
Some Vue files may require explicit imports like ref or computed due to Nuxt auto-imports not applying in tests
Files:
web/src/components/ConnectSettings/ConnectSettings.standalone.vue
🧠 Learnings (44)
📓 Common learnings
Learnt from: mdatelle
PR: unraid/api#1106
File: web/components/UserProfile.ce.vue:168-170
Timestamp: 2025-02-07T19:25:02.936Z
Learning: Files with .ce.vue extension are web components that require self-contained styles. Global style imports within these components are valid and necessary for proper encapsulation.
Learnt from: CR
PR: unraid/api#0
File: .cursor/rules/web-testing-rules.mdc:0-0
Timestamp: 2025-08-11T15:10:28.150Z
Learning: Applies to {**/*.test.ts,**/__test__/{components,store}/**/*.ts} : Do not rely on Nuxt auto-imports in tests; import required Vue utilities explicitly in test files
Learnt from: CR
PR: unraid/api#0
File: .cursor/rules/web-testing-rules.mdc:0-0
Timestamp: 2025-08-11T15:10:28.150Z
Learning: Applies to **/components/**/*.vue : Some Vue files may require explicit imports like ref or computed due to Nuxt auto-imports not applying in tests
📚 Learning: 2025-08-11T15:10:28.150Z
Learnt from: CR
PR: unraid/api#0
File: .cursor/rules/web-testing-rules.mdc:0-0
Timestamp: 2025-08-11T15:10:28.150Z
Learning: Applies to {**/*.test.ts,**/__test__/{components,store}/**/*.ts} : Do not rely on Nuxt auto-imports in tests; import required Vue utilities explicitly in test files
Applied to files:
web/__test__/components/ColorSwitcher.test.tsweb/__test__/components/Auth.test.tsweb/__test__/components/UpdateOs.test.tsweb/__test__/components/Registration.test.tsweb/__test__/components/ThemeSwitcher.test.tsweb/__test__/components/Activation/WelcomeModal.test.tsweb/__test__/components/HeaderOsVersion.test.tsweb/__test__/components/DownloadApiLogs.test.tsweb/__test__/components/UserProfile.test.tsweb/__test__/components/DowngradeOs.test.tsweb/components.d.tsweb/src/components/Wrapper/component-registry.tsweb/__test__/components/WelcomeModal.test.ts
📚 Learning: 2025-09-02T14:41:56.235Z
Learnt from: CR
PR: unraid/api#0
File: CLAUDE.md:0-0
Timestamp: 2025-09-02T14:41:56.235Z
Learning: Applies to web/**/*.{spec,test}.@(ts|tsx|js|jsx) : Test component behavior and rendered output, not internal implementation details
Applied to files:
web/__test__/components/ColorSwitcher.test.tsweb/__test__/components/Auth.test.tsweb/__test__/components/Registration.test.tsweb/__test__/components/ThemeSwitcher.test.tsweb/__test__/components/DownloadApiLogs.test.tsweb/__test__/components/DowngradeOs.test.tsweb/__test__/components/WelcomeModal.test.ts
📚 Learning: 2025-08-11T15:10:28.150Z
Learnt from: CR
PR: unraid/api#0
File: .cursor/rules/web-testing-rules.mdc:0-0
Timestamp: 2025-08-11T15:10:28.150Z
Learning: Applies to **/__test__/components/**/*.ts : Component tests should use mount from vue/test-utils
Applied to files:
web/__test__/components/ColorSwitcher.test.tsweb/__test__/components/Auth.test.tsweb/__test__/components/UpdateOs.test.tsweb/__test__/components/component-registry.test.tsweb/__test__/components/Registration.test.tsweb/__test__/components/ThemeSwitcher.test.tsweb/__test__/components/Activation/WelcomeModal.test.tsweb/__test__/components/DownloadApiLogs.test.tsweb/__test__/components/UserProfile.test.tsweb/__test__/components/DowngradeOs.test.tsweb/__test__/components/WelcomeModal.test.ts
📚 Learning: 2025-08-11T15:10:28.150Z
Learnt from: CR
PR: unraid/api#0
File: .cursor/rules/web-testing-rules.mdc:0-0
Timestamp: 2025-08-11T15:10:28.150Z
Learning: Applies to **/__test__/components/**/*.ts : Prefer semantic queries like find('button') or CSS selectors; avoid relying on data-test IDs unless necessary
Applied to files:
web/__test__/components/ColorSwitcher.test.tsweb/__test__/components/ThemeSwitcher.test.ts
📚 Learning: 2025-08-11T15:10:28.150Z
Learnt from: CR
PR: unraid/api#0
File: .cursor/rules/web-testing-rules.mdc:0-0
Timestamp: 2025-08-11T15:10:28.150Z
Learning: Applies to **/components/**/*.vue : Some Vue files may require explicit imports like ref or computed due to Nuxt auto-imports not applying in tests
Applied to files:
web/__test__/components/ColorSwitcher.test.tsweb/__test__/components/Auth.test.tsweb/__test__/components/Registration.test.tsweb/__test__/components/DownloadApiLogs.test.tsweb/CONTRIBUTING.mdweb/components.d.tsweb/src/components/Wrapper/component-registry.ts
📚 Learning: 2025-08-11T15:10:28.150Z
Learnt from: CR
PR: unraid/api#0
File: .cursor/rules/web-testing-rules.mdc:0-0
Timestamp: 2025-08-11T15:10:28.150Z
Learning: Applies to **/__test__/components/**/*.ts : Test that expected elements are rendered and verify component output rather than internals
Applied to files:
web/__test__/components/ColorSwitcher.test.tsweb/__test__/components/Auth.test.tsweb/__test__/components/UpdateOs.test.tsweb/__test__/components/Registration.test.tsweb/__test__/components/ThemeSwitcher.test.tsweb/__test__/components/DownloadApiLogs.test.tsweb/__test__/components/WelcomeModal.test.ts
📚 Learning: 2025-08-11T15:10:28.150Z
Learnt from: CR
PR: unraid/api#0
File: .cursor/rules/web-testing-rules.mdc:0-0
Timestamp: 2025-08-11T15:10:28.150Z
Learning: Applies to **/__test__/components/**/*.ts : Mock external dependencies and services in component tests (e.g., vi.mock for helper modules)
Applied to files:
web/__test__/components/ColorSwitcher.test.tsweb/__test__/components/Auth.test.tsweb/__test__/components/UpdateOs.test.tsweb/__test__/components/component-registry.test.tsweb/__test__/components/WanIpCheck.test.tsweb/__test__/components/ThemeSwitcher.test.tsweb/__test__/components/Activation/WelcomeModal.test.tsweb/__test__/components/DownloadApiLogs.test.tsweb/__test__/components/DowngradeOs.test.ts
📚 Learning: 2025-08-11T15:10:28.150Z
Learnt from: CR
PR: unraid/api#0
File: .cursor/rules/web-testing-rules.mdc:0-0
Timestamp: 2025-08-11T15:10:28.150Z
Learning: Applies to {**/*.test.ts,**/__test__/{components,store}/**/*.ts} : Use factory functions in vi.mock calls to define mocks and avoid hoisting pitfalls
Applied to files:
web/__test__/components/ColorSwitcher.test.tsweb/__test__/components/Auth.test.tsweb/__test__/components/UpdateOs.test.tsweb/__test__/components/component-registry.test.tsweb/__test__/components/WanIpCheck.test.tsweb/__test__/components/ThemeSwitcher.test.tsweb/__test__/components/Activation/WelcomeModal.test.tsweb/__test__/components/DownloadApiLogs.test.tsweb/__test__/components/DowngradeOs.test.ts
📚 Learning: 2025-08-11T15:10:28.150Z
Learnt from: CR
PR: unraid/api#0
File: .cursor/rules/web-testing-rules.mdc:0-0
Timestamp: 2025-08-11T15:10:28.150Z
Learning: Applies to **/__test__/components/**/*.ts : Use createTestingPinia() to mock Pinia stores when testing Vue components
Applied to files:
web/__test__/components/ColorSwitcher.test.tsweb/__test__/components/Auth.test.tsweb/__test__/components/UpdateOs.test.tsweb/__test__/components/component-registry.test.tsweb/__test__/components/WanIpCheck.test.tsweb/__test__/components/Registration.test.tsweb/__test__/components/ThemeSwitcher.test.tsweb/__test__/components/Activation/WelcomeModal.test.tsweb/__test__/components/DownloadApiLogs.test.tsweb/__test__/components/UserProfile.test.tsweb/__test__/components/DowngradeOs.test.ts
📚 Learning: 2025-08-11T15:10:28.150Z
Learnt from: CR
PR: unraid/api#0
File: .cursor/rules/web-testing-rules.mdc:0-0
Timestamp: 2025-08-11T15:10:28.150Z
Learning: Applies to {**/*.test.ts,**/__test__/{components,store}/**/*.ts} : Remember that vi.mock calls are hoisted; avoid mixing mock declarations and module mocks incorrectly
Applied to files:
web/__test__/components/ColorSwitcher.test.tsweb/__test__/components/Auth.test.tsweb/__test__/components/UpdateOs.test.tsweb/__test__/components/component-registry.test.tsweb/__test__/components/ThemeSwitcher.test.tsweb/__test__/components/Activation/WelcomeModal.test.ts
📚 Learning: 2025-08-11T15:10:28.150Z
Learnt from: CR
PR: unraid/api#0
File: .cursor/rules/web-testing-rules.mdc:0-0
Timestamp: 2025-08-11T15:10:28.150Z
Learning: Applies to {**/*.test.ts,**/__test__/{components,store}/**/*.ts} : Place module mock declarations (vi.mock) at the top level of the test file to avoid hoisting issues
Applied to files:
web/__test__/components/ColorSwitcher.test.tsweb/__test__/components/UpdateOs.test.tsweb/__test__/components/component-registry.test.tsweb/__test__/components/ThemeSwitcher.test.tsweb/__test__/components/Activation/WelcomeModal.test.ts
📚 Learning: 2025-08-11T15:10:28.150Z
Learnt from: CR
PR: unraid/api#0
File: .cursor/rules/web-testing-rules.mdc:0-0
Timestamp: 2025-08-11T15:10:28.150Z
Learning: Applies to **/__test__/store/**/*.ts : In store tests, mock external dependencies used by the store and verify interactions with those mocks
Applied to files:
web/__test__/components/ColorSwitcher.test.tsweb/__test__/components/component-registry.test.tsweb/__test__/components/ThemeSwitcher.test.tsweb/__test__/components/Activation/WelcomeModal.test.ts
📚 Learning: 2025-08-11T15:10:28.150Z
Learnt from: CR
PR: unraid/api#0
File: .cursor/rules/web-testing-rules.mdc:0-0
Timestamp: 2025-08-11T15:10:28.150Z
Learning: Applies to **/__test__/mocks/**/*.ts : Frequently used mocks can also be placed under __test__/mocks
Applied to files:
web/__test__/components/ColorSwitcher.test.tsweb/__test__/components/component-registry.test.ts
📚 Learning: 2025-08-11T15:10:28.150Z
Learnt from: CR
PR: unraid/api#0
File: .cursor/rules/web-testing-rules.mdc:0-0
Timestamp: 2025-08-11T15:10:28.150Z
Learning: This Nuxt app is tested with vitest outside the Nuxt runtime; structure tests accordingly
Applied to files:
web/__test__/components/ColorSwitcher.test.tsweb/__test__/components/UpdateOs.test.tsweb/__test__/components/component-registry.test.tsweb/__test__/components/WanIpCheck.test.tsweb/__test__/components/DownloadApiLogs.test.tsweb/__test__/components/DowngradeOs.test.ts
📚 Learning: 2025-09-02T14:41:56.235Z
Learnt from: CR
PR: unraid/api#0
File: CLAUDE.md:0-0
Timestamp: 2025-09-02T14:41:56.235Z
Learning: Applies to web/**/*.{spec,test}.@(ts|tsx|js|jsx) : Use mount from Vue Test Utils for component tests
Applied to files:
web/__test__/components/Auth.test.tsweb/__test__/components/Registration.test.tsweb/__test__/components/Activation/WelcomeModal.test.ts
📚 Learning: 2025-09-02T14:41:56.235Z
Learnt from: CR
PR: unraid/api#0
File: CLAUDE.md:0-0
Timestamp: 2025-09-02T14:41:56.235Z
Learning: Applies to web/**/*.{spec,test}.@(ts|tsx|js|jsx) : Use createTestingPinia() when mocking stores in component tests
Applied to files:
web/__test__/components/UpdateOs.test.tsweb/__test__/components/Registration.test.tsweb/__test__/components/DownloadApiLogs.test.tsweb/__test__/components/DowngradeOs.test.ts
📚 Learning: 2025-08-11T15:10:28.150Z
Learnt from: CR
PR: unraid/api#0
File: .cursor/rules/web-testing-rules.mdc:0-0
Timestamp: 2025-08-11T15:10:28.150Z
Learning: Applies to **/__test__/store/**/*.ts : For Pinia store unit tests, initialize with setActivePinia(createPinia()) rather than createTestingPinia, unless testing features from createTestingPinia are explicitly needed
Applied to files:
web/__test__/components/UpdateOs.test.tsweb/__test__/components/Registration.test.tsweb/__test__/components/DownloadApiLogs.test.tsweb/__test__/components/DowngradeOs.test.ts
📚 Learning: 2025-09-02T14:41:56.235Z
Learnt from: CR
PR: unraid/api#0
File: CLAUDE.md:0-0
Timestamp: 2025-09-02T14:41:56.235Z
Learning: Applies to web/**/{store,stores}/**/*.{spec,test}.@(ts|js) : Use createTestingPinia only when you specifically need its testing features
Applied to files:
web/__test__/components/UpdateOs.test.tsweb/__test__/components/DownloadApiLogs.test.tsweb/__test__/components/DowngradeOs.test.ts
📚 Learning: 2025-09-02T14:41:56.235Z
Learnt from: CR
PR: unraid/api#0
File: CLAUDE.md:0-0
Timestamp: 2025-09-02T14:41:56.235Z
Learning: Applies to web/**/{store,stores}/**/*.{spec,test}.@(ts|js) : Use createPinia() and setActivePinia when testing Pinia store files
Applied to files:
web/__test__/components/UpdateOs.test.tsweb/__test__/components/Registration.test.tsweb/__test__/components/DownloadApiLogs.test.tsweb/__test__/components/DowngradeOs.test.ts
📚 Learning: 2025-08-11T15:10:28.150Z
Learnt from: CR
PR: unraid/api#0
File: .cursor/rules/web-testing-rules.mdc:0-0
Timestamp: 2025-08-11T15:10:28.150Z
Learning: Applies to **/__test__/components/**/*.ts : In component tests that use real store implementations, configure createTestingPinia with stubActions: false when you need real action behavior
Applied to files:
web/__test__/components/UpdateOs.test.tsweb/__test__/components/Registration.test.tsweb/__test__/components/DownloadApiLogs.test.tsweb/__test__/components/DowngradeOs.test.ts
📚 Learning: 2025-08-11T15:10:28.150Z
Learnt from: CR
PR: unraid/api#0
File: .cursor/rules/web-testing-rules.mdc:0-0
Timestamp: 2025-08-11T15:10:28.150Z
Learning: Applies to {**/*.test.ts,**/__test__/{components,store}/**/*.ts} : Reset/clear mocks between tests using vi.clearAllMocks() (and vi.resetAllMocks() when appropriate) to ensure isolation
Applied to files:
web/__test__/components/UpdateOs.test.tsweb/__test__/components/component-registry.test.tsweb/__test__/components/WanIpCheck.test.tsweb/__test__/components/ThemeSwitcher.test.ts
📚 Learning: 2025-08-11T15:10:28.150Z
Learnt from: CR
PR: unraid/api#0
File: .cursor/rules/web-testing-rules.mdc:0-0
Timestamp: 2025-08-11T15:10:28.150Z
Learning: Applies to {**/*.test.ts,**/__test__/{components,store}/**/*.ts} : Use vi.spyOn() to specify return values or behavior of methods under test
Applied to files:
web/__test__/components/UpdateOs.test.tsweb/__test__/components/component-registry.test.tsweb/__test__/components/ThemeSwitcher.test.tsweb/__test__/components/DowngradeOs.test.ts
📚 Learning: 2025-09-02T14:41:56.235Z
Learnt from: CR
PR: unraid/api#0
File: CLAUDE.md:0-0
Timestamp: 2025-09-02T14:41:56.235Z
Learning: Applies to web/**/{store,stores}/**/*.{spec,test}.@(ts|js) : Use factory functions for module mocks to avoid hoisting issues
Applied to files:
web/__test__/components/component-registry.test.tsweb/__test__/components/ThemeSwitcher.test.ts
📚 Learning: 2025-08-11T15:10:28.150Z
Learnt from: CR
PR: unraid/api#0
File: .cursor/rules/web-testing-rules.mdc:0-0
Timestamp: 2025-08-11T15:10:28.150Z
Learning: Applies to **/__test__/components/**/*.ts : Stub complex child components that are not the focus of a component test
Applied to files:
web/__test__/components/component-registry.test.ts
📚 Learning: 2025-08-11T15:10:28.150Z
Learnt from: CR
PR: unraid/api#0
File: .cursor/rules/web-testing-rules.mdc:0-0
Timestamp: 2025-08-11T15:10:28.150Z
Learning: Applies to web/test/mocks/**/*.ts : Frequently used mocks should be placed under web/test/mocks
Applied to files:
web/__test__/components/component-registry.test.ts
📚 Learning: 2025-08-09T01:03:29.676Z
Learnt from: elibosley
PR: unraid/api#1575
File: packages/unraid-shared/src/services/socket-config.service.spec.ts:10-13
Timestamp: 2025-08-09T01:03:29.676Z
Learning: Vitest is used for all testing across all repositories in the unraid organization, not Jest. Always use `vi` for mocking utilities, not `jest`.
Applied to files:
web/__test__/components/component-registry.test.ts
📚 Learning: 2025-09-02T14:41:56.235Z
Learnt from: CR
PR: unraid/api#0
File: CLAUDE.md:0-0
Timestamp: 2025-09-02T14:41:56.235Z
Learning: Applies to {api,web}/**/*.{spec,test}.@(ts|tsx|js|jsx) : Avoid brittle tests that depend on non-essential details (e.g., log formats)
Applied to files:
web/__test__/components/WanIpCheck.test.tsweb/__test__/components/DownloadApiLogs.test.tsweb/__test__/components/WelcomeModal.test.ts
📚 Learning: 2025-02-07T19:25:02.936Z
Learnt from: mdatelle
PR: unraid/api#1106
File: web/components/UserProfile.ce.vue:168-170
Timestamp: 2025-02-07T19:25:02.936Z
Learning: Files with .ce.vue extension are web components that require self-contained styles. Global style imports within these components are valid and necessary for proper encapsulation.
Applied to files:
web/src/pages/index.vueweb/CONTRIBUTING.mdweb/components.d.tsweb/src/components/Wrapper/component-registry.ts
📚 Learning: 2025-03-27T23:52:57.888Z
Learnt from: zackspear
PR: unraid/api#0
File: :0-0
Timestamp: 2025-03-27T23:52:57.888Z
Learning: In the unraid/api project, Vue components are compiled into web components. The `setActivePinia(createPinia())` call at the module level in store files is intentional and ensures all web components share a single Pinia store instance, which is the desired behavior. This shared state approach is critical for the application's architecture to function correctly.
Applied to files:
web/src/pages/index.vueweb/CONTRIBUTING.mdweb/__test__/components/UserProfile.test.ts
📚 Learning: 2025-03-27T23:33:13.215Z
Learnt from: zackspear
PR: unraid/api#0
File: :0-0
Timestamp: 2025-03-27T23:33:13.215Z
Learning: In the unraid/api project, Vue components are compiled into web components. Using `setActivePinia(createPinia())` in store files would break the build by causing all web components to share a singular Pinia store instance. Each web component needs its own Pinia store instance to maintain proper isolation and encapsulation.
Applied to files:
web/src/pages/index.vueweb/CONTRIBUTING.mdweb/__test__/components/UserProfile.test.ts
📚 Learning: 2025-03-27T23:33:13.215Z
Learnt from: zackspear
PR: unraid/api#0
File: :0-0
Timestamp: 2025-03-27T23:33:13.215Z
Learning: In the unraid/api project, Vue components are compiled into web components. Using `setActivePinia(createPinia())` in store files would break the build by causing all web components to share a singular Pinia store instance. Each web component needs its own Pinia store instance to function correctly.
Applied to files:
web/src/pages/index.vueweb/CONTRIBUTING.mdweb/__test__/components/UserProfile.test.ts
📚 Learning: 2025-03-27T23:52:57.888Z
Learnt from: zackspear
PR: unraid/api#0
File: :0-0
Timestamp: 2025-03-27T23:52:57.888Z
Learning: In the unraid/api project, Vue components are compiled into web components. Using `setActivePinia(createPinia())` in store files ensures that all web components share a single Pinia store instance, which is the desired behavior. Without this initialization, each web component would have its own isolated store, breaking the intended architecture.
Applied to files:
web/src/pages/index.vueweb/CONTRIBUTING.mdweb/__test__/components/UserProfile.test.ts
📚 Learning: 2025-04-02T21:21:29.168Z
Learnt from: elibosley
PR: unraid/api#1308
File: unraid-ui/src/components/common/loading/Error.vue:2-2
Timestamp: 2025-04-02T21:21:29.168Z
Learning: Components in the unraid-ui folder require explicit imports and are not autoloaded, unlike other parts of the project that may use Nuxt.js autoloading features.
Applied to files:
web/src/components/ConnectSettings/ConnectSettings.standalone.vueweb/CONTRIBUTING.mdweb/components.d.tsweb/src/components/Wrapper/component-registry.ts
📚 Learning: 2025-03-14T19:14:10.408Z
Learnt from: pujitm
PR: unraid/api#1211
File: plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/Connect.page:0-0
Timestamp: 2025-03-14T19:14:10.408Z
Learning: *.ce.vue components in `web/components` get built as custom elements and prefixed with `unraid-`, making them available as HTML custom elements at runtime.
Applied to files:
web/CONTRIBUTING.mdweb/src/components/Wrapper/component-registry.ts
📚 Learning: 2025-03-13T16:17:21.897Z
Learnt from: elibosley
PR: unraid/api#1211
File: unraid-ui/src/components/form/number/NumberFieldInput.vue:1-21
Timestamp: 2025-03-13T16:17:21.897Z
Learning: The unraid-ui is a UI library being published externally, where wrapping third-party components (like those from reka-ui) is an intentional design choice to maintain a consistent interface, standardize styling, and control the exposed API.
Applied to files:
web/CONTRIBUTING.md
📚 Learning: 2024-12-06T17:34:16.133Z
Learnt from: pujitm
PR: unraid/api#974
File: web/components/Loading/Error.vue:50-50
Timestamp: 2024-12-06T17:34:16.133Z
Learning: In this project, the `Button` component from `~/components/shadcn/Button.vue` is autoloaded and does not need to be imported manually in components like `web/components/Loading/Error.vue`.
Applied to files:
web/src/pages/login.vueweb/components.d.tsweb/src/components/Wrapper/component-registry.ts
📚 Learning: 2025-04-25T13:29:07.868Z
Learnt from: elibosley
PR: unraid/api#1369
File: web/components/Activation/WelcomeModal.ce.vue:40-40
Timestamp: 2025-04-25T13:29:07.868Z
Learning: The `#confirmPassword` selector in the WelcomeModal.ce.vue component is intentionally looking for an element that exists in the Unraid OS login page (.login.php), not within the component itself. This is used as part of a font-size adjustment workaround to handle different CSS between login and authenticated pages.
Applied to files:
web/src/pages/login.vue
📚 Learning: 2024-12-17T13:55:42.068Z
Learnt from: elibosley
PR: unraid/api#972
File: web/components/ColorSwitcher.ce.vue:1-2
Timestamp: 2024-12-17T13:55:42.068Z
Learning: In this Nuxt.js project, components used in templates are automatically imported by Nuxt, so explicit import statements for components are unnecessary.
Applied to files:
web/components.d.tsweb/src/components/Wrapper/component-registry.ts
📚 Learning: 2024-12-09T15:47:29.325Z
Learnt from: pujitm
PR: unraid/api#975
File: web/components/Notifications/TabList.vue:1-24
Timestamp: 2024-12-09T15:47:29.325Z
Learning: In our Nuxt setup using Vue.js, components defined within the codebase are autoloaded and do not require explicit import statements in the script section. For example, components like `TabsList` and `TabsTrigger` used in `web/components/Notifications/TabList.vue` are automatically available without imports.
Applied to files:
web/components.d.tsweb/src/components/Wrapper/component-registry.ts
📚 Learning: 2024-12-06T17:38:40.999Z
Learnt from: elibosley
PR: unraid/api#974
File: web/components/Loading/Error.vue:1-3
Timestamp: 2024-12-06T17:38:40.999Z
Learning: In Nuxt.js projects, components are automatically imported, so explicit import statements for components like `LoadingSpinner` in `web/components/Loading/Error.vue` are not necessary.
Applied to files:
web/components.d.tsweb/src/components/Wrapper/component-registry.ts
📚 Learning: 2025-02-18T17:36:22.670Z
Learnt from: pujitm
PR: unraid/api#1143
File: web/components/DummyServerSwitcher.vue:16-19
Timestamp: 2025-02-18T17:36:22.670Z
Learning: The DummyServerSwitcher component in web/components/DummyServerSwitcher.vue is a development tool for testing different server states, and includes intentional debug elements to aid development.
Applied to files:
web/components.d.ts
📚 Learning: 2025-08-11T15:10:28.150Z
Learnt from: CR
PR: unraid/api#0
File: .cursor/rules/web-testing-rules.mdc:0-0
Timestamp: 2025-08-11T15:10:28.150Z
Learning: Applies to **/{store,stores}/**/*.ts : In store files, explicitly import Vue reactivity utilities (e.g., computed, ref, watchEffect); do not rely on Nuxt auto-imports
Applied to files:
web/components.d.tsweb/src/components/Wrapper/component-registry.ts
📚 Learning: 2025-08-11T15:10:28.150Z
Learnt from: CR
PR: unraid/api#0
File: .cursor/rules/web-testing-rules.mdc:0-0
Timestamp: 2025-08-11T15:10:28.150Z
Learning: Applies to {**/*.test.ts,**/__test__/{components,store}/**/*.ts} : Focus tests on observable behavior and outcomes, not implementation details such as exact error messages
Applied to files:
web/__test__/components/WelcomeModal.test.ts
🪛 GitHub Actions: CI - Main (API)
web/__test__/components/DowngradeOs.test.ts
[error] 1-1: Unhandled Rejection: Apollo client with id default not found. Ensure Apollo provider is configured in Vue app or wrap test with app.runWithContext().
🔇 Additional comments (24)
web/__test__/components/DownloadApiLogs.test.ts (1)
11-11: LGTM: import updated to standalone variant.Import path switch to
.standalone.vueis consistent with the PR objective.web/__test__/components/Auth.test.ts (1)
14-14: LGTM: import updated to standalone variant.No other changes needed.
web/__test__/components/WanIpCheck.test.ts (1)
96-96: LGTM: describe label updated to match standalone naming.Matches repo-wide rename.
web/__test__/components/ColorSwitcher.test.ts (1)
15-15: LGTM: import updated to standalone variant.All good.
web/__test__/components/WelcomeModal.test.ts (1)
66-66: LGTM: describe label updated to standalone naming.No functional changes.
web/__test__/components/HeaderOsVersion.test.ts (1)
17-17: LGTM: import updated to standalone variant.Consistent with the migration.
web/__test__/components/Registration.test.ts (2)
15-15: Switch to .standalone import — looks goodImport path updated correctly to the renamed component.
119-119: Describe label aligned to new filenameSuite name matches the new target component.
web/src/components/ConnectSettings/ConnectSettings.standalone.vue (1)
14-14: Updated child imports to .standalone — consistent with migrationBoth Auth and DownloadApiLogs now reference their standalone variants. No other changes needed.
Also applies to: 23-23
web/__test__/components/UpdateOs.test.ts (2)
11-11: Import path migrated to .standaloneGood, matches repo-wide change.
64-64: Describe label updatedKeeps test reporting consistent with the new filename.
web/src/pages/index.vue (2)
13-22: Bulk import renames to .standalone — looks goodAll mapped components now point at the standalone variants.
13-22: No lingering.ce.vuereferences found
Ripgrep search in thewebdirectory returned no matches for\.ce\.vue, confirming all such imports have been removed.web/__test__/components/ThemeSwitcher.test.ts (1)
49-49: Target updated to ThemeSwitcher.standalone — goodDynamic import and suite name both aligned.
Also applies to: 56-56
web/__test__/components/UserProfile.test.ts (1)
14-14: Import + describe updated to .standaloneMatches the migration; Apollo client is provided in setup, so this test should be safe.
Also applies to: 104-104
web/__test__/components/DowngradeOs.test.ts (2)
11-11: Import path migrated to .standaloneLooks correct.
11-11: Remove Apollo mocking suggestion: DowngradeOs.standalone.vue doesn’t import or use @vue/apollo-composable, so DowngradeOs.test.ts doesn’t require an Apollo mock/provider.Likely an incorrect or invalid review comment.
web/src/pages/tools/apikeyauthorize.vue (1)
2-2: Path rename to standalone variant is correct.Import matches the new component filename; template usage unchanged. LGTM.
web/__test__/components/Activation/WelcomeModal.test.ts (2)
12-12: Updated import to .standalone.vue — looks good.
79-79: Describe label updated to match file rename — good consistency.web/__test__/components/component-registry.test.ts (2)
4-54: Mocks updated to .standalone.vue — consistent with the rename.Mappings align with the new component filenames. LGTM.
164-171: Selector in test uses an element ID; ensure registry supports both tag and id.This test creates
, while the registry mapping for Auth uses 'unraid-auth' (tag selector). If mount-engine treats selectors literally, the mapping should include '#unraid-auth' too. See suggestion in component-registry.ts.web/src/components/Wrapper/component-registry.ts (1)
32-143: Sanity check passed: no.ce.vuereferences remain and all loader import paths resolve correctly.web/components.d.ts (1)
15-125: Generated types updated to .standalone — no manual action needed.This file is generated by unplugin-vue-components; the rename propagation looks correct. Ensure CI regenerates it to avoid drift.
If desired, re-run the component auto-import generation locally (or CI) after the rename to confirm no stale entries remain.
1 participant
Summary by CodeRabbit
No user-facing changes.