[] = []
+
+beforeAll(() => {
+ if (!customElements.get('nextcloud-deck-board')) {
+ customElements.define('nextcloud-deck-board', defineCustomElement(defineComponent({
+ props: { boardId: String, cardId: String },
+ setup(props) {
+ return () => h('div', { 'data-board-id': props.boardId, 'data-card-id': props.cardId })
+ },
+ }), { shadowRoot: false }))
+ }
+})
+
+beforeEach(() => {
+ vi.clearAllMocks()
+ loadState.mockReturnValue(true)
+})
+
+afterEach(() => {
+ for (const wrapper of wrappers.splice(0)) {
+ wrapper.unmount()
+ }
+ vi.restoreAllMocks()
+ vi.useRealTimers()
+ document.body.replaceChildren()
+})
+
+async function mountView(options: { available?: boolean, loaded?: boolean, shared?: boolean, boardId?: string, cardId?: string, routed?: boolean } = {}) {
+ loadState.mockReturnValue(options.available ?? true)
+ const pinia = createPinia()
+ const state = useTeamResourcesStore(pinia).slot('team-1')
+ state.resourcesChecked = options.loaded ?? true
+ state.boardsChecked = options.loaded ?? true
+ state.resources = options.shared === false
+ ? []
+ : [7, 8].map((id) => ({
+ id,
+ label: `Board ${id}`,
+ url: `/apps/deck/board/${id}`,
+ provider: { id: 'deck', name: 'Deck' },
+ }))
+ const router = createRouter({
+ history: createMemoryHistory(),
+ routes: [
+ { name: 'team-deck', path: '/team/:teamId/deck/:boardId', component: TeamDeckView, props: true },
+ { name: 'team-deck-card', path: '/team/:teamId/deck/:boardId/card/:cardId', component: TeamDeckView, props: true },
+ ],
+ })
+ await router.push('/team/team-1/deck/7')
+ const host = defineComponent({
+ setup() {
+ const route = useRoute()
+ return () => h(RouterView, { key: teamViewKey(route) })
+ },
+ })
+ const wrapper = shallowMount(options.routed ? host : TeamDeckView, {
+ attachTo: document.body,
+ props: options.routed ? {} : { teamId: 'team-1', boardId: options.boardId ?? '7', cardId: options.cardId },
+ global: {
+ plugins: [pinia, router],
+ stubs: {
+ RouterView: false,
+ TeamDeckView: false,
+ NcEmptyContent: {
+ props: ['name', 'description'],
+ template: '{{ name }} {{ description }}
',
+ },
+ NcButton: { template: '' },
+ },
+ },
+ })
+ wrappers.push(wrapper)
+ await flushPromises()
+ return { wrapper, router, state }
+}
+
+describe('TeamDeckView', () => {
+ it('embeds only a board confirmed in the current team resources', async () => {
+ const { wrapper } = await mountView()
+ expect(wrapper.get('nextcloud-deck-board').attributes('board-id')).toBe('7')
+ expect(wrapper.get('nextcloud-deck-board').attributes('card-id')).toBeUndefined()
+ })
+
+ it('waits for the team resources before mounting Deck', async () => {
+ const { wrapper, state } = await mountView({ loaded: false })
+ expect(wrapper.find('nextcloud-deck-board').exists()).toBe(false)
+ state.resourcesChecked = true
+ await flushPromises()
+ expect(wrapper.find('nextcloud-deck-board').exists()).toBe(true)
+ })
+
+ it('does not embed a board outside the current team', async () => {
+ const { wrapper } = await mountView({ shared: false })
+ expect(wrapper.find('nextcloud-deck-board').exists()).toBe(false)
+ expect(wrapper.text()).toContain('Board not available in this team')
+ })
+
+ it('reports missing support without redirecting to the Deck app', async () => {
+ const { wrapper, router } = await mountView({ available: false })
+ expect(wrapper.text()).toContain('Deck integration unavailable')
+ expect(wrapper.find('nextcloud-deck-board').exists()).toBe(false)
+ expect(router.currentRoute.value.path).toBe('/team/team-1/deck/7')
+ })
+
+ it('rejects invalid identifiers visibly', async () => {
+ const { wrapper } = await mountView({ cardId: '0' })
+ expect(wrapper.text()).toContain('Invalid Deck resource')
+ expect(wrapper.find('nextcloud-deck-board').exists()).toBe(false)
+ expect(logger.error).toHaveBeenCalled()
+ })
+
+ it('updates the card attribute without remounting the element', async () => {
+ const { wrapper } = await mountView()
+ const element = wrapper.get('nextcloud-deck-board').element
+ await wrapper.setProps({ cardId: '9' })
+ await flushPromises()
+ expect(wrapper.get('nextcloud-deck-board').element).toBe(element)
+ expect(wrapper.get('nextcloud-deck-board').attributes('card-id')).toBe('9')
+ expect(element.querySelector('div')!.getAttribute('data-card-id')).toBe('9')
+ await wrapper.setProps({ cardId: undefined })
+ await flushPromises()
+ expect(wrapper.get('nextcloud-deck-board').element).toBe(element)
+ expect(wrapper.get('nextcloud-deck-board').attributes('card-id')).toBeUndefined()
+ expect(element.querySelector('div')!.getAttribute('data-card-id')).toBeNull()
+ })
+
+ it('preserves the board on actual route transitions and browser history', async () => {
+ const { wrapper, router } = await mountView({ routed: true })
+ const element = wrapper.get('nextcloud-deck-board').element
+ await router.push('/team/team-1/deck/7/card/9')
+ await flushPromises()
+ expect(wrapper.get('nextcloud-deck-board').element).toBe(element)
+ expect(element.getAttribute('card-id')).toBe('9')
+ router.back()
+ await flushPromises()
+ expect(wrapper.get('nextcloud-deck-board').element).toBe(element)
+ expect(element.getAttribute('card-id')).toBeNull()
+ router.forward()
+ await flushPromises()
+ expect(element.getAttribute('card-id')).toBe('9')
+ await router.push('/team/team-1/deck/8')
+ await flushPromises()
+ expect(wrapper.get('nextcloud-deck-board').element).not.toBe(element)
+ expect(element.isConnected).toBe(false)
+ })
+
+ it('reports failed resource loading instead of waiting forever', async () => {
+ const { wrapper, state } = await mountView({ loaded: false })
+ state.boardsChecked = true
+ await flushPromises()
+ expect(wrapper.text()).toContain('Team resources unavailable')
+ expect(wrapper.find('nextcloud-deck-board').exists()).toBe(false)
+ })
+
+ it('removes the loading indicator when Deck signals readiness', async () => {
+ const { wrapper } = await mountView()
+ expect(wrapper.find('.team-deck__loading').exists()).toBe(true)
+ wrapper.get('nextcloud-deck-board').element.dispatchEvent(new CustomEvent('deck-ready', { detail: { boardId: 7 } }))
+ await flushPromises()
+ expect(wrapper.find('.team-deck__loading').exists()).toBe(false)
+ })
+
+ it('uses host history for card navigation and ignores route echoes', async () => {
+ const { wrapper, router } = await mountView()
+ const element = wrapper.get('nextcloud-deck-board').element
+ element.dispatchEvent(new CustomEvent('deck-navigation', { detail: { boardId: 7, cardId: 9 } }))
+ await flushPromises()
+ expect(router.currentRoute.value.path).toBe('/team/team-1/deck/7/card/9')
+ const push = vi.spyOn(router, 'push')
+ element.dispatchEvent(new CustomEvent('deck-navigation', { detail: { boardId: 7, cardId: 9 } }))
+ await flushPromises()
+ expect(push).not.toHaveBeenCalled()
+ })
+
+ it('allows cross-board navigation only within the same team resources', async () => {
+ const { wrapper, router } = await mountView()
+ const element = wrapper.get('nextcloud-deck-board').element
+ element.dispatchEvent(new CustomEvent('deck-navigation', { detail: { boardId: 8, cardId: null } }))
+ await flushPromises()
+ expect(router.currentRoute.value.path).toBe('/team/team-1/deck/8')
+ element.dispatchEvent(new CustomEvent('deck-navigation', { detail: { boardId: 99, cardId: 9 } }))
+ await flushPromises()
+ expect(router.currentRoute.value.path).toBe('/team/team-1/deck/8')
+ expect(showError).toHaveBeenCalledWith('This board is not shared with the current team')
+ })
+
+ it('reports malformed navigation events', async () => {
+ const { wrapper } = await mountView()
+ wrapper.get('nextcloud-deck-board').element.dispatchEvent(new CustomEvent('deck-navigation', { detail: { boardId: -1, cardId: null } }))
+ expect(logger.error).toHaveBeenCalled()
+ expect(showError).toHaveBeenCalledWith('Could not open the Deck resource')
+ })
+
+ it('reports loading errors and can retry with a fresh element', async () => {
+ const { wrapper } = await mountView()
+ const element = wrapper.get('nextcloud-deck-board').element
+ element.dispatchEvent(new CustomEvent('deck-error', { detail: { status: 403 } }))
+ await flushPromises()
+ expect(wrapper.text()).toContain('Deck board unavailable')
+ expect(wrapper.find('nextcloud-deck-board').exists()).toBe(false)
+ await wrapper.get('button').trigger('click')
+ await flushPromises()
+ expect(wrapper.get('nextcloud-deck-board').element).not.toBe(element)
+ })
+
+ it('reports a registration timeout rather than loading forever', async () => {
+ vi.useFakeTimers()
+ vi.spyOn(customElements, 'whenDefined').mockReturnValue(new Promise(() => {}))
+ const { wrapper } = await mountView()
+ await vi.advanceTimersByTimeAsync(9999)
+ expect(wrapper.text()).not.toContain('Deck board unavailable')
+ await vi.advanceTimersByTimeAsync(1)
+ expect(wrapper.text()).toContain('Deck board unavailable')
+ expect(logger.error).toHaveBeenCalled()
+ })
+})
diff --git a/src/teams/views/TeamDeckView.vue b/src/teams/views/TeamDeckView.vue
new file mode 100644
index 000000000..271078618
--- /dev/null
+++ b/src/teams/views/TeamDeckView.vue
@@ -0,0 +1,199 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ t('circles', 'Retry') }}
+
+
+
+
+
-
-
+
+
diff --git a/tests/stubs/oca_deck_event_loadboardwebcomponentevent.php b/tests/stubs/oca_deck_event_loadboardwebcomponentevent.php
new file mode 100644
index 000000000..5cc43f8a6
--- /dev/null
+++ b/tests/stubs/oca_deck_event_loadboardwebcomponentevent.php
@@ -0,0 +1,15 @@
+teamManager = $this->createMock(ITeamManager::class);
$this->teamFolderPolicy = $this->createMock(TeamFolderPolicy::class);
$this->eventDispatcher = $this->createMock(IEventDispatcher::class);
+ $this->appManager = $this->createMock(IAppManager::class);
$this->pageController = new PageController(
$this->request,
@@ -49,6 +53,7 @@ protected function setUp(): void {
$this->teamManager,
$this->teamFolderPolicy,
$this->eventDispatcher,
+ $this->appManager,
);
}
@@ -72,7 +77,7 @@ public function testIndexProvidesTeamFolderStateWithProvider(): void {
->willReturn(true);
$provided = [];
- $this->initialState->expects($this->exactly(2))
+ $this->initialState->expects($this->exactly(3))
->method('provideInitialState')
->willReturnCallback(function (string $key, mixed $value) use (&$provided): void {
$provided[$key] = $value;
@@ -85,6 +90,7 @@ public function testIndexProvidesTeamFolderStateWithProvider(): void {
$this->assertSame('main', $result->getTemplateName());
$this->assertTrue($provided['teamFolderProviderAvailable']);
$this->assertTrue($provided['teamFolderProvisioningEnabled']);
+ $this->assertFalse($provided['deckEmbeddingAvailable']);
}
/**
@@ -106,7 +112,7 @@ public function testIndexProvidesProviderUnavailable(): void {
->willReturn(false);
$provided = [];
- $this->initialState->expects($this->exactly(2))
+ $this->initialState->expects($this->exactly(3))
->method('provideInitialState')
->willReturnCallback(function (string $key, mixed $value) use (&$provided): void {
$provided[$key] = $value;
@@ -117,6 +123,7 @@ public function testIndexProvidesProviderUnavailable(): void {
$this->assertInstanceOf(TemplateResponse::class, $result);
$this->assertFalse($provided['teamFolderProviderAvailable']);
$this->assertFalse($provided['teamFolderProvisioningEnabled']);
+ $this->assertFalse($provided['deckEmbeddingAvailable']);
}
/**
@@ -135,9 +142,44 @@ public function testIndexReturnsNotFoundWhenFrontendDisabled(): void {
->method('getTeamFolderProvider');
$this->teamFolderPolicy->expects($this->never())
->method('isTeamFolderProvisioningEnabled');
+ $this->appManager->expects($this->never())->method('isEnabledForUser');
$result = $this->pageController->index();
$this->assertInstanceOf(NotFoundResponse::class, $result);
}
+
+ public function testLoadsDeckOnlyWhenEnabledAndSupported(): void {
+ $this->configService->method('getAppValueBool')->willReturn(true);
+ $this->appManager->expects($this->once())->method('isEnabledForUser')
+ ->with('deck')->willReturn(true);
+ $provided = [];
+ $this->initialState->method('provideInitialState')
+ ->willReturnCallback(static function (string $key, mixed $value) use (&$provided): void {
+ $provided[$key] = $value;
+ });
+ $events = [];
+ $this->eventDispatcher->method('dispatchTyped')
+ ->willReturnCallback(static function (object $event) use (&$events): void {
+ $events[] = get_class($event);
+ });
+
+ $this->pageController->index();
+
+ $supported = class_exists(LoadBoardWebComponentEvent::class);
+ $this->assertSame($supported, $provided['deckEmbeddingAvailable']);
+ $this->assertSame($supported, in_array(LoadBoardWebComponentEvent::class, $events, true));
+ }
+
+ public function testDisabledDeckDoesNotDispatchItsLoadingEvent(): void {
+ $this->configService->method('getAppValueBool')->willReturn(true);
+ $this->appManager->expects($this->once())->method('isEnabledForUser')
+ ->with('deck')->willReturn(false);
+ $this->eventDispatcher->method('dispatchTyped')
+ ->willReturnCallback(function (object $event): void {
+ $this->assertNotSame(LoadBoardWebComponentEvent::class, get_class($event));
+ });
+
+ $this->pageController->index();
+ }
}
diff --git a/vite.config.ts b/vite.config.ts
index 1c56a21d9..52aef6c79 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -3,6 +3,9 @@
* SPDX-License-Identifier: AGPL-3.0-or-later
*/
+import type { Api } from '@vitejs/plugin-vue'
+import type { Plugin } from 'vite'
+
import { createAppConfig } from '@nextcloud/vite-config'
import { join } from 'node:path'
@@ -20,6 +23,25 @@ export default (env) => createAppConfig({
includeSourceMaps: true,
},
config: {
+ plugins: [{
+ name: 'teams-deck-custom-element',
+ configResolved(config) {
+ const plugin = config.plugins.find((candidate): candidate is Plugin => candidate.name === 'vite:vue')
+ if (!plugin?.api) {
+ throw new Error('The Vue compiler is required for the Deck custom element')
+ }
+ const template = plugin.api.options.template ?? {}
+ const compilerOptions = template.compilerOptions ?? {}
+ const previous = compilerOptions.isCustomElement
+ plugin.api.options.template = {
+ ...template,
+ compilerOptions: {
+ ...compilerOptions,
+ isCustomElement: (tag) => tag === 'nextcloud-deck-board' || previous?.(tag) === true,
+ },
+ }
+ },
+ }],
build: {
watch: process.argv.includes('--watch')
? { allowInputInsideOutputPath: true }
diff --git a/vitest.config.ts b/vitest.config.ts
index 0d640a1f8..7be824e4d 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -9,7 +9,13 @@ import { defineConfig } from 'vitest/config'
// Vitest uses this config in preference to vite.config.ts (the app build config),
// so the production build and the test runner stay isolated from each other.
export default defineConfig({
- plugins: [vue()],
+ plugins: [vue({
+ template: {
+ compilerOptions: {
+ isCustomElement: (tag) => tag === 'nextcloud-deck-board',
+ },
+ },
+ })],
test: {
// Co-locate specs next to the code they cover: src/**/*.spec.ts (or .test.ts).
include: ['src/**/*.{test,spec}.?(c|m)[jt]s?(x)'],