test(e2e): Playwright + Vitest coverage harness and test instrumentation
Add an end-to-end and unit test suite for the SvelteKit frontend:
- Playwright e2e specs (tests/e2e/spa) with a throwaway container stack,
codegen scenarios, and an Istanbul-based coverage report pipeline.
- Vitest unit tests across API endpoints, components, stores and composables.
- `data-testid` hooks on interactive elements (AppShell, FileViewer,
ShareDialog, search, photos, files breadcrumbs, login/Nextcloud flows,
public share pages) so the e2e suite can target them deterministically.
- Serve the SPA app-shell CSP from a <meta> policy (svelte.config.js) plus a
middleware that skips the CSP header on HTML; move the Nextcloud Login Flow
v2 grant page to the SvelteKit /nextcloud/login route.
- `just front-codegen` recipe and start-server-spa.sh harness.
Make the test environment robust and consistent:
- Install a deterministic in-memory localStorage/sessionStorage in the Vitest
setup so storage behaves identically across Node versions (Node 26 ships a
native Web Storage global that otherwise shadows jsdom's).
- Pin devenv to Node 26 + PostgreSQL 18 and pin every CI job to Node 26.3.0
so the dev shell and CI run the same toolchain versions.
Repair the API/WebDAV (hurl) suite, which had drifted from the backend:
- Migrate the removed `/api/folders/{id}/listing` endpoint to `/resources`
(cursor-paginated `{items:[{resource_type,resource}]}` shape) across the
batch-copy, grants, nested-group, and WebDAV NC tests + the dav_helpers
wipe routine.
- Stop photos_etag from uploading the dedup-tracked fixture so the dedup
blob-lifecycle test can own its content-addressed blob exclusively.
- dedup_create now asserts the idempotent same-content re-upload (201 +
existing file id) instead of the stale 409 expectation.
Generated coverage reports, nyc output and the e2e server runtime data dir
are gitignored rather than committed.
This commit is contained in:
Bradley Nelson
@@ -268,7 +268,7 @@
|
||||
></div>
|
||||
|
||||
<div class="sidebar" class:open={sidebarOpen}>
|
||||
<a href={resolve('/files')} class="logo-container">
|
||||
<a href={resolve('/files')} class="logo-container" data-testid="appshell-logo-link">
|
||||
<div class="logo">
|
||||
<svg viewBox="95 67 320 320" aria-hidden="true">
|
||||
<path
|
||||
@@ -286,6 +286,7 @@
|
||||
class:active={active(link.href)}
|
||||
href={resolve(link.href)}
|
||||
data-section={link.section}
|
||||
data-testid={`appshell-nav-${link.href.replace(/^\//, '')}-link`}
|
||||
onclick={() => (sidebarOpen = false)}
|
||||
>
|
||||
<Icon name={link.icon} />
|
||||
@@ -324,6 +325,7 @@
|
||||
class="sidebar-toggle"
|
||||
aria-label={t('nav.toggle', 'Toggle navigation menu')}
|
||||
aria-expanded={sidebarOpen}
|
||||
data-testid="appshell-sidebar-toggle-btn"
|
||||
onclick={() => (sidebarOpen = !sidebarOpen)}
|
||||
>
|
||||
<Icon name="bars" />
|
||||
@@ -334,6 +336,7 @@
|
||||
class="search-toggle-btn"
|
||||
id="search-toggle-btn"
|
||||
aria-label={t('actions.search_btn', 'Search')}
|
||||
data-testid="appshell-search-toggle-btn"
|
||||
onclick={openMobileSearch}
|
||||
>
|
||||
<Icon name="search" />
|
||||
@@ -343,6 +346,7 @@
|
||||
<button
|
||||
class="search-back-btn"
|
||||
aria-label={t('common.close', 'Close')}
|
||||
data-testid="appshell-search-back-btn"
|
||||
onclick={closeMobileSearch}
|
||||
>
|
||||
<Icon name="arrow-left" />
|
||||
@@ -355,6 +359,7 @@
|
||||
type="text"
|
||||
bind:this={searchInputEl}
|
||||
bind:value={searchQuery}
|
||||
data-testid="appshell-search-input"
|
||||
oninput={onSearchInput}
|
||||
onfocus={() => (suggestOpen = suggestions.length > 0)}
|
||||
onblur={() => setTimeout(() => (suggestOpen = false), 150)}
|
||||
@@ -367,6 +372,7 @@
|
||||
type="button"
|
||||
title={t('common.clear', 'Clear')}
|
||||
aria-label={t('common.clear', 'Clear')}
|
||||
data-testid="appshell-search-clear-btn"
|
||||
onclick={clearSearch}
|
||||
>
|
||||
<Icon name="times" />
|
||||
@@ -377,6 +383,7 @@
|
||||
type="submit"
|
||||
title={t('actions.search_btn', 'Search')}
|
||||
aria-label={t('actions.search_btn', 'Search')}
|
||||
data-testid="appshell-search-submit-btn"
|
||||
>
|
||||
<Icon name="search" />
|
||||
</button>
|
||||
@@ -385,7 +392,12 @@
|
||||
<ul class="suggest">
|
||||
{#each suggestions as s (s.kind + s.item.id)}
|
||||
<li>
|
||||
<button class="suggest__item" type="button" onmousedown={() => pickSuggestion(s)}>
|
||||
<button
|
||||
class="suggest__item"
|
||||
type="button"
|
||||
data-testid={`appshell-search-suggestion-${s.kind}-${s.item.id}-item`}
|
||||
onmousedown={() => pickSuggestion(s)}
|
||||
>
|
||||
<span class="suggest__icon">
|
||||
{#if s.kind === 'folder'}
|
||||
<Icon name="folder" />
|
||||
@@ -398,7 +410,12 @@
|
||||
</li>
|
||||
{/each}
|
||||
<li>
|
||||
<button class="suggest__all" type="button" onmousedown={goToResults}>
|
||||
<button
|
||||
class="suggest__all"
|
||||
type="button"
|
||||
data-testid="appshell-search-see-all-btn"
|
||||
onmousedown={goToResults}
|
||||
>
|
||||
{t('search.see_all', 'See all results')}
|
||||
</button>
|
||||
</li>
|
||||
@@ -411,13 +428,14 @@
|
||||
|
||||
<div class="user-controls">
|
||||
<!-- Notifications -->
|
||||
<div class="notif-wrapper" class:open={notifOpen}>
|
||||
<div class="notif-wrapper" class:open={notifOpen} data-testid="appshell-notif-menu">
|
||||
<button
|
||||
class="notif-bell-btn"
|
||||
class:active={notifOpen}
|
||||
class:ring={bellRinging}
|
||||
aria-label={t('notifications.title', 'Notifications')}
|
||||
aria-haspopup="true"
|
||||
data-testid="appshell-notif-bell-btn"
|
||||
onclick={(e) => {
|
||||
e.stopPropagation();
|
||||
notifOpen = !notifOpen;
|
||||
@@ -436,6 +454,7 @@
|
||||
class="notif-clear-btn"
|
||||
title={t('notifications.clear', 'Clear all')}
|
||||
aria-label={t('notifications.clear', 'Clear all')}
|
||||
data-testid="appshell-notif-clear-btn"
|
||||
onclick={(e) => {
|
||||
e.stopPropagation();
|
||||
ui.clearNotifications();
|
||||
@@ -494,11 +513,12 @@
|
||||
</div>
|
||||
|
||||
<!-- User menu -->
|
||||
<div class="user-menu-wrapper" class:open={menuOpen}>
|
||||
<div class="user-menu-wrapper" class:open={menuOpen} data-testid="appshell-user-menu">
|
||||
<button
|
||||
class="user-avatar-btn"
|
||||
aria-label={t('user_menu.title', 'User menu')}
|
||||
aria-haspopup="true"
|
||||
data-testid="appshell-user-menu-btn"
|
||||
onclick={(e) => {
|
||||
e.stopPropagation();
|
||||
menuOpen = !menuOpen;
|
||||
@@ -555,15 +575,30 @@
|
||||
<div class="user-menu-divider"></div>
|
||||
|
||||
{#if isAdmin}
|
||||
<a class="user-menu-item" href={resolve('/admin')} onclick={() => (menuOpen = false)}>
|
||||
<a
|
||||
class="user-menu-item"
|
||||
href={resolve('/admin')}
|
||||
data-testid="appshell-user-menu-admin-item"
|
||||
onclick={() => (menuOpen = false)}
|
||||
>
|
||||
<Icon name="cogs" /> <span>{t('user_menu.admin_panel', 'Admin panel')}</span>
|
||||
</a>
|
||||
<a class="user-menu-item" href={resolve('/groups')} onclick={() => (menuOpen = false)}>
|
||||
<a
|
||||
class="user-menu-item"
|
||||
href={resolve('/groups')}
|
||||
data-testid="appshell-user-menu-groups-item"
|
||||
onclick={() => (menuOpen = false)}
|
||||
>
|
||||
<Icon name="user-group" />
|
||||
<span>{t('user_menu.manage_groups', 'Manage groups')}</span>
|
||||
</a>
|
||||
{/if}
|
||||
<a class="user-menu-item" href={resolve('/profile')} onclick={() => (menuOpen = false)}>
|
||||
<a
|
||||
class="user-menu-item"
|
||||
href={resolve('/profile')}
|
||||
data-testid="appshell-user-menu-profile-item"
|
||||
onclick={() => (menuOpen = false)}
|
||||
>
|
||||
<Icon name="user-circle" /> <span>{t('user_menu.profile', 'My profile')}</span>
|
||||
</a>
|
||||
|
||||
@@ -572,12 +607,17 @@
|
||||
<div class="user-menu-item user-menu-item--lang">
|
||||
<Icon name="globe" />
|
||||
<span>{t('settings.language', 'Language')}</span>
|
||||
<div class="lang-selector" class:lang-selector--open={langOpen}>
|
||||
<div
|
||||
class="lang-selector"
|
||||
class:lang-selector--open={langOpen}
|
||||
data-testid="appshell-lang-menu"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="lang-selector__toggle"
|
||||
aria-haspopup="listbox"
|
||||
aria-expanded={langOpen}
|
||||
data-testid="appshell-lang-toggle-btn"
|
||||
onclick={(e) => {
|
||||
e.stopPropagation();
|
||||
langOpen = !langOpen;
|
||||
@@ -597,6 +637,7 @@
|
||||
class:lang-option--active={lang.code === i18n.locale}
|
||||
role="option"
|
||||
aria-selected={lang.code === i18n.locale}
|
||||
data-testid={`appshell-lang-${lang.code}-option`}
|
||||
onclick={(e) => {
|
||||
e.stopPropagation();
|
||||
chooseLocale(lang.code);
|
||||
@@ -622,6 +663,7 @@
|
||||
class="theme-segmented"
|
||||
role="radiogroup"
|
||||
aria-label={t('user_menu.appearance', 'Appearance')}
|
||||
data-testid="appshell-theme-toggle"
|
||||
>
|
||||
{#each THEMES as th (th.mode)}
|
||||
<button
|
||||
@@ -632,6 +674,7 @@
|
||||
aria-checked={theme.current === th.mode}
|
||||
title={th.label}
|
||||
aria-label={th.label}
|
||||
data-testid={`appshell-theme-${th.mode}-option`}
|
||||
onclick={(e) => {
|
||||
e.stopPropagation();
|
||||
theme.set(th.mode);
|
||||
@@ -643,13 +686,21 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="user-menu-item" onclick={openAbout}>
|
||||
<button
|
||||
class="user-menu-item"
|
||||
data-testid="appshell-user-menu-about-item"
|
||||
onclick={openAbout}
|
||||
>
|
||||
<Icon name="info-circle" /> <span>{t('user_menu.about', 'About OxiCloud')}</span>
|
||||
</button>
|
||||
|
||||
<div class="user-menu-divider"></div>
|
||||
|
||||
<button class="user-menu-item user-menu-logout" onclick={onLogout}>
|
||||
<button
|
||||
class="user-menu-item user-menu-logout"
|
||||
data-testid="appshell-user-menu-logout-btn"
|
||||
onclick={onLogout}
|
||||
>
|
||||
<Icon name="sign-out-alt" /> <span>{t('actions.logout', 'Log out')}</span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -708,6 +759,7 @@
|
||||
href="https://github.com/AtalayaLabs/OxiCloud/"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
data-testid="appshell-about-github-link"
|
||||
>
|
||||
<Icon name="github" /> GitHub
|
||||
</a>
|
||||
@@ -716,12 +768,17 @@
|
||||
href="https://github.com/AtalayaLabs/OxiCloud/blob/main/LICENSE"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
data-testid="appshell-about-license-link"
|
||||
>
|
||||
<Icon name="file-alt" />
|
||||
{t('user_menu.mit_license', 'MIT License')}
|
||||
</a>
|
||||
</div>
|
||||
<button class="about-modal__close" onclick={() => (aboutOpen = false)}>
|
||||
<button
|
||||
class="about-modal__close"
|
||||
data-testid="appshell-about-close-btn"
|
||||
onclick={() => (aboutOpen = false)}
|
||||
>
|
||||
{t('actions.close', 'Close')}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,71 @@
|
||||
import { it, expect, vi, beforeEach } from 'vitest';
|
||||
import { render, screen, fireEvent, waitFor } from '@testing-library/svelte';
|
||||
import { createRawSnippet } from 'svelte';
|
||||
|
||||
const { goto, pageState } = vi.hoisted(() => ({
|
||||
goto: vi.fn(),
|
||||
pageState: { url: new URL('http://localhost/files'), route: { id: '/files/[...path]' } }
|
||||
}));
|
||||
vi.mock('$app/navigation', () => ({ goto }));
|
||||
vi.mock('$app/state', () => ({ page: pageState }));
|
||||
vi.mock('$lib/api/endpoints/auth', () => ({ logout: vi.fn() }));
|
||||
vi.mock('$lib/api/endpoints/search', () => ({ searchFiles: vi.fn(async () => ({ items: [] })) }));
|
||||
vi.mock('$lib/api/endpoints/files', () => ({ fileInlineUrl: () => '/in' }));
|
||||
|
||||
import { logout } from '$lib/api/endpoints/auth';
|
||||
import { session } from '$lib/stores/session.svelte';
|
||||
import AppShell from './AppShell.svelte';
|
||||
|
||||
const m = (fn: unknown) => fn as ReturnType<typeof vi.fn>;
|
||||
const children = createRawSnippet(() => ({
|
||||
render: () => '<div data-testid="shell-child">hi</div>'
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
pageState.url = new URL('http://localhost/files');
|
||||
session.user = {
|
||||
id: '1',
|
||||
username: 'admin',
|
||||
email: 'a@x.test',
|
||||
given_name: 'A',
|
||||
family_name: 'B',
|
||||
role: 'admin',
|
||||
storage_used_bytes: 10,
|
||||
storage_quota_bytes: 100,
|
||||
is_external: false
|
||||
} as never;
|
||||
});
|
||||
|
||||
it('renders the shell chrome and its children', async () => {
|
||||
render(AppShell, { props: { children } });
|
||||
expect(screen.getByTestId('shell-child')).toBeTruthy();
|
||||
expect(screen.getByTestId('appshell-user-menu-btn')).toBeTruthy();
|
||||
});
|
||||
|
||||
it('opens the user menu, exposing profile and admin links', async () => {
|
||||
render(AppShell, { props: { children } });
|
||||
await fireEvent.click(screen.getByTestId('appshell-user-menu-btn'));
|
||||
const profile = await screen.findByTestId('appshell-user-menu-profile-item');
|
||||
expect(profile.getAttribute('href')).toBe('/profile');
|
||||
// Admin link only shows for admin users (session.user.role === 'admin').
|
||||
expect(screen.getByTestId('appshell-user-menu-admin-item')).toBeTruthy();
|
||||
});
|
||||
|
||||
it('logs out: clears the session and redirects to /login', async () => {
|
||||
m(logout).mockResolvedValue(undefined);
|
||||
render(AppShell, { props: { children } });
|
||||
await fireEvent.click(screen.getByTestId('appshell-user-menu-btn'));
|
||||
await fireEvent.click(await screen.findByTestId('appshell-user-menu-logout-btn'));
|
||||
await waitFor(() => expect(logout).toHaveBeenCalled());
|
||||
await waitFor(() => expect(goto).toHaveBeenCalledWith('/login'));
|
||||
expect(session.user).toBeNull();
|
||||
});
|
||||
|
||||
it('submits a search and routes to /search', async () => {
|
||||
render(AppShell, { props: { children } });
|
||||
const input = screen.getByTestId('appshell-search-input');
|
||||
await fireEvent.input(input, { target: { value: 'report' } });
|
||||
await fireEvent.click(screen.getByTestId('appshell-search-submit-btn'));
|
||||
await waitFor(() => expect(goto).toHaveBeenCalledWith('/search?q=report'));
|
||||
});
|
||||
@@ -17,6 +17,8 @@
|
||||
onclick?: (e: MouseEvent) => void;
|
||||
/** Extra classes appended after the base `.btn` classes. */
|
||||
class?: string;
|
||||
/** e2e test hook forwarded to the underlying `<button>`. */
|
||||
'data-testid'?: string;
|
||||
children?: Snippet;
|
||||
}
|
||||
|
||||
@@ -29,6 +31,7 @@
|
||||
title,
|
||||
onclick,
|
||||
class: cls = '',
|
||||
'data-testid': testid,
|
||||
children
|
||||
}: Props = $props();
|
||||
|
||||
@@ -37,7 +40,7 @@
|
||||
);
|
||||
</script>
|
||||
|
||||
<button class={className} {type} {disabled} {title} {onclick}>
|
||||
<button class={className} {type} {disabled} {title} data-testid={testid} {onclick}>
|
||||
{#if icon}<Icon name={icon} />{/if}
|
||||
{@render children?.()}
|
||||
</button>
|
||||
|
||||
@@ -277,6 +277,7 @@
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label={t('cmdk.title', 'Command palette')}
|
||||
data-testid="command-palette-panel"
|
||||
>
|
||||
<div class="cmdk__search">
|
||||
<Icon name="search" />
|
||||
@@ -288,6 +289,7 @@
|
||||
placeholder={t('cmdk.placeholder', 'Type a command or search…')}
|
||||
autocomplete="off"
|
||||
autofocus
|
||||
data-testid="command-palette-input"
|
||||
/>
|
||||
</div>
|
||||
{#if filtered.length === 0}
|
||||
@@ -301,6 +303,7 @@
|
||||
class:active={i === index}
|
||||
role="option"
|
||||
aria-selected={i === index}
|
||||
data-testid={`command-palette-${cmd.id}-item`}
|
||||
onmouseenter={() => (index = i)}
|
||||
onclick={cmd.run}
|
||||
>
|
||||
|
||||
@@ -0,0 +1,47 @@
|
||||
import { it, expect, vi, beforeEach } from 'vitest';
|
||||
import { render, screen, fireEvent, waitFor } from '@testing-library/svelte';
|
||||
|
||||
const { goto } = vi.hoisted(() => ({ goto: vi.fn() }));
|
||||
vi.mock('$app/navigation', () => ({ goto }));
|
||||
vi.mock('$lib/api/endpoints/auth', () => ({ logout: vi.fn() }));
|
||||
vi.mock('$lib/api/endpoints/search', () => ({ searchFiles: vi.fn(async () => ({ items: [] })) }));
|
||||
vi.mock('$lib/api/endpoints/files', () => ({ fileInlineUrl: () => '/in' }));
|
||||
vi.mock('$lib/stores/dialogs.svelte', () => ({ confirmDialog: vi.fn() }));
|
||||
|
||||
import { searchFiles } from '$lib/api/endpoints/search';
|
||||
import { session } from '$lib/stores/session.svelte';
|
||||
import CommandPalette from './CommandPalette.svelte';
|
||||
|
||||
const m = (fn: unknown) => fn as ReturnType<typeof vi.fn>;
|
||||
|
||||
function openPalette() {
|
||||
return fireEvent.keyDown(window, { key: 'k', ctrlKey: true });
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
session.user = { id: '1', username: 'admin', role: 'admin', is_external: false } as never;
|
||||
});
|
||||
|
||||
it('opens on Ctrl+K and shows the command panel', async () => {
|
||||
render(CommandPalette);
|
||||
await openPalette();
|
||||
await screen.findByTestId('command-palette-panel');
|
||||
expect(screen.getByTestId('command-palette-input')).toBeTruthy();
|
||||
});
|
||||
|
||||
it('runs a navigation command', async () => {
|
||||
render(CommandPalette);
|
||||
await openPalette();
|
||||
await fireEvent.click(await screen.findByTestId('command-palette-files-item'));
|
||||
await waitFor(() => expect(goto).toHaveBeenCalledWith('/files'));
|
||||
});
|
||||
|
||||
it('searches files as the query is typed', async () => {
|
||||
render(CommandPalette);
|
||||
await openPalette();
|
||||
const input = await screen.findByTestId('command-palette-input');
|
||||
await fireEvent.input(input, { target: { value: 'report' } });
|
||||
await waitFor(() => expect(searchFiles).toHaveBeenCalled());
|
||||
expect(m(searchFiles).mock.calls[0][0]).toBe('report');
|
||||
});
|
||||
@@ -53,6 +53,7 @@
|
||||
{#if c.opts.message}<p class="dlg-msg">{c.opts.message}</p>{/if}
|
||||
<input
|
||||
class="dlg-input"
|
||||
data-testid="dialog-host-prompt-input"
|
||||
type="text"
|
||||
bind:this={inputEl}
|
||||
bind:value
|
||||
@@ -70,11 +71,22 @@
|
||||
{/if}
|
||||
|
||||
{#snippet footer()}
|
||||
<button class="btn btn-secondary" disabled={dialogs.busy} onclick={() => dialogs.cancel()}>
|
||||
<button
|
||||
class="btn btn-secondary"
|
||||
data-testid="dialog-host-cancel-btn"
|
||||
disabled={dialogs.busy}
|
||||
onclick={() => dialogs.cancel()}
|
||||
>
|
||||
{c.opts.cancelText ?? t('common.cancel', 'Cancel')}
|
||||
</button>
|
||||
{#if c.kind === 'prompt'}
|
||||
<button class="btn btn-primary" type="submit" form="dialog-form" disabled={dialogs.busy}>
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
data-testid="dialog-host-submit-btn"
|
||||
type="submit"
|
||||
form="dialog-form"
|
||||
disabled={dialogs.busy}
|
||||
>
|
||||
{dialogs.busy
|
||||
? t('common.loading', 'Loading…')
|
||||
: (c.opts.confirmText ?? t('common.ok', 'OK'))}
|
||||
@@ -82,6 +94,7 @@
|
||||
{:else}
|
||||
<button
|
||||
class="btn {c.opts.danger ? 'btn-danger' : 'btn-primary'}"
|
||||
data-testid="dialog-host-confirm-btn"
|
||||
disabled={dialogs.busy}
|
||||
onclick={() => dialogs.resolve(true)}
|
||||
>
|
||||
|
||||
@@ -0,0 +1,41 @@
|
||||
import { it, expect, beforeEach } from 'vitest';
|
||||
import { render, screen, fireEvent, waitFor } from '@testing-library/svelte';
|
||||
import { dialogs, confirmDialog, promptDialog } from '$lib/stores/dialogs.svelte';
|
||||
import DialogHost from './DialogHost.svelte';
|
||||
|
||||
beforeEach(() => {
|
||||
while (dialogs.current && !dialogs.busy) dialogs.cancel();
|
||||
});
|
||||
|
||||
it('confirms a dialog and resolves true', async () => {
|
||||
render(DialogHost);
|
||||
const p = confirmDialog({ title: 'Delete?', message: 'Sure?' });
|
||||
await screen.findByTestId('dialog-host-confirm-btn');
|
||||
await fireEvent.click(screen.getByTestId('dialog-host-confirm-btn'));
|
||||
await expect(p).resolves.toBe(true);
|
||||
});
|
||||
|
||||
it('cancels a dialog and resolves false', async () => {
|
||||
render(DialogHost);
|
||||
const p = confirmDialog({ title: 'Delete?', message: 'Sure?' });
|
||||
await screen.findByTestId('dialog-host-cancel-btn');
|
||||
await fireEvent.click(screen.getByTestId('dialog-host-cancel-btn'));
|
||||
await expect(p).resolves.toBe(false);
|
||||
});
|
||||
|
||||
it('submits a prompt dialog with the typed value', async () => {
|
||||
render(DialogHost);
|
||||
const p = promptDialog({ title: 'Rename', defaultValue: 'old' });
|
||||
const input = await screen.findByTestId('dialog-host-prompt-input');
|
||||
await fireEvent.input(input, { target: { value: 'new-name' } });
|
||||
await fireEvent.click(screen.getByTestId('dialog-host-submit-btn'));
|
||||
await expect(p).resolves.toBe('new-name');
|
||||
});
|
||||
|
||||
it('prefills the prompt input with the default value', async () => {
|
||||
render(DialogHost);
|
||||
void promptDialog({ title: 'Rename', defaultValue: 'preset.txt' });
|
||||
const input = (await screen.findByTestId('dialog-host-prompt-input')) as HTMLInputElement;
|
||||
await waitFor(() => expect(input.value).toBe('preset.txt'));
|
||||
dialogs.cancel();
|
||||
});
|
||||
@@ -153,6 +153,7 @@
|
||||
<div
|
||||
class="fv"
|
||||
role="dialog"
|
||||
data-testid="file-viewer-dialog"
|
||||
aria-modal="true"
|
||||
aria-label={file.name}
|
||||
tabindex="-1"
|
||||
@@ -166,6 +167,7 @@
|
||||
<div class="fv__zoom" role="group" aria-label={t('viewer.zoom', 'Zoom')}>
|
||||
<button
|
||||
class="fv__zoom-btn"
|
||||
data-testid="file-viewer-zoom-out-btn"
|
||||
title={t('viewer.zoom_out', 'Zoom out')}
|
||||
aria-label={t('viewer.zoom_out', 'Zoom out')}
|
||||
onclick={() => zoomBy(0.8)}
|
||||
@@ -174,6 +176,7 @@
|
||||
</button>
|
||||
<button
|
||||
class="fv__zoom-btn"
|
||||
data-testid="file-viewer-zoom-reset-btn"
|
||||
title={t('viewer.zoom_reset', 'Reset zoom')}
|
||||
aria-label={t('viewer.zoom_reset', 'Reset zoom')}
|
||||
onclick={resetZoom}
|
||||
@@ -182,6 +185,7 @@
|
||||
</button>
|
||||
<button
|
||||
class="fv__zoom-btn"
|
||||
data-testid="file-viewer-zoom-in-btn"
|
||||
title={t('viewer.zoom_in', 'Zoom in')}
|
||||
aria-label={t('viewer.zoom_in', 'Zoom in')}
|
||||
onclick={() => zoomBy(1.2)}
|
||||
@@ -191,13 +195,18 @@
|
||||
</div>
|
||||
{/if}
|
||||
{#if canEdit}
|
||||
<button class="btn btn-primary btn-sm" onclick={() => (wopiOpen = true)}>
|
||||
<button
|
||||
class="btn btn-primary btn-sm"
|
||||
data-testid="file-viewer-edit-btn"
|
||||
onclick={() => (wopiOpen = true)}
|
||||
>
|
||||
<Icon name="pen" />
|
||||
{t('files.edit', 'Edit')}
|
||||
</button>
|
||||
{/if}
|
||||
<a
|
||||
class="btn btn-secondary btn-sm"
|
||||
data-testid="file-viewer-download-link"
|
||||
href={fileDownloadUrl(file.id)}
|
||||
download
|
||||
rel="external"
|
||||
@@ -207,13 +216,19 @@
|
||||
</a>
|
||||
<a
|
||||
class="btn btn-secondary btn-sm"
|
||||
data-testid="file-viewer-open-new-tab-link"
|
||||
href={fileInlineUrl(file.id)}
|
||||
target="_blank"
|
||||
rel="external noreferrer"
|
||||
>
|
||||
<Icon name="external-link-alt" />
|
||||
</a>
|
||||
<button class="fv__close" aria-label={t('common.close', 'Close')} onclick={close}>
|
||||
<button
|
||||
class="fv__close"
|
||||
data-testid="file-viewer-close-btn"
|
||||
aria-label={t('common.close', 'Close')}
|
||||
onclick={close}
|
||||
>
|
||||
<Icon name="times" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,97 @@
|
||||
import { it, expect, vi, beforeEach } from 'vitest';
|
||||
import { render, screen, fireEvent, waitFor } from '@testing-library/svelte';
|
||||
vi.mock('$lib/api/client', () => ({ apiFetch: vi.fn() }));
|
||||
vi.mock('$lib/api/endpoints/files', () => ({
|
||||
fileDownloadUrl: () => '/dl',
|
||||
fileInlineUrl: () => '/in'
|
||||
}));
|
||||
vi.mock('$lib/api/endpoints/wopi', () => ({
|
||||
canEditWithWopi: vi.fn(),
|
||||
// WopiEditor's $effect calls this on mount when an editor opens; provide it
|
||||
// so the async handshake resolves instead of throwing an unhandled error
|
||||
// (vitest 4 fails the whole run on unhandled errors).
|
||||
getEditorUrlWithFallback: vi.fn(async () => ({
|
||||
editor_url: 'about:blank',
|
||||
access_token: 't',
|
||||
access_token_ttl: 0
|
||||
}))
|
||||
}));
|
||||
import { apiFetch } from '$lib/api/client';
|
||||
import { canEditWithWopi } from '$lib/api/endpoints/wopi';
|
||||
import FileViewer from './FileViewer.svelte';
|
||||
const af = apiFetch as unknown as ReturnType<typeof vi.fn>;
|
||||
const cw = canEditWithWopi as unknown as ReturnType<typeof vi.fn>;
|
||||
function file(over: Record<string, unknown> = {}) {
|
||||
return {
|
||||
id: 'i',
|
||||
name: 'pic.png',
|
||||
mime_type: 'image/png',
|
||||
category: 'Image',
|
||||
folder_id: '',
|
||||
owner_id: '',
|
||||
path: '',
|
||||
size: 1,
|
||||
modified_at: 0,
|
||||
created_at: 0,
|
||||
sort_date: 0,
|
||||
icon_class: '',
|
||||
icon_special_class: '',
|
||||
size_formatted: '1 B',
|
||||
etag: '',
|
||||
content_hash: '',
|
||||
...over
|
||||
} as never;
|
||||
}
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
cw.mockResolvedValue(false);
|
||||
});
|
||||
it('renders an image with working zoom controls and closes', async () => {
|
||||
render(FileViewer, { props: { open: true, file: file() } });
|
||||
expect(await screen.findByTestId('file-viewer-dialog')).toBeTruthy();
|
||||
await fireEvent.click(screen.getByTestId('file-viewer-zoom-in-btn'));
|
||||
await fireEvent.click(screen.getByTestId('file-viewer-zoom-out-btn'));
|
||||
await fireEvent.click(screen.getByTestId('file-viewer-zoom-reset-btn'));
|
||||
await fireEvent.click(screen.getByTestId('file-viewer-close-btn'));
|
||||
});
|
||||
it('fetches text content for a text file', async () => {
|
||||
af.mockResolvedValue({ ok: true, text: async () => 'hello world' });
|
||||
render(FileViewer, {
|
||||
props: { open: true, file: file({ name: 'n.txt', mime_type: 'text/plain', category: 'Text' }) }
|
||||
});
|
||||
expect(await screen.findByTestId('file-viewer-dialog')).toBeTruthy();
|
||||
await waitFor(() => expect(af).toHaveBeenCalled());
|
||||
});
|
||||
it('renders nothing when closed', () => {
|
||||
render(FileViewer, { props: { open: false, file: file() } });
|
||||
expect(screen.queryByTestId('file-viewer-dialog')).toBeNull();
|
||||
});
|
||||
it('shows an Edit button for a WOPI-editable document', async () => {
|
||||
cw.mockResolvedValue(true);
|
||||
render(FileViewer, {
|
||||
props: {
|
||||
open: true,
|
||||
file: file({
|
||||
name: 'report.docx',
|
||||
mime_type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
|
||||
category: 'Document'
|
||||
})
|
||||
}
|
||||
});
|
||||
await screen.findByTestId('file-viewer-dialog');
|
||||
await waitFor(() => expect(screen.getByTestId('file-viewer-edit-btn')).toBeTruthy());
|
||||
});
|
||||
it('exposes download and open-in-new-tab links', async () => {
|
||||
render(FileViewer, { props: { open: true, file: file() } });
|
||||
await screen.findByTestId('file-viewer-dialog');
|
||||
expect(screen.getByTestId('file-viewer-download-link').getAttribute('href')).toBe('/dl');
|
||||
expect(screen.getByTestId('file-viewer-open-new-tab-link').getAttribute('href')).toBe('/in');
|
||||
});
|
||||
it('handles a failed text fetch without crashing', async () => {
|
||||
af.mockResolvedValue({ ok: false, status: 500, text: async () => '' });
|
||||
render(FileViewer, {
|
||||
props: { open: true, file: file({ name: 'n.txt', mime_type: 'text/plain', category: 'Text' }) }
|
||||
});
|
||||
await screen.findByTestId('file-viewer-dialog');
|
||||
await waitFor(() => expect(af).toHaveBeenCalled());
|
||||
});
|
||||
@@ -67,12 +67,13 @@
|
||||
{#if groups?.length || showViewToggle}
|
||||
<div class="view-toggle" role="group" aria-label={t('view.label', 'View options')}>
|
||||
{#if groups?.length}
|
||||
<div class="group-by-selector">
|
||||
<div class="group-by-selector" data-testid="list-toolbar-groupby-menu">
|
||||
<button
|
||||
class="toggle-btn group-by-btn active"
|
||||
title={t('groupby.title', 'Group by')}
|
||||
aria-haspopup="true"
|
||||
aria-expanded={menuOpen}
|
||||
data-testid="list-toolbar-groupby-btn"
|
||||
onclick={() => (menuOpen = !menuOpen)}
|
||||
>
|
||||
<Icon name={active?.icon ?? 'layer-group'} />
|
||||
@@ -83,6 +84,7 @@
|
||||
class:active={reversed}
|
||||
title={t('sortdir.title', 'Sort direction')}
|
||||
aria-label={t('sort.direction', 'Sort direction')}
|
||||
data-testid="list-toolbar-sort-direction-btn"
|
||||
onclick={() => ondirection?.()}
|
||||
>
|
||||
<Icon name="arrow-up" />
|
||||
@@ -93,6 +95,7 @@
|
||||
<button
|
||||
class="group-by-option"
|
||||
class:active={groupBy === g.key}
|
||||
data-testid={`list-toolbar-groupby-${g.key}-item`}
|
||||
onclick={() => pick(g.key)}
|
||||
>
|
||||
<Icon name={g.icon ?? 'layer-group'} />
|
||||
@@ -110,6 +113,7 @@
|
||||
class:active={filesStore.viewMode === 'grid'}
|
||||
title={t('view.grid', 'Grid view')}
|
||||
aria-pressed={filesStore.viewMode === 'grid'}
|
||||
data-testid="list-toolbar-view-grid-btn"
|
||||
onclick={() => filesStore.setViewMode('grid')}><Icon name="th" /></button
|
||||
>
|
||||
<button
|
||||
@@ -117,6 +121,7 @@
|
||||
class:active={filesStore.viewMode === 'list'}
|
||||
title={t('view.list', 'List view')}
|
||||
aria-pressed={filesStore.viewMode === 'list'}
|
||||
data-testid="list-toolbar-view-list-btn"
|
||||
onclick={() => filesStore.setViewMode('list')}><Icon name="list" /></button
|
||||
>
|
||||
{/if}
|
||||
|
||||
@@ -86,13 +86,17 @@
|
||||
aria-modal="true"
|
||||
aria-label={title}
|
||||
tabindex="-1"
|
||||
data-testid="modal"
|
||||
bind:this={dialogEl}
|
||||
>
|
||||
{#if title}
|
||||
<header class="modal__header">
|
||||
<h2 class="modal__title">{title}</h2>
|
||||
<button class="modal__close" aria-label={t('common.close', 'Close')} onclick={close}
|
||||
>×</button
|
||||
<button
|
||||
class="modal__close"
|
||||
aria-label={t('common.close', 'Close')}
|
||||
data-testid="modal-close-btn"
|
||||
onclick={close}>×</button
|
||||
>
|
||||
</header>
|
||||
{/if}
|
||||
|
||||
@@ -0,0 +1,34 @@
|
||||
import { it, expect, vi } from 'vitest';
|
||||
import { render, screen, fireEvent } from '@testing-library/svelte';
|
||||
import { createRawSnippet } from 'svelte';
|
||||
import Modal from './Modal.svelte';
|
||||
|
||||
const children = createRawSnippet(() => ({
|
||||
render: () => '<div data-testid="modal-body">content</div>'
|
||||
}));
|
||||
|
||||
it('renders the title and children when open', () => {
|
||||
render(Modal, { props: { open: true, title: 'My dialog', children } });
|
||||
expect(screen.getByTestId('modal')).toBeTruthy();
|
||||
expect(screen.getByText('My dialog')).toBeTruthy();
|
||||
expect(screen.getByTestId('modal-body')).toBeTruthy();
|
||||
});
|
||||
|
||||
it('does not render when closed', () => {
|
||||
render(Modal, { props: { open: false, title: 'Hidden', children } });
|
||||
expect(screen.queryByTestId('modal')).toBeNull();
|
||||
});
|
||||
|
||||
it('invokes onclose when the close button is clicked', async () => {
|
||||
const onclose = vi.fn();
|
||||
render(Modal, { props: { open: true, title: 'X', onclose, children } });
|
||||
await fireEvent.click(screen.getByTestId('modal-close-btn'));
|
||||
expect(onclose).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('closes on Escape', async () => {
|
||||
const onclose = vi.fn();
|
||||
render(Modal, { props: { open: true, title: 'X', onclose, children } });
|
||||
await fireEvent.keyDown(window, { key: 'Escape' });
|
||||
expect(onclose).toHaveBeenCalled();
|
||||
});
|
||||
@@ -123,51 +123,73 @@
|
||||
</script>
|
||||
|
||||
<Modal bind:open title={moveTitle}>
|
||||
<div class="mv-nav">
|
||||
<button
|
||||
class="mv-nav-btn"
|
||||
title={t('breadcrumb.home', 'Home')}
|
||||
aria-label={t('breadcrumb.home', 'Home')}
|
||||
disabled={atHome}
|
||||
onclick={goHome}><Icon name="home" /></button
|
||||
>
|
||||
<button
|
||||
class="mv-nav-btn"
|
||||
title={t('dialogs.go_to_parent', 'Go to parent')}
|
||||
aria-label={t('dialogs.go_to_parent', 'Go to parent')}
|
||||
disabled={atHome}
|
||||
onclick={goParent}><Icon name="level-up-alt" /></button
|
||||
>
|
||||
<nav class="mv-crumbs" aria-label="Breadcrumb">
|
||||
{#each crumbs as c, i (c.id)}
|
||||
{#if i > 0}<span class="mv-sep">/</span>{/if}
|
||||
<button class="mv-crumb" onclick={() => gotoCrumb(i)}>{c.name}</button>
|
||||
{/each}
|
||||
</nav>
|
||||
<div data-testid="move-dialog">
|
||||
<div class="mv-nav">
|
||||
<button
|
||||
class="mv-nav-btn"
|
||||
data-testid="move-dialog-home-btn"
|
||||
title={t('breadcrumb.home', 'Home')}
|
||||
aria-label={t('breadcrumb.home', 'Home')}
|
||||
disabled={atHome}
|
||||
onclick={goHome}><Icon name="home" /></button
|
||||
>
|
||||
<button
|
||||
class="mv-nav-btn"
|
||||
data-testid="move-dialog-parent-btn"
|
||||
title={t('dialogs.go_to_parent', 'Go to parent')}
|
||||
aria-label={t('dialogs.go_to_parent', 'Go to parent')}
|
||||
disabled={atHome}
|
||||
onclick={goParent}><Icon name="level-up-alt" /></button
|
||||
>
|
||||
<nav class="mv-crumbs" aria-label="Breadcrumb">
|
||||
{#each crumbs as c, i (c.id)}
|
||||
{#if i > 0}<span class="mv-sep">/</span>{/if}
|
||||
<button
|
||||
class="mv-crumb"
|
||||
data-testid={`move-dialog-crumb-${c.id}`}
|
||||
onclick={() => gotoCrumb(i)}>{c.name}</button
|
||||
>
|
||||
{/each}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{#if loading}
|
||||
<p class="mv-status">{t('common.loading', 'Loading…')}</p>
|
||||
{:else if folders.length === 0}
|
||||
<p class="mv-status">{t('files.no_subfolders', 'No subfolders here.')}</p>
|
||||
{:else}
|
||||
<ul class="mv-list">
|
||||
{#each folders as f (f.id)}
|
||||
<li>
|
||||
<button
|
||||
class="mv-folder"
|
||||
data-testid={`move-dialog-folder-${f.id}`}
|
||||
disabled={targetIds.has(f.id)}
|
||||
onclick={() => enter(f)}
|
||||
>
|
||||
<Icon name="folder" /> <span>{f.name}</span>
|
||||
<Icon name="chevron-right" class="mv-enter" />
|
||||
</button>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if loading}
|
||||
<p class="mv-status">{t('common.loading', 'Loading…')}</p>
|
||||
{:else if folders.length === 0}
|
||||
<p class="mv-status">{t('files.no_subfolders', 'No subfolders here.')}</p>
|
||||
{:else}
|
||||
<ul class="mv-list">
|
||||
{#each folders as f (f.id)}
|
||||
<li>
|
||||
<button class="mv-folder" disabled={targetIds.has(f.id)} onclick={() => enter(f)}>
|
||||
<Icon name="folder" /> <span>{f.name}</span>
|
||||
<Icon name="chevron-right" class="mv-enter" />
|
||||
</button>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
|
||||
{#snippet footer()}
|
||||
<button class="btn btn-secondary" onclick={() => (open = false)}>
|
||||
<button
|
||||
class="btn btn-secondary"
|
||||
data-testid="move-dialog-cancel-btn"
|
||||
onclick={() => (open = false)}
|
||||
>
|
||||
{t('common.cancel', 'Cancel')}
|
||||
</button>
|
||||
<button class="btn btn-primary" disabled={working || !currentId} onclick={confirmMove}>
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
data-testid="move-dialog-confirm-btn"
|
||||
disabled={working || !currentId}
|
||||
onclick={confirmMove}
|
||||
>
|
||||
{mode === 'copy' ? t('files.copy_here', 'Copy here') : t('files.move_here', 'Move here')}
|
||||
</button>
|
||||
{/snippet}
|
||||
|
||||
@@ -0,0 +1,82 @@
|
||||
import { it, expect, vi, beforeEach } from 'vitest';
|
||||
import { render, screen, fireEvent, waitFor } from '@testing-library/svelte';
|
||||
|
||||
const { session, ui } = vi.hoisted(() => ({
|
||||
session: { loadHomeFolder: vi.fn(async () => 'home'), homeFolderName: 'Files' },
|
||||
ui: { notify: vi.fn() }
|
||||
}));
|
||||
vi.mock('$lib/stores/session.svelte', () => ({ session }));
|
||||
vi.mock('$lib/stores/ui.svelte', () => ({ ui }));
|
||||
vi.mock('$lib/utils/errors', () => ({ errorToast: vi.fn() }));
|
||||
vi.mock('$lib/api/endpoints/folders', () => ({ listFolder: vi.fn(), moveFolder: vi.fn() }));
|
||||
vi.mock('$lib/api/endpoints/files', () => ({ moveFile: vi.fn() }));
|
||||
vi.mock('$lib/api/endpoints/batch', () => ({ copyFiles: vi.fn(), copyFolders: vi.fn() }));
|
||||
|
||||
import { listFolder, moveFolder } from '$lib/api/endpoints/folders';
|
||||
import { moveFile } from '$lib/api/endpoints/files';
|
||||
import { copyFiles } from '$lib/api/endpoints/batch';
|
||||
import MoveDialog from './MoveDialog.svelte';
|
||||
|
||||
const m = (fn: unknown) => fn as ReturnType<typeof vi.fn>;
|
||||
const item = { id: 'f1', name: 'doc.txt', kind: 'file' as const };
|
||||
|
||||
function folder(id: string, name: string) {
|
||||
return {
|
||||
category: 'Folder',
|
||||
created_at: 0,
|
||||
icon_class: 'fa-folder',
|
||||
icon_special_class: '',
|
||||
id,
|
||||
is_root: false,
|
||||
modified_at: 0,
|
||||
name,
|
||||
owner_id: 'me',
|
||||
parent_id: 'home',
|
||||
path: '/' + name,
|
||||
etag: 'e'
|
||||
};
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
m(listFolder).mockResolvedValue({
|
||||
folders: [folder('sub1', 'Sub')],
|
||||
files: [],
|
||||
favoriteIds: [],
|
||||
sharedIds: []
|
||||
});
|
||||
});
|
||||
|
||||
it('loads the home folder when opened', async () => {
|
||||
render(MoveDialog, { props: { open: true, item } });
|
||||
await waitFor(() => expect(listFolder).toHaveBeenCalledWith('home'));
|
||||
await screen.findByTestId('move-dialog');
|
||||
});
|
||||
|
||||
it('moves the item into the current folder on confirm', async () => {
|
||||
m(moveFile).mockResolvedValue(undefined);
|
||||
const onmoved = vi.fn();
|
||||
render(MoveDialog, { props: { open: true, item, onmoved } });
|
||||
await screen.findByTestId('move-dialog-confirm-btn');
|
||||
await fireEvent.click(screen.getByTestId('move-dialog-confirm-btn'));
|
||||
await waitFor(() => expect(moveFile).toHaveBeenCalledWith('f1', 'home'));
|
||||
await waitFor(() => expect(onmoved).toHaveBeenCalled());
|
||||
});
|
||||
|
||||
it('navigates into a subfolder before confirming', async () => {
|
||||
m(moveFolder).mockResolvedValue(undefined);
|
||||
const folderItem = { id: 'fold9', name: 'Dir', kind: 'folder' as const };
|
||||
render(MoveDialog, { props: { open: true, item: folderItem } });
|
||||
await fireEvent.click(await screen.findByTestId('move-dialog-folder-sub1'));
|
||||
await waitFor(() => expect(listFolder).toHaveBeenCalledWith('sub1'));
|
||||
await fireEvent.click(screen.getByTestId('move-dialog-confirm-btn'));
|
||||
await waitFor(() => expect(moveFolder).toHaveBeenCalledWith('fold9', 'sub1'));
|
||||
});
|
||||
|
||||
it('copies the item in copy mode', async () => {
|
||||
m(copyFiles).mockResolvedValue(undefined);
|
||||
render(MoveDialog, { props: { open: true, item, mode: 'copy' } });
|
||||
await screen.findByTestId('move-dialog-confirm-btn');
|
||||
await fireEvent.click(screen.getByTestId('move-dialog-confirm-btn'));
|
||||
await waitFor(() => expect(copyFiles).toHaveBeenCalledWith(['f1'], 'home'));
|
||||
});
|
||||
@@ -0,0 +1,82 @@
|
||||
import { it, expect, vi, beforeEach } from 'vitest';
|
||||
import { render, fireEvent, screen, waitFor } from '@testing-library/svelte';
|
||||
|
||||
vi.mock('$lib/api/endpoints/people', () => ({
|
||||
fetchPeople: vi.fn(),
|
||||
fetchPersonPhotos: vi.fn(),
|
||||
renamePerson: vi.fn()
|
||||
}));
|
||||
vi.mock('$lib/api/endpoints/files', () => ({ fileThumbnailUrl: () => '/thumb.png' }));
|
||||
vi.mock('$lib/stores/dialogs.svelte', () => ({ promptDialog: vi.fn() }));
|
||||
|
||||
import { fetchPeople, fetchPersonPhotos, renamePerson } from '$lib/api/endpoints/people';
|
||||
import { promptDialog } from '$lib/stores/dialogs.svelte';
|
||||
import PeopleView from './PeopleView.svelte';
|
||||
|
||||
const fp = fetchPeople as unknown as ReturnType<typeof vi.fn>;
|
||||
const fpp = fetchPersonPhotos as unknown as ReturnType<typeof vi.fn>;
|
||||
const rn = renamePerson as unknown as ReturnType<typeof vi.fn>;
|
||||
const pd = promptDialog as unknown as ReturnType<typeof vi.fn>;
|
||||
|
||||
beforeEach(() => vi.clearAllMocks());
|
||||
|
||||
it('renders the people grid (named + unnamed)', async () => {
|
||||
fp.mockResolvedValue([
|
||||
{ id: 'p1', name: 'Alice', face_count: 3, cover_file_id: 'c1' },
|
||||
{ id: 'p2', name: '', face_count: 1, cover_file_id: null }
|
||||
]);
|
||||
render(PeopleView);
|
||||
expect(await screen.findByText('Alice')).toBeTruthy();
|
||||
expect(screen.getByText('Unnamed')).toBeTruthy();
|
||||
});
|
||||
|
||||
it('shows an empty state when there are no people', async () => {
|
||||
fp.mockResolvedValue([]);
|
||||
render(PeopleView);
|
||||
expect(await screen.findByText('No people yet')).toBeTruthy();
|
||||
});
|
||||
|
||||
it('shows the disabled state when the list errors', async () => {
|
||||
fp.mockRejectedValue(new Error('off'));
|
||||
render(PeopleView);
|
||||
expect(await screen.findByText('Face recognition is disabled')).toBeTruthy();
|
||||
});
|
||||
|
||||
it('drills into a person and back to the list', async () => {
|
||||
fp.mockResolvedValue([{ id: 'p1', name: 'Alice', face_count: 2, cover_file_id: null }]);
|
||||
fpp.mockResolvedValue(['ph1', 'ph2']);
|
||||
render(PeopleView);
|
||||
const btn = (await screen.findByText('Alice')).closest('button')!;
|
||||
await fireEvent.click(btn);
|
||||
await waitFor(() => expect(fpp).toHaveBeenCalledWith('p1'));
|
||||
await fireEvent.click(screen.getByLabelText('Back'));
|
||||
expect(await screen.findByText('Alice')).toBeTruthy();
|
||||
});
|
||||
|
||||
it('renames the current person', async () => {
|
||||
fp.mockResolvedValue([{ id: 'p1', name: 'Alice', face_count: 1, cover_file_id: null }]);
|
||||
fpp.mockResolvedValue([]);
|
||||
pd.mockResolvedValue('Bob');
|
||||
rn.mockResolvedValue(undefined);
|
||||
render(PeopleView);
|
||||
await fireEvent.click((await screen.findByText('Alice')).closest('button')!);
|
||||
await waitFor(() => screen.getByLabelText('Name this person'));
|
||||
await fireEvent.click(screen.getByLabelText('Name this person'));
|
||||
await waitFor(() => expect(rn).toHaveBeenCalledWith('p1', 'Bob'));
|
||||
});
|
||||
|
||||
it("opens a person's photo in the lightbox", async () => {
|
||||
fp.mockResolvedValue([{ id: 'p1', name: 'Alice', face_count: 2, cover_file_id: null }]);
|
||||
fpp.mockResolvedValue(['ph1', 'ph2']);
|
||||
const { container } = render(PeopleView);
|
||||
await fireEvent.click((await screen.findByText('Alice')).closest('button')!);
|
||||
await waitFor(() => expect(fpp).toHaveBeenCalledWith('p1'));
|
||||
const tiles = await waitFor(() => {
|
||||
const found = container.querySelectorAll('.photos__open');
|
||||
if (found.length === 0) throw new Error('no tiles yet');
|
||||
return found;
|
||||
});
|
||||
expect(tiles.length).toBe(2);
|
||||
await fireEvent.click(tiles[0]);
|
||||
expect(await screen.findByTestId('photo-lightbox')).toBeTruthy();
|
||||
});
|
||||
@@ -180,6 +180,7 @@
|
||||
aria-modal="true"
|
||||
aria-label={item.name}
|
||||
tabindex="-1"
|
||||
data-testid="photo-lightbox"
|
||||
onclick={(e) => e.target === e.currentTarget && close()}
|
||||
>
|
||||
<div class="lb__info">
|
||||
@@ -187,12 +188,18 @@
|
||||
<div class="lb__meta">{meta}</div>
|
||||
</div>
|
||||
|
||||
<button class="lb__close" aria-label={t('common.close', 'Close')} onclick={close}>×</button>
|
||||
<button
|
||||
class="lb__close"
|
||||
aria-label={t('common.close', 'Close')}
|
||||
data-testid="photo-lightbox-close-btn"
|
||||
onclick={close}>×</button
|
||||
>
|
||||
|
||||
<button
|
||||
class="lb__nav lb__nav--prev"
|
||||
aria-label={t('common.previous', 'Previous')}
|
||||
disabled={index === 0}
|
||||
data-testid="photo-lightbox-prev-btn"
|
||||
onclick={(e) => {
|
||||
e.stopPropagation();
|
||||
prev();
|
||||
@@ -221,6 +228,7 @@
|
||||
class="lb__nav lb__nav--next"
|
||||
aria-label={t('common.next', 'Next')}
|
||||
disabled={index === items.length - 1}
|
||||
data-testid="photo-lightbox-next-btn"
|
||||
onclick={(e) => {
|
||||
e.stopPropagation();
|
||||
next();
|
||||
|
||||
@@ -0,0 +1,50 @@
|
||||
import { it, expect, vi, beforeEach } from 'vitest';
|
||||
import { render, screen, fireEvent } from '@testing-library/svelte';
|
||||
vi.mock('$lib/api/endpoints/files', () => ({
|
||||
deleteFile: vi.fn(),
|
||||
fileDownloadUrl: () => '/d',
|
||||
fileInlineUrl: () => '/i',
|
||||
fileThumbnailUrl: () => '/t'
|
||||
}));
|
||||
vi.mock('$lib/api/endpoints/favorites', () => ({ addFavorite: vi.fn() }));
|
||||
vi.mock('$lib/api/endpoints/photos', () => ({ fetchFileMetadata: vi.fn() }));
|
||||
vi.mock('$lib/stores/dialogs.svelte', () => ({ confirmDialog: vi.fn() }));
|
||||
vi.mock('$lib/utils/errors', () => ({ errorToast: vi.fn() }));
|
||||
import { fetchFileMetadata } from '$lib/api/endpoints/photos';
|
||||
import PhotoLightbox from './PhotoLightbox.svelte';
|
||||
const fm = fetchFileMetadata as unknown as ReturnType<typeof vi.fn>;
|
||||
function item(id: string) {
|
||||
return {
|
||||
id,
|
||||
name: `${id}.jpg`,
|
||||
mime_type: 'image/jpeg',
|
||||
category: 'Image',
|
||||
folder_id: '',
|
||||
owner_id: '',
|
||||
path: '',
|
||||
size: 1,
|
||||
modified_at: 0,
|
||||
created_at: 0,
|
||||
sort_date: 0,
|
||||
icon_class: '',
|
||||
icon_special_class: '',
|
||||
size_formatted: '1 B',
|
||||
etag: '',
|
||||
content_hash: ''
|
||||
} as never;
|
||||
}
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
fm.mockResolvedValue(null);
|
||||
});
|
||||
it('opens at an index, navigates next/prev, and closes', async () => {
|
||||
render(PhotoLightbox, { props: { items: [item('a'), item('b')], index: 0 } });
|
||||
expect(await screen.findByTestId('photo-lightbox')).toBeTruthy();
|
||||
await fireEvent.click(screen.getByTestId('photo-lightbox-next-btn'));
|
||||
await fireEvent.click(screen.getByTestId('photo-lightbox-prev-btn'));
|
||||
await fireEvent.click(screen.getByTestId('photo-lightbox-close-btn'));
|
||||
});
|
||||
it('renders nothing at index -1', () => {
|
||||
render(PhotoLightbox, { props: { items: [item('a')], index: -1 } });
|
||||
expect(screen.queryByTestId('photo-lightbox')).toBeNull();
|
||||
});
|
||||
@@ -309,6 +309,8 @@
|
||||
class:file-item--selected={selectable && selected.has(entry.id)}
|
||||
role={onopen ? 'button' : undefined}
|
||||
tabindex={onopen ? 0 : undefined}
|
||||
aria-label={onopen ? entry.name : undefined}
|
||||
data-testid={entry.name}
|
||||
title={showOwner ? ownerTitle(entry) : undefined}
|
||||
onclick={onopen ? () => onopen(entry) : undefined}
|
||||
onkeydown={onopen ? (e) => e.key === 'Enter' && onopen(entry) : undefined}
|
||||
@@ -319,6 +321,7 @@
|
||||
<input
|
||||
type="checkbox"
|
||||
aria-label={t('common.select', 'Select')}
|
||||
data-testid={`resource-list-select-${entry.id}-checkbox`}
|
||||
checked={selected.has(entry.id)}
|
||||
onchange={() => toggleSelected(entry.id)}
|
||||
/>
|
||||
@@ -360,6 +363,7 @@
|
||||
<button
|
||||
class="rl-star"
|
||||
class:rl-star--on={entry.isFavorite}
|
||||
data-testid={`resource-list-favorite-${entry.id}-btn`}
|
||||
title={entry.isFavorite
|
||||
? t('files.unfavorite', 'Remove favorite')
|
||||
: t('files.favorite', 'Add favorite')}
|
||||
@@ -393,8 +397,18 @@
|
||||
</div>
|
||||
|
||||
{#if selectable && selected.size > 0 && batchToolbar}
|
||||
<div class="rl-batch" role="region" aria-label={t('files.selection', 'Selection')}>
|
||||
<button class="rl-batch__close" title={t('common.clear', 'Clear')} onclick={clearSelection}>
|
||||
<div
|
||||
class="rl-batch"
|
||||
role="region"
|
||||
aria-label={t('files.selection', 'Selection')}
|
||||
data-testid="resource-list-batch-toolbar"
|
||||
>
|
||||
<button
|
||||
class="rl-batch__close"
|
||||
title={t('common.clear', 'Clear')}
|
||||
data-testid="resource-list-batch-close-btn"
|
||||
onclick={clearSelection}
|
||||
>
|
||||
<Icon name="times" />
|
||||
</button>
|
||||
<span class="rl-batch__count"
|
||||
@@ -454,7 +468,12 @@
|
||||
{/if}
|
||||
|
||||
{#if hasMore}
|
||||
<button class="btn btn-secondary rl-more" onclick={onloadmore} disabled={loading}>
|
||||
<button
|
||||
class="btn btn-secondary rl-more"
|
||||
data-testid="resource-list-load-more-btn"
|
||||
onclick={onloadmore}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? t('common.loading', 'Loading…') : t('common.load_more', 'Load more')}
|
||||
</button>
|
||||
{/if}
|
||||
@@ -470,6 +489,7 @@
|
||||
<input
|
||||
type="checkbox"
|
||||
aria-label={t('common.select_all', 'Select all')}
|
||||
data-testid="resource-list-select-all-checkbox"
|
||||
checked={allSelected}
|
||||
onchange={toggleSelectAll}
|
||||
/>
|
||||
@@ -492,12 +512,19 @@
|
||||
onclick={closeContext}
|
||||
oncontextmenu={(e) => e.preventDefault()}
|
||||
></div>
|
||||
<div class="rl-ctx-menu" style:left="{ctxX}px" style:top="{ctxY}px" role="menu">
|
||||
<div
|
||||
class="rl-ctx-menu"
|
||||
style:left="{ctxX}px"
|
||||
style:top="{ctxY}px"
|
||||
role="menu"
|
||||
data-testid="resource-list-context-menu"
|
||||
>
|
||||
{#each contextActions as action (action.key)}
|
||||
<button
|
||||
class="rl-ctx-item"
|
||||
class:rl-ctx-item--danger={action.danger}
|
||||
role="menuitem"
|
||||
data-testid={`resource-list-context-${action.key}-item`}
|
||||
onclick={() => {
|
||||
const e = ctxEntry!;
|
||||
closeContext();
|
||||
|
||||
@@ -377,194 +377,249 @@
|
||||
{/snippet}
|
||||
|
||||
<Modal bind:open title={t('share.dialog_title', { name: item?.name ?? '' }, 'Share “{{name}}”')}>
|
||||
<div class="tabs" role="tablist">
|
||||
<button role="tab" aria-selected={tab === 'people'} onclick={() => (tab = 'people')}>
|
||||
{t('share.people', 'People')}
|
||||
</button>
|
||||
<button role="tab" aria-selected={tab === 'link'} onclick={() => (tab = 'link')}>
|
||||
{t('share.public_link', 'Public link')}
|
||||
</button>
|
||||
</div>
|
||||
<div data-testid="share-dialog">
|
||||
<div class="tabs" role="tablist">
|
||||
<button
|
||||
role="tab"
|
||||
data-testid="share-dialog-people-tab"
|
||||
aria-selected={tab === 'people'}
|
||||
onclick={() => (tab = 'people')}
|
||||
>
|
||||
{t('share.people', 'People')}
|
||||
</button>
|
||||
<button
|
||||
role="tab"
|
||||
data-testid="share-dialog-link-tab"
|
||||
aria-selected={tab === 'link'}
|
||||
onclick={() => (tab = 'link')}
|
||||
>
|
||||
{t('share.public_link', 'Public link')}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{#if tab === 'people'}
|
||||
{#if !directoryAvailable && !grantsLoading}
|
||||
<p class="status status--note">
|
||||
{t('share.directoryUnavailable', 'User directory unavailable')}
|
||||
</p>
|
||||
{:else}
|
||||
<div class="add-row">
|
||||
<div class="search">
|
||||
<input
|
||||
placeholder={t('share.add_people', 'Add people, groups, or email…')}
|
||||
bind:value={query}
|
||||
oninput={onQueryInput}
|
||||
autocomplete="off"
|
||||
/>
|
||||
{#if results.length > 0}
|
||||
<ul class="results">
|
||||
{#each results as r (r.type + r.id)}
|
||||
<li>
|
||||
<button class="result" onclick={() => addRecipient(r)}>
|
||||
<Icon
|
||||
name={r.type === 'group'
|
||||
? 'user-group'
|
||||
: r.type === 'email'
|
||||
? 'envelope'
|
||||
: 'user'}
|
||||
{#if tab === 'people'}
|
||||
{#if !directoryAvailable && !grantsLoading}
|
||||
<p class="status status--note">
|
||||
{t('share.directoryUnavailable', 'User directory unavailable')}
|
||||
</p>
|
||||
{:else}
|
||||
<div class="add-row">
|
||||
<div class="search">
|
||||
<input
|
||||
data-testid="share-dialog-search-input"
|
||||
placeholder={t('share.add_people', 'Add people, groups, or email…')}
|
||||
bind:value={query}
|
||||
oninput={onQueryInput}
|
||||
autocomplete="off"
|
||||
/>
|
||||
{#if results.length > 0}
|
||||
<ul class="results">
|
||||
{#each results as r (r.type + r.id)}
|
||||
<li>
|
||||
<button
|
||||
class="result"
|
||||
data-testid={`share-dialog-result-${r.type}-${r.id}`}
|
||||
onclick={() => addRecipient(r)}
|
||||
>
|
||||
<Icon
|
||||
name={r.type === 'group'
|
||||
? 'user-group'
|
||||
: r.type === 'email'
|
||||
? 'envelope'
|
||||
: 'user'}
|
||||
/>
|
||||
<span class="result__label">{r.label}</span>
|
||||
{#if r.type === 'email'}
|
||||
<span class="result__sub"
|
||||
>{t('share.inviteByEmail', 'Invite by email')}</span
|
||||
>
|
||||
{:else if r.sublabel}
|
||||
<span class="result__sub">{r.sublabel}</span>
|
||||
{/if}
|
||||
</button>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
</div>
|
||||
<select
|
||||
class="role-select"
|
||||
data-testid="share-dialog-new-role-select"
|
||||
bind:value={newRole}
|
||||
aria-label={t('share.role_label', 'Role')}
|
||||
>
|
||||
{#each ROLES as r (r.v)}<option value={r.v}>{r.l}</option>{/each}
|
||||
</select>
|
||||
{@render expiryChip(newExpiry, (v) => (newExpiry = v))}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if grantsLoading}
|
||||
<div class="skeleton" aria-hidden="true">
|
||||
<div class="skeleton__line skeleton__line--short"></div>
|
||||
<div class="skeleton__line skeleton__line--medium"></div>
|
||||
<div class="skeleton__line"></div>
|
||||
</div>
|
||||
{:else if members.length === 0}
|
||||
<p class="status">{t('share.no_people', 'Not shared with anyone yet.')}</p>
|
||||
{:else}
|
||||
{#each memberGroups as group (group.role)}
|
||||
<div class="member-group">
|
||||
<div class="member-group__header">
|
||||
<Icon name={roleIcon(group.role)} />
|
||||
<span>{roleLabel(group.role)}</span>
|
||||
<span class="member-group__badge">{group.members.length}</span>
|
||||
</div>
|
||||
<ul class="members">
|
||||
{#each group.members as m (m.subject.type + m.subject.id)}
|
||||
<li
|
||||
class="member"
|
||||
class:member--expired={m.expiry && new Date(m.expiry) < new Date()}
|
||||
>
|
||||
{#if m.subject.type === 'user'}
|
||||
<UserVignette
|
||||
userId={m.subject.id}
|
||||
fallbackLabel={m.recipient.label}
|
||||
fallbackSublabel={m.recipient.sublabel}
|
||||
/>
|
||||
<span class="result__label">{r.label}</span>
|
||||
{#if r.type === 'email'}
|
||||
<span class="result__sub">{t('share.inviteByEmail', 'Invite by email')}</span>
|
||||
{:else if r.sublabel}
|
||||
<span class="result__sub">{r.sublabel}</span>
|
||||
{/if}
|
||||
</button>
|
||||
{:else}
|
||||
<Icon name="user-group" />
|
||||
<span class="member__label">
|
||||
{m.recipient.label}
|
||||
{#if m.recipient.sublabel}<span class="member__sub"
|
||||
>{m.recipient.sublabel}</span
|
||||
>{/if}
|
||||
</span>
|
||||
{/if}
|
||||
{@render expiryChip(m.expiry, (v) => changeMemberExpiry(m, v))}
|
||||
<select
|
||||
class="role-select"
|
||||
data-testid={`share-dialog-member-role-${m.subject.type}-${m.subject.id}`}
|
||||
value={m.role}
|
||||
onchange={(e) => changeRole(m, e.currentTarget.value as ShareRole)}
|
||||
>
|
||||
{#each ROLES as r (r.v)}<option value={r.v}>{r.l}</option>{/each}
|
||||
</select>
|
||||
<button
|
||||
class="btn-action"
|
||||
data-testid={`share-dialog-member-notify-${m.subject.type}-${m.subject.id}`}
|
||||
title={t('share.notifyByEmail', 'Notify by email')}
|
||||
onclick={() => notifyMember(m)}><Icon name="paper-plane" /></button
|
||||
>
|
||||
<button
|
||||
class="btn-action btn-action--delete"
|
||||
data-testid={`share-dialog-member-remove-${m.subject.type}-${m.subject.id}`}
|
||||
title={t('share.revoke', 'Remove')}
|
||||
onclick={() => removeMember(m)}><Icon name="user-xmark" /></button
|
||||
>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
</div>
|
||||
<select class="role-select" bind:value={newRole} aria-label={t('share.role_label', 'Role')}>
|
||||
{#each ROLES as r (r.v)}<option value={r.v}>{r.l}</option>{/each}
|
||||
</select>
|
||||
{@render expiryChip(newExpiry, (v) => (newExpiry = v))}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if grantsLoading}
|
||||
<div class="skeleton" aria-hidden="true">
|
||||
<div class="skeleton__line skeleton__line--short"></div>
|
||||
<div class="skeleton__line skeleton__line--medium"></div>
|
||||
<div class="skeleton__line"></div>
|
||||
</div>
|
||||
{:else if members.length === 0}
|
||||
<p class="status">{t('share.no_people', 'Not shared with anyone yet.')}</p>
|
||||
{:else}
|
||||
{#each memberGroups as group (group.role)}
|
||||
<div class="member-group">
|
||||
<div class="member-group__header">
|
||||
<Icon name={roleIcon(group.role)} />
|
||||
<span>{roleLabel(group.role)}</span>
|
||||
<span class="member-group__badge">{group.members.length}</span>
|
||||
</div>
|
||||
<ul class="members">
|
||||
{#each group.members as m (m.subject.type + m.subject.id)}
|
||||
<li
|
||||
class="member"
|
||||
class:member--expired={m.expiry && new Date(m.expiry) < new Date()}
|
||||
>
|
||||
{#if m.subject.type === 'user'}
|
||||
<UserVignette
|
||||
userId={m.subject.id}
|
||||
fallbackLabel={m.recipient.label}
|
||||
fallbackSublabel={m.recipient.sublabel}
|
||||
/>
|
||||
{:else}
|
||||
<Icon name="user-group" />
|
||||
<span class="member__label">
|
||||
{m.recipient.label}
|
||||
{#if m.recipient.sublabel}<span class="member__sub">{m.recipient.sublabel}</span
|
||||
>{/if}
|
||||
</span>
|
||||
{/if}
|
||||
{@render expiryChip(m.expiry, (v) => changeMemberExpiry(m, v))}
|
||||
<select
|
||||
class="role-select"
|
||||
value={m.role}
|
||||
onchange={(e) => changeRole(m, e.currentTarget.value as ShareRole)}
|
||||
>
|
||||
{#each ROLES as r (r.v)}<option value={r.v}>{r.l}</option>{/each}
|
||||
</select>
|
||||
<button
|
||||
class="btn-action"
|
||||
title={t('share.notifyByEmail', 'Notify by email')}
|
||||
onclick={() => notifyMember(m)}><Icon name="paper-plane" /></button
|
||||
>
|
||||
<button
|
||||
class="btn-action btn-action--delete"
|
||||
title={t('share.revoke', 'Remove')}
|
||||
onclick={() => removeMember(m)}><Icon name="user-xmark" /></button
|
||||
>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
{:else}
|
||||
<section class="sh-create">
|
||||
<div class="sh-fields">
|
||||
<label>
|
||||
<span>{t('share.link_name', 'Link name (optional)')}</span>
|
||||
<input type="text" bind:value={newLinkName} autocomplete="off" />
|
||||
</label>
|
||||
<label>
|
||||
<span>{t('share.password_optional', 'Password (optional)')}</span>
|
||||
<input type="text" bind:value={password} autocomplete="off" />
|
||||
</label>
|
||||
<label>
|
||||
<span>{t('share.expires_optional', 'Expires (optional)')}</span>
|
||||
<input
|
||||
type="date"
|
||||
value={expiresAt ?? ''}
|
||||
onchange={(e) => (expiresAt = e.currentTarget.value || null)}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<button class="btn btn-primary" disabled={creating} onclick={createLink}>
|
||||
{t('share.create_link', 'Create link')}
|
||||
</button>
|
||||
</section>
|
||||
|
||||
{#if linkLoading}
|
||||
<div class="skeleton" aria-hidden="true">
|
||||
<div class="skeleton__line skeleton__line--medium"></div>
|
||||
<div class="skeleton__line"></div>
|
||||
</div>
|
||||
{:else if shares.length === 0}
|
||||
<p class="status">{t('share.none', 'No public links yet.')}</p>
|
||||
{:else}
|
||||
<ul class="links">
|
||||
{#each shares as s (s.id)}
|
||||
<li class="link-row">
|
||||
<span class="link-row__title">
|
||||
<Icon name={s.has_password ? 'lock' : 'link'} />
|
||||
<span class="link-row__name"
|
||||
>{s.item_name || t('share.sharedLink', 'Shared link')}</span
|
||||
>
|
||||
</span>
|
||||
{@render expiryChip(shareExpiryIso(s), (v) => editLinkExpiry(s, v))}
|
||||
<button
|
||||
class="btn-action"
|
||||
class:btn-action--on={s.has_password}
|
||||
title={s.has_password
|
||||
? t('share.changePassword', 'Change password')
|
||||
: t('share.addPassword', 'Add password')}
|
||||
onclick={() => {
|
||||
const pw = window.prompt(
|
||||
s.has_password
|
||||
? t('share.passwordPrompt_clear', 'New password (blank to remove):')
|
||||
: t('share.passwordPrompt', 'Set a password:')
|
||||
);
|
||||
if (pw !== null) editLinkPassword(s, pw || null);
|
||||
}}><Icon name={s.has_password ? 'lock' : 'lock-open'} /></button
|
||||
>
|
||||
<button class="btn-action" title={t('share.copy', 'Copy')} onclick={() => copy(s.url)}>
|
||||
<Icon name="copy" />
|
||||
</button>
|
||||
<button
|
||||
class="btn-action btn-action--delete"
|
||||
title={t('common.delete', 'Delete')}
|
||||
onclick={() => removeLink(s)}><Icon name="trash" /></button
|
||||
>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
{:else}
|
||||
<section class="sh-create">
|
||||
<div class="sh-fields">
|
||||
<label>
|
||||
<span>{t('share.link_name', 'Link name (optional)')}</span>
|
||||
<input
|
||||
type="text"
|
||||
data-testid="share-dialog-link-name-input"
|
||||
bind:value={newLinkName}
|
||||
autocomplete="off"
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
<span>{t('share.password_optional', 'Password (optional)')}</span>
|
||||
<input
|
||||
type="text"
|
||||
data-testid="share-dialog-link-password-input"
|
||||
bind:value={password}
|
||||
autocomplete="off"
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
<span>{t('share.expires_optional', 'Expires (optional)')}</span>
|
||||
<input
|
||||
type="date"
|
||||
data-testid="share-dialog-link-expires-input"
|
||||
value={expiresAt ?? ''}
|
||||
onchange={(e) => (expiresAt = e.currentTarget.value || null)}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
data-testid="share-dialog-create-btn"
|
||||
disabled={creating}
|
||||
onclick={createLink}
|
||||
>
|
||||
{t('share.create_link', 'Create link')}
|
||||
</button>
|
||||
</section>
|
||||
|
||||
{#if linkLoading}
|
||||
<div class="skeleton" aria-hidden="true">
|
||||
<div class="skeleton__line skeleton__line--medium"></div>
|
||||
<div class="skeleton__line"></div>
|
||||
</div>
|
||||
{:else if shares.length === 0}
|
||||
<p class="status">{t('share.none', 'No public links yet.')}</p>
|
||||
{:else}
|
||||
<ul class="links">
|
||||
{#each shares as s (s.id)}
|
||||
<li class="link-row">
|
||||
<span class="link-row__title">
|
||||
<Icon name={s.has_password ? 'lock' : 'link'} />
|
||||
<span class="link-row__name"
|
||||
>{s.item_name || t('share.sharedLink', 'Shared link')}</span
|
||||
>
|
||||
</span>
|
||||
{@render expiryChip(shareExpiryIso(s), (v) => editLinkExpiry(s, v))}
|
||||
<button
|
||||
class="btn-action"
|
||||
class:btn-action--on={s.has_password}
|
||||
data-testid={`share-dialog-link-password-btn-${s.id}`}
|
||||
title={s.has_password
|
||||
? t('share.changePassword', 'Change password')
|
||||
: t('share.addPassword', 'Add password')}
|
||||
onclick={() => {
|
||||
const pw = window.prompt(
|
||||
s.has_password
|
||||
? t('share.passwordPrompt_clear', 'New password (blank to remove):')
|
||||
: t('share.passwordPrompt', 'Set a password:')
|
||||
);
|
||||
if (pw !== null) editLinkPassword(s, pw || null);
|
||||
}}><Icon name={s.has_password ? 'lock' : 'lock-open'} /></button
|
||||
>
|
||||
<button
|
||||
class="btn-action"
|
||||
data-testid={`share-dialog-link-copy-btn-${s.id}`}
|
||||
title={t('share.copy', 'Copy')}
|
||||
onclick={() => copy(s.url)}
|
||||
>
|
||||
<Icon name="copy" />
|
||||
</button>
|
||||
<button
|
||||
class="btn-action btn-action--delete"
|
||||
data-testid={`share-dialog-link-delete-btn-${s.id}`}
|
||||
title={t('common.delete', 'Delete')}
|
||||
onclick={() => removeLink(s)}><Icon name="trash" /></button
|
||||
>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#snippet footer()}
|
||||
<button class="btn btn-secondary" onclick={() => (open = false)}>
|
||||
<button
|
||||
class="btn btn-secondary"
|
||||
data-testid="share-dialog-close-btn"
|
||||
onclick={() => (open = false)}
|
||||
>
|
||||
{t('common.close', 'Close')}
|
||||
</button>
|
||||
{/snippet}
|
||||
|
||||
@@ -0,0 +1,68 @@
|
||||
import { it, expect, vi, beforeEach } from 'vitest';
|
||||
import { render, screen, fireEvent, waitFor } from '@testing-library/svelte';
|
||||
|
||||
const { ui } = vi.hoisted(() => ({ ui: { notify: vi.fn() } }));
|
||||
vi.mock('$lib/stores/ui.svelte', () => ({ ui }));
|
||||
vi.mock('$lib/utils/errors', () => ({ errorToast: vi.fn() }));
|
||||
vi.mock('$lib/api/endpoints/shares', () => ({
|
||||
copyShareLink: vi.fn(),
|
||||
createShare: vi.fn(),
|
||||
deleteShare: vi.fn(),
|
||||
listSharesForItem: vi.fn(),
|
||||
updateShare: vi.fn()
|
||||
}));
|
||||
vi.mock('$lib/api/endpoints/grants', () => ({
|
||||
createGrant: vi.fn(),
|
||||
expiryToIso: (v: string | null) => v,
|
||||
displayRole: (r: string) => r,
|
||||
fetchGrantsForResource: vi.fn(),
|
||||
notifyGrantRecipient: vi.fn(),
|
||||
revokeGrant: vi.fn(),
|
||||
updateGrantRole: vi.fn()
|
||||
}));
|
||||
vi.mock('$lib/api/endpoints/recipients', () => ({
|
||||
ensureResolvers: vi.fn(),
|
||||
isDirectoryAvailable: () => true,
|
||||
resolveRecipient: (_t: string, id: string) => ({ id, label: id }),
|
||||
searchRecipients: vi.fn(async () => [])
|
||||
}));
|
||||
|
||||
import { createShare, listSharesForItem } from '$lib/api/endpoints/shares';
|
||||
import { fetchGrantsForResource } from '$lib/api/endpoints/grants';
|
||||
import ShareDialog from './ShareDialog.svelte';
|
||||
|
||||
const m = (fn: unknown) => fn as ReturnType<typeof vi.fn>;
|
||||
const item = { id: 'f1', name: 'doc.txt', kind: 'file' as const };
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
m(fetchGrantsForResource).mockResolvedValue([]);
|
||||
m(listSharesForItem).mockResolvedValue([]);
|
||||
});
|
||||
|
||||
it('loads grants and shares when opened', async () => {
|
||||
render(ShareDialog, { props: { open: true, item } });
|
||||
await screen.findByTestId('share-dialog');
|
||||
await waitFor(() => expect(fetchGrantsForResource).toHaveBeenCalledWith('file', 'f1'));
|
||||
await waitFor(() => expect(listSharesForItem).toHaveBeenCalledWith('f1', 'file'));
|
||||
});
|
||||
|
||||
it('switches to the link tab and creates a public link', async () => {
|
||||
m(createShare).mockResolvedValue({ id: 's1', token: 'abc', has_password: false });
|
||||
render(ShareDialog, { props: { open: true, item } });
|
||||
await fireEvent.click(await screen.findByTestId('share-dialog-link-tab'));
|
||||
await fireEvent.input(screen.getByTestId('share-dialog-link-name-input'), {
|
||||
target: { value: 'My link' }
|
||||
});
|
||||
await fireEvent.click(screen.getByTestId('share-dialog-create-btn'));
|
||||
await waitFor(() =>
|
||||
expect(createShare).toHaveBeenCalledWith(
|
||||
expect.objectContaining({ itemId: 'f1', itemName: 'My link', itemType: 'file' })
|
||||
)
|
||||
);
|
||||
});
|
||||
|
||||
it('does not load when closed', () => {
|
||||
render(ShareDialog, { props: { open: false, item } });
|
||||
expect(fetchGrantsForResource).not.toHaveBeenCalled();
|
||||
});
|
||||
@@ -10,10 +10,11 @@
|
||||
aria-label={t('notifications.title', 'Notifications')}
|
||||
>
|
||||
{#each ui.toasts as toast (toast.id)}
|
||||
<div class="toast toast--{toast.kind}" role="status">
|
||||
<div class="toast toast--{toast.kind}" role="status" data-testid={`toaster-toast-${toast.id}`}>
|
||||
<span class="toast__msg">{toast.message}</span>
|
||||
<button
|
||||
class="toast__close"
|
||||
data-testid={`toaster-dismiss-btn-${toast.id}`}
|
||||
aria-label={t('common.dismiss', 'Dismiss')}
|
||||
onclick={() => ui.dismiss(toast.id)}
|
||||
>
|
||||
|
||||
@@ -78,10 +78,21 @@
|
||||
<svelte:window onkeydown={onKeydown} onmessage={onMessage} />
|
||||
|
||||
{#if open}
|
||||
<div class="wopi" role="dialog" aria-modal="true" aria-label={fileName}>
|
||||
<div
|
||||
class="wopi"
|
||||
role="dialog"
|
||||
data-testid="wopi-editor-dialog"
|
||||
aria-modal="true"
|
||||
aria-label={fileName}
|
||||
>
|
||||
<header class="wopi__bar">
|
||||
<span class="wopi__title">{fileName}</span>
|
||||
<button class="wopi__close" aria-label={t('common.close', 'Close')} onclick={close}>
|
||||
<button
|
||||
class="wopi__close"
|
||||
data-testid="wopi-editor-close-btn"
|
||||
aria-label={t('common.close', 'Close')}
|
||||
onclick={close}
|
||||
>
|
||||
<Icon name="times" />
|
||||
</button>
|
||||
</header>
|
||||
@@ -97,8 +108,18 @@
|
||||
target="wopi_frame"
|
||||
class="wopi__form"
|
||||
>
|
||||
<input type="hidden" name="access_token" value={token} />
|
||||
<input type="hidden" name="access_token_ttl" value={tokenTtl} />
|
||||
<input
|
||||
type="hidden"
|
||||
name="access_token"
|
||||
value={token}
|
||||
data-testid="wopi-editor-access-token-input"
|
||||
/>
|
||||
<input
|
||||
type="hidden"
|
||||
name="access_token_ttl"
|
||||
value={tokenTtl}
|
||||
data-testid="wopi-editor-access-token-ttl-input"
|
||||
/>
|
||||
</form>
|
||||
{/if}
|
||||
<iframe
|
||||
|
||||
@@ -0,0 +1,56 @@
|
||||
import { it, expect, vi, beforeEach } from 'vitest';
|
||||
import { render, screen, waitFor } from '@testing-library/svelte';
|
||||
|
||||
vi.mock('$lib/api/endpoints/wopi', () => ({ getEditorUrlWithFallback: vi.fn() }));
|
||||
vi.mock('$lib/utils/errors', () => ({ errorToast: vi.fn() }));
|
||||
|
||||
import { getEditorUrlWithFallback } from '$lib/api/endpoints/wopi';
|
||||
import { errorToast } from '$lib/utils/errors';
|
||||
import WopiEditor from './WopiEditor.svelte';
|
||||
|
||||
const g = getEditorUrlWithFallback as unknown as ReturnType<typeof vi.fn>;
|
||||
const et = errorToast as unknown as ReturnType<typeof vi.fn>;
|
||||
|
||||
beforeEach(() => vi.clearAllMocks());
|
||||
|
||||
it('opens, loads the editor URL, and renders the dialog', async () => {
|
||||
g.mockResolvedValue({
|
||||
editor_url: 'https://wopi/edit',
|
||||
access_token: 'tok',
|
||||
access_token_ttl: 9999
|
||||
});
|
||||
render(WopiEditor, { props: { open: true, fileId: 'f1', fileName: 'doc.docx', action: 'edit' } });
|
||||
await waitFor(() => expect(g).toHaveBeenCalledWith('f1', 'doc.docx', 'edit'));
|
||||
expect(screen.getByTestId('wopi-editor-dialog')).toBeTruthy();
|
||||
});
|
||||
|
||||
it('drops the spinner on an App_LoadingStatus message and closes on UI_Close', async () => {
|
||||
g.mockResolvedValue({ editor_url: 'u', access_token: 't', access_token_ttl: 1 });
|
||||
const onclose = vi.fn();
|
||||
render(WopiEditor, { props: { open: true, fileId: 'f1', fileName: 'd.docx', onclose } });
|
||||
await waitFor(() => screen.getByTestId('wopi-editor-dialog'));
|
||||
|
||||
window.dispatchEvent(
|
||||
new MessageEvent('message', {
|
||||
data: JSON.stringify({
|
||||
MessageId: 'App_LoadingStatus',
|
||||
Values: { Status: 'Document_Loaded' }
|
||||
})
|
||||
})
|
||||
);
|
||||
window.dispatchEvent(
|
||||
new MessageEvent('message', { data: JSON.stringify({ MessageId: 'UI_Close' }) })
|
||||
);
|
||||
await waitFor(() => expect(onclose).toHaveBeenCalled());
|
||||
});
|
||||
|
||||
it('reports a load failure via errorToast', async () => {
|
||||
g.mockRejectedValue(new Error('no wopi host'));
|
||||
render(WopiEditor, { props: { open: true, fileId: 'f1', fileName: 'd.docx' } });
|
||||
await waitFor(() => expect(et).toHaveBeenCalled());
|
||||
});
|
||||
|
||||
it('does not load when closed', () => {
|
||||
render(WopiEditor, { props: { open: false, fileId: 'f1', fileName: 'd.docx' } });
|
||||
expect(g).not.toHaveBeenCalled();
|
||||
});
|
||||
Reference in New Issue
Block a user