mirror of
https://github.com/Studio-Saelix/sencho.git
synced 2026-08-05 08:27:42 +00:00
chore: hide the What's New setting until an entry exists (#1770)
The nav trigger already stays out of the top bar while entries.json is empty, but the Settings toggle rendered unconditionally, so About showed a control whose helper text described a sparkle icon that could not appear. The Preferences section now follows the same rule as the trigger. Also gives the toggle an accessible name. Its visible text is only ON/OFF, so a screen reader previously announced the state without the setting it belongs to.
This commit is contained in:
@@ -2,6 +2,7 @@ import { useLicense } from '@/context/LicenseContext';
|
||||
import { TierBadge } from '@/components/TierBadge';
|
||||
import { TogglePill } from '@/components/ui/toggle-pill';
|
||||
import { useWhatsNewPreference } from '@/hooks/useWhatsNewPreference';
|
||||
import { whatsNewEntries } from '@/whats-new/entries';
|
||||
import { SettingsSection } from './SettingsSection';
|
||||
import { SettingsField } from './SettingsField';
|
||||
import {
|
||||
@@ -44,18 +45,24 @@ export function AboutSection() {
|
||||
) : null}
|
||||
</SettingsSection>
|
||||
|
||||
<SettingsSection title="Preferences">
|
||||
<SettingsField
|
||||
label="Show What's New"
|
||||
helper="Highlight the sparkle icon in the top bar when a new feature ships."
|
||||
>
|
||||
<TogglePill
|
||||
id="whats-new-enabled"
|
||||
checked={whatsNewEnabled}
|
||||
onChange={setWhatsNewEnabled}
|
||||
/>
|
||||
</SettingsField>
|
||||
</SettingsSection>
|
||||
{/* Hidden until an entry exists, matching the nav trigger: the toggle
|
||||
would otherwise control an icon that cannot appear. */}
|
||||
{whatsNewEntries.length > 0 && (
|
||||
<SettingsSection title="Preferences">
|
||||
<SettingsField
|
||||
label="Show What's New"
|
||||
helper="Highlight the sparkle icon in the top bar when a new feature ships."
|
||||
>
|
||||
<TogglePill
|
||||
id="whats-new-enabled"
|
||||
// Visible text is only ON/OFF, so the setting needs a name.
|
||||
aria-label="Show What's New"
|
||||
checked={whatsNewEnabled}
|
||||
onChange={setWhatsNewEnabled}
|
||||
/>
|
||||
</SettingsField>
|
||||
</SettingsSection>
|
||||
)}
|
||||
|
||||
<SettingsSection title="Links">
|
||||
<SettingsField
|
||||
|
||||
@@ -42,6 +42,11 @@ vi.mock('@/hooks/useWhatsNewPreference', () => ({
|
||||
useWhatsNewPreference: () => ({ enabled: true, setEnabled: mockSetEnabled, hasUnseen: false, markSeen: vi.fn() }),
|
||||
}));
|
||||
|
||||
// The shipped entries.json is empty, so populate it here; the empty state has its own file.
|
||||
vi.mock('@/whats-new/entries', () => ({
|
||||
whatsNewEntries: [{ id: 'entry-a', title: 'A feature', blurb: 'Does a thing.' }],
|
||||
}));
|
||||
|
||||
describe('AboutSection', () => {
|
||||
it('renders Plan status and Source, License, and Licensing docs links with exact URLs', () => {
|
||||
render(<AboutSection />);
|
||||
@@ -73,9 +78,16 @@ describe('AboutSection', () => {
|
||||
});
|
||||
|
||||
describe('AboutSection Preferences', () => {
|
||||
it('shows the Preferences section once an entry exists', () => {
|
||||
render(<AboutSection />);
|
||||
expect(screen.getByText('Preferences')).toBeTruthy();
|
||||
expect(screen.getByText("Show What's New")).toBeTruthy();
|
||||
});
|
||||
|
||||
it('toggling "Show What\'s New" calls setEnabled', async () => {
|
||||
render(<AboutSection />);
|
||||
await userEvent.click(screen.getByRole('switch'));
|
||||
// Name-scoped so a second toggle landing in About cannot break this.
|
||||
await userEvent.click(screen.getByRole('switch', { name: /Show What's New/i }));
|
||||
expect(mockSetEnabled).toHaveBeenCalledWith(false);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -0,0 +1,59 @@
|
||||
import { describe, it, expect, vi, beforeAll } from 'vitest';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { AboutSection } from '../AboutSection';
|
||||
|
||||
beforeAll(() => {
|
||||
// Vite injects this at build time; tests need a stand-in.
|
||||
(globalThis as unknown as { __APP_VERSION__: string }).__APP_VERSION__ = '0.0.0-test';
|
||||
});
|
||||
|
||||
// Separate file so entries can be mocked empty at module scope, matching the
|
||||
// state that ships until the first entry is authored.
|
||||
vi.mock('@/whats-new/entries', () => ({ whatsNewEntries: [] }));
|
||||
|
||||
vi.mock('@/context/LicenseContext', () => ({
|
||||
useLicense: () => ({
|
||||
license: {
|
||||
tier: 'community',
|
||||
status: 'community',
|
||||
customerName: null,
|
||||
productName: null,
|
||||
maskedKey: null,
|
||||
validUntil: null,
|
||||
trialDaysRemaining: null,
|
||||
instanceId: 'abcdef0123456789',
|
||||
portalUrl: null,
|
||||
isLifetime: false,
|
||||
},
|
||||
isPaid: false,
|
||||
loading: false,
|
||||
licenseStatus: 'ready',
|
||||
licenseReady: true,
|
||||
refresh: vi.fn(),
|
||||
activate: vi.fn(),
|
||||
deactivate: vi.fn(),
|
||||
}),
|
||||
}));
|
||||
|
||||
vi.mock('@/components/TierBadge', () => ({
|
||||
TierBadge: () => <span>Community</span>,
|
||||
}));
|
||||
|
||||
vi.mock('@/hooks/useWhatsNewPreference', () => ({
|
||||
useWhatsNewPreference: () => ({ enabled: true, setEnabled: vi.fn(), hasUnseen: false, markSeen: vi.fn() }),
|
||||
}));
|
||||
|
||||
describe("AboutSection with no What's New entries authored", () => {
|
||||
it('hides the Preferences section entirely, so no toggle describes an absent icon', () => {
|
||||
render(<AboutSection />);
|
||||
expect(screen.queryByText('Preferences')).toBeNull();
|
||||
expect(screen.queryByText("Show What's New")).toBeNull();
|
||||
expect(screen.queryByRole('switch')).toBeNull();
|
||||
});
|
||||
|
||||
it('still renders the rest of the About panel', () => {
|
||||
render(<AboutSection />);
|
||||
expect(screen.getByText('Plan status')).toBeTruthy();
|
||||
expect(screen.getByText('Source code')).toBeTruthy();
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user