Merge pull request #35 from rishi2019194/ui-branch-3

add legend to graph, add javaScript assert tests for FE
rishi2019194 · Nov 25, 2023 · c3272b1 · c3272b1
2 parents fb84419 + 71a7aca
commit c3272b1
Show file tree

Hide file tree

Showing 4 changed files with 142 additions and 0 deletions.
diff --git a/static/js/tests.js b/static/js/tests.js
@@ -0,0 +1,88 @@
+console.assert(() => {
+    addToLocalStorage("testKey", "testData");
+    return localStorage.getItem("testKey") === "testData";
+}, "addToLocalStorage test failed");
+
+// Test retrieveFromLocalStorage function
+localStorage.setItem("testRetrieveKey", "testRetrieveData");
+console.assert(() => {
+    return retrieveFromLocalStorage("testRetrieveKey") === "testRetrieveData";
+}, "retrieveFromLocalStorage test failed");
+
+
+console.assert(() => {
+    let ajaxCalled = false;
+    $.ajax = function(options) {
+        ajaxCalled = true;
+        options.success();
+    };
+
+    logout();
+
+    return ajaxCalled;
+}, "logout test failed");
+
+// Test history function
+console.assert(() => {
+    let ajaxCalled = false;
+    $.ajax = function(options) {
+        ajaxCalled = true;
+        options.success('{"date":"2023-01-01","calories":2000,"burnout":300}');
+    };
+
+    history({ target: document.createElement('form') });
+
+    return $("#date").text() === "2023-01-01" && $("#calories").text() === "2000" && $("#burnout").text() === "300" && ajaxCalled;
+}, "history test failed");
+
+// Test sendRequest function
+console.assert(() => {
+    let ajaxCalled = false;
+    $.ajax = function(options) {
+        ajaxCalled = true;
+        options.success('{}');
+    };
+
+    sendRequest({}, "testReceiver");
+
+    return ajaxCalled;
+}, "sendRequest test failed");
+
+// Test cancelRequest function
+console.assert(() => {
+    let ajaxCalled = false;
+    $.ajax = function(options) {
+        ajaxCalled = true;
+        options.success('{}');
+    };
+
+    cancelRequest({}, "testReceiver");
+
+    return ajaxCalled;
+}, "cancelRequest test failed");
+
+// Test approveRequest function 
+console.assert(() => {
+    let ajaxCalled = false;
+    $.ajax = function(options) {
+        ajaxCalled = true;
+        options.success('{}');
+    };
+
+    approveRequest({}, "testReceiver");
+
+    return ajaxCalled;
+}, "approveRequest test failed");
+
+// Test dashboard function
+console.assert(() => {
+    let ajaxCalled = false;
+    $.ajax = function(options) {
+        ajaxCalled = true;
+        options.success('{"enroll":5}');
+    };
+
+    dashboard({}, "[email protected]");
+
+    return $("#enroll").text() === "5" && ajaxCalled;
+}, "dashboard test failed");
diff --git a/static/main.css b/static/main.css
@@ -23,6 +23,42 @@
   }
 
 
+  .legend {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    padding: 10px;
+    margin-left: 10rem;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: space-around;
+
+  }
+
+  .legend div {
+    display: flex;
+    align-items: center;
+  }
+
+  .legend label {
+    margin-bottom: 0px;
+  }
+
+  .legend span {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    margin-right: 5px;
+  }
+
+  #calories-burnt {
+    background-color: rgba(220,20,60,0.91);
+  }
+
+  #calories-consumed {
+    background-color: #84d320;
+  }
+
   footer {
     margin-top: auto;
   }
@@ -57,6 +93,13 @@
       width: 55%;
       align-self: center;
       box-shadow: 0px 0px 95px -30px rgba(0, 0, 0, 0.15);
+      margin-left: auto;
+      margin-right: auto;
+    }
+
+    .sign-in-div {
+      width: 55%;
+      margin: auto;
     }
 
     .content-section-container {

diff --git a/templates/history.html b/templates/history.html
@@ -101,6 +101,16 @@ <h4>Great job with the progress</h4>
             },
         });
     </script>
+    <div class="legend">
+        <div>
+          <span id="calories-burnt"></span>
+          <label>Calories Burnt</label>
+        </div>
+        <div>
+          <span id="calories-consumed"></span>
+          <label>Calories Consumed</label>
+        </div>
+      </div>
     </div>
 
 

diff --git a/templates/layout.html b/templates/layout.html
@@ -147,5 +147,6 @@ <h5 class="text-white mb-3">Newsletter</h5>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
     <script src="../static/js/script.js"></script>
+    <script src="../static/js/tests.js"></script>
 </body>
 </html>