feat(survey): remember advanced mode preference
This commit is contained in:
@@ -5,6 +5,7 @@
|
||||
- Run `pnpm install` in the repo root to bootstrap all workspace packages.
|
||||
- Use `pnpm dev` to start the server and client concurrently for local development.
|
||||
- Run `pnpm build` to generate production assets.
|
||||
- Prefer reusing existing hooks, components, utilities, and other project assets instead of creating new implementations.
|
||||
|
||||
## Translation Files
|
||||
When generating code, **do not modify** any JSON files in `src/client/public/locales`. These translations are managed separately.
|
||||
|
||||
@@ -1,10 +1,15 @@
|
||||
import React from 'react';
|
||||
import '@testing-library/jest-dom/vitest';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { describe, expect, test, vi } from 'vitest';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { beforeEach, describe, expect, test, vi } from 'vitest';
|
||||
import { TooltipProvider } from '@/components/ui/tooltip';
|
||||
import { SurveyEditForm } from './SurveyEditForm';
|
||||
|
||||
const advancedModeStorageKey = 'tianji:survey:advanced-mode';
|
||||
|
||||
vi.mock('@i18next-toolkit/react', () => ({
|
||||
t: (key: string) => key,
|
||||
useTranslation: () => ({ t: (key: string) => key }),
|
||||
}));
|
||||
|
||||
@@ -117,6 +122,10 @@ vi.mock('@/components/ui/select', () => {
|
||||
});
|
||||
|
||||
describe('SurveyEditForm', () => {
|
||||
beforeEach(() => {
|
||||
localStorage.clear();
|
||||
});
|
||||
|
||||
test('renders an existing field type from edit defaults', () => {
|
||||
render(
|
||||
<SurveyEditForm
|
||||
@@ -146,4 +155,29 @@ describe('SurveyEditForm', () => {
|
||||
);
|
||||
expect(screen.getByTestId('mock-select-value')).toHaveTextContent('Email');
|
||||
});
|
||||
|
||||
test('restores Advanced Mode when it was enabled previously', () => {
|
||||
localStorage.setItem(advancedModeStorageKey, 'true');
|
||||
|
||||
render(
|
||||
<TooltipProvider>
|
||||
<SurveyEditForm onSubmit={vi.fn()} />
|
||||
</TooltipProvider>
|
||||
);
|
||||
|
||||
expect(screen.getByRole('switch')).toBeChecked();
|
||||
});
|
||||
|
||||
test('persists the Advanced Mode selection', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(
|
||||
<TooltipProvider>
|
||||
<SurveyEditForm onSubmit={vi.fn()} />
|
||||
</TooltipProvider>
|
||||
);
|
||||
|
||||
await user.click(screen.getByRole('switch'));
|
||||
|
||||
expect(localStorage.getItem(advancedModeStorageKey)).toBe('true');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -24,13 +24,16 @@ import {
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import React, { useState } from 'react';
|
||||
import React from 'react';
|
||||
import { useLocalStorageState } from 'ahooks';
|
||||
import { TipIcon } from '../TipIcon';
|
||||
import { cn } from '@/utils/style';
|
||||
import { Switch } from '../ui/switch';
|
||||
import { FeedChannelPicker } from '../feed/FeedChannelPicker';
|
||||
import { Textarea } from '../ui/textarea';
|
||||
|
||||
const advancedModeStorageKey = 'tianji:survey:advanced-mode';
|
||||
|
||||
const addFormSchema = z.object({
|
||||
name: z.string(),
|
||||
desc: z.string().optional(),
|
||||
@@ -67,7 +70,10 @@ export const SurveyEditForm: React.FC<SurveyEditFormProps> = React.memo(
|
||||
(props) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [advancedMode, setAdvancedMode] = useState(false);
|
||||
const [advancedMode = false, setAdvancedMode] =
|
||||
useLocalStorageState<boolean>(advancedModeStorageKey, {
|
||||
defaultValue: false,
|
||||
});
|
||||
|
||||
const form = useForm<SurveyEditFormValues>({
|
||||
resolver: zodResolver(addFormSchema),
|
||||
@@ -141,7 +147,7 @@ export const SurveyEditForm: React.FC<SurveyEditFormProps> = React.memo(
|
||||
<div className="flex items-center justify-end gap-2">
|
||||
<Switch
|
||||
checked={advancedMode}
|
||||
onCheckedChange={(checked) => setAdvancedMode(checked)}
|
||||
onCheckedChange={setAdvancedMode}
|
||||
/>
|
||||
<div className="text-sm">{t('Advanced Mode')}</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user