diff --git a/packages/editor-ui/src/__tests__/utils.ts b/packages/editor-ui/src/__tests__/utils.ts index 521976b40f..dbf9bdb1ac 100644 --- a/packages/editor-ui/src/__tests__/utils.ts +++ b/packages/editor-ui/src/__tests__/utils.ts @@ -136,3 +136,5 @@ export const mockedStore = unknown>( // eslint-disable-next-line @typescript-eslint/no-explicit-any return useStore() as any; }; + +export type MockedStore unknown> = ReturnType>; diff --git a/packages/editor-ui/src/components/Telemetry.test.ts b/packages/editor-ui/src/components/Telemetry.test.ts new file mode 100644 index 0000000000..80ab0c6fc1 --- /dev/null +++ b/packages/editor-ui/src/components/Telemetry.test.ts @@ -0,0 +1,127 @@ +import { useRoute } from 'vue-router'; +import { createTestingPinia } from '@pinia/testing'; +import { createComponentRenderer } from '@/__tests__/render'; +import type { MockedStore } from '@/__tests__/utils'; +import { mockedStore } from '@/__tests__/utils'; +import Telemetry from './Telemetry.vue'; +import { useRootStore } from '@/stores/root.store'; +import { useSettingsStore } from '@/stores/settings.store'; +import { useUsersStore } from '@/stores/users.store'; +import { useTelemetry } from '@/composables/useTelemetry'; + +vi.mock('vue-router', () => { + const meta = {}; + return { + useRouter: vi.fn(), + useRoute: () => ({ + meta, + }), + RouterLink: { + template: '', + }, + }; +}); + +vi.mock('@/composables/useTelemetry', () => { + const init = vi.fn(); + return { + useTelemetry: () => ({ + init, + }), + }; +}); + +const renderComponent = createComponentRenderer(Telemetry, { + pinia: createTestingPinia(), +}); + +let route: ReturnType; +let rootStore: MockedStore; +let settingsStore: MockedStore; +let usersStore: MockedStore; +let telemetryPlugin: ReturnType; + +describe('Telemetry', () => { + beforeEach(() => { + vi.clearAllMocks(); + + route = useRoute(); + rootStore = mockedStore(useRootStore); + settingsStore = mockedStore(useSettingsStore); + usersStore = mockedStore(useUsersStore); + telemetryPlugin = useTelemetry(); + }); + + it('should not throw error when opened', async () => { + expect(() => renderComponent()).not.toThrow(); + }); + + it('should initialize if telemetry is enabled in settings and not disabled on the route', async () => { + settingsStore.telemetry = { + enabled: true, + }; + usersStore.currentUserId = '123'; + rootStore.instanceId = '456'; + renderComponent(); + + expect(telemetryPlugin.init).toHaveBeenCalledWith( + { + enabled: true, + }, + expect.objectContaining({ + userId: '123', + instanceId: '456', + }), + ); + }); + + it('should not initialize if telemetry is disabled in settings', async () => { + settingsStore.telemetry = { + enabled: false, + }; + renderComponent(); + + expect(telemetryPlugin.init).not.toHaveBeenCalled(); + }); + + it('should not initialize if telemetry is disabled on the route', async () => { + settingsStore.telemetry = { + enabled: true, + }; + route.meta.telemetry = { + disabled: true, + }; + renderComponent(); + + expect(telemetryPlugin.init).not.toHaveBeenCalled(); + }); + + it('should render the iframe with correct src', async () => { + settingsStore.telemetry = { + enabled: true, + }; + usersStore.currentUserId = '123'; + rootStore.instanceId = '456'; + const { container } = renderComponent(); + + const iframe = container.querySelector('iframe'); + + expect(iframe).toBeInTheDocument(); + expect(iframe).not.toBeVisible(); + expect(iframe).toHaveAttribute('src', expect.stringContaining('userId=123')); + expect(iframe).toHaveAttribute('src', expect.stringContaining('instanceId=456')); + }); + + it('should not render the iframe if telemetry disabled', async () => { + settingsStore.telemetry = { + enabled: false, + }; + usersStore.currentUserId = '123'; + rootStore.instanceId = '456'; + const { container } = renderComponent(); + + const iframe = container.querySelector('iframe'); + + expect(iframe).not.toBeInTheDocument(); + }); +});