feat: plakat redesign phase 4 (chat window, contact, footer, cleanup)
- AI chat moves into a window/sheet, opened from a new speech-bubble card on the desk; it now respects the chatbot consent and asks before sending anything to n8n (previously it ignored the consent) - Contact as red poster section with big mail address and the form on a paper card; validation errors are finally shown inline (aria-invalid, role=alert) - Footer as ink strip with dk0 wordmark, legal links and a button to reopen the privacy settings - "About me" in the header opens the about window on the home page - Remove the old About section and its parts (BentoChat, ActivityFeed, CurrentlyReading, ReadBooks), the unused ChatWidget, Projects and BentoGrid, their tests, wrappers, loaders, types and texts - scripts/directus-cleanup-redesign.mjs: dry run by default, --apply archives hobbies, tech stack categories and old content pages and deletes four unused message overrides after a full JSON backup; run only after the redesign is live on production Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
denshooter
@@ -1,151 +0,0 @@
|
||||
import '@testing-library/jest-dom';
|
||||
|
||||
/**
|
||||
* Unit tests for ActivityFeed NaN handling
|
||||
*
|
||||
* This test suite validates that the ActivityFeed component correctly handles
|
||||
* NaN and numeric values in gaming and custom activity data to prevent
|
||||
* "Received NaN for the children attribute" React errors.
|
||||
*/
|
||||
describe('ActivityFeed NaN Handling', () => {
|
||||
describe('Gaming activity rendering logic', () => {
|
||||
// Helper function to simulate getSafeGamingText behavior
|
||||
const getSafeGamingText = (details: string | number | undefined, state: string | number | undefined, fallback: string): string => {
|
||||
if (typeof details === 'string' && details.trim().length > 0) return details;
|
||||
if (typeof state === 'string' && state.trim().length > 0) return state;
|
||||
if (typeof details === 'number' && !isNaN(details)) return String(details);
|
||||
if (typeof state === 'number' && !isNaN(state)) return String(state);
|
||||
return fallback;
|
||||
};
|
||||
|
||||
it('should safely handle NaN in gaming.details', () => {
|
||||
const result = getSafeGamingText(NaN, 'Playing', 'Playing...');
|
||||
expect(result).toBe('Playing'); // Should fall through NaN to state
|
||||
expect(result).not.toBe(NaN);
|
||||
expect(typeof result).toBe('string');
|
||||
});
|
||||
|
||||
it('should safely handle NaN in both gaming.details and gaming.state', () => {
|
||||
const result = getSafeGamingText(NaN, NaN, 'Playing...');
|
||||
expect(result).toBe('Playing...'); // Should use fallback
|
||||
expect(typeof result).toBe('string');
|
||||
});
|
||||
|
||||
it('should prioritize string details over numeric state', () => {
|
||||
const result = getSafeGamingText('Details text', 42, 'Playing...');
|
||||
expect(result).toBe('Details text'); // String details takes precedence
|
||||
expect(typeof result).toBe('string');
|
||||
});
|
||||
|
||||
it('should prioritize string state over numeric details', () => {
|
||||
const result = getSafeGamingText(42, 'State text', 'Playing...');
|
||||
expect(result).toBe('State text'); // String state takes precedence over numeric details
|
||||
expect(typeof result).toBe('string');
|
||||
});
|
||||
|
||||
it('should convert valid numeric details to string', () => {
|
||||
const result = getSafeGamingText(42, undefined, 'Playing...');
|
||||
expect(result).toBe('42');
|
||||
expect(typeof result).toBe('string');
|
||||
});
|
||||
|
||||
it('should handle empty strings correctly', () => {
|
||||
const result1 = getSafeGamingText('', 'Playing', 'Playing...');
|
||||
expect(result1).toBe('Playing'); // Empty string should fall through to state
|
||||
|
||||
const result2 = getSafeGamingText(' ', 'Playing', 'Playing...');
|
||||
expect(result2).toBe('Playing'); // Whitespace-only should fall through to state
|
||||
});
|
||||
|
||||
it('should convert gaming.name to string safely', () => {
|
||||
const validName = String('Test Game');
|
||||
expect(validName).toBe('Test Game');
|
||||
expect(typeof validName).toBe('string');
|
||||
|
||||
// In the actual code, we use String(data.gaming.name || '')
|
||||
// If data.gaming.name is NaN, (NaN || '') evaluates to '' because NaN is falsy
|
||||
const nanValue = NaN;
|
||||
const nanName = String(nanValue || '');
|
||||
expect(nanName).toBe(''); // NaN is falsy, so it falls back to ''
|
||||
expect(typeof nanName).toBe('string');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Custom activities progress handling', () => {
|
||||
it('should only render progress bar when progress is a valid number', () => {
|
||||
const validProgress = 75;
|
||||
const shouldRender = validProgress !== undefined &&
|
||||
typeof validProgress === 'number' &&
|
||||
!isNaN(validProgress);
|
||||
expect(shouldRender).toBe(true);
|
||||
});
|
||||
|
||||
it('should not render progress bar when progress is NaN', () => {
|
||||
const invalidProgress = NaN;
|
||||
const shouldRender = invalidProgress !== undefined &&
|
||||
typeof invalidProgress === 'number' &&
|
||||
!isNaN(invalidProgress);
|
||||
expect(shouldRender).toBe(false);
|
||||
});
|
||||
|
||||
it('should not render progress bar when progress is undefined', () => {
|
||||
const undefinedProgress = undefined;
|
||||
const shouldRender = undefinedProgress !== undefined &&
|
||||
typeof undefinedProgress === 'number' &&
|
||||
!isNaN(undefinedProgress);
|
||||
expect(shouldRender).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Custom activities dynamic field rendering', () => {
|
||||
it('should safely convert valid numeric values to string', () => {
|
||||
const value = 42;
|
||||
const shouldRender = typeof value === 'string' ||
|
||||
(typeof value === 'number' && !isNaN(value));
|
||||
|
||||
expect(shouldRender).toBe(true);
|
||||
|
||||
if (shouldRender) {
|
||||
const stringValue = String(value);
|
||||
expect(stringValue).toBe('42');
|
||||
expect(typeof stringValue).toBe('string');
|
||||
}
|
||||
});
|
||||
|
||||
it('should not render NaN values', () => {
|
||||
const value = NaN;
|
||||
const shouldRender = typeof value === 'string' ||
|
||||
(typeof value === 'number' && !isNaN(value));
|
||||
|
||||
expect(shouldRender).toBe(false);
|
||||
});
|
||||
|
||||
it('should render valid string values', () => {
|
||||
const value = 'Test String';
|
||||
const shouldRender = typeof value === 'string' ||
|
||||
(typeof value === 'number' && !isNaN(value));
|
||||
|
||||
expect(shouldRender).toBe(true);
|
||||
|
||||
if (shouldRender) {
|
||||
const stringValue = String(value);
|
||||
expect(stringValue).toBe('Test String');
|
||||
expect(typeof stringValue).toBe('string');
|
||||
}
|
||||
});
|
||||
|
||||
it('should render zero as a valid numeric value', () => {
|
||||
const value = 0;
|
||||
const shouldRender = typeof value === 'string' ||
|
||||
(typeof value === 'number' && !isNaN(value));
|
||||
|
||||
expect(shouldRender).toBe(true);
|
||||
|
||||
if (shouldRender) {
|
||||
const stringValue = String(value);
|
||||
expect(stringValue).toBe('0');
|
||||
expect(typeof stringValue).toBe('string');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,49 +0,0 @@
|
||||
import { render, screen, waitFor } from "@testing-library/react";
|
||||
import CurrentlyReadingComp from "@/app/components/CurrentlyReading";
|
||||
import React from "react";
|
||||
|
||||
jest.mock("next-intl", () => ({
|
||||
useTranslations: () => (key: string) => key,
|
||||
useLocale: () => "en",
|
||||
}));
|
||||
|
||||
jest.mock("next/image", () => ({
|
||||
__esModule: true,
|
||||
default: (props: React.ImgHTMLAttributes<HTMLImageElement>) => <img {...props} alt={props.alt || ""} />,
|
||||
}));
|
||||
|
||||
describe("CurrentlyReading Component", () => {
|
||||
beforeEach(() => {
|
||||
global.fetch = jest.fn();
|
||||
});
|
||||
|
||||
it("renders loading skeleton when loading", () => {
|
||||
(global.fetch as jest.Mock).mockReturnValue(new Promise(() => {}));
|
||||
render(<CurrentlyReadingComp />);
|
||||
expect(screen.getAllByText).toBeDefined();
|
||||
});
|
||||
|
||||
it("renders a book when data is fetched", async () => {
|
||||
const mockBooks = [
|
||||
{
|
||||
title: "Test Book",
|
||||
authors: ["Test Author"],
|
||||
image: "/test.jpg",
|
||||
progress: 50,
|
||||
startedAt: "2024-01-01"
|
||||
},
|
||||
];
|
||||
|
||||
(global.fetch as jest.Mock).mockResolvedValue({
|
||||
ok: true,
|
||||
json: async () => ({ currentlyReading: mockBooks }),
|
||||
});
|
||||
|
||||
render(<CurrentlyReadingComp />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText("Test Book")).toBeInTheDocument();
|
||||
expect(screen.getByText("Test Author")).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -83,23 +83,17 @@ describe("i18n: message files", () => {
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
const WRAPPED_COMPONENT_NAMESPACES: Record<string, string[]> = {
|
||||
About: ["home.about", "about"],
|
||||
Projects: ["home.projects"],
|
||||
Contact: ["home.contact", "home.contact.form", "home.contact.info"],
|
||||
Footer: ["footer"],
|
||||
};
|
||||
|
||||
const CLIENT_WRAPPER_PROVIDES: Record<string, string[]> = {
|
||||
AboutClient: ["home.about", "about"],
|
||||
ProjectsClient: ["home.projects"],
|
||||
ContactClient: ["home.contact"],
|
||||
FooterClient: ["footer"],
|
||||
};
|
||||
|
||||
describe("i18n: ClientWrappers provide all requested namespaces", () => {
|
||||
const componentToWrapper: Record<string, string> = {
|
||||
About: "AboutClient",
|
||||
Projects: "ProjectsClient",
|
||||
Contact: "ContactClient",
|
||||
Footer: "FooterClient",
|
||||
};
|
||||
@@ -137,17 +131,11 @@ const STATIC_KEYS: Record<string, Record<string, string[]>> = {
|
||||
},
|
||||
consent: { ConsentBanner: ["title", "description", "essential", "chat", "alwaysOn", "acceptAll", "acceptSelected", "rejectAll", "hide"] },
|
||||
"home.hero": { Hero: ["kicker", "claim", "intro", "countdown", "ctaWork", "ctaContact"] },
|
||||
"home.tisch": { TischSection: ["title", "allProjects", "hintBoard", "hintDeck", "tidy", "mess", "flip", "details", "prev", "next", "ticketTitle", "ticketDays", "ticketJob", "ticketStub", "serverTitle", "servers.ingress.name", "servers.ingress.detail", "servers.mail.name", "servers.mail.detail", "servers.home.name", "servers.home.detail", "serverNote", "bookLabel", "bookFallback", "photoCaption", "sticker"] },
|
||||
"home.windows": { HomePageServer: ["close", "minimize", "openWindows", "projectPage", "source", "live", "stack", "year", "now.title", "now.days", "now.study.label", "now.study.text", "now.work.label", "now.work.text", "now.side.label", "now.side.text", "server.title", "server.headline", "read.title", "read.progress", "read.empty", "read.library", "about.title", "about.p1", "about.p2", "about.facts.laptop.label", "about.facts.laptop.value", "about.facts.pc.label", "about.facts.pc.value", "about.facts.study.label", "about.facts.study.value", "about.facts.languages.label", "about.facts.languages.value", "contact.title", "contact.body", "contact.copy", "contact.copied", "contact.form"] },
|
||||
"home.about": { About: ["title", "p1", "p2", "p3", "funFactTitle", "funFactBody", "hobbiesTitle"] },
|
||||
"home.about.activity": { ActivityFeed: ["idleStatus", "codingNow", "gaming", "inGame", "listening"] },
|
||||
"home.about.currentlyReading": { CurrentlyReading: ["title", "progress"] },
|
||||
"home.about.readBooks": { ReadBooks: ["title", "showMore", "showLess", "readMore", "collapseReview", "finishedAt", "empty"] },
|
||||
"home.projects": { Projects: ["title", "subtitle", "viewAll", "noProjects"] },
|
||||
"home.tisch": { TischSection: ["title", "allProjects", "hintBoard", "hintDeck", "tidy", "mess", "flip", "details", "prev", "next", "ticketTitle", "ticketDays", "ticketJob", "ticketStub", "serverTitle", "servers.ingress.name", "servers.ingress.detail", "servers.mail.name", "servers.mail.detail", "servers.home.name", "servers.home.detail", "serverNote", "bookLabel", "bookFallback", "photoCaption", "chatCard", "chatCardHint", "sticker"] },
|
||||
"home.windows": { HomePageServer: ["close", "minimize", "openWindows", "projectPage", "source", "live", "stack", "year", "now.title", "now.days", "now.study.label", "now.study.text", "now.work.label", "now.work.text", "now.side.label", "now.side.text", "server.title", "server.headline", "read.title", "read.progress", "read.empty", "read.library", "about.title", "about.p1", "about.p2", "about.facts.laptop.label", "about.facts.laptop.value", "about.facts.pc.label", "about.facts.pc.value", "about.facts.study.label", "about.facts.study.value", "about.facts.languages.label", "about.facts.languages.value", "chat.title", "chat.welcome", "chat.consent", "chat.allow", "chat.placeholder", "chat.send", "chat.error", "chat.thinking", "chat.note", "contact.title", "contact.body", "contact.copy", "contact.copied", "contact.form"] },
|
||||
"home.contact": { Contact: ["title", "subtitle"] },
|
||||
"home.contact.form": { Contact: ["title", "sending", "send", "labels.name", "labels.email", "labels.subject", "labels.message", "placeholders.name", "placeholders.email", "placeholders.subject", "placeholders.message", "errors.nameRequired", "errors.nameMin", "errors.emailRequired", "errors.emailInvalid", "errors.subjectRequired", "errors.subjectMin", "errors.messageRequired", "errors.messageMin", "characters"] },
|
||||
"home.contact.info": { Contact: ["locationValue"] },
|
||||
about: { About: ["status", "aiAssistant", "library", "viewAll", "myGear", "gearMain", "gearPC", "gearServer", "gearOS", "curiosity"] },
|
||||
"projects.list": { ProjectsPageClient: ["title", "intro", "searchPlaceholder", "all", "noResults", "clearFilters"] },
|
||||
"projects.detail": { ProjectDetailClient: ["liveDemo", "viewSource"] },
|
||||
footer: { Footer: ["role", "madeIn", "legalNotice", "privacyPolicy", "privacySettings", "privacySettingsTitle", "builtWith", "aiDisclaimer", "backToTop", "systemsOnline"] },
|
||||
|
||||
Reference in New Issue
Block a user