@hed-hog/core 0.0.390 → 0.0.394

package/hedhog/frontend/app/configurations/[slug]/components/setting-field.test.tsx.ejs

@@ -0,0 +1,298 @@
+import '@testing-library/jest-dom/vitest';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import type { Setting } from '@hed-hog/api-types';
+import { SettingField } from './setting-field';
+
+/**
+ * O que estes testes protegem é o registry `INTEGRATION_PROFILE_SETTINGS`: qual
+ * setting vira picker e com que filtro. O `EntityPicker` de verdade tem teste
+ * próprio, então aqui ele é um stub que dispara `loadOptions` e renderiza cada
+ * resultado como um botão.
+ */
+type StubProfile = {
+  id: number;
+  slug: string;
+  name: string;
+  integration_provider?: { slug: string };
+};
+
+vi.mock('@/components/ui/entity-picker', async () => {
+  const { useEffect, useState } = await import('react');
+
+  return {
+    EntityPicker: ({
+      placeholder,
+      loadOptions,
+      onChange,
+      getOptionValue,
+    }: {
+      placeholder: string;
+      loadOptions: (args: {
+        page: number;
+        pageSize: number;
+        search: string;
+      }) => Promise<{ items: StubProfile[] }>;
+      onChange: (
+        value: string | number | null,
+        option: StubProfile | null
+      ) => void;
+      getOptionValue: (option: StubProfile) => string | number | null;
+    }) => {
+      const [items, setItems] = useState<StubProfile[]>([]);
+
+      useEffect(() => {
+        let active = true;
+        loadOptions({ page: 1, pageSize: 20, search: '' }).then((result) => {
+          if (active) setItems(result.items ?? []);
+        });
+        return () => {
+          active = false;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, []);
+
+      return (
+        <div data-testid="entity-picker">
+          <span data-testid="picker-placeholder">{placeholder}</span>
+          {items.map((item) => (
+            <button
+              key={item.slug}
+              type="button"
+              data-testid={`option-${item.slug}`}
+              onClick={() => onChange(getOptionValue(item), item)}
+            >
+              {item.name}
+            </button>
+          ))}
+        </div>
+      );
+    },
+  };
+});
+
+vi.mock('@/components/integration-profile/integration-profile-sheet', () => ({
+  IntegrationProfileSheet: () => null,
+}));
+
+vi.mock('@/lib/revalidate-icon', () => ({
+  revalidateSystemIcon: vi.fn(),
+}));
+
+const setSettingValue = vi.fn().mockResolvedValue(undefined);
+const request = vi.fn();
+
+vi.mock('@hed-hog/next-app-provider', () => ({
+  useApp: () => ({
+    showToastHandler: vi.fn(),
+    setSettingValue,
+    request,
+    currentLocaleCode: 'pt',
+    getSettingValue: vi.fn(),
+  }),
+}));
+
+vi.mock('next-intl', () => ({
+  useTranslations: () => {
+    const t = (key: string) => key;
+    t.has = () => false;
+    return t;
+  },
+}));
+
+function buildSetting(slug: string, value = ''): Setting {
+  return {
+    id: 1,
+    slug,
+    type: 'string',
+    component: 'entity-picker',
+    value,
+    user_override: false,
+  } as unknown as Setting;
+}
+
+/** Query string da última chamada de listagem de perfis. */
+function lastProfileQuery() {
+  const call = request.mock.calls
+    .map(([args]) => args as { url?: string } | undefined)
+    .reverse()
+    .find((args) => args?.url?.startsWith('/integration-profile?'));
+
+  return call ? new URL(call.url as string, 'http://local').searchParams : null;
+}
+
+function respondWith(profiles: StubProfile[]) {
+  request.mockResolvedValue({
+    data: { data: profiles, page: 1, lastPage: 1 },
+  });
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  respondWith([]);
+});
+
+describe('SettingField / settings de perfil de integração', () => {
+  it('renderiza picker de IA para sac.ai.integration-profile-id', async () => {
+    render(
+      <SettingField setting={buildSetting('sac.ai.integration-profile-id')} />
+    );
+
+    expect(screen.getByTestId('picker-placeholder')).toHaveTextContent(
+      'selectAiProfile'
+    );
+    await waitFor(() => expect(lastProfileQuery()?.get('typeSlug')).toBe('ai'));
+  });
+
+  it('filtra por whatsapp no aviso de aprovação por WhatsApp', async () => {
+    render(
+      <SettingField
+        setting={buildSetting(
+          'operations.approval-notifications.whatsapp-integration-profile-id'
+        )}
+      />
+    );
+
+    await waitFor(() =>
+      expect(lastProfileQuery()?.get('typeSlug')).toBe('whatsapp')
+    );
+  });
+
+  it('filtra por e-mail no aviso de aprovação por e-mail', async () => {
+    render(
+      <SettingField
+        setting={buildSetting(
+          'operations.approval-notifications.email-integration-profile-id'
+        )}
+      />
+    );
+
+    await waitFor(() =>
+      expect(lastProfileQuery()?.get('typeSlug')).toBe('email')
+    );
+  });
+
+  it.each([
+    ['lms-digest-notify-email-profile-id', 'email'],
+    ['lms-digest-notify-whatsapp-profile-id', 'whatsapp'],
+    ['lms-celebration-notify-email-profile-id', 'email'],
+    ['lms-celebration-notify-whatsapp-profile-id', 'whatsapp'],
+    ['lms-class-reminder-notify-email-profile-id', 'email'],
+    ['lms-class-reminder-notify-whatsapp-profile-id', 'whatsapp'],
+  ])('filtra %s pelo canal %s', async (slug, typeSlug) => {
+    render(<SettingField setting={buildSetting(slug)} />);
+
+    await waitFor(() =>
+      expect(lastProfileQuery()?.get('typeSlug')).toBe(typeSlug)
+    );
+  });
+
+  it('esconde perfis IMAP dos campos de e-mail, que só enviam', async () => {
+    respondWith([
+      {
+        id: 1,
+        slug: 'smtp-prod',
+        name: 'SMTP',
+        integration_provider: { slug: 'smtp' },
+      },
+      {
+        id: 2,
+        slug: 'imap-suporte',
+        name: 'IMAP Suporte',
+        integration_provider: { slug: 'imap' },
+      },
+    ]);
+
+    render(
+      <SettingField setting={buildSetting('mail-integration-profile-id')} />
+    );
+
+    await waitFor(() =>
+      expect(screen.getByTestId('option-smtp-prod')).toBeInTheDocument()
+    );
+    expect(screen.queryByTestId('option-imap-suporte')).not.toBeInTheDocument();
+  });
+
+  it('estreita o picker de OAuth pelo provider', async () => {
+    render(<SettingField setting={buildSetting('oauth-google-profile-id')} />);
+
+    await waitFor(() => {
+      const query = lastProfileQuery();
+      expect(query?.get('typeSlug')).toBe('oauth');
+      expect(query?.get('providerSlug')).toBe('google-oauth');
+    });
+  });
+
+  it('esconde o Google Play do gateway padrão do checkout web', async () => {
+    respondWith([
+      {
+        id: 1,
+        slug: 'stripe-prod',
+        name: 'Stripe',
+        integration_provider: { slug: 'stripe' },
+      },
+      {
+        id: 2,
+        slug: 'play-prod',
+        name: 'Google Play',
+        integration_provider: { slug: 'google_play' },
+      },
+    ]);
+
+    render(
+      <SettingField
+        setting={buildSetting('commerce-default-payment-profile-id')}
+      />
+    );
+
+    await waitFor(() =>
+      expect(screen.getByTestId('option-stripe-prod')).toBeInTheDocument()
+    );
+    expect(screen.queryByTestId('option-play-prod')).not.toBeInTheDocument();
+  });
+
+  it('lista perfis de todos os tipos quando o slug não está mapeado', async () => {
+    render(<SettingField setting={buildSetting('nova-lib-ai-profile-id')} />);
+
+    expect(screen.getByTestId('picker-placeholder')).toHaveTextContent(
+      'selectIntegrationProfile'
+    );
+    await waitFor(() => expect(lastProfileQuery()).not.toBeNull());
+    expect(lastProfileQuery()?.get('typeSlug')).toBeNull();
+    expect(lastProfileQuery()?.get('providerSlug')).toBeNull();
+  });
+
+  it('cai em input de texto quando o slug não é campo de perfil', () => {
+    const { container } = render(
+      <SettingField setting={buildSetting('alguma-outra-entidade')} />
+    );
+
+    expect(screen.queryByTestId('entity-picker')).not.toBeInTheDocument();
+    expect(container.querySelector('input[type="text"]')).toBeInTheDocument();
+  });
+
+  it('persiste o slug do perfil escolhido, não o id', async () => {
+    respondWith([
+      {
+        id: 42,
+        slug: 'openai-suporte',
+        name: 'OpenAI Suporte',
+        integration_provider: { slug: 'openai' },
+      },
+    ]);
+
+    render(
+      <SettingField setting={buildSetting('sac.ai.integration-profile-id')} />
+    );
+
+    await waitFor(() =>
+      expect(screen.getByTestId('option-openai-suporte')).toBeInTheDocument()
+    );
+    fireEvent.click(screen.getByTestId('option-openai-suporte'));
+
+    expect(setSettingValue).toHaveBeenCalledWith(
+      'sac.ai.integration-profile-id',
+      'openai-suporte'
+    );
+  });
+});