Merge pull request #40 from KSJaay/tests

Adds end to end testing using Cypress and Vitest unit tests

.github/workflows/unit-test-ci.yml

@@ -0,0 +1,26 @@
+name: Unit test CI
+
+on:
+  push:
+    branches: ['main']
+  pull_request:
+    branches: ['main']
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20.x]
+
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+      - run: npm ci
+      - run: npm run build --if-present
+      - run: npm run test:app

.gitignore

@@ -12,7 +12,7 @@
 # production
 /dist
 /stats
-/server/database/sqlite/lunalytics.db
+/server/database/sqlite/*.db
 /app/pages/icons.jsx
 /app/components/icons/list.jsx
 docs/.vitepress/dist
@@ -22,7 +22,6 @@ public/kanban.json
 # misc
 .DS_Store
 *.pem
-package-lock.json
 yarn.lock
 
 # debug

.husky/pre-push

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm run test:app

app/components/home/menu/index.jsx

@@ -39,6 +39,7 @@ const HomeMenu = ({ handleReset, search, setSearch }) => {
 
         {user.canEdit ? (
           <Button
+            id="home-add-monitor-button"
             onClick={() =>
               openModal(
                 <MonitorConfigureModal

app/components/home/monitor/layout/card.jsx

@@ -24,14 +24,15 @@ const MonitorCard = ({ monitor = {} }) => {
           <MonitorOptions monitorId={monitor.monitorId} />
         </span>
       </div>
-      <span onClick={() => navigate(`/monitor/${monitor.monitorId}`)}>
+      <span
+        onClick={() => navigate(`/monitor/${monitor.monitorId}`)}
+        id={`monitor-${monitor.name}`}
+      >
         <a className="home-monitor-url">{address}</a>
         <div className="home-monitor-uptime-container">
           <div className="home-monitor-uptime">
             <h1>Ping</h1>
-            <div>
-              {heartbeat.latency ? `${heartbeat.latency} ms` : '0ms'}
-            </div>
+            <div>{heartbeat.latency ? `${heartbeat.latency} ms` : '0ms'}</div>
           </div>
           <div className="home-monitor-uptime">
             <h1>Uptime</h1>

app/components/home/monitor/layout/compact.jsx

@@ -16,6 +16,7 @@ const MonitorList = ({ monitor = {} }) => {
     <div
       className="home-monitor-container-compact"
       onClick={() => navigate(`/monitor/${monitor.monitorId}`)}
+      id={`monitor-${monitor.name}`}
     >
       <div className="home-monitor-name-compact">{name}</div>
 

app/components/home/monitor/layout/list.jsx

@@ -18,6 +18,7 @@ const MonitorList = ({ monitor = {} }) => {
     <div
       className="home-monitor-container-list"
       onClick={() => navigate(`/monitor/${monitor.monitorId}`)}
+      id={`monitor-${monitor.name}`}
     >
       <div className="home-monitor-type-list">
         <div className="home-monitor-name-list">{name}</div>

app/components/modal/monitor/configure.jsx

@@ -62,7 +62,11 @@ const MonitorConfigureModal = ({
 
       <Modal.Actions>
         {form.actions.map((action) => (
-          <Modal.Button key={action} onClick={handleActionButtons(action)}>
+          <Modal.Button
+            id={action}
+            key={action}
+            onClick={handleActionButtons(action)}
+          >
             {action}
           </Modal.Button>
         ))}

app/components/modal/monitor/delete.jsx

@@ -15,8 +15,14 @@ const MonitorModal = ({ monitorId, handleClose, handleConfirm }) => {
         <span style={{ fontWeight: '600' }}>This action cannot be undone.</span>
       </Modal.Message>
       <Modal.Actions>
-        <Modal.Button onClick={handleClose}>Cancel</Modal.Button>
-        <Modal.Button color="red" onClick={handleConfirm}>
+        <Modal.Button onClick={handleClose} id="monitor-delete-cancel-button">
+          Cancel
+        </Modal.Button>
+        <Modal.Button
+          color="red"
+          onClick={handleConfirm}
+          id="monitor-delete-confirm-button"
+        >
           Confirm
         </Modal.Button>
       </Modal.Actions>

app/components/modal/monitor/pages/http/index.jsx

@@ -14,6 +14,7 @@ const MonitorAddHttp = ({ inputs, errors, handleInput }) => {
   return (
     <div className="monitor-configure-container">
       <TextInput
+        id="input-url"
         label="URL"
         value={inputs.url}
         onChange={(event) => {
@@ -26,7 +27,7 @@ const MonitorAddHttp = ({ inputs, errors, handleInput }) => {
         handleSelect={handleMethodSelect}
       />
       {errors.method && (
-        <label className="text-input-error">{errors.method}</label>
+        <label className="text-input-error" id="text-input-http-method-error">{errors.method}</label>
       )}
 
       <MonitorHttpStatusCodes

app/components/modal/monitor/pages/http/methods.jsx

@@ -22,12 +22,14 @@ const MonitorHttpMethods = ({ handleSelect, selectValue = defaultValue }) => {
           asInput
           isOpen={dropdownIsOpen}
           toggleDropdown={toggleDropdown}
+          id="http-method-dropdown"
         >
           {selectValue}
         </Dropdown.Trigger>
         <Dropdown.List fullWidth isOpen={dropdownIsOpen}>
           {methods.map((method) => (
             <Dropdown.Item
+              id={`http-method-${method}`}
               key={method}
               onClick={() => {
                 handleSelect(method);

app/components/modal/monitor/pages/initial/index.jsx

@@ -10,6 +10,7 @@ const MonitorInitialType = ({ inputs, errors, handleInput, isEdit }) => {
     <div className="monitor-configure-container">
       <TextInput
         label="Name"
+        id="input-name"
         value={inputs.name || ''}
         onChange={(e) => handleInput('name', e.target.value)}
         error={errors.name}

app/components/modal/monitor/pages/initial/type.jsx

@@ -18,11 +18,13 @@ const MonitorInitialDropdown = ({ inputs, errors, handleInput }) => {
           asInput
           isOpen={dropdownIsOpen}
           toggleDropdown={toggleDropdown}
+          id="type-dropdown"
         >
           {inputs.type?.toUpperCase() || 'Select Monitor Type'}
         </Dropdown.Trigger>
         <Dropdown.List fullWidth isOpen={dropdownIsOpen}>
           <Dropdown.Item
+            id="type-http"
             onClick={() => {
               handleInput('type', 'http');
               toggleDropdown();
@@ -31,6 +33,7 @@ const MonitorInitialDropdown = ({ inputs, errors, handleInput }) => {
             HTTP
           </Dropdown.Item>
           <Dropdown.Item
+            id="type-tcp"
             onClick={() => {
               handleInput('type', 'tcp');
               toggleDropdown();
@@ -40,7 +43,11 @@ const MonitorInitialDropdown = ({ inputs, errors, handleInput }) => {
           </Dropdown.Item>
         </Dropdown.List>
       </Dropdown.Container>
-      {errors.type && <label className="text-input-error">{errors.type}</label>}
+      {errors.type && (
+        <label id="text-input-error-input-type" className="text-input-error">
+          {errors.type}
+        </label>
+      )}
     </>
   );
 };

app/components/modal/monitor/pages/interval.jsx

@@ -8,6 +8,7 @@ const MonitorAddInterval = ({ inputs, errors, handleInput }) => {
   return (
     <div className="monitor-configure-container">
       <TextInput
+        id="input-interval"
         type="number"
         label="Interval"
         onChange={(e) => {
@@ -18,6 +19,7 @@ const MonitorAddInterval = ({ inputs, errors, handleInput }) => {
       />
 
       <TextInput
+        id="input-retry-interval"
         type="number"
         label="Retry Interval"
         onChange={(e) => {
@@ -28,6 +30,7 @@ const MonitorAddInterval = ({ inputs, errors, handleInput }) => {
       />
 
       <TextInput
+        id="input-request-timeout"
         type="number"
         label="Request Timeout"
         onChange={(e) => {

app/components/modal/monitor/pages/tcp.jsx

@@ -8,13 +8,15 @@ const MonitorPageTcp = ({ inputs, errors, handleInput }) => {
   return (
     <div className="monitor-configure-container">
       <TextInput
+        id="input-host"
         label="Host"
         value={inputs.url}
         error={errors.url}
         onChange={(e) => handleInput('url', e.target.value)}
       />
 
       <TextInput
+        id="input-port"
         label="Port"
         value={inputs.port}
         error={errors.port}

app/components/modal/settings/manage/approve.jsx

@@ -37,8 +37,14 @@ const MemberApproveModal = ({ member, onClose }) => {
         user will have access to view the monitors.
       </Modal.Message>
       <Modal.Actions>
-        <Modal.Button onClick={onClose}>Cancel</Modal.Button>
-        <Modal.Button color="green" onClick={handleConfirm}>
+        <Modal.Button id="manage-cancel-button" onClick={onClose}>
+          Cancel
+        </Modal.Button>
+        <Modal.Button
+          id="manage-approve-button"
+          color="green"
+          onClick={handleConfirm}
+        >
           Confirm
         </Modal.Button>
       </Modal.Actions>

app/components/modal/settings/manage/decline.jsx

@@ -35,8 +35,14 @@ const MemberDeclineModal = ({ member, onClose }) => {
         access the dashboard. Their account will be removed from the database.
       </Modal.Message>
       <Modal.Actions>
-        <Modal.Button onClick={onClose}>Cancel</Modal.Button>
-        <Modal.Button color="green" onClick={handleConfirm}>
+        <Modal.Button id="manage-cancel-button" onClick={onClose}>
+          Cancel
+        </Modal.Button>
+        <Modal.Button
+          id="manage-decline-button"
+          color="green"
+          onClick={handleConfirm}
+        >
           Confirm
         </Modal.Button>
       </Modal.Actions>

app/components/monitor/menu.jsx

@@ -63,13 +63,20 @@ const MonitorMenu = ({ name = 'Unknown', monitorId }) => {
 
   return (
     <div className="monitor-view-menu-container">
-      <div className="monitor-view-menu-name">{name}</div>
+      <div className="monitor-view-menu-name" id="monitor-view-menu-name">
+        {name}
+      </div>
       {/* <Button iconLeft={<FaTrash width={20} height={20} />}>Pause</Button> */}
       {/* <Button iconLeft={<FaTrash width={20} height={20} />}>Duplicate</Button> */}
