llama.cpp/tools/ui/tests/stories/SidebarNavigation.stories.svelte

<script module lang="ts">
	import { defineMeta } from '@storybook/addon-svelte-csf';
	import SidebarNavigation from '$lib/components/app/navigation/SidebarNavigation/SidebarNavigation.svelte';
	import { waitFor } from 'storybook/test';
	import { screen } from 'storybook/test';

	const { Story } = defineMeta({
		title: 'Components/SidebarNavigation',
		component: SidebarNavigation,
		parameters: {
			layout: 'centered'
		}
	});
</script>

<script lang="ts">
	// Mock conversations for the sidebar
	const mockConversations: DatabaseConversation[] = [
		{
			id: 'conv-1',
			name: 'Getting Started with AI',
			lastModified: Date.now() - 1000 * 60 * 5, // 5 minutes ago
			currNode: 'msg-1'
		},
		{
			id: 'conv-2',
			name: 'Python Programming Help',
			lastModified: Date.now() - 1000 * 60 * 60 * 2, // 2 hours ago
			currNode: 'msg-2'
		},
		{
			id: 'conv-3',
			name: 'Creative Writing Ideas',
			lastModified: Date.now() - 1000 * 60 * 60 * 24, // 1 day ago
			currNode: 'msg-3'
		},
		{
			id: 'conv-4',
			name: 'This is a very long conversation title that should be truncated properly when displayed',
			lastModified: Date.now() - 1000 * 60 * 60 * 24 * 3, // 3 days ago
			currNode: 'msg-4'
		},
		{
			id: 'conv-5',
			name: 'Math Problem Solving',
			lastModified: Date.now() - 1000 * 60 * 60 * 24 * 7, // 1 week ago
			currNode: 'msg-5'
		}
	];
</script>

<Story
	asChild
	name="Default"
	play={async () => {
		const { conversationsStore } = await import('$lib/stores/conversations.svelte');

		waitFor(() =>
			setTimeout(() => {
				conversationsStore.conversations = mockConversations;
			}, 0)
		);
	}}
>
	<div class="flex-column h-screen w-72 bg-background">
		<SidebarNavigation />
	</div>
</Story>

<Story
	asChild
	name="SearchActive"
	play={async ({ userEvent }) => {
		const { conversationsStore } = await import('$lib/stores/conversations.svelte');

		waitFor(() =>
			setTimeout(() => {
				conversationsStore.conversations = mockConversations;
			}, 0)
		);

		// Expand sidebar first, then click Search in the expanded button list
		const logoTrigger = screen.getByRole('button', { name: /expand navigation/i });
		await userEvent.click(logoTrigger);
		const searchTrigger = screen.getByText('Search');
		userEvent.click(searchTrigger);
	}}
>
	<div class="flex-column h-screen w-72 bg-background">
		<SidebarNavigation />
	</div>
</Story>

<Story
	asChild
	name="Empty"
	play={async () => {
		// Mock empty conversations store
		const { conversationsStore } = await import('$lib/stores/conversations.svelte');
		conversationsStore.conversations = [];
	}}
>
	<div class="flex-column h-screen w-72 bg-background">
		<SidebarNavigation />
	</div>
</Story>