jsonresume-theme-reference 0.1.0

package/tests/fixtures/complete-resume.json

@@ -0,0 +1,197 @@
+{
+  "basics": {
+    "name": "Alex Chen",
+    "label": "Senior Software Engineer",
+    "image": "",
+    "email": "alex.chen@example.com",
+    "phone": "+1 (555) 123-4567",
+    "url": "https://alexchen.dev",
+    "summary": "Full-stack engineer with 8+ years building scalable web applications. Passionate about developer experience, clean architecture, and mentoring junior developers.",
+    "location": {
+      "city": "San Francisco",
+      "region": "CA",
+      "countryCode": "US"
+    },
+    "profiles": [
+      {
+        "network": "GitHub",
+        "username": "alexchen",
+        "url": "https://github.com/alexchen"
+      },
+      {
+        "network": "LinkedIn",
+        "username": "alexchen",
+        "url": "https://linkedin.com/in/alexchen"
+      }
+    ]
+  },
+  "work": [
+    {
+      "name": "TechCorp Inc",
+      "position": "Senior Software Engineer",
+      "location": "San Francisco, CA",
+      "startDate": "2021-03-01",
+      "endDate": null,
+      "summary": "Tech lead for core product platform serving 2M+ users",
+      "highlights": [
+        "Led migration from monolith to microservices, reducing deployment time by 75%",
+        "Architected real-time messaging system handling 100k messages/second",
+        "Mentored team of 6 engineers, 3 promoted to senior roles",
+        "Reduced cloud costs by $200k/year through optimization initiatives"
+      ]
+    },
+    {
+      "name": "StartupXYZ",
+      "position": "Software Engineer",
+      "location": "Remote",
+      "startDate": "2018-06-01",
+      "endDate": "2021-02-28",
+      "summary": "Full-stack engineer building fintech products from 0 to 1",
+      "highlights": [
+        "Built payment processing system handling $50M+ in transactions",
+        "Implemented automated testing pipeline, increasing coverage from 20% to 85%",
+        "Developed customer-facing dashboard using React and GraphQL",
+        "Collaborated with design team to improve user experience metrics by 40%"
+      ]
+    },
+    {
+      "name": "Digital Agency Co",
+      "position": "Junior Developer",
+      "location": "New York, NY",
+      "startDate": "2016-08-01",
+      "endDate": "2018-05-31",
+      "summary": "Web developer for client projects across various industries",
+      "highlights": [
+        "Delivered 15+ client websites using WordPress, React, and Vue.js",
+        "Implemented responsive designs with 98% cross-browser compatibility",
+        "Reduced page load times by 60% through optimization techniques"
+      ]
+    }
+  ],
+  "education": [
+    {
+      "institution": "University of California, Berkeley",
+      "area": "Computer Science",
+      "studyType": "Bachelor of Science",
+      "startDate": "2012-09-01",
+      "endDate": "2016-05-31",
+      "score": "3.8",
+      "courses": [
+        "CS 61A: Structure and Interpretation of Computer Programs",
+        "CS 170: Efficient Algorithms and Intractable Problems",
+        "CS 186: Database Systems"
+      ]
+    }
+  ],
+  "skills": [
+    {
+      "name": "Languages",
+      "keywords": ["JavaScript", "TypeScript", "Python", "Go", "SQL"]
+    },
+    {
+      "name": "Frontend",
+      "keywords": ["React", "Next.js", "Vue.js", "Tailwind CSS", "GraphQL"]
+    },
+    {
+      "name": "Backend",
+      "keywords": ["Node.js", "Express", "PostgreSQL", "Redis", "Docker"]
+    },
+    {
+      "name": "Cloud & DevOps",
+      "keywords": ["AWS", "Vercel", "GitHub Actions", "Kubernetes", "Terraform"]
+    }
+  ],
+  "projects": [
+    {
+      "name": "OpenSource CMS",
+      "description": "Headless CMS with visual editor used by 5k+ developers",
+      "highlights": [
+        "Built plugin architecture supporting 50+ community extensions",
+        "Achieved 4.5k GitHub stars and 200+ contributors",
+        "Featured in Tech Crunch and Product Hunt #1 product of the day"
+      ],
+      "keywords": ["React", "Node.js", "PostgreSQL", "TypeScript"],
+      "startDate": "2020-01-01",
+      "endDate": null,
+      "url": "https://github.com/alexchen/opensource-cms"
+    },
+    {
+      "name": "DevTools Extension",
+      "description": "Browser extension for debugging GraphQL applications",
+      "highlights": [
+        "Used by 50k+ developers with 4.7 star rating",
+        "Integrated with Apollo, Relay, and URQL clients"
+      ],
+      "keywords": ["JavaScript", "GraphQL", "Chrome Extension"],
+      "startDate": "2019-06-01",
+      "endDate": "2021-12-31",
+      "url": "https://devtools.example.com"
+    }
+  ],
+  "volunteer": [
+    {
+      "organization": "Code for America",
+      "position": "Volunteer Developer",
+      "startDate": "2019-01-01",
+      "endDate": null,
+      "summary": "Building civic tech tools to improve government services",
+      "highlights": [
+        "Developed public benefits enrollment system used by 10k+ citizens",
+        "Mentored 5 new volunteers in full-stack development"
+      ]
+    }
+  ],
+  "awards": [
+    {
+      "title": "Hackathon Winner - Best Developer Tool",
+      "date": "2020-11-15",
+      "awarder": "TechConf 2020",
+      "summary": "Built AI-powered code review assistant in 24 hours"
+    },
+    {
+      "title": "Employee of the Year",
+      "date": "2019-12-01",
+      "awarder": "StartupXYZ",
+      "summary": "Recognized for exceptional technical contributions and team leadership"
+    }
+  ],
+  "publications": [
+    {
+      "name": "Building Scalable GraphQL APIs",
+      "publisher": "Medium Engineering",
+      "releaseDate": "2021-06-15",
+      "url": "https://medium.com/engineering/building-scalable-graphql",
+      "summary": "Deep dive into GraphQL architecture patterns for high-traffic applications"
+    }
+  ],
+  "languages": [
+    {
+      "language": "English",
+      "fluency": "Native"
+    },
+    {
+      "language": "Mandarin",
+      "fluency": "Professional working proficiency"
+    },
+    {
+      "language": "Spanish",
+      "fluency": "Elementary proficiency"
+    }
+  ],
+  "interests": [
+    {
+      "name": "Technology",
+      "keywords": ["Open Source", "Web3", "AI/ML", "DevTools"]
+    },
+    {
+      "name": "Other",
+      "keywords": ["Rock Climbing", "Photography", "Coffee Roasting", "Travel"]
+    }
+  ],
+  "references": [
+    {
+      "name": "Sarah Johnson, Engineering Manager at TechCorp",
+      "reference": "Alex is one of the most talented engineers I've worked with. Their technical expertise and mentorship have been invaluable to our team's growth."
+    }
+  ]
+}

