refactor(editor): Move editor-ui and design-system to frontend dir (no-changelog) (#13564)

packages/frontend/editor-ui/src/components/FreeAiCreditsCallout.test.ts

@@ -0,0 +1,205 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { fireEvent, screen } from '@testing-library/vue';
+import FreeAiCreditsCallout from '@/components/FreeAiCreditsCallout.vue';
+import { useCredentialsStore } from '@/stores/credentials.store';
+import { useSettingsStore } from '@/stores/settings.store';
+import { useUsersStore } from '@/stores/users.store';
+import { useNDVStore } from '@/stores/ndv.store';
+import { usePostHog } from '@/stores/posthog.store';
+import { useProjectsStore } from '@/stores/projects.store';
+import { useRootStore } from '@/stores/root.store';
+import { useToast } from '@/composables/useToast';
+import { renderComponent } from '@/__tests__/render';
+import { mockedStore } from '@/__tests__/utils';
+import { useTelemetry } from '@/composables/useTelemetry';
+
+vi.mock('@/composables/useToast', () => ({
+	useToast: vi.fn(),
+}));
+
+vi.mock('@/composables/useTelemetry', () => ({
+	useTelemetry: vi.fn(),
+}));
+
+vi.mock('@/stores/settings.store', () => ({
+	useSettingsStore: vi.fn(),
+}));
+
+vi.mock('@/stores/credentials.store', () => ({
+	useCredentialsStore: vi.fn(),
+}));
+
+vi.mock('@/stores/users.store', () => ({
+	useUsersStore: vi.fn(),
+}));
+
+vi.mock('@/stores/ndv.store', () => ({
+	useNDVStore: vi.fn(),
+}));
+
+vi.mock('@/stores/posthog.store', () => ({
+	usePostHog: vi.fn(),
+}));
+
+vi.mock('@/stores/projects.store', () => ({
+	useProjectsStore: vi.fn(),
+}));
+
+vi.mock('@/stores/root.store', () => ({
+	useRootStore: vi.fn(),
+}));
+
+const assertUserCannotClaimCredits = () => {
+	expect(screen.queryByText('Get 100 free OpenAI API credits')).not.toBeInTheDocument();
+	expect(screen.queryByRole('button', { name: 'Claim credits' })).not.toBeInTheDocument();
+};
+
+const assertUserCanClaimCredits = () => {
+	expect(screen.getByText('Get 100 free OpenAI API credits')).toBeInTheDocument();
+	expect(screen.queryByRole('button', { name: 'Claim credits' })).toBeInTheDocument();
+};
+
+const assertUserClaimedCredits = () => {
+	expect(
+		screen.getByText(
+			'Claimed 100 free OpenAI API credits! Please note these free credits are only for the following models:',
+		),
+	).toBeInTheDocument();
+
+	expect(
+		screen.getByText(
+			'gpt-4o-mini, text-embedding-3-small, dall-e-3, tts-1, whisper-1, and text-moderation-latest',
+		),
+	).toBeInTheDocument();
+};
+
+describe('FreeAiCreditsCallout', () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+
+		(useSettingsStore as any).mockReturnValue({
+			isAiCreditsEnabled: true,
+			aiCreditsQuota: 100,
+		});
+
+		(useCredentialsStore as any).mockReturnValue({
+			allCredentials: [],
+			upsertCredential: vi.fn(),
+			claimFreeAiCredits: vi.fn(),
+		});
+
+		(useUsersStore as any).mockReturnValue({
+			currentUser: {
+				settings: {
+					userClaimedAiCredits: false,
+				},
+			},
+		});
+
+		(useNDVStore as any).mockReturnValue({
+			activeNode: { type: '@n8n/n8n-nodes-langchain.openAi' },
+		});
+
+		(usePostHog as any).mockReturnValue({
+			getVariant: vi.fn().mockReturnValue('variant'),
+		});
+
+		(useProjectsStore as any).mockReturnValue({
+			currentProject: { id: 'test-project-id' },
+		});
+
+		(useRootStore as any).mockReturnValue({
+			restApiContext: {},
+		});
+
+		(useToast as any).mockReturnValue({
+			showError: vi.fn(),
+		});
+
+		(useTelemetry as any).mockReturnValue({
+			track: vi.fn(),
+		});
+	});
+
+	it('should shows the claim callout when the user can claim credits', () => {
+		renderComponent(FreeAiCreditsCallout);
+
+		assertUserCanClaimCredits();
+	});
+
+	it('should show success callout when credit are claimed', async () => {
+		const credentialsStore = mockedStore(useCredentialsStore);
+
+		renderComponent(FreeAiCreditsCallout);
+
+		const claimButton = screen.getByRole('button', {
+			name: 'Claim credits',
+		});
+
+		await fireEvent.click(claimButton);
+
+		expect(credentialsStore.claimFreeAiCredits).toHaveBeenCalledWith('test-project-id');
+		expect(useTelemetry().track).toHaveBeenCalledWith('User claimed OpenAI credits');
+		assertUserClaimedCredits();
+	});
+
+	it('should not be able to claim credits is user already claimed credits', async () => {
+		(useUsersStore as any).mockReturnValue({
+			currentUser: {
+				settings: {
+					userClaimedAiCredits: true,
+				},
+			},
+		});
+
+		renderComponent(FreeAiCreditsCallout);
+
+		assertUserCannotClaimCredits();
+	});
+
+	it('should not be able to claim credits is user does not have ai credits enabled', async () => {
+		(useSettingsStore as any).mockReturnValue({
+			isAiCreditsEnabled: false,
+			aiCreditsQuota: 0,
+		});
+
+		renderComponent(FreeAiCreditsCallout);
+
+		assertUserCannotClaimCredits();
+	});
+
+	it('should not be able to claim credits if user it is not in experiment', async () => {
+		(usePostHog as any).mockReturnValue({
+			getVariant: vi.fn().mockReturnValue('control'),
+		});
+
+		renderComponent(FreeAiCreditsCallout);
+
+		assertUserCannotClaimCredits();
+	});
+
+	it('should not be able to claim credits if user already has OpenAiApi credential', async () => {
+		(useCredentialsStore as any).mockReturnValue({
+			allCredentials: [
+				{
+					type: 'openAiApi',
+				},
+			],
+			upsertCredential: vi.fn(),
+		});
+
+		renderComponent(FreeAiCreditsCallout);
+
+		assertUserCannotClaimCredits();
+	});
+
+	it('should not be able to claim credits if active node it is not a valid node', async () => {
+		(useNDVStore as any).mockReturnValue({
+			activeNode: { type: '@n8n/n8n-nodes.jira' },
+		});
+
+		renderComponent(FreeAiCreditsCallout);
+
+		assertUserCannotClaimCredits();
+	});
+});