.8 Testing and Debugging

This section ensures that both your frontend React components and your Node.js backend work correctly with Permit.io permissions. You’ll learn how to simulate scenarios, catch edge cases, and debug cleanly.

---

8.1 Local Testing Checklist

Frontend

1. Run Frontend Locally

   npm start
   

2. Simulate Users

   • Manually change the user field in StudentDashboard.jsx, AdminDashboard.jsx, and TeacherDashboard.jsx.

   • Try both valid and invalid Permit.io users.

3. Test Navigation & Blocking

   • If permission is denied, confirm that the page shows "Access Denied" or redirects to an error view.

   • If permitted, it should render the full dashboard.

---

Backend

1. Run Backend

   node server.js
   

2. Send cURL Request or Postman

   curl -X POST http://localhost:5000/api/check-permission \
   -H "Content-Type: application/json" \
   -d '{"user": "user2345", "resource": "admin-dashboard"}'
   

3. Expect Response

   { "permitted": true }
   

4. Debug with Console

   • Add console.log(user, resource) before calling permit.check() to verify what’s being passed.

---

8.2 Debugging Common Issues

❗ Issue	✅ Fix
Cannot GET /	Your backend doesn’t serve a frontend — ignore or add a root message.
Access Denied on frontend	Check the user ID and the assigned roles in Permit.io
CORS error	Use cors middleware in Express
Netlify "Page not found"	Add _redirects file with SPA rule in /public
Incorrect API key	Double check permit_key_... and PDP URL from the Permit challenge

---

8.3 Unit Testing (Future Add-on)

You can add tests using:

• Jest or Mocha for backend

• React Testing Library for frontend dashboards

• Mock Permit SDK to simulate permissions

Example test:

test('denies access to teacher dashboard', async () => {
  const permitted = await permit.check('user123', 'view', 'teacher-dashboard');
  expect(permitted).toBe(false);
});

---

8.4 Deployment Testing (Live)

• Netlify: Confirm /admin, /student, /teacher routes don’t break by using a _redirects file:

  /*    /index.html   200
  

• Backend on Render/Railway:

  • Use Postman to send test requests.

  • Check logs for access attempts.

---

Final Tips

• Always test with multiple users/roles.

• Log both requests and responses in the backend for audit trails.

• Document who owns what role in a roles.md or wiki.

---