refactor: extract statement preview component, drop dumb tests#103
refactor: extract statement preview component, drop dumb tests#103
Conversation
📝 WalkthroughSummary by CodeRabbit
WalkthroughA new Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant StatementEditor
participant StatementPreview
User->>StatementEditor: Edit or view a statement
StatementEditor->>StatementPreview: Pass statement, qualifiers, references as props
StatementPreview-->>StatementEditor: Rendered preview output
StatementEditor-->>User: Display updated preview via StatementPreview
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~18 minutes Possibly related PRs
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. ✨ Finishing Touches
🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
frontend/src/components/StatementPreview.vue (2)
19-23: Improve type safety for rankOptions.Consider defining an explicit type for better type safety and maintainability.
+interface RankOption { + value: StatementRank + severity: 'success' | 'info' | 'warn' | 'error' | 'secondary' +} + -const rankOptions = [ +const rankOptions: RankOption[] = [ { value: 'preferred', severity: 'success' }, { value: 'normal', severity: 'info' }, { value: 'deprecated', severity: 'warn' }, ]
52-56: Optimize rank severity lookup with a computed property.The
rankOptions.find()operation in the template could be optimized by using a computed property, following Vue 3 performance best practices.Add a computed property in the script section:
withDefaults(defineProps<StatementPreviewProps>(), { qualifiers: () => [], references: () => [], }) + +const props = defineProps<StatementPreviewProps>() + +const rankSeverity = computed(() => + rankOptions.find((r) => r.value === props.statement.rank)?.severity +)Then simplify the template:
<Tag :value="statement.rank" - :severity="rankOptions.find((r) => r.value === statement.rank)?.severity" + :severity="rankSeverity" size="small" />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (16)
frontend/components.d.ts(1 hunks)frontend/src/components/StatementEditor.vue(1 hunks)frontend/src/components/StatementPreview.vue(1 hunks)frontend/src/components/__tests__/ItemEditor.compile.test.ts(0 hunks)frontend/src/components/__tests__/ItemEditor.integration.test.ts(0 hunks)frontend/src/components/__tests__/ItemEditor.test.ts(0 hunks)frontend/src/components/__tests__/ReferencesEditor.compile.test.ts(0 hunks)frontend/src/components/__tests__/ReferencesEditor.test.ts(0 hunks)frontend/src/components/__tests__/StatementEditor.integration.test.ts(0 hunks)frontend/src/components/__tests__/StatementEditor.qualifier-display.test.ts(0 hunks)frontend/src/components/__tests__/StatementsEditor.compile.test.ts(0 hunks)frontend/src/components/__tests__/StatementsEditor.test.ts(0 hunks)frontend/src/components/__tests__/ValidationErrorDisplay.test.ts(0 hunks)frontend/src/composables/__tests__/useDataTypeCompatibility.test.ts(1 hunks)frontend/src/composables/__tests__/useLanguageDropZone.test.ts(12 hunks)frontend/src/stores/__tests__/schema.store.test.ts(2 hunks)
💤 Files with no reviewable changes (10)
- frontend/src/components/tests/ItemEditor.integration.test.ts
- frontend/src/components/tests/ReferencesEditor.test.ts
- frontend/src/components/tests/StatementsEditor.compile.test.ts
- frontend/src/components/tests/ItemEditor.compile.test.ts
- frontend/src/components/tests/ReferencesEditor.compile.test.ts
- frontend/src/components/tests/ValidationErrorDisplay.test.ts
- frontend/src/components/tests/ItemEditor.test.ts
- frontend/src/components/tests/StatementsEditor.test.ts
- frontend/src/components/tests/StatementEditor.qualifier-display.test.ts
- frontend/src/components/tests/StatementEditor.integration.test.ts
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit Inference Engine (.cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc)
**/*.{ts,tsx,js,jsx}: Usebun <file>instead ofnode <file>orts-node <file>for running TypeScript or JavaScript files
Do not use dotenv; Bun automatically loads .env files
UseBun.serve()for HTTP servers and WebSockets instead ofexpress
Usebun:sqlitefor SQLite instead ofbetter-sqlite3
UseBun.redisfor Redis instead ofioredis
UseBun.sqlfor Postgres instead ofpgorpostgres.js
Use built-inWebSocketinstead ofws
PreferBun.fileovernode:fs's readFile/writeFile
UseBun.$(e.g.,Bun.$ls``) instead of execa for running shell commands
Files:
frontend/src/composables/__tests__/useDataTypeCompatibility.test.tsfrontend/components.d.tsfrontend/src/composables/__tests__/useLanguageDropZone.test.tsfrontend/src/stores/__tests__/schema.store.test.ts
**/*.test.{ts,tsx,js,jsx}
📄 CodeRabbit Inference Engine (.cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc)
Use
bun testinstead ofjestfor running tests
Files:
frontend/src/composables/__tests__/useDataTypeCompatibility.test.tsfrontend/src/composables/__tests__/useLanguageDropZone.test.tsfrontend/src/stores/__tests__/schema.store.test.ts
**/*.{html,ts,tsx,css}
📄 CodeRabbit Inference Engine (.cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc)
Use
bun build <file.html|file.ts|file.css>instead ofwebpackoresbuildfor building HTML, TypeScript, or CSS files
Files:
frontend/src/composables/__tests__/useDataTypeCompatibility.test.tsfrontend/components.d.tsfrontend/src/composables/__tests__/useLanguageDropZone.test.tsfrontend/src/stores/__tests__/schema.store.test.ts
🧠 Learnings (19)
📓 Common learnings
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Prefer composables over methods in Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use v-memo, shallowRef, markRaw, and Suspense for performance optimization
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Build reusable, well-structured components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use Vue 3 with Composition API and <script setup lang="ts"> in all Vue components
📚 Learning: applies to src/composables/**/*.ts : use composables for logic that is not global state...
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/composables/**/*.ts : Use composables for logic that is not global state
Applied to files:
frontend/src/composables/__tests__/useDataTypeCompatibility.test.tsfrontend/components.d.tsfrontend/src/composables/__tests__/useLanguageDropZone.test.ts
📚 Learning: applies to src/**/*.{vue,ts} : use useapi composable (elysia eden) for all api calls...
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{vue,ts} : Use useApi composable (Elysia Eden) for all API calls
Applied to files:
frontend/src/composables/__tests__/useDataTypeCompatibility.test.tsfrontend/src/composables/__tests__/useLanguageDropZone.test.ts
📚 Learning: applies to **/*.test.{ts,tsx,js,jsx} : use `bun test` instead of `jest` for running tests...
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc:0-0
Timestamp: 2025-07-20T14:13:40.153Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use `bun test` instead of `jest` for running tests
Applied to files:
frontend/src/composables/__tests__/useDataTypeCompatibility.test.tsfrontend/src/composables/__tests__/useLanguageDropZone.test.ts
📚 Learning: applies to src/**/*.vue : use vue 3 with composition api and <script setup lang="ts"> in all vue com...
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use Vue 3 with Composition API and <script setup lang="ts"> in all Vue components
Applied to files:
frontend/components.d.tsfrontend/src/composables/__tests__/useLanguageDropZone.test.tsfrontend/src/components/StatementPreview.vue
📚 Learning: applies to src/**/*.vue : use <script setup lang="ts"> at the top, template second, style last (rare...
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use <script setup lang="ts"> at the top, template second, style last (rarely used) in Vue components
Applied to files:
frontend/components.d.tsfrontend/src/components/StatementPreview.vue
📚 Learning: applies to src/**/*.vue : props and emits must use explicit typescript interfaces...
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Props and emits must use explicit TypeScript interfaces
Applied to files:
frontend/components.d.tsfrontend/src/components/StatementPreview.vue
📚 Learning: applies to src/**/*.vue : build reusable, well-structured components...
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Build reusable, well-structured components
Applied to files:
frontend/components.d.ts
📚 Learning: applies to src/**/*.{ts,vue} : type safety everywhere...
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{ts,vue} : Type safety everywhere
Applied to files:
frontend/components.d.ts
📚 Learning: applies to src/**/*.{vue,ts} : use pinia stores for global state...
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{vue,ts} : Use Pinia stores for global state
Applied to files:
frontend/components.d.tsfrontend/src/composables/__tests__/useLanguageDropZone.test.ts
📚 Learning: applies to src/**/*.vue : prefer composables over methods in vue components...
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Prefer composables over methods in Vue components
Applied to files:
frontend/components.d.tsfrontend/src/components/StatementEditor.vue
📚 Learning: applies to src/**/*.vue : use auto-imports for vue, pinia, composables, and utilities...
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use auto-imports for Vue, Pinia, composables, and utilities
Applied to files:
frontend/components.d.ts
📚 Learning: applies to src/**/*.vue : use primevue as the ui library in all vue components...
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use PrimeVue as the UI library in all Vue components
Applied to files:
frontend/components.d.ts
📚 Learning: applies to src/**/*.vue : use v-memo, shallowref, markraw, and suspense for performance optimization...
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use v-memo, shallowRef, markRaw, and Suspense for performance optimization
Applied to files:
frontend/components.d.tsfrontend/src/components/StatementEditor.vue
📚 Learning: applies to src/**/*.vue : use pinia for state management in all vue components...
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use Pinia for state management in all Vue components
Applied to files:
frontend/components.d.ts
📚 Learning: applies to src/composables/**/*.ts : do not export store state from composables...
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/composables/**/*.ts : Do not export store state from composables
Applied to files:
frontend/src/composables/__tests__/useLanguageDropZone.test.ts
📚 Learning: applies to src/composables/**/*.ts : place composables in the composables/ directory...
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/composables/**/*.ts : Place composables in the composables/ directory
Applied to files:
frontend/src/composables/__tests__/useLanguageDropZone.test.ts
📚 Learning: applies to src/composables/**/*.ts : do not proxy or export pinia store state/actions from composabl...
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/composables/**/*.ts : Do not proxy or export Pinia store state/actions from composables
Applied to files:
frontend/src/composables/__tests__/useLanguageDropZone.test.ts
📚 Learning: applies to src/**/*.vue : no inline style attributes in templates...
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : No inline style attributes in templates
Applied to files:
frontend/src/components/StatementEditor.vue
🧬 Code Graph Analysis (3)
frontend/src/composables/__tests__/useDataTypeCompatibility.test.ts (1)
frontend/src/composables/useDataTypeCompatibility.ts (1)
useDataTypeCompatibility(8-44)
frontend/src/composables/__tests__/useLanguageDropZone.test.ts (2)
frontend/src/stores/schema.store.ts (1)
useSchemaStore(15-221)frontend/src/composables/useLanguageDropZone.ts (1)
useLanguageDropZone(9-108)
frontend/src/stores/__tests__/schema.store.test.ts (2)
frontend/auto-imports.d.ts (3)
PropertyReference(380-380)ValueMapping(380-380)UUID(362-362)frontend/src/types/wikibase-schema.ts (2)
PropertyReference(119-123)ValueMapping(125-140)
🔇 Additional comments (11)
frontend/src/composables/__tests__/useDataTypeCompatibility.test.ts (1)
6-11: LGTM! Efficient test setup refactor.Extracting the composable instance and destructuring its properties at the top level eliminates redundant calls to
useDataTypeCompatibility()within each test. This aligns with the similar refactor pattern used in other composable test suites and improves test efficiency without affecting test logic or assertions.frontend/components.d.ts (1)
44-44: LGTM! Proper global component registration.The
StatementPreviewcomponent is correctly registered in the global components interface, making it available throughout the application. This supports the component extraction refactor mentioned in the PR objectives.frontend/src/composables/__tests__/useLanguageDropZone.test.ts (2)
7-13: LGTM! Excellent test setup with proper isolation.The refactor introduces reusable store and composable instances initialized in
beforeEach, which maintains test isolation while eliminating redundant instantiation calls. This pattern improves test efficiency and aligns with the similar refactor in other composable test suites.
18-18: Clean destructuring pattern throughout tests.The consistent destructuring of only the needed properties from the
composableinstance in each test maintains readability while leveraging the efficiency gains from the refactored setup.Also applies to: 28-28, 43-43, 60-60, 76-76, 95-95, 113-113, 132-132, 149-149, 165-165, 182-182, 201-201
frontend/src/components/StatementEditor.vue (1)
525-530: Excellent component extraction refactor!Replacing the inline preview markup with the dedicated
<StatementPreview>component improves separation of concerns and template readability. The component receives all necessary props (statement,qualifiers,references) and preserves the conditional rendering logic. This aligns with Vue 3 best practices for building reusable, well-structured components.frontend/src/stores/__tests__/schema.store.test.ts (3)
145-202: Comprehensive store state and reactivity testing.The new tests provide excellent coverage of store state changes and reactive behavior. The tests verify proper handling of label mappings, descriptions, statements, and store reset functionality. The reactive behavior testing ensures the store properly notifies components of state changes.
385-683: Thorough statement management testing.The extensive test suite covers all aspects of statement handling including:
- Different statement ranks (normal, preferred, deprecated)
- Multiple statement management and ordering
- Property and value mapping storage
- Edge cases like removing non-existent statements
- Unique ID generation and validation
This comprehensive coverage provides strong confidence in the store's statement management functionality and likely compensates for component tests that were removed as mentioned in the PR objectives.
28-37: Proper mocking and test setup.The test suite uses appropriate mocking for the
useSchemaBuildercomposable and follows bun test best practices with proper Pinia testing setup. ThebeforeEachhook ensures clean state for each test whilestubActions: falseallows testing of actual store behavior.Also applies to: 42-56
frontend/src/components/StatementPreview.vue (3)
60-95: LGTM with minor key generation observation.The qualifiers preview section is well-structured with proper conditional rendering, testing attributes, and visual hierarchy. The use of index-based keys is acceptable here since qualifiers are unlikely to be frequently reordered.
98-146: Excellent implementation of references preview.The references section is well-implemented with:
- Proper key usage with
reference.idfor better performance- Clear nested structure for references and snaks
- Good pluralization logic for property count
- Distinct visual styling to differentiate from qualifiers
26-149: Component follows Vue 3 best practices well.This component demonstrates good adherence to the retrieved learnings:
- ✅ Uses Vue 3 Composition API with
<script setup lang="ts">- ✅ Explicit TypeScript interfaces for props
- ✅ Well-structured, reusable component design
- ✅ Proper component structure (script, template)
- ✅ Good use of semantic HTML and testing attributes
The template is clean, maintainable, and provides a comprehensive preview of statement data with proper visual hierarchy.
1 participant
No description provided.