Add unit tests for channel utilities and configure testing environment

- Created a new test file `channels.test.ts` to cover utilities related to channel configurations and targets. - Implemented tests for normalizing and grouping selected channels by type, as well as building channel targets from account data and cron history. - Mocked necessary dependencies to isolate tests and ensure accurate results. - Updated `vite.config.ts` to set up the testing environment with jsdom and enable global variables for tests.
2026-04-18 16:12:49 +08:00
parent ee72cf7261
commit ef46c73c3e
26 changed files with 4056 additions and 186 deletions
--- a/src/components/channels/ChannelConfigModal.tsx
+++ b/src/components/channels/ChannelConfigModal.tsx
@@ -0,0 +1,157 @@
+import { useI18n } from '../../i18n';
+import type { ChannelConfigFieldValueMap } from '../../lib/channel-types';
+import { getChannelMeta, getChannelOptions, type ChannelMeta } from '../../lib/channel-meta';
+import DialogSurface from '../../pages/Home/components/DialogSurface';
+import ChannelAccountIdField from './ChannelAccountIdField';
+import ChannelConfigActions from './ChannelConfigActions';
+import ChannelConfigFields from './ChannelConfigFields';
+import ChannelInstructionsPanel from './ChannelInstructionsPanel';
+import ChannelTypeSelector from './ChannelTypeSelector';
+
+export type ChannelConfigModalProps = {
+  open: boolean;
+  selectedChannelType: string;
+  channelTypes?: ChannelMeta[];
+  values: ChannelConfigFieldValueMap;
+  accountId: string;
+  disableChannelType?: boolean;
+  disableAccountId?: boolean;
+  onChannelTypeChange: (value: string) => void;
+  onValueChange: (key: string, value: string) => void;
+  onAccountIdChange: (value: string) => void;
+  onClose: () => void;
+  onConfirm: () => void | Promise<void>;
+  error?: string | null;
+  submitting?: boolean;
+  title?: string;
+  description?: string;
+  typeLabel?: string;
+  accountIdLabel?: string;
+  accountIdHelpText?: string;
+  tokenHelpText?: string;
+  instructionsTitle?: string;
+  docsLabel?: string;
+  diagnosticsNote?: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  widthClassName?: string;
+};
+
+export default function ChannelConfigModal({
+  open,
+  selectedChannelType,
+  channelTypes,
+  values,
+  accountId,
+  disableChannelType,
+  disableAccountId,
+  onChannelTypeChange,
+  onValueChange,
+  onAccountIdChange,
+  onClose,
+  onConfirm,
+  error,
+  submitting,
+  title,
+  description,
+  typeLabel,
+  accountIdLabel,
+  accountIdHelpText,
+  tokenHelpText,
+  instructionsTitle,
+  docsLabel,
+  diagnosticsNote,
+  confirmLabel,
+  cancelLabel,
+  widthClassName,
+}: ChannelConfigModalProps) {
+  const { t } = useI18n();
+  const options = channelTypes ?? getChannelOptions();
+  const activeMeta = options.find((item) => item.type === selectedChannelType) ?? getChannelMeta(selectedChannelType);
+  const accountFieldMeta = activeMeta.configFields.find((field) => field.key === 'accountId');
+  const accountLabel = accountIdLabel ?? accountFieldMeta?.label ?? t('channels.modal.accountIdLabel');
+  const accountHelp = accountIdHelpText ?? accountFieldMeta?.description;
+  const typeSelectLabel = typeLabel ?? t('channels.modal.typeLabel');
+  const docsText = docsLabel ?? t('channels.modal.docsLabel');
+  const instructionsHeading = instructionsTitle ?? t('channels.modal.instructionsTitle');
+  const confirmText = confirmLabel ?? t('channels.modal.confirm');
+  const cancelText = cancelLabel ?? t('dialog.cancel');
+  const notesText = diagnosticsNote ?? t('channels.modal.diagnosticsNote');
+  const descriptionText = description ?? t('channels.modal.description');
+  const supportedFields = activeMeta.configFields.filter((field) => field.key !== 'accountId');
+
+  return (
+    <DialogSurface
+      open={open}
+      title={title ?? t('channels.modal.title')}
+      widthClassName={widthClassName ?? 'max-w-[920px]'}
+      onClose={onClose}
+    >
+      <div className="space-y-5">
+        <div className="text-[13px] leading-[20px] text-[#525866] dark:text-gray-300">
+          {descriptionText}
+        </div>
+
+        {error ? (
+          <div className="rounded-[12px] border border-[#f2c7cd] bg-[#fff5f6] px-4 py-3 text-[13px] text-[#c24150] dark:border-[#4b2229] dark:bg-[#2b1c1f] dark:text-[#ffb4bf]">
+            {error}
+          </div>
+        ) : null}
+
+        <div className="grid gap-5 lg:grid-cols-[minmax(0,1fr)_320px]">
+          <div className="space-y-4">
+            <ChannelTypeSelector
+              label={typeSelectLabel}
+              value={activeMeta.type}
+              options={options}
+              onChange={onChannelTypeChange}
+              disabled={disableChannelType || submitting}
+              helpText={activeMeta.connectionType}
+            />
+
+            <ChannelAccountIdField
+              label={accountLabel}
+              value={accountId}
+              onChange={onAccountIdChange}
+              placeholder={accountFieldMeta?.placeholder}
+              helpText={accountHelp}
+              disabled={disableAccountId || submitting}
+            />
+
+            <ChannelConfigFields
+              fields={supportedFields}
+              values={values}
+              onValueChange={onValueChange}
+              disabled={submitting}
+              accountIdLabel={accountLabel}
+              accountIdHelpText={accountHelp}
+              tokenHelpText={tokenHelpText ?? t('channels.modal.tokenHelpText')}
+            />
+
+            <div className="rounded-[16px] border border-dashed border-[#E5E8EE] bg-white px-4 py-3 text-[12px] leading-[18px] text-[#525866] dark:border-[#2a2a2d] dark:bg-[#17171a] dark:text-gray-300">
+              {t('channels.modal.todoNote')}
+            </div>
+          </div>
+
+          <ChannelInstructionsPanel
+            meta={activeMeta}
+            title={instructionsHeading}
+            docsLabel={docsText}
+            diagnosticsNote={notesText}
+          />
+        </div>
+
+        <ChannelConfigActions
+          cancelLabel={cancelText}
+          confirmLabel={confirmText}
+          onClose={onClose}
+          onConfirm={() => {
+            void onConfirm();
+          }}
+          disabled={false}
+          submitting={submitting}
+        />
+      </div>
+    </DialogSurface>
+  );
+}