add test

src/components/dialogs/__tests__/ChooseFavoriteGroupDialog.test.js

@@ -0,0 +1,60 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { ref } from 'vue';
+
+const mocks = vi.hoisted(() => ({
+    addFavorite: vi.fn(() => Promise.resolve()),
+    deleteFavoriteNoConfirm: vi.fn(),
+    toastSuccess: vi.fn(),
+    favoriteDialog: { __v_isRef: true, value: { visible: true, type: 'friend', objectId: 'usr_1', currentGroup: null } }
+}));
+
+vi.mock('pinia', async (i) => ({ ...(await i()), storeToRefs: (s) => s }));
+vi.mock('vue-i18n', () => ({ useI18n: () => ({ t: (k) => k }) }));
+vi.mock('vue-sonner', () => ({ toast: { success: (...a) => mocks.toastSuccess(...a) } }));
+vi.mock('../../../stores', () => ({
+    useFavoriteStore: () => ({
+        favoriteFriendGroups: ref([{ key: 'group_1', type: 'friend', name: 'group_1', displayName: 'G1', count: 0, capacity: 100 }]),
+        favoriteAvatarGroups: ref([]),
+        favoriteWorldGroups: ref([]),
+        favoriteDialog: mocks.favoriteDialog,
+        localWorldFavoriteGroups: ref([]),
+        localAvatarFavoriteGroups: ref([]),
+        localFriendFavoriteGroups: ref([]),
+        localWorldFavGroupLength: vi.fn(() => 0),
+        hasLocalWorldFavorite: vi.fn(() => false),
+        hasLocalAvatarFavorite: vi.fn(() => false),
+        localAvatarFavGroupLength: vi.fn(() => 0),
+        deleteFavoriteNoConfirm: (...a) => mocks.deleteFavoriteNoConfirm(...a),
+        localFriendFavGroupLength: vi.fn(() => 0),
+        hasLocalFriendFavorite: vi.fn(() => false)
+    }),
+    useUserStore: () => ({ isLocalUserVrcPlusSupporter: ref(true) })
+}));
+vi.mock('../../../api', () => ({ favoriteRequest: { addFavorite: (...a) => mocks.addFavorite(...a) } }));
+vi.mock('@/components/ui/dialog', () => ({ Dialog: { template: '<div><slot /></div>' }, DialogContent: { template: '<div><slot /></div>' }, DialogHeader: { template: '<div><slot /></div>' }, DialogTitle: { template: '<div><slot /></div>' } }));
+vi.mock('@/components/ui/button', () => ({ Button: { emits: ['click'], template: '<button data-testid="btn" @click="$emit(\'click\')"><slot /></button>' } }));
+vi.mock('lucide-vue-next', () => ({ Check: { template: '<i />' } }));
+
+import ChooseFavoriteGroupDialog from '../ChooseFavoriteGroupDialog.vue';
+
+describe('ChooseFavoriteGroupDialog.vue', () => {
+    beforeEach(() => {
+        mocks.addFavorite.mockClear();
+        mocks.toastSuccess.mockClear();
+        mocks.favoriteDialog.value = { visible: true, type: 'friend', objectId: 'usr_1', currentGroup: null };
+    });
+
+    it('runs delete action for current group', async () => {
+        mocks.favoriteDialog.value = {
+            visible: true,
+            type: 'friend',
+            objectId: 'usr_1',
+            currentGroup: { key: 'group_1', displayName: 'G1', count: 0, capacity: 100 }
+        };
+        const wrapper = mount(ChooseFavoriteGroupDialog);
+        await wrapper.get('[data-testid="btn"]').trigger('click');
+
+        expect(mocks.deleteFavoriteNoConfirm).toHaveBeenCalledWith('usr_1');
+    });
+});

src/components/dialogs/__tests__/ImageCropDialog.test.js

