08: Migrate & redesign Blog, Ads, and Dashboard pages
- Blog listing page with hero, responsive grid, tag filters, load more - Blog post page with markdown rendering, related posts, social share - Ads landing page with conversion copy, pricing, FAQ, testimonials - Dashboard shell with sidebar, topbar, stat cards, activity feed - Dashboard components: Sidebar, TopBar, StatCard, ActivityFeed, QuickActions - Comprehensive test suite covering all pages and components
This commit is contained in:
266
web/src/routes/migrated-pages.test.tsx
Normal file
266
web/src/routes/migrated-pages.test.tsx
Normal file
@@ -0,0 +1,266 @@
|
||||
import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
|
||||
import { render } from "solid-js/web";
|
||||
import { MetaProvider } from "@solidjs/meta";
|
||||
import type { JSX } from "solid-js";
|
||||
|
||||
vi.mock("@solidjs/router", () => ({
|
||||
A: (props: { href?: string; children?: JSX.Element; class?: string; onClick?: () => void }) => (
|
||||
<a href={props.href || "#"} class={props.class} onClick={props.onClick}>
|
||||
{props.children}
|
||||
</a>
|
||||
),
|
||||
useLocation: () => ({ pathname: "/dashboard" }),
|
||||
useParams: () => ({ slug: "ai-scam-trends-2026" }),
|
||||
useSearchParams: () => [new URLSearchParams(), vi.fn()],
|
||||
}));
|
||||
|
||||
import BlogPage from "./blog";
|
||||
import BlogPostPage from "./blog/[slug]";
|
||||
import AdsPage from "./ads";
|
||||
import DashboardPage from "./(webapp)/dashboard";
|
||||
import StatCard from "~/components/dashboard/StatCard";
|
||||
import ActivityFeed from "~/components/dashboard/ActivityFeed";
|
||||
import QuickActions from "~/components/dashboard/QuickActions";
|
||||
|
||||
function mount(comp: () => JSX.Element): HTMLDivElement {
|
||||
const container = document.createElement("div");
|
||||
document.body.appendChild(container);
|
||||
render(() => <MetaProvider>{comp()}</MetaProvider>, container);
|
||||
return container;
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
document.body.innerHTML = "";
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
document.body.innerHTML = "";
|
||||
});
|
||||
|
||||
describe("BlogPage (listing)", () => {
|
||||
it("renders hero section with blog headline", () => {
|
||||
mount(() => <BlogPage />);
|
||||
expect(document.body.textContent).toContain("ShieldAI Blog");
|
||||
});
|
||||
|
||||
it("renders all 6 blog post cards", () => {
|
||||
mount(() => <BlogPage />);
|
||||
const cards = document.querySelectorAll(".gradient-card");
|
||||
expect(cards.length).toBeGreaterThanOrEqual(4);
|
||||
});
|
||||
|
||||
it("renders tag filter buttons", () => {
|
||||
mount(() => <BlogPage />);
|
||||
expect(document.body.textContent).toContain("All");
|
||||
expect(document.body.textContent).toContain("AI Safety");
|
||||
expect(document.body.textContent).toContain("Privacy");
|
||||
expect(document.body.textContent).toContain("Deepfakes");
|
||||
});
|
||||
|
||||
it("renders Load More button when there are more posts to show", () => {
|
||||
mount(() => <BlogPage />);
|
||||
expect(document.body.textContent).toContain("Load More Posts");
|
||||
});
|
||||
|
||||
it("renders post titles and excerpts", () => {
|
||||
mount(() => <BlogPage />);
|
||||
expect(document.body.textContent).toContain("AI Scam Trends to Watch in 2026");
|
||||
expect(document.body.textContent).toContain("Sarah Chen");
|
||||
expect(document.body.textContent).toContain("Mike Reynolds");
|
||||
});
|
||||
});
|
||||
|
||||
describe("BlogPostPage ([slug])", () => {
|
||||
it("renders post content for valid slug", () => {
|
||||
mount(() => <BlogPostPage />);
|
||||
expect(document.body.textContent).toContain("AI Scam Trends to Watch in 2026");
|
||||
expect(document.body.textContent).toContain("Sarah Chen");
|
||||
expect(document.body.textContent).toContain("Security Researcher");
|
||||
expect(document.body.textContent).toContain("May 15, 2026");
|
||||
expect(document.body.textContent).toContain("5 min read");
|
||||
});
|
||||
|
||||
it("renders markdown content as HTML", () => {
|
||||
mount(() => <BlogPostPage />);
|
||||
expect(document.body.textContent).toContain("The Rise of AI-Powered Scams");
|
||||
expect(document.body.textContent).toContain("Voice Cloning Scams");
|
||||
expect(document.body.textContent).toContain("How to Protect Yourself");
|
||||
});
|
||||
|
||||
it("renders social share buttons", () => {
|
||||
mount(() => <BlogPostPage />);
|
||||
const shareBtns = document.querySelectorAll("button[aria-label]");
|
||||
const shareLabels = Array.from(shareBtns).map(b => b.getAttribute("aria-label"));
|
||||
expect(shareLabels).toContain("Share on Twitter");
|
||||
expect(shareLabels).toContain("Share on LinkedIn");
|
||||
expect(shareLabels).toContain("Copy link");
|
||||
});
|
||||
|
||||
it("renders related posts section", () => {
|
||||
mount(() => <BlogPostPage />);
|
||||
expect(document.body.textContent).toContain("Related Posts");
|
||||
});
|
||||
|
||||
it("renders author card in sidebar", () => {
|
||||
mount(() => <BlogPostPage />);
|
||||
expect(document.body.textContent).toContain("Security Researcher");
|
||||
});
|
||||
|
||||
it("renders back to blog link", () => {
|
||||
mount(() => <BlogPostPage />);
|
||||
expect(document.body.textContent).toContain("Back to Blog");
|
||||
});
|
||||
});
|
||||
|
||||
describe("AdsPage", () => {
|
||||
it("renders conversion-focused headline", () => {
|
||||
mount(() => <AdsPage />);
|
||||
expect(document.body.textContent).toContain("Stop AI Scams Before");
|
||||
expect(document.body.textContent).toContain("They Reach You");
|
||||
});
|
||||
|
||||
it("renders pricing section with 3 plans", () => {
|
||||
mount(() => <AdsPage />);
|
||||
expect(document.body.textContent).toContain("Basic");
|
||||
expect(document.body.textContent).toContain("Plus");
|
||||
expect(document.body.textContent).toContain("Premium");
|
||||
expect(document.body.textContent).toContain("$9");
|
||||
expect(document.body.textContent).toContain("$19");
|
||||
expect(document.body.textContent).toContain("$39");
|
||||
});
|
||||
|
||||
it("marks Plus plan as Most Popular", () => {
|
||||
mount(() => <AdsPage />);
|
||||
const badges = document.body.querySelectorAll("span");
|
||||
const popularBadge = Array.from(badges).find(b => b.textContent === "Most Popular");
|
||||
expect(popularBadge).toBeTruthy();
|
||||
});
|
||||
|
||||
it("renders FAQ section with toggle functionality", () => {
|
||||
mount(() => <AdsPage />);
|
||||
expect(document.body.textContent).toContain("Frequently Asked Questions");
|
||||
expect(document.body.textContent).toContain("How does ShieldAI detect voice clones?");
|
||||
expect(document.body.textContent).toContain("Is my data encrypted?");
|
||||
});
|
||||
|
||||
it("renders trust badges", () => {
|
||||
mount(() => <AdsPage />);
|
||||
expect(document.body.textContent).toContain("14-day free trial");
|
||||
expect(document.body.textContent).toContain("No credit card required");
|
||||
expect(document.body.textContent).toContain("Cancel anytime");
|
||||
});
|
||||
|
||||
it("renders trust metrics section", () => {
|
||||
mount(() => <AdsPage />);
|
||||
expect(document.body.textContent).toContain("99.7%");
|
||||
expect(document.body.textContent).toContain("200+");
|
||||
expect(document.body.textContent).toContain("50K+");
|
||||
});
|
||||
|
||||
it("renders testimonials", () => {
|
||||
mount(() => <AdsPage />);
|
||||
expect(document.body.textContent).toContain("Trusted by Thousands");
|
||||
});
|
||||
|
||||
it("renders CTA section with Get Started Free button", () => {
|
||||
mount(() => <AdsPage />);
|
||||
expect(document.body.textContent).toContain("Ready to protect your identity?");
|
||||
expect(document.body.textContent).toContain("Get Started Free");
|
||||
});
|
||||
});
|
||||
|
||||
describe("DashboardPage", () => {
|
||||
it("renders dashboard title", () => {
|
||||
mount(() => <DashboardPage />);
|
||||
expect(document.body.textContent).toContain("Overview");
|
||||
});
|
||||
|
||||
it("renders stat cards with mock data", () => {
|
||||
mount(() => <DashboardPage />);
|
||||
expect(document.body.textContent).toContain("Active Threats");
|
||||
expect(document.body.textContent).toContain("Protected Accounts");
|
||||
expect(document.body.textContent).toContain("Dark Web Scans");
|
||||
expect(document.body.textContent).toContain("Alerts Today");
|
||||
expect(document.body.textContent).toContain("3");
|
||||
expect(document.body.textContent).toContain("12");
|
||||
expect(document.body.textContent).toContain("1,847");
|
||||
expect(document.body.textContent).toContain("7");
|
||||
});
|
||||
|
||||
it("renders sidebar with navigation links", () => {
|
||||
mount(() => <DashboardPage />);
|
||||
expect(document.body.textContent).toContain("Overview");
|
||||
expect(document.body.textContent).toContain("DarkWatch");
|
||||
expect(document.body.textContent).toContain("VoicePrint");
|
||||
expect(document.body.textContent).toContain("SpamShield");
|
||||
expect(document.body.textContent).toContain("HomeTitle");
|
||||
expect(document.body.textContent).toContain("RemoveBrokers");
|
||||
expect(document.body.textContent).toContain("Settings");
|
||||
});
|
||||
|
||||
it("renders activity feed", () => {
|
||||
mount(() => <DashboardPage />);
|
||||
expect(document.body.textContent).toContain("Recent Activity");
|
||||
expect(document.body.textContent).toContain("New credential leak detected");
|
||||
expect(document.body.textContent).toContain("VoicePrint scan completed");
|
||||
});
|
||||
|
||||
it("renders quick actions", () => {
|
||||
mount(() => <DashboardPage />);
|
||||
expect(document.body.textContent).toContain("Quick Actions");
|
||||
expect(document.body.textContent).toContain("Run Scan");
|
||||
expect(document.body.textContent).toContain("View Alerts");
|
||||
expect(document.body.textContent).toContain("Add Member");
|
||||
expect(document.body.textContent).toContain("Run Report");
|
||||
});
|
||||
});
|
||||
|
||||
describe("StatCard", () => {
|
||||
it("renders label and value", () => {
|
||||
mount(() => (
|
||||
<StatCard label="Test Metric" value="42" icon={() => <svg />} />
|
||||
));
|
||||
expect(document.body.textContent).toContain("Test Metric");
|
||||
expect(document.body.textContent).toContain("42");
|
||||
});
|
||||
|
||||
it("renders up trend indicator", () => {
|
||||
mount(() => (
|
||||
<StatCard label="Up Trend" value="10" trend="up" trendLabel="+5%" icon={() => <svg />} />
|
||||
));
|
||||
expect(document.body.textContent).toContain("+5%");
|
||||
});
|
||||
|
||||
it("renders down trend indicator", () => {
|
||||
mount(() => (
|
||||
<StatCard label="Down Trend" value="10" trend="down" trendLabel="-3%" icon={() => <svg />} />
|
||||
));
|
||||
expect(document.body.textContent).toContain("-3%");
|
||||
});
|
||||
});
|
||||
|
||||
describe("ActivityFeed", () => {
|
||||
it("renders activities", () => {
|
||||
const activities = [
|
||||
{ id: "1", title: "Test Alert", description: "Test description", timestamp: "5m ago", type: "alert" as const },
|
||||
];
|
||||
mount(() => <ActivityFeed activities={activities} />);
|
||||
expect(document.body.textContent).toContain("Recent Activity");
|
||||
expect(document.body.textContent).toContain("Test Alert");
|
||||
expect(document.body.textContent).toContain("Test description");
|
||||
expect(document.body.textContent).toContain("5m ago");
|
||||
});
|
||||
});
|
||||
|
||||
describe("QuickActions", () => {
|
||||
it("renders action buttons", () => {
|
||||
const actions = [
|
||||
{ label: "Action 1", href: "/test", icon: () => <svg /> },
|
||||
{ label: "Action 2", href: "/test2", icon: () => <svg /> },
|
||||
];
|
||||
mount(() => <QuickActions actions={actions} />);
|
||||
expect(document.body.textContent).toContain("Quick Actions");
|
||||
expect(document.body.textContent).toContain("Action 1");
|
||||
expect(document.body.textContent).toContain("Action 2");
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user