mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-24 01:03:50 +02:00
465 lines
15 KiB
JavaScript
465 lines
15 KiB
JavaScript
import { beforeEach, describe, expect, test, vi } from 'vitest';
|
|
import { createI18n } from 'vue-i18n';
|
|
import { createTestingPinia } from '@pinia/testing';
|
|
import { mount } from '@vue/test-utils';
|
|
import { ref } from 'vue';
|
|
|
|
import FriendsLocationsCard from '../FriendsLocationsCard.vue';
|
|
import en from '../../../../localization/en.json';
|
|
|
|
vi.mock('../../../../views/Feed/Feed.vue', () => ({
|
|
default: { template: '<div />' }
|
|
}));
|
|
vi.mock('../../../../views/Feed/columns.jsx', () => ({
|
|
columns: []
|
|
}));
|
|
vi.mock('../../../../plugin/router', () => ({
|
|
router: {
|
|
beforeEach: vi.fn(),
|
|
push: vi.fn(),
|
|
replace: vi.fn(),
|
|
currentRoute: ref({ path: '/', name: '', meta: {} }),
|
|
isReady: vi.fn().mockResolvedValue(true)
|
|
},
|
|
initRouter: vi.fn()
|
|
}));
|
|
vi.mock('vue-router', async (importOriginal) => {
|
|
const actual = await importOriginal();
|
|
return {
|
|
...actual,
|
|
useRouter: vi.fn(() => ({
|
|
push: vi.fn(),
|
|
replace: vi.fn(),
|
|
currentRoute: ref({ path: '/', name: '', meta: {} })
|
|
}))
|
|
};
|
|
});
|
|
vi.mock('../../../../plugin/interopApi', () => ({
|
|
initInteropApi: vi.fn()
|
|
}));
|
|
vi.mock('../../../../service/database', () => ({
|
|
database: new Proxy(
|
|
{},
|
|
{
|
|
get: (_target, prop) => {
|
|
if (prop === '__esModule') return false;
|
|
return vi.fn().mockResolvedValue(null);
|
|
}
|
|
}
|
|
)
|
|
}));
|
|
vi.mock('../../../../service/config', () => ({
|
|
default: {
|
|
init: vi.fn(),
|
|
getString: vi
|
|
.fn()
|
|
.mockImplementation((_key, defaultValue) => defaultValue ?? '{}'),
|
|
setString: vi.fn(),
|
|
getBool: vi
|
|
.fn()
|
|
.mockImplementation((_key, defaultValue) => defaultValue ?? false),
|
|
setBool: vi.fn(),
|
|
getInt: vi
|
|
.fn()
|
|
.mockImplementation((_key, defaultValue) => defaultValue ?? 0),
|
|
setInt: vi.fn(),
|
|
getFloat: vi
|
|
.fn()
|
|
.mockImplementation((_key, defaultValue) => defaultValue ?? 0),
|
|
setFloat: vi.fn(),
|
|
getObject: vi.fn().mockReturnValue(null),
|
|
setObject: vi.fn(),
|
|
getArray: vi.fn().mockReturnValue([]),
|
|
setArray: vi.fn(),
|
|
remove: vi.fn()
|
|
}
|
|
}));
|
|
vi.mock('../../../../service/jsonStorage', () => ({
|
|
default: vi.fn()
|
|
}));
|
|
vi.mock('../../../../service/watchState', () => ({
|
|
watchState: { isLoggedIn: false }
|
|
}));
|
|
vi.mock('../../../../shared/utils/world', () => ({
|
|
getWorldName: vi.fn().mockResolvedValue(''),
|
|
isRpcWorld: vi.fn().mockReturnValue(false)
|
|
}));
|
|
vi.mock('../../../../shared/utils/group', () => ({
|
|
getGroupName: vi.fn().mockResolvedValue(''),
|
|
hasGroupPermission: vi.fn().mockReturnValue(false),
|
|
hasGroupModerationPermission: vi.fn().mockReturnValue(false)
|
|
}));
|
|
|
|
const {
|
|
mockSendRequestInvite,
|
|
mockSendInvite,
|
|
mockSelfInvite,
|
|
mockGetCachedWorld
|
|
} = vi.hoisted(() => ({
|
|
mockSendRequestInvite: vi.fn().mockResolvedValue({}),
|
|
mockSendInvite: vi.fn().mockResolvedValue({}),
|
|
mockSelfInvite: vi.fn().mockResolvedValue({}),
|
|
mockGetCachedWorld: vi
|
|
.fn()
|
|
.mockResolvedValue({ ref: { name: 'Test World' } })
|
|
}));
|
|
|
|
vi.mock('../../../../api', () => {
|
|
const p = (overrides = {}) =>
|
|
new Proxy(overrides, {
|
|
get: (target, prop) => {
|
|
if (prop in target) return target[prop];
|
|
if (prop === '__esModule') return false;
|
|
return vi.fn().mockResolvedValue({});
|
|
}
|
|
});
|
|
return {
|
|
request: p(),
|
|
userRequest: p(),
|
|
worldRequest: p({
|
|
getCachedWorld: (...args) => mockGetCachedWorld(...args)
|
|
}),
|
|
instanceRequest: p({
|
|
selfInvite: (...args) => mockSelfInvite(...args)
|
|
}),
|
|
friendRequest: p(),
|
|
avatarRequest: p(),
|
|
notificationRequest: p({
|
|
sendRequestInvite: (...args) => mockSendRequestInvite(...args),
|
|
sendInvite: (...args) => mockSendInvite(...args)
|
|
}),
|
|
playerModerationRequest: p(),
|
|
avatarModerationRequest: p(),
|
|
favoriteRequest: p(),
|
|
vrcPlusIconRequest: p(),
|
|
vrcPlusImageRequest: p(),
|
|
inviteMessagesRequest: p(),
|
|
miscRequest: p(),
|
|
authRequest: p(),
|
|
groupRequest: p(),
|
|
inventoryRequest: p(),
|
|
propRequest: p(),
|
|
imageRequest: p()
|
|
};
|
|
});
|
|
|
|
const i18n = createI18n({
|
|
locale: 'en',
|
|
fallbackLocale: 'en',
|
|
legacy: false,
|
|
globalInjection: false,
|
|
missingWarn: false,
|
|
fallbackWarn: false,
|
|
messages: { en }
|
|
});
|
|
|
|
// Stub all complex UI components — render slots transparently
|
|
const stubs = {
|
|
ContextMenu: { template: '<div data-testid="context-menu"><slot /></div>' },
|
|
ContextMenuTrigger: {
|
|
template: '<div data-testid="context-menu-trigger"><slot /></div>',
|
|
props: ['as-child']
|
|
},
|
|
ContextMenuContent: {
|
|
template: '<div data-testid="context-menu-content"><slot /></div>'
|
|
},
|
|
ContextMenuItem: {
|
|
template:
|
|
'<button data-testid="context-menu-item" :data-disabled="disabled" @click="$emit(\'click\')"><slot /></button>',
|
|
props: ['disabled'],
|
|
emits: ['click']
|
|
},
|
|
ContextMenuSeparator: {
|
|
template: '<hr data-testid="context-menu-separator" />'
|
|
},
|
|
Card: {
|
|
template: '<div data-testid="card"><slot /></div>',
|
|
props: ['class', 'style']
|
|
},
|
|
Avatar: { template: '<div><slot /></div>', props: ['class', 'style'] },
|
|
AvatarImage: { template: '<img />', props: ['src'] },
|
|
AvatarFallback: { template: '<span><slot /></span>' },
|
|
Location: {
|
|
template: '<span class="location-stub" />',
|
|
props: ['location', 'traveling', 'link', 'class']
|
|
},
|
|
Pencil: { template: '<span class="pencil-icon" />', props: ['class'] },
|
|
TooltipWrapper: {
|
|
template: '<span><slot /></span>',
|
|
props: ['content', 'disabled', 'delayDuration', 'side']
|
|
}
|
|
};
|
|
|
|
/**
|
|
*
|
|
* @param overrides
|
|
*/
|
|
function makeFriend(overrides = {}) {
|
|
return {
|
|
id: 'usr_test123',
|
|
name: 'TestUser',
|
|
state: 'online',
|
|
status: 'active',
|
|
ref: {
|
|
location: 'wrld_12345:67890~region(us)',
|
|
travelingToLocation: '',
|
|
statusDescription: 'Hello World',
|
|
status: 'active'
|
|
},
|
|
pendingOffline: false,
|
|
worldName: 'Test World',
|
|
...overrides
|
|
};
|
|
}
|
|
|
|
/**
|
|
*
|
|
* @param props
|
|
* @param storeState
|
|
*/
|
|
function mountCard(props = {}, storeState = {}) {
|
|
const friend = props.friend ?? makeFriend();
|
|
return mount(FriendsLocationsCard, {
|
|
props: { friend, ...props },
|
|
global: {
|
|
plugins: [
|
|
i18n,
|
|
createTestingPinia({
|
|
stubActions: true,
|
|
initialState: {
|
|
Game: {
|
|
isGameRunning: storeState.isGameRunning ?? false
|
|
},
|
|
Location: {
|
|
lastLocation: storeState.lastLocation ?? {
|
|
location: 'wrld_abc:123~region(us)'
|
|
},
|
|
lastLocationDestination:
|
|
storeState.lastLocationDestination ?? ''
|
|
},
|
|
User: {
|
|
currentUser: storeState.currentUser ?? {
|
|
isBoopingEnabled: true
|
|
}
|
|
},
|
|
Launch: {},
|
|
Instance: {},
|
|
World: {},
|
|
Search: {},
|
|
AppearanceSettings: { showInstanceIdInLocation: false },
|
|
Group: {}
|
|
}
|
|
})
|
|
],
|
|
stubs
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
*
|
|
* @param wrapper
|
|
*/
|
|
function getMenuItems(wrapper) {
|
|
return wrapper.findAll('[data-testid="context-menu-item"]');
|
|
}
|
|
|
|
/**
|
|
*
|
|
* @param wrapper
|
|
*/
|
|
function getMenuItemTexts(wrapper) {
|
|
return getMenuItems(wrapper).map((item) => item.text().trim());
|
|
}
|
|
|
|
describe('FriendsLocationsCard.vue', () => {
|
|
beforeEach(() => {
|
|
vi.clearAllMocks();
|
|
});
|
|
|
|
describe('basic rendering', () => {
|
|
test('renders friend name', () => {
|
|
const wrapper = mountCard();
|
|
expect(wrapper.text()).toContain('TestUser');
|
|
});
|
|
|
|
test('renders status description', () => {
|
|
const wrapper = mountCard();
|
|
expect(wrapper.text()).toContain('Hello World');
|
|
});
|
|
|
|
test('renders avatar fallback from first letter of name', () => {
|
|
const wrapper = mountCard({
|
|
friend: makeFriend({ name: 'Alice' })
|
|
});
|
|
expect(wrapper.text()).toContain('A');
|
|
});
|
|
|
|
test('hides location when displayInstanceInfo is false', () => {
|
|
const wrapper = mountCard({ displayInstanceInfo: false });
|
|
expect(wrapper.find('.location-stub').exists()).toBe(false);
|
|
});
|
|
|
|
test('shows location when displayInstanceInfo is true', () => {
|
|
const wrapper = mountCard({ displayInstanceInfo: true });
|
|
expect(wrapper.find('.location-stub').exists()).toBe(true);
|
|
});
|
|
});
|
|
|
|
describe('context menu visibility', () => {
|
|
test('shows Request Invite for online friends', () => {
|
|
const wrapper = mountCard({
|
|
friend: makeFriend({ state: 'online' })
|
|
});
|
|
const texts = getMenuItemTexts(wrapper);
|
|
expect(texts).toContain('Request Invite');
|
|
});
|
|
|
|
test('hides Request Invite for non-online friends', () => {
|
|
const wrapper = mountCard({
|
|
friend: makeFriend({ state: 'active' })
|
|
});
|
|
const texts = getMenuItemTexts(wrapper);
|
|
expect(texts).not.toContain('Request Invite');
|
|
});
|
|
|
|
test('shows Invite when game is running', () => {
|
|
const wrapper = mountCard({}, { isGameRunning: true });
|
|
const texts = getMenuItemTexts(wrapper);
|
|
expect(texts).toContain('Invite');
|
|
});
|
|
|
|
test('hides Invite when game is not running', () => {
|
|
const wrapper = mountCard({}, { isGameRunning: false });
|
|
const texts = getMenuItemTexts(wrapper);
|
|
expect(texts).not.toContain('Invite');
|
|
});
|
|
|
|
test('always shows Send Boop', () => {
|
|
const wrapper = mountCard(
|
|
{ friend: makeFriend({ state: 'active' }) },
|
|
{ isGameRunning: false }
|
|
);
|
|
const texts = getMenuItemTexts(wrapper);
|
|
expect(texts).toContain('Send Boop');
|
|
});
|
|
|
|
test('shows Launch/Invite and Invite Yourself for online friends with real location', () => {
|
|
const wrapper = mountCard({
|
|
friend: makeFriend({
|
|
state: 'online',
|
|
ref: { location: 'wrld_12345:67890~region(us)' }
|
|
})
|
|
});
|
|
const texts = getMenuItemTexts(wrapper);
|
|
expect(texts).toContain('Launch/Invite');
|
|
expect(texts).toContain('Invite Yourself');
|
|
});
|
|
|
|
test('hides Launch/Invite and Invite Yourself for friends without real location', () => {
|
|
const wrapper = mountCard({
|
|
friend: makeFriend({
|
|
state: 'online',
|
|
ref: { location: 'private' }
|
|
})
|
|
});
|
|
const texts = getMenuItemTexts(wrapper);
|
|
expect(texts).not.toContain('Launch/Invite');
|
|
expect(texts).not.toContain('Invite Yourself');
|
|
});
|
|
|
|
test('hides Launch/Invite and Invite Yourself for non-online friends', () => {
|
|
const wrapper = mountCard({
|
|
friend: makeFriend({
|
|
state: 'active',
|
|
ref: { location: 'wrld_12345:67890~region(us)' }
|
|
})
|
|
});
|
|
const texts = getMenuItemTexts(wrapper);
|
|
expect(texts).not.toContain('Launch/Invite');
|
|
expect(texts).not.toContain('Invite Yourself');
|
|
});
|
|
|
|
test('shows separator when friend is online with real location', () => {
|
|
const wrapper = mountCard({
|
|
friend: makeFriend({
|
|
state: 'online',
|
|
ref: { location: 'wrld_12345:67890~region(us)' }
|
|
})
|
|
});
|
|
expect(
|
|
wrapper.find('[data-testid="context-menu-separator"]').exists()
|
|
).toBe(true);
|
|
});
|
|
|
|
test('hides separator when friend has no real location', () => {
|
|
const wrapper = mountCard({
|
|
friend: makeFriend({
|
|
state: 'online',
|
|
ref: { location: 'private' }
|
|
})
|
|
});
|
|
expect(
|
|
wrapper.find('[data-testid="context-menu-separator"]').exists()
|
|
).toBe(false);
|
|
});
|
|
});
|
|
|
|
describe('context menu disabled states', () => {
|
|
test('Send Boop is disabled when booping is not enabled', () => {
|
|
const wrapper = mountCard(
|
|
{},
|
|
{ currentUser: { isBoopingEnabled: false } }
|
|
);
|
|
const boopItem = getMenuItems(wrapper).find(
|
|
(item) => item.text().trim() === 'Send Boop'
|
|
);
|
|
expect(boopItem?.attributes('data-disabled')).toBe('true');
|
|
});
|
|
|
|
test('Send Boop is enabled when booping is enabled', () => {
|
|
const wrapper = mountCard(
|
|
{},
|
|
{ currentUser: { isBoopingEnabled: true } }
|
|
);
|
|
const boopItem = getMenuItems(wrapper).find(
|
|
(item) => item.text().trim() === 'Send Boop'
|
|
);
|
|
expect(boopItem?.attributes('data-disabled')).toBe('false');
|
|
});
|
|
});
|
|
|
|
describe('context menu actions', () => {
|
|
test('friendRequestInvite calls sendRequestInvite API', async () => {
|
|
const wrapper = mountCard({
|
|
friend: makeFriend({ state: 'online' })
|
|
});
|
|
const requestInviteItem = getMenuItems(wrapper).find(
|
|
(item) => item.text().trim() === 'Request Invite'
|
|
);
|
|
await requestInviteItem.trigger('click');
|
|
expect(mockSendRequestInvite).toHaveBeenCalledWith(
|
|
{ platform: 'standalonewindows' },
|
|
'usr_test123'
|
|
);
|
|
});
|
|
|
|
test('friendInviteSelf calls selfInvite API', async () => {
|
|
const wrapper = mountCard({
|
|
friend: makeFriend({
|
|
state: 'online',
|
|
ref: { location: 'wrld_12345:67890~region(us)' }
|
|
})
|
|
});
|
|
const selfInviteItem = getMenuItems(wrapper).find(
|
|
(item) => item.text().trim() === 'Invite Yourself'
|
|
);
|
|
await selfInviteItem.trigger('click');
|
|
expect(mockSelfInvite).toHaveBeenCalledWith({
|
|
instanceId: '67890~region(us)',
|
|
worldId: 'wrld_12345'
|
|
});
|
|
});
|
|
});
|
|
});
|