@@ -0,0 +1,39 @@
+import { describe, expect, it, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+const mocks = vi.hoisted(() => ({
+    resetCropState: vi.fn(),
+    loadImageForCrop: vi.fn(),
+    getCroppedBlob: vi.fn(async () => new Blob(['x'], { type: 'image/png' })),
+    cropperRef: { value: null },
+    cropperImageSrc: { value: 'blob://img' }
+}));
+
+vi.mock('vue-i18n', () => ({ useI18n: () => ({ t: (k) => k }) }));
+vi.mock('../../composables/useImageCropper', () => ({
+    useImageCropper: () => ({
+        cropperRef: mocks.cropperRef,
+        cropperImageSrc: mocks.cropperImageSrc,
+        resetCropState: (...a) => mocks.resetCropState(...a),
+        loadImageForCrop: (...a) => mocks.loadImageForCrop(...a),
+        getCroppedBlob: (...a) => mocks.getCroppedBlob(...a)
+    })
+}));
+vi.mock('@/components/ui/dialog', () => ({ Dialog: { template: '<div><slot /></div>' }, DialogContent: { template: '<div><slot /></div>' }, DialogHeader: { template: '<div><slot /></div>' }, DialogTitle: { template: '<div><slot /></div>' }, DialogFooter: { template: '<div><slot /></div>' } }));
+vi.mock('@/components/ui/button', () => ({ Button: { emits: ['click'], template: '<button data-testid="btn" @click="$emit(\'click\')"><slot /></button>' } }));
+vi.mock('@/components/ui/slider', () => ({ Slider: { emits: ['value-commit'], template: '<div />' } }));
+vi.mock('@/components/ui/spinner', () => ({ Spinner: { template: '<div />' } }));
+vi.mock('@/components/ui/tooltip/TooltipWrapper.vue', () => ({ default: { template: '<div><slot /></div>' } }));
+vi.mock('vue-advanced-cropper', () => ({ Cropper: { emits: ['change'], template: '<div />' } }));
+vi.mock('lucide-vue-next', () => new Proxy({}, { get: () => ({ template: '<i />' }) }));
+
+import ImageCropDialog from '../ImageCropDialog.vue';
+
+describe('ImageCropDialog.vue', () => {
+    it('renders crop dialog title', () => {
+        const wrapper = mount(ImageCropDialog, {
+            props: { open: true, title: 'Crop', aspectRatio: 1, file: null }
+        });
+        expect(wrapper.text()).toContain('Crop');
+    });
+});

src/components/dialogs/__tests__/InviteGroupDialog.test.js

@@ -0,0 +1,40 @@
+import { describe, expect, it, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { ref } from 'vue';
+
+const mocks = vi.hoisted(() => ({
+    confirm: vi.fn(async () => ({ ok: true })),
+    sendGroupInvite: vi.fn(async () => ({})),
+    getGroup: vi.fn(async () => ({ json: { id: 'grp_1' } })),
+    fetch: vi.fn(async () => ({ ref: { name: 'Group One' } })),
+    setString: vi.fn(),
+    getString: vi.fn(async () => ''),
+    applyGroup: vi.fn((g) => g),
+    inviteDialog: { __v_isRef: true, value: { visible: true, loading: false, groupId: 'grp_1', userId: '', userIds: ['usr_1'], groupName: '', userObject: null } }
+}));
+
+vi.mock('pinia', async (i) => ({ ...(await i()), storeToRefs: (s) => s }));
+vi.mock('vue-i18n', () => ({ useI18n: () => ({ t: (k) => k }) }));
+vi.mock('vue-sonner', () => ({ toast: { error: vi.fn() } }));
+vi.mock('../../../shared/utils', () => ({ hasGroupPermission: () => true }));
+vi.mock('../../../composables/useUserDisplay', () => ({ useUserDisplay: () => ({ userImage: () => '', userStatusClass: () => '' }) }));
+vi.mock('../../../stores', () => ({
+    useFriendStore: () => ({ vipFriends: ref([]), onlineFriends: ref([]), activeFriends: ref([]), offlineFriends: ref([]) }),
+    useGroupStore: () => ({ currentUserGroups: ref(new Map()), inviteGroupDialog: mocks.inviteDialog, applyGroup: (...a) => mocks.applyGroup(...a) }),
+    useModalStore: () => ({ confirm: (...a) => mocks.confirm(...a) })
+}));
+vi.mock('../../../api', () => ({ groupRequest: { sendGroupInvite: (...a) => mocks.sendGroupInvite(...a), getGroup: (...a) => mocks.getGroup(...a) }, queryRequest: { fetch: (...a) => mocks.fetch(...a) } }));
+vi.mock('../../../services/config', () => ({ default: { getString: (...a) => mocks.getString(...a), setString: (...a) => mocks.setString(...a) } }));
+vi.mock('@/components/ui/dialog', () => ({ Dialog: { template: '<div><slot /></div>' }, DialogContent: { template: '<div><slot /></div>' }, DialogHeader: { template: '<div><slot /></div>' }, DialogTitle: { template: '<div><slot /></div>' }, DialogFooter: { template: '<div><slot /></div>' } }));
+vi.mock('@/components/ui/button', () => ({ Button: { emits: ['click'], template: '<button data-testid="btn" @click="$emit(\'click\')"><slot /></button>' } }));
+vi.mock('../../ui/virtual-combobox', () => ({ VirtualCombobox: { template: '<div />' } }));
+vi.mock('lucide-vue-next', () => ({ Check: { template: '<i />' } }));
+
+import InviteGroupDialog from '../InviteGroupDialog.vue';
+
+describe('InviteGroupDialog.vue', () => {
+    it('renders invite dialog', async () => {
+        const wrapper = mount(InviteGroupDialog);
+        expect(wrapper.text()).toContain('dialog.invite_to_group.header');
+    });
+});

src/components/dialogs/__tests__/LaunchDialog.test.js

@@ -0,0 +1,55 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { ref } from 'vue';
+
+const mocks = vi.hoisted(() => ({
+    selfInvite: vi.fn(async () => ({})),
+    writeText: vi.fn(),
+    getBool: vi.fn(async () => false),
+    launchDialogData: { value: { visible: true, loading: true, tag: 'wrld_1:123', shortName: 'abc' } }
+}));
+
+Object.assign(globalThis, { navigator: { clipboard: { writeText: (...a) => mocks.writeText(...a) } } });
+
+vi.mock('pinia', async (i) => ({ ...(await i()), storeToRefs: (s) => s }));
+vi.mock('vue-i18n', () => ({ useI18n: () => ({ t: (k) => k }) }));
+vi.mock('vue-sonner', () => ({ toast: { success: vi.fn(), error: vi.fn() } }));
+vi.mock('../../../stores', () => ({
+    useFriendStore: () => ({ friends: ref(new Map()) }),
+    useGameStore: () => ({ isGameRunning: ref(false) }),
+    useInviteStore: () => ({ canOpenInstanceInGame: ref(false) }),
+    useLaunchStore: () => ({ launchDialogData: mocks.launchDialogData, launchGame: vi.fn(), tryOpenInstanceInVrc: vi.fn() }),
+    useLocationStore: () => ({ lastLocation: ref({ friendList: new Map() }) }),
+    useModalStore: () => ({ confirm: vi.fn() })
+}));
+vi.mock('../../../shared/utils', () => ({
+    getLaunchURL: () => 'vrchat://launch',
+    isRealInstance: () => true,
+    parseLocation: () => ({ isRealInstance: true, worldId: 'wrld_1', instanceId: '123', tag: 'wrld_1:123' })
+}));
+vi.mock('../../../composables/useInviteChecks', () => ({ useInviteChecks: () => ({ checkCanInvite: () => true }) }));
+vi.mock('../../../api', () => ({ instanceRequest: { selfInvite: (...a) => mocks.selfInvite(...a), getInstanceShortName: vi.fn() }, queryRequest: { fetch: vi.fn() } }));
+vi.mock('../../../services/config', () => ({ default: { getBool: (...a) => mocks.getBool(...a), setBool: vi.fn() } }));
+vi.mock('@/components/ui/dialog', () => ({ Dialog: { template: '<div><slot /></div>' }, DialogContent: { template: '<div><slot /></div>' }, DialogHeader: { template: '<div><slot /></div>' }, DialogTitle: { template: '<div><slot /></div>' }, DialogDescription: { template: '<div><slot /></div>' }, DialogFooter: { template: '<div><slot /></div>' } }));
+vi.mock('@/components/ui/dropdown-menu', () => ({ DropdownMenu: { template: '<div><slot /></div>' }, DropdownMenuTrigger: { template: '<div><slot /></div>' }, DropdownMenuContent: { template: '<div><slot /></div>' }, DropdownMenuItem: { template: '<div><slot /></div>' } }));
+vi.mock('@/components/ui/field', () => ({ Field: { template: '<div><slot /></div>' }, FieldGroup: { template: '<div><slot /></div>' }, FieldLabel: { template: '<div><slot /></div>' }, FieldContent: { template: '<div><slot /></div>' } }));
+vi.mock('@/components/ui/button', () => ({ Button: { emits: ['click'], template: '<button data-testid="btn" @click="$emit(\'click\')"><slot /></button>' } }));
+vi.mock('@/components/ui/button-group', () => ({ ButtonGroup: { template: '<div><slot /></div>' } }));
+vi.mock('@/components/ui/input-group', () => ({ InputGroupField: { template: '<input />' } }));
+vi.mock('@/components/ui/tooltip', () => ({ TooltipWrapper: { template: '<div><slot /></div>' } }));
+vi.mock('../InviteDialog/InviteDialog.vue', () => ({ default: { template: '<div />' } }));
+vi.mock('lucide-vue-next', () => ({ Copy: { template: '<i />' }, Info: { template: '<i />' }, MoreHorizontal: { template: '<i />' } }));
+
+import LaunchDialog from '../LaunchDialog.vue';
+
+describe('LaunchDialog.vue', () => {
+    beforeEach(() => {
+        mocks.selfInvite.mockClear();
+    });
+
+    it('renders launch dialog header', async () => {
+        const wrapper = mount(LaunchDialog);
+        await Promise.resolve();
+        expect(wrapper.text()).toContain('dialog.launch.header');
+    });
+});

src/components/dialogs/__tests__/MainDialogContainer.test.js

@@ -0,0 +1,48 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { ref } from 'vue';
+
+const mocks = vi.hoisted(() => ({
+    closeMainDialog: vi.fn(),
+    handleBreadcrumbClick: vi.fn(),
+    dialogCrumbs: { value: [{ type: 'user', id: 'u1', label: 'User' }, { type: 'world', id: 'w1', label: 'World' }] },
+    userVisible: { value: true }
+}));
+
+vi.mock('pinia', async (i) => ({ ...(await i()), storeToRefs: (s) => s }));
+vi.mock('@/stores', () => ({
+    useUiStore: () => ({ dialogCrumbs: mocks.dialogCrumbs.value, closeMainDialog: (...a) => mocks.closeMainDialog(...a), handleBreadcrumbClick: (...a) => mocks.handleBreadcrumbClick(...a) }),
+    useUserStore: () => ({ userDialog: { visible: mocks.userVisible.value } }),
+    useWorldStore: () => ({ worldDialog: { visible: false } }),
+    useAvatarStore: () => ({ avatarDialog: { visible: false } }),
+    useGroupStore: () => ({ groupDialog: { visible: false } }),
+    useInstanceStore: () => ({ previousInstancesInfoDialog: ref({ visible: false }), previousInstancesListDialog: ref({ visible: false, variant: 'user' }) })
+}));
+vi.mock('@/components/ui/dialog', () => ({ Dialog: { template: '<div><slot /></div>' }, DialogContent: { template: '<div><slot /></div>' } }));
+vi.mock('@/components/ui/breadcrumb', () => ({ Breadcrumb: { template: '<div><slot /></div>' }, BreadcrumbList: { template: '<div><slot /></div>' }, BreadcrumbItem: { template: '<div><slot /></div>' }, BreadcrumbLink: { template: '<div><slot /></div>' }, BreadcrumbSeparator: { template: '<span>/</span>' }, BreadcrumbPage: { template: '<span><slot /></span>' }, BreadcrumbEllipsis: { template: '<span>...</span>' } }));
+vi.mock('@/components/ui/dropdown-menu', () => ({ DropdownMenu: { template: '<div><slot /></div>' }, DropdownMenuTrigger: { template: '<div><slot /></div>' }, DropdownMenuContent: { template: '<div><slot /></div>' }, DropdownMenuItem: { emits: ['click'], template: '<button data-testid="crumb-dd" @click="$emit(\'click\')"><slot /></button>' } }));
+vi.mock('@/components/ui/button', () => ({ Button: { emits: ['click'], template: '<button data-testid="btn" @click="$emit(\'click\')"><slot /></button>' } }));
+vi.mock('@/components/ui/tooltip', () => ({ TooltipWrapper: { template: '<div><slot /></div>' } }));
+vi.mock('lucide-vue-next', () => ({ ArrowLeft: { template: '<i />' } }));
+vi.mock('../AvatarDialog/AvatarDialog.vue', () => ({ default: { template: '<div />' } }));
+vi.mock('../GroupDialog/GroupDialog.vue', () => ({ default: { template: '<div />' } }));
+vi.mock('../PreviousInstancesDialog/PreviousInstancesInfoDialog.vue', () => ({ default: { template: '<div />' } }));
+vi.mock('../PreviousInstancesDialog/PreviousInstancesListDialog.vue', () => ({ default: { template: '<div />' } }));
+vi.mock('../UserDialog/UserDialog.vue', () => ({ default: { template: '<div data-testid="user-dialog" />' } }));
+vi.mock('../WorldDialog/WorldDialog.vue', () => ({ default: { template: '<div />' } }));
+
+import MainDialogContainer from '../MainDialogContainer.vue';
+
+describe('MainDialogContainer.vue', () => {
+    beforeEach(() => {
+        mocks.handleBreadcrumbClick.mockClear();
+    });
+
+    it('renders active dialog and handles breadcrumb back click', async () => {
+        const wrapper = mount(MainDialogContainer);
+        expect(wrapper.find('[data-testid="user-dialog"]').exists()).toBe(true);
+
+        await wrapper.get('[data-testid="btn"]').trigger('click');
+        expect(mocks.handleBreadcrumbClick).toHaveBeenCalled();
+    });
+});

src/components/dialogs/__tests__/SendBoopDialog.test.js

@@ -0,0 +1,32 @@
+import { describe, expect, it, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+const mocks = vi.hoisted(() => ({
+    sendBoop: vi.fn(),
+    fetch: vi.fn(async () => ({ ref: { displayName: 'User A' } })),
+    boopDialog: { value: { visible: true, userId: 'usr_1' } }
+}));
+
+vi.mock('pinia', async (i) => ({ ...(await i()), storeToRefs: (s) => s }));
+vi.mock('vue-i18n', () => ({ useI18n: () => ({ t: (k) => k }) }));
+vi.mock('../../../api', () => ({ miscRequest: { sendBoop: (...a) => mocks.sendBoop(...a) }, notificationRequest: { hideNotificationV2: vi.fn() }, queryRequest: { fetch: (...a) => mocks.fetch(...a) } }));
+vi.mock('../../../stores', () => ({
+    useUserStore: () => ({ sendBoopDialog: mocks.boopDialog, isLocalUserVrcPlusSupporter: { value: false } }),
+    useNotificationStore: () => ({ notificationTable: { value: { data: [] } }, isNotificationExpired: () => false, handleNotificationV2Hide: vi.fn() }),
+    useGalleryStore: () => ({ showGalleryPage: vi.fn(), refreshEmojiTable: vi.fn(), emojiTable: { value: [] } })
+}));
+vi.mock('../../../shared/constants/photon.js', () => ({ photonEmojis: ['Wave'] }));
+vi.mock('@/components/ui/dialog', () => ({ Dialog: { template: '<div><slot /></div>' }, DialogContent: { template: '<div><slot /></div>' }, DialogHeader: { template: '<div><slot /></div>' }, DialogTitle: { template: '<div><slot /></div>' }, DialogFooter: { template: '<div><slot /></div>' } }));
+vi.mock('@/components/ui/button', () => ({ Button: { emits: ['click'], template: '<button data-testid="btn" @click="$emit(\'click\')"><slot /></button>' } }));
+vi.mock('../../ui/virtual-combobox', () => ({ VirtualCombobox: { template: '<div />' } }));
+vi.mock('../../Emoji.vue', () => ({ default: { template: '<div />' } }));
+vi.mock('lucide-vue-next', () => ({ Check: { template: '<i />' } }));
+
+import SendBoopDialog from '../SendBoopDialog.vue';
+
+describe('SendBoopDialog.vue', () => {
+    it('renders boop dialog content', async () => {
+        const wrapper = mount(SendBoopDialog);
+        expect(wrapper.text()).toContain('dialog.boop_dialog.header');
+    });
+});

src/components/dialogs/__tests__/TableLimitsDialog.test.js

@@ -0,0 +1,40 @@
+import { describe, expect, it, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+const mocks = vi.hoisted(() => ({
+    close: vi.fn(),
+    save: vi.fn(),
+    dialog: { value: { visible: true, maxTableSize: '1000', searchLimit: '100' } }
+}));
+
+vi.mock('pinia', async (i) => ({ ...(await i()), storeToRefs: (s) => s }));
+vi.mock('vue-i18n', () => ({ useI18n: () => ({ t: (k) => k }) }));
+vi.mock('../../../stores', () => ({
+    useAppearanceSettingsStore: () => ({
+        tableLimitsDialog: mocks.dialog,
+        closeTableLimitsDialog: (...a) => mocks.close(...a),
+        saveTableLimitsDialog: (...a) => mocks.save(...a),
+        TABLE_MAX_SIZE_MIN: 100,
+        TABLE_MAX_SIZE_MAX: 5000,
+        SEARCH_LIMIT_MIN: 10,
+        SEARCH_LIMIT_MAX: 1000
+    })
+}));
+vi.mock('@/components/ui/dialog', () => ({ Dialog: { template: '<div><slot /></div>' }, DialogContent: { template: '<div><slot /></div>' }, DialogHeader: { template: '<div><slot /></div>' }, DialogTitle: { template: '<div><slot /></div>' }, DialogDescription: { template: '<div><slot /></div>' }, DialogFooter: { template: '<div><slot /></div>' } }));
+vi.mock('@/components/ui/field', () => ({ Field: { template: '<div><slot /></div>' }, FieldGroup: { template: '<div><slot /></div>' }, FieldLabel: { template: '<div><slot /></div>' }, FieldContent: { template: '<div><slot /></div>' } }));
+vi.mock('@/components/ui/button', () => ({ Button: { emits: ['click'], template: '<button data-testid="btn" :disabled="$attrs.disabled" @click="$emit(\'click\')"><slot /></button>' } }));
+vi.mock('@/components/ui/input-group', () => ({ InputGroupField: { template: '<input />' } }));
+
+import TableLimitsDialog from '../TableLimitsDialog.vue';
+
+describe('TableLimitsDialog.vue', () => {
+    it('disables save when limits are invalid and calls close', async () => {
+        mocks.dialog.value.maxTableSize = '1';
+        const wrapper = mount(TableLimitsDialog);
+        const buttons = wrapper.findAll('[data-testid="btn"]');
+
+        expect(buttons[1].attributes('disabled')).toBeDefined();
+        await buttons[0].trigger('click');
+        expect(mocks.close).toHaveBeenCalled();
+    });
+});