diff --git a/platform/packages/vue/src/components/Viewer.test.ts b/platform/packages/vue/src/components/Viewer.test.ts index 9109f2439..6be3f21b0 100644 --- a/platform/packages/vue/src/components/Viewer.test.ts +++ b/platform/packages/vue/src/components/Viewer.test.ts @@ -7,6 +7,8 @@ import { View, ViewRendererRegistry } from '@dynamia-tools/ui-core'; import type { ViewType } from '@dynamia-tools/ui-core'; import Viewer from './Viewer.vue'; import { DYNAMIA_CLIENT_KEY } from '../composables/useDynamiaClient.js'; +import { VueTableRenderer } from '../renderers/VueTableRenderer.js'; +import { VueTableView } from '../views/VueTableView.js'; const TABLE: ViewType = { name: 'table' }; @@ -104,3 +106,25 @@ describe('DynamiaViewer', () => { expect(wrapper.find('.dynamia-viewer-error').exists()).toBe(true); }); }); + +describe('DynamiaViewer with the real table renderer', () => { + it('draws the table of a plain descriptor, with no app.use(DynamiaVue)', async () => { + ViewRendererRegistry.register(TABLE, new VueTableRenderer()); + ViewRendererRegistry.registerViewFactory(TABLE, (descriptor, metadata) => new VueTableView(descriptor, metadata)); + + const wrapper = mount(Viewer, { + props: { + descriptor: { view: 'table', fields: { name: { label: 'Name' }, total: { label: 'Total', component: 'label', params: { converter: 'converters.Currency' } } } }, + source: [{ name: 'Ana', total: 1500 }, { name: 'Luis', total: 20 }], + readOnly: true, + }, + }); + await vi.waitFor(() => expect(wrapper.find('.dynamia-table-grid').exists()).toBe(true)); + + const text = wrapper.find('.dynamia-table-grid').text(); + expect(text).toContain('Name'); + expect(text).toContain('Ana'); + expect(text).toContain('1,500.00'); + expect(wrapper.findAll('.dynamia-table-row')).toHaveLength(2); + }); +}); diff --git a/platform/packages/vue/src/renderers/VueCrudRenderer.ts b/platform/packages/vue/src/renderers/VueCrudRenderer.ts index 6ad94d6b6..187bf9fc9 100644 --- a/platform/packages/vue/src/renderers/VueCrudRenderer.ts +++ b/platform/packages/vue/src/renderers/VueCrudRenderer.ts @@ -1,6 +1,7 @@ // VueCrudRenderer: implements CrudRenderer for Vue import type { Component } from 'vue'; +import CrudComponent from '../components/Crud.vue'; import { ViewTypes } from '@dynamia-tools/ui-core'; import type { CrudRenderer } from '@dynamia-tools/ui-core'; import type { CrudView } from '@dynamia-tools/ui-core'; @@ -13,6 +14,6 @@ export class VueCrudRenderer implements CrudRenderer { readonly supportedViewType = ViewTypes.Crud; render(_view: CrudView): Component { - return { name: 'DynamiaCrud' } as Component; + return CrudComponent as Component; } } diff --git a/platform/packages/vue/src/renderers/VueFormRenderer.ts b/platform/packages/vue/src/renderers/VueFormRenderer.ts index 9068dd23d..26c76e765 100644 --- a/platform/packages/vue/src/renderers/VueFormRenderer.ts +++ b/platform/packages/vue/src/renderers/VueFormRenderer.ts @@ -1,6 +1,7 @@ // VueFormRenderer: implements FormRenderer for Vue import type { Component } from 'vue'; +import FormComponent from '../components/Form.vue'; import { ViewTypes } from '@dynamia-tools/ui-core'; import type { FormRenderer } from '@dynamia-tools/ui-core'; import type { FormView } from '@dynamia-tools/ui-core'; @@ -14,6 +15,6 @@ export class VueFormRenderer implements FormRenderer { render(_view: FormView): Component { // Lazy import to avoid circular dependency at module initialization time - return { name: 'DynamiaForm' } as Component; + return FormComponent as Component; } } diff --git a/platform/packages/vue/src/renderers/VueTableRenderer.ts b/platform/packages/vue/src/renderers/VueTableRenderer.ts index 2901e3f65..aed4c6b0c 100644 --- a/platform/packages/vue/src/renderers/VueTableRenderer.ts +++ b/platform/packages/vue/src/renderers/VueTableRenderer.ts @@ -1,6 +1,7 @@ // VueTableRenderer: implements TableRenderer for Vue import type { Component } from 'vue'; +import TableComponent from '../components/Table.vue'; import { ViewTypes } from '@dynamia-tools/ui-core'; import type { TableRenderer } from '@dynamia-tools/ui-core'; import type { TableView } from '@dynamia-tools/ui-core'; @@ -13,6 +14,6 @@ export class VueTableRenderer implements TableRenderer { readonly supportedViewType = ViewTypes.Table; render(_view: TableView): Component { - return { name: 'DynamiaTable' } as Component; + return TableComponent as Component; } }