package/tests/theme.test.js

@@ -0,0 +1,192 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '../src/index.js';
+import completeResume from './fixtures/complete-resume.json';
+
+describe('Reference Theme', () => {
+  it('renders complete resume HTML', () => {
+    const html = render(completeResume);
+
+    // Should be valid HTML document
+    expect(html).toContain('<!DOCTYPE html>');
+    expect(html).toContain('<html lang="en">');
+    expect(html).toContain('</html>');
+  });
+
+  it('renders hero section with basics', () => {
+    const html = render(completeResume);
+
+    // Name and label
+    expect(html).toContain('Alex Chen');
+    expect(html).toContain('Senior Software Engineer');
+
+    // Contact info
+    expect(html).toContain('alex.chen@example.com');
+    expect(html).toContain('+1 (555) 123-4567');
+    expect(html).toContain('https://alexchen.dev');
+
+    // Location
+    expect(html).toContain('San Francisco');
+
+    // Summary
+    expect(html).toContain('Full-stack engineer with 8+ years');
+
+    // Social profiles
+    expect(html).toContain('GitHub');
+    expect(html).toContain('LinkedIn');
+  });
+
+  it('renders work experience section', () => {
+    const html = render(completeResume);
+
+    expect(html).toContain('Work Experience');
+    expect(html).toContain('TechCorp Inc');
+    expect(html).toContain('Senior Software Engineer');
+    expect(html).toContain('Present'); // Current role
+    expect(html).toContain('Led migration from monolith to microservices');
+  });
+
+  it('renders education section', () => {
+    const html = render(completeResume);
+
+    expect(html).toContain('Education');
+    expect(html).toContain('University of California, Berkeley');
+    expect(html).toContain('Bachelor of Science');
+    expect(html).toContain('Computer Science');
+    expect(html).toContain('GPA: 3.8');
+  });
+
+  it('renders skills section with badges', () => {
+    const html = render(completeResume);
+
+    expect(html).toContain('Skills');
+    expect(html).toContain('resume-badge'); // Badge component used
+    expect(html).toContain('JavaScript');
+    expect(html).toContain('TypeScript');
+    expect(html).toContain('React');
+    expect(html).toContain('PostgreSQL');
+  });
+
+  it('renders projects section', () => {
+    const html = render(completeResume);
+
+    expect(html).toContain('Projects');
+    expect(html).toContain('OpenSource CMS');
+    expect(html).toContain('DevTools Extension');
+    expect(html).toContain('4.5k GitHub stars');
+  });
+
+  it('renders volunteer section', () => {
+    const html = render(completeResume);
+
+    expect(html).toContain('Volunteer Experience');
+    expect(html).toContain('Code for America');
+    expect(html).toContain('Volunteer Developer');
+  });
+
+  it('renders awards section', () => {
+    const html = render(completeResume);
+
+    expect(html).toContain('Awards & Honors');
+    expect(html).toContain('Hackathon Winner');
+    expect(html).toContain('Employee of the Year');
+  });
+
+  it('renders publications section', () => {
+    const html = render(completeResume);
+
+    expect(html).toContain('Publications');
+    expect(html).toContain('Building Scalable GraphQL APIs');
+    expect(html).toContain('Medium Engineering');
+  });
+
+  it('renders languages section', () => {
+    const html = render(completeResume);
+
+    expect(html).toContain('Languages');
+    expect(html).toContain('English');
+    expect(html).toContain('Mandarin');
+    expect(html).toContain('Native');
+  });
+
+  it('renders interests section', () => {
+    const html = render(completeResume);
+
+    expect(html).toContain('Interests');
+    expect(html).toContain('Open Source');
+    expect(html).toContain('Rock Climbing');
+  });
+
+  it('renders references section', () => {
+    const html = render(completeResume);
+
+    expect(html).toContain('References');
+    expect(html).toContain('Sarah Johnson');
+    expect(html).toContain('most talented engineers');
+  });
+
+  it('handles empty sections gracefully', () => {
+    const minimalResume = {
+      basics: {
+        name: 'John Doe',
+        email: 'john@example.com',
+      },
+    };
+
+    const html = render(minimalResume);
+
+    expect(html).toContain('John Doe');
+    expect(html).toContain('john@example.com');
+    expect(html).toContain('</html>');
+  });
+
+  it('includes @resume/core stylesheet', () => {
+    const html = render(completeResume);
+
+    expect(html).toContain('@resume/core');
+    expect(html).toContain('tokens.css');
+  });
+
+  it('uses all @resume/core primitives', () => {
+    const html = render(completeResume);
+
+    // Section wrapper used
+    expect(html).toContain('resume-section');
+
+    // SectionTitle used
+    expect(html).toContain('resume-section-title');
+
+    // ListItem used
+    expect(html).toContain('resume-item');
+
+    // DateRange used (Present indicates DateRange component)
+    expect(html).toContain('Present');
+
+    // Badge/BadgeList used
+    expect(html).toContain('resume-badge');
+  });
+
+  it('generates ATS-friendly HTML structure', () => {
+    const html = render(completeResume);
+
+    // Semantic HTML tags
+    expect(html).toContain('<header');
+    expect(html).toContain('<section');
+    expect(html).toContain('<h1');
+    expect(html).toContain('<h2');
+
+    // No tables or complex layouts
+    expect(html).not.toContain('<table');
+
+    // Standard fonts (defined in inline styles)
+    expect(html).toContain('font-family: var(--resume-font-sans)');
+  });
+
+  it('is print-ready', () => {
+    const html = render(completeResume);
+
+    // Should be single-page optimized
+    expect(html).toContain('max-width: var(--resume-max-width)');
+
+    // Standard A4/Letter dimensions assumed via CSS variables
+  });
+});