LL-350 add connected state to device card

.env.example

@@ -0,0 +1,12 @@
+# MongoDB connection string
+MONGO_DB_URL=
+
+# Secret key for JWT token signing
+TOKEN_SECRET=
+
+# SMTP configuration for sending emails
+SMTP_USER=
+SMTP_PASS=
+
+# Domain URL for email verification links
+domain=http://localhost:3000

.github/workflows/coverage.yml

@@ -20,7 +20,7 @@ jobs:
         run: npm install
 
       - name: Run tests
-        run: npx jest --coverage --reporters=jest-junit
+        run: npx jest --coverage --reporters=default --reporters=jest-junit --verbose
 
       - name: Upload results to Codecov
         uses: codecov/codecov-action@v5

.gitignore

@@ -12,6 +12,7 @@
 
 # testing
 /coverage
+junit.xml
 
 # next.js
 /.next/
@@ -31,7 +32,7 @@ yarn-error.log*
 .pnpm-debug.log*
 
 # env files (can opt-in for committing if needed)
-.env*
+.env
 
 # vercel
 .vercel

app/dashboard/page.tsx

@@ -25,6 +25,7 @@ interface Device {
   color: string; // Named color
   brightness: number;
   powered: boolean;
+  connected?: boolean; // Connection status
 }
 
 interface User {
@@ -40,7 +41,7 @@ export default function Dashboard() {
   const [devices, setDevices] = useState<Device[]>([]);
   const [selectedDeviceId, setSelectedDeviceId] = useState<string>("");
   const [selectedDevice, setSelectedDevice] = useState<Device | null>(null);
-  const [editValues, setEditValues] = useState<Omit<Device, "_id">>({
+  const [editValues, setEditValues] = useState<Omit<Device, "_id" | "connected">>({
     name: "",
     color: colors[0].name,
     brightness: 100,
@@ -293,6 +294,14 @@ const colorsList = useMemo(() => colors, []);
 
             {selectedDevice && (
               <div className="mt-6 bg-blue-100 p-4 text-left rounded-lg shadow">
+                {/* Connection Status */}
+                <div className="flex items-center gap-2 mb-4 pb-3 border-b border-gray-300">
+                  <div className={`w-3 h-3 rounded-full ${selectedDevice.connected ? 'bg-green-500' : 'bg-red-500'}`} />
+                  <span className="text-sm font-semibold">
+                    {selectedDevice.connected ? 'Connected' : 'Disconnected'}
+                  </span>
+                </div>
+
                 {/* Device Name */}
                 <label className="block mb-2">Name</label>
                 <input

tests/account/account.api.test.ts

@@ -4,6 +4,11 @@ jest.mock("@/dbConfig", () => ({
   disconnect: async () => {},   // no-op
 }));
 
+// ✅ Mock sendEmail to prevent actual email sending in tests
+jest.mock("@/app/helpers/mailer", () => ({
+  sendEmail: jest.fn().mockResolvedValue(true),
+}));
+
 import User from "@/server/mongodb/models/accountSchema";
 import bcrypt from "bcryptjs";
 import { POST as deviceHandler } from "@/app/api/users/devices/route";

tests/setup.ts

@@ -11,6 +11,9 @@ beforeAll(async () => {
   // Set test DB URL
   process.env.MONGO_DB_URL = mongo.getUri();
 
+  // Set TOKEN_SECRET for JWT signing in tests
+  process.env.TOKEN_SECRET = "test-secret-key-for-jwt-signing";
+
   // Connect mongoose directly
   await mongoose.connect(process.env.MONGO_DB_URL);
   console.log("✅ Connected to in-memory MongoDB");