🧪 Write Unit & Integration Tests for Flexprice Frontend

We're looking for contributors to help us improve the test coverage of our frontend! 🚀
This is a great opportunity for first-time contributors to dive into open source with a real product.

---

📦 Tech Stack

• Frontend Framework: React.js + Vite
• UI Components: shadcn/ui
• Styling: Tailwind CSS
• State Management: Zustand + Context API
• Testing:
  • Vitest (unit testing)
  • @testing-library/react (component testing)
  • @testing-library/user-event (user interaction simulation)

---

🎯 Your Task

Help us write unit tests and integration tests for components, hooks, pages, and critical flows!

✅ Scope

• Unit Tests:

  • Atomic components like Button, Input, Card in src/components/atoms/
  • Custom hooks in src/hooks/

• Integration Tests:

  • Pages in src/pages/
  • Major flows like Billing, Dashboard, and Analytics in src/components/organisms/

• Improve test structure and coverage using Vitest + Testing Library

---

🛠 Getting Started

Clone & Setup

git clone https://github.com/flexprice/flexprice-front
cd flexprice-front
npm install

Run the Dev Server

npm run dev

Run Tests

npm run test

💡 Note:
Create tests in the respective folders using the .test.tsx naming convention and follow the existing structure if available.

---

🧪 Example Test

Here’s a basic example for the Button component:

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Button } from './Button';

test('renders Button and handles click', async () => {
  const onClick = vi.fn();
  render(<Button onClick={onClick}>Click me</Button>);

  await userEvent.click(screen.getByText(/click me/i));
  expect(onClick).toHaveBeenCalledTimes(1);
});

---

✅ Acceptance Criteria

• Add unit tests for at least 3 components (atoms, molecules, or organisms)
• Add at least 1 integration test for a complete flow (e.g., form submission)
• Use Vitest + @testing-library/react
• Follow naming conventions: ComponentName.test.tsx
• Ensure tests are self-contained, readable, and mimic real user behavior
• Use data-testid only when necessary

---

💡 Tips

• Follow Testing Library Best Practices
• Focus on testing behavior, not implementation details
• Keep tests clean, descriptive, and maintainable

---

🔥 Good First Issues

If you're new to open source, start here:

• src/components/atoms/Button/
• src/hooks/useAuth.ts
• src/pages/dashboard.tsx

---

🤝 How to Contribute

1. Fork the repo

2. Create a branch:

   git checkout -b test/<component-name>
   

3. Add your test files

4. Push and open a Pull Request with the title:
   ✅ Tests: <Component or Flow Name>

---

📚 Resources

• Shadcn/UI Docs
• Vitest Docs
• Testing Library Docs
• Flexprice Docs

---

📞 Need Help?

Leave a comment below or email us at support@flexprice.io — we're happy to guide you.

---

❤️ Thank You

Your contribution helps make Flexprice more stable and production-ready!
Happy testing! 🧪✨