fix: build and test stability for design overhaul
Fixed missing types, import errors, and updated test suites to match the new editorial design. Verified Docker container build.
This commit is contained in:
denshooter
+55
-144
@@ -1,155 +1,66 @@
|
||||
import "@testing-library/jest-dom";
|
||||
import "whatwg-fetch";
|
||||
import React from "react";
|
||||
import { render } from "@testing-library/react";
|
||||
import { ToastProvider } from "@/components/Toast";
|
||||
import { Request, Response, Headers } from "node-fetch";
|
||||
|
||||
// Mock Next.js router
|
||||
jest.mock("next/navigation", () => ({
|
||||
useRouter() {
|
||||
return {
|
||||
push: jest.fn(),
|
||||
replace: jest.fn(),
|
||||
prefetch: jest.fn(),
|
||||
back: jest.fn(),
|
||||
pathname: "/",
|
||||
query: {},
|
||||
asPath: "/",
|
||||
};
|
||||
},
|
||||
usePathname() {
|
||||
return "/";
|
||||
},
|
||||
useSearchParams() {
|
||||
return new URLSearchParams();
|
||||
},
|
||||
notFound: jest.fn(),
|
||||
}));
|
||||
|
||||
// Mock next-intl (ESM) for Jest
|
||||
jest.mock("next-intl", () => ({
|
||||
useLocale: () => "en",
|
||||
useTranslations:
|
||||
(namespace?: string) =>
|
||||
(key: string) => {
|
||||
if (namespace === "nav") {
|
||||
const map: Record<string, string> = {
|
||||
home: "Home",
|
||||
about: "About",
|
||||
projects: "Projects",
|
||||
contact: "Contact",
|
||||
};
|
||||
return map[key] || key;
|
||||
}
|
||||
if (namespace === "common") {
|
||||
const map: Record<string, string> = {
|
||||
backToHome: "Back to Home",
|
||||
backToProjects: "Back to Projects",
|
||||
};
|
||||
return map[key] || key;
|
||||
}
|
||||
if (namespace === "home.hero") {
|
||||
const map: Record<string, string> = {
|
||||
"features.f1": "Next.js & Flutter",
|
||||
"features.f2": "Docker Swarm & CI/CD",
|
||||
"features.f3": "Self-Hosted Infrastructure",
|
||||
description:
|
||||
"Student and passionate self-hoster building full-stack web apps and mobile solutions. I run my own infrastructure and love exploring DevOps.",
|
||||
ctaWork: "View My Work",
|
||||
ctaContact: "Contact Me",
|
||||
};
|
||||
return map[key] || key;
|
||||
}
|
||||
if (namespace === "home.about") {
|
||||
const map: Record<string, string> = {
|
||||
title: "About Me",
|
||||
p1: "Hi, I'm Dennis – a student and passionate self-hoster based in Osnabrück, Germany.",
|
||||
p2: "I love building full-stack web applications with Next.js and mobile apps with Flutter. But what really excites me is DevOps: I run my own infrastructure and automate deployments with CI/CD.",
|
||||
p3: "When I'm not coding or tinkering with servers, you'll find me gaming, jogging, or experimenting with automation workflows.",
|
||||
funFactTitle: "Fun Fact",
|
||||
funFactBody:
|
||||
"Even though I automate a lot, I still use pen and paper for my calendar and notes – it helps me stay focused.",
|
||||
};
|
||||
return map[key] || key;
|
||||
}
|
||||
if (namespace === "home.contact") {
|
||||
const map: Record<string, string> = {
|
||||
title: "Contact Me",
|
||||
subtitle:
|
||||
"Interested in working together or have questions about my projects? Feel free to reach out!",
|
||||
getInTouch: "Get In Touch",
|
||||
getInTouchBody:
|
||||
"I'm always available to discuss new opportunities, interesting projects, or simply chat about technology and innovation.",
|
||||
};
|
||||
return map[key] || key;
|
||||
}
|
||||
return key;
|
||||
},
|
||||
NextIntlClientProvider: ({ children }: { children: React.ReactNode }) =>
|
||||
React.createElement(React.Fragment, null, children),
|
||||
}));
|
||||
|
||||
// Mock next/link
|
||||
jest.mock("next/link", () => {
|
||||
return function Link({
|
||||
children,
|
||||
href,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
href: string;
|
||||
}) {
|
||||
return React.createElement("a", { href }, children);
|
||||
};
|
||||
// Mock matchMedia
|
||||
Object.defineProperty(window, "matchMedia", {
|
||||
writable: true,
|
||||
value: jest.fn().mockImplementation((query) => ({
|
||||
matches: false,
|
||||
media: query,
|
||||
onchange: null,
|
||||
addListener: jest.fn(),
|
||||
removeListener: jest.fn(),
|
||||
addEventListener: jest.fn(),
|
||||
removeEventListener: jest.fn(),
|
||||
dispatchEvent: jest.fn(),
|
||||
})),
|
||||
});
|
||||
|
||||
// Mock next/image
|
||||
jest.mock("next/image", () => {
|
||||
return function Image({
|
||||
src,
|
||||
alt,
|
||||
...props
|
||||
}: React.ImgHTMLAttributes<HTMLImageElement>) {
|
||||
return React.createElement("img", { src, alt, ...props });
|
||||
};
|
||||
// Mock IntersectionObserver
|
||||
class MockIntersectionObserver {
|
||||
observe = jest.fn();
|
||||
unobserve = jest.fn();
|
||||
disconnect = jest.fn();
|
||||
}
|
||||
|
||||
Object.defineProperty(window, "IntersectionObserver", {
|
||||
writable: true,
|
||||
configurable: true,
|
||||
value: MockIntersectionObserver,
|
||||
});
|
||||
|
||||
// Mock react-responsive-masonry if it's used
|
||||
jest.mock("react-responsive-masonry", () => {
|
||||
const MasonryComponent = function Masonry({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return React.createElement("div", { "data-testid": "masonry" }, children);
|
||||
};
|
||||
|
||||
const ResponsiveMasonryComponent = function ResponsiveMasonry({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return React.createElement(
|
||||
"div",
|
||||
{ "data-testid": "responsive-masonry" },
|
||||
children,
|
||||
);
|
||||
};
|
||||
// Polyfill Headers/Request/Response
|
||||
if (!global.Headers) {
|
||||
// @ts-ignore
|
||||
global.Headers = Headers;
|
||||
}
|
||||
if (!global.Request) {
|
||||
// @ts-ignore
|
||||
global.Request = Request;
|
||||
}
|
||||
if (!global.Response) {
|
||||
// @ts-ignore
|
||||
global.Response = Response;
|
||||
}
|
||||
|
||||
// Mock NextResponse
|
||||
jest.mock('next/server', () => {
|
||||
const actual = jest.requireActual('next/server');
|
||||
return {
|
||||
__esModule: true,
|
||||
default: MasonryComponent,
|
||||
ResponsiveMasonry: ResponsiveMasonryComponent,
|
||||
...actual,
|
||||
NextResponse: {
|
||||
json: (data: any, init?: any) => {
|
||||
const res = new Response(JSON.stringify(data), init);
|
||||
res.headers.set('Content-Type', 'application/json');
|
||||
return res;
|
||||
},
|
||||
next: () => ({ headers: new Headers() }),
|
||||
redirect: (url: string) => ({ headers: new Headers(), status: 302 }),
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
// Custom render function with ToastProvider
|
||||
const customRender = (ui: React.ReactElement, options = {}) =>
|
||||
render(ui, {
|
||||
wrapper: ({ children }) =>
|
||||
React.createElement(ToastProvider, null, children),
|
||||
...options,
|
||||
});
|
||||
|
||||
// Re-export everything
|
||||
export * from "@testing-library/react";
|
||||
export { customRender as render };
|
||||
// Env vars for tests
|
||||
process.env.DIRECTUS_URL = "http://localhost:8055";
|
||||
process.env.DIRECTUS_TOKEN = "test-token";
|
||||
process.env.NEXT_PUBLIC_SITE_URL = "http://localhost:3000";
|
||||
|
||||
Reference in New Issue
Block a user