diff --git a/apps/app/src/layouts/OrganizerLayoutV2.vue b/apps/app/src/layouts/OrganizerLayoutV2.vue new file mode 100644 index 00000000..9f9970d3 --- /dev/null +++ b/apps/app/src/layouts/OrganizerLayoutV2.vue @@ -0,0 +1,26 @@ + + + diff --git a/apps/app/src/layouts/components/AppShellV2.vue b/apps/app/src/layouts/components/AppShellV2.vue new file mode 100644 index 00000000..628f8fb1 --- /dev/null +++ b/apps/app/src/layouts/components/AppShellV2.vue @@ -0,0 +1,44 @@ + + + diff --git a/apps/app/tests/component/layouts/AppShellV2.spec.ts b/apps/app/tests/component/layouts/AppShellV2.spec.ts new file mode 100644 index 00000000..012db098 --- /dev/null +++ b/apps/app/tests/component/layouts/AppShellV2.spec.ts @@ -0,0 +1,34 @@ +import { describe, expect, it } from 'vitest' +import { mount } from '@vue/test-utils' +import { createPinia } from 'pinia' +import AppShellV2 from '@/layouts/components/AppShellV2.vue' + +describe('AppShellV2 (skeleton)', () => { + it('renders the grid regions and default slot content', () => { + const wrapper = mount(AppShellV2, { + global: { plugins: [createPinia()] }, + slots: { + sidebar: '', + topbar: '
TB
', + default: '
CONTENT
', + drawer: '', + }, + }) + + expect(wrapper.find('[data-testid="appshell-v2"]').exists()).toBe(true) + expect(wrapper.find('[data-testid="sb"]').exists()).toBe(true) + expect(wrapper.find('[data-testid="tb"]').exists()).toBe(true) + expect(wrapper.find('[data-testid="content"]').text()).toBe('CONTENT') + expect(wrapper.find('[data-testid="dr"]').exists()).toBe(true) + }) + + it('applies the collapsed modifier from useShellUiStore', async () => { + const pinia = createPinia() + const wrapper = mount(AppShellV2, { global: { plugins: [pinia] } }) + const { useShellUiStore } = await import('@/stores/useShellUiStore') + + useShellUiStore().toggleSidebar() + await wrapper.vm.$nextTick() + expect(wrapper.find('[data-testid="appshell-v2"]').classes()).toContain('is-collapsed') + }) +})