-      <Button iconLeft={<MdEdit width={20} height={20} />} onClick={handleEdit}>
+      <Button
+        id="monitor-edit-button"
+        iconLeft={<MdEdit width={20} height={20} />}
+        onClick={handleEdit}
+      >
         Edit
       </Button>
       <Button
+        id="monitor-delete-button"
         iconLeft={<FaTrash width={20} height={20} />}
         onClick={handleDelete}
       >

app/components/settings/manage/member/actions.jsx

@@ -35,6 +35,7 @@ const MemberRowActions = ({ member = {}, canManage = false }) => {
       <>
         <div
           className={`member-row-body-icon-close ${classes}`}
+          id={`decline-${member.displayName}`}
           onClick={() => {
             if (canManage) {
               openModal(
@@ -49,6 +50,7 @@ const MemberRowActions = ({ member = {}, canManage = false }) => {
         </div>
         <div
           className={`member-row-body-icon-check ${classes}`}
+          id={`accept-${member.displayName}`}
           onClick={() => {
             if (canManage) {
               openModal(

app/components/settings/tab.jsx

@@ -15,6 +15,7 @@ const SettingsTab = ({ tab, handleTabUpdate }) => {
     return (
       <div
         key={name}
+        id={name}
         className={`settings-tab-text ${active ? 'active' : ''}`}
         onClick={() => handleTabUpdate(name)}
       >

app/components/ui/input.jsx

@@ -7,9 +7,17 @@ import PropTypes from 'prop-types';
 const TextInput = ({ label, id, error, ...props }) => {
   return (
     <>
-      {label && <label className="text-input-label">{label}</label>}
+      {label && (
+        <label className="text-input-label" id={`text-input-label-${id}`}>
+          {label}
+        </label>
+      )}
       <input type="text" className="text-input" id={id} {...props} />
-      {error && <label className="text-input-error">{error}</label>}
+      {error && (
+        <label className="text-input-error" id={`text-input-error-${id}`}>
+          {error}
+        </label>
+      )}
     </>
   );
 };

app/handlers/register.js

@@ -3,16 +3,28 @@ import { toast } from 'sonner';
 
 // import local files
 import { createPostRequest } from '../services/axios';
+import * as validators from '../utils/validators';
 
 const handleRegister = async (inputs, setErrors, setPage, navigate) => {
   try {
-    const { email, username, password } = inputs;
+    const { email, username, password, confirmPassword } = inputs;
+
+    const isInvalidPassword = validators.auth.password(password);
+
+    if (isInvalidPassword) {
+      return setErrors({ password: isInvalidPassword });
+    }
+
+    if (password !== confirmPassword) {
+      return setErrors({ confirmPassword: 'Passwords do not match' });
+    }
 
     const query = await createPostRequest('/auth/register', {
       email,
       username,
       password,
     });
+
     toast.success('You have been successfully registered!');
 
     if (query.status === 201) {