Merge pull request #7136 from Kilo-Org/mark/marketplace-screenshot-tests

test(marketplace): add visual regression stories for skills tab
2026-09-19 10:02:04 +08:00 · 2026-03-17 10:31:24 +01:00
parent c766f23fe2 99b0790095
commit 2e2b3503fb
6 changed files with 208 additions and 0 deletions
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7bc9274e748f94e0ae979f688a87c52b9a3d579ac015a2a49f327f8c96d002db
+size 11116
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7bc6061e131b91cd0ce7f40c5e2e4d1d1ef458511ea221a205d5538392805294
+size 9735
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9f722d2782f69170a3efca6ed64ab02d9140f845bb47059ba193e238c768d0a5
+size 4852
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:be90b297cbdef33fa1c3c67be7a42e4c00a5f3d68147a5fbf54a04ab7b261d04
+size 52330
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d27dc2c85a377f7daab0b7de444a7d883a4503ab45c92c0c0a9155de89e2a221
+size 49775
@@ -0,0 +1,193 @@
+/** @jsxImportSource solid-js */
+/**
+ * Stories for Marketplace components.
+ *
+ * Renders SkillsMarketplace and ItemCard directly with mock data
+ * so no API requests are made.
+ */
+
+import type { Meta, StoryObj } from "storybook-solidjs-vite"
+import { StoryProviders } from "./StoryProviders"
+import SkillsMarketplace from "../components/marketplace/SkillsMarketplace"
+import ItemCard from "../components/marketplace/ItemCard"
+import type { SkillMarketplaceItem, MarketplaceInstalledMetadata } from "../types/marketplace"
+import "../components/marketplace/marketplace.css"
+
+const meta: Meta = {
+  title: "Marketplace",
+  parameters: { layout: "fullscreen" },
+}
+export default meta
+type Story = StoryObj
+
+// ---------------------------------------------------------------------------
+// Mock data
+// ---------------------------------------------------------------------------
+
+const MOCK_SKILLS: SkillMarketplaceItem[] = [
+  {
+    type: "skill",
+    id: "nextjs-developer",
+    name: "Next.js Developer",
+    displayName: "Next.js Developer",
+    description:
+      "Expert at building Next.js applications with App Router, server components, and modern React patterns.",
+    category: "web-development",
+    displayCategory: "Web Development",
+    githubUrl: "https://github.com/example/nextjs-developer",
+    content: "https://example.com/nextjs-developer.tar.gz",
+  },
+  {
+    type: "skill",
+    id: "python-data-science",
+    name: "Python Data Science",
+    displayName: "Python Data Science",
+    description:
+      "Analyzes data using pandas, numpy, and matplotlib. Creates visualizations and builds machine learning models.",
+    category: "data-science",
+    displayCategory: "Data Science",
+    githubUrl: "https://github.com/example/python-data-science",
+    content: "https://example.com/python-data-science.tar.gz",
+    author: "DataTeam",
+  },
+  {
+    type: "skill",
+    id: "rust-systems",
+    name: "Rust Systems",
+    displayName: "Rust Systems",
+    description: "Systems programming with Rust. Memory safety, concurrency, and performance optimization.",
+    category: "systems",
+    displayCategory: "Systems",
+    githubUrl: "https://github.com/example/rust-systems",
+    content: "https://example.com/rust-systems.tar.gz",
+  },
+  {
+    type: "skill",
+    id: "react-native-mobile",
+    name: "React Native Mobile",
+    displayName: "React Native Mobile",
+    description: "Build cross-platform mobile apps with React Native, Expo, and native modules.",
+    category: "mobile",
+    displayCategory: "Mobile",
+    githubUrl: "https://github.com/example/react-native-mobile",
+    content: "https://example.com/react-native-mobile.tar.gz",
+    author: "MobileDev",
+  },
+  {
+    type: "skill",
+    id: "devops-kubernetes",
+    name: "DevOps Kubernetes",
+    displayName: "DevOps Kubernetes",
+    description: "Container orchestration with Kubernetes. Helm charts, deployments, and cluster management.",
+    category: "devops",
+    displayCategory: "DevOps",
+    githubUrl: "https://github.com/example/devops-kubernetes",
+    content: "https://example.com/devops-kubernetes.tar.gz",
+  },
+  {
+    type: "skill",
+    id: "api-design",
+    name: "API Design",
+    displayName: "API Design",
+    description: "Design RESTful and GraphQL APIs with OpenAPI specs, authentication, and rate limiting.",
+    category: "web-development",
+    displayCategory: "Web Development",
+    githubUrl: "https://github.com/example/api-design",
+    content: "https://example.com/api-design.tar.gz",
+    author: "APIGuild",
+  },
+]
+
+const EMPTY_METADATA: MarketplaceInstalledMetadata = { project: {}, global: {} }
+
+const PARTIAL_INSTALLED: MarketplaceInstalledMetadata = {
+  project: { "nextjs-developer": { type: "skill" } },
+  global: { "python-data-science": { type: "skill" } },
+}
+
+const noop = () => {}
+
+// ---------------------------------------------------------------------------
+// Stories
+// ---------------------------------------------------------------------------
+
+export const SkillsTabWithItems: Story = {
+  name: "Skills tab — with items",
+  render: () => (
+    <StoryProviders>
+      <div style={{ width: "420px", height: "700px", overflow: "auto", padding: "12px" }}>
+        <SkillsMarketplace
+          items={MOCK_SKILLS}
+          metadata={EMPTY_METADATA}
+          fetching={false}
+          onInstall={noop}
+          onRemove={noop}
+        />
+      </div>
+    </StoryProviders>
+  ),
+}
+
+export const SkillsTabWithInstalled: Story = {
+  name: "Skills tab — some installed",
+  render: () => (
+    <StoryProviders>
+      <div style={{ width: "420px", height: "700px", overflow: "auto", padding: "12px" }}>
+        <SkillsMarketplace
+          items={MOCK_SKILLS}
+          metadata={PARTIAL_INSTALLED}
+          fetching={false}
+          onInstall={noop}
+          onRemove={noop}
+        />
+      </div>
+    </StoryProviders>
+  ),
+}
+
+export const SkillsTabEmpty: Story = {
+  name: "Skills tab — empty state",
+  render: () => (
+    <StoryProviders>
+      <div style={{ width: "420px", height: "400px", overflow: "auto", padding: "12px" }}>
+        <SkillsMarketplace items={[]} metadata={EMPTY_METADATA} fetching={false} onInstall={noop} onRemove={noop} />
+      </div>
+    </StoryProviders>
+  ),
+}
+
+export const SingleSkillCard: Story = {
+  name: "ItemCard — single skill not installed",
+  render: () => (
+    <StoryProviders>
+      <div style={{ width: "420px", padding: "12px" }}>
+        <ItemCard
+          item={MOCK_SKILLS[0]}
+          metadata={EMPTY_METADATA}
+          displayName={MOCK_SKILLS[0].displayName}
+          linkUrl={MOCK_SKILLS[0].githubUrl}
+          onInstall={noop}
+          onRemove={noop}
+        />
+      </div>
+    </StoryProviders>
+  ),
+}
+
+export const InstalledSkillCard: Story = {
+  name: "ItemCard — installed skill",
+  render: () => (
+    <StoryProviders>
+      <div style={{ width: "420px", padding: "12px" }}>
+        <ItemCard
+          item={MOCK_SKILLS[0]}
+          metadata={PARTIAL_INSTALLED}
+          displayName={MOCK_SKILLS[0].displayName}
+          linkUrl={MOCK_SKILLS[0].githubUrl}
+          onInstall={noop}
+          onRemove={noop}
+        />
+      </div>
+    </StoryProviders>
+  ),
+}