From fbe9b5a49f829cc7d760833d92f5d5ea551a78ee Mon Sep 17 00:00:00 2001
From: Sourabh Saini <sourabhsaini@WILASSETA0181.local>
Date: Fri, 15 Dec 2023 15:59:09 +0530
Subject: [PATCH] feat:added test case ui

---
 index.html      |  93 +++++++++++++++++++--------
 ui/tabs.js      | 165 ++++++++++++++++++++++++++----------------------
 ui/testCases.js |  32 ++++++++++
 3 files changed, 189 insertions(+), 101 deletions(-)
 create mode 100644 ui/testCases.js

diff --git a/index.html b/index.html
index 0e87d68e..d9cd7070 100644
--- a/index.html
+++ b/index.html
@@ -70,19 +70,18 @@
         text-align: left;
         padding: 8px;
         min-width: 60px;
-
       }
 
-      .flow-forms{
+      .flow-forms {
+        width: 75%;
+      }
+      form {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
         width: 75%;
       }
-      form{
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            width: 75%;
-        }
-        .error-heading {
+      .error-heading {
         display: flex;
         justify-content: space-between;
         align-items: center;
@@ -92,7 +91,7 @@
         flex-direction: column;
       }
 
-      td.Attribute{
+      td.Attribute {
         max-width: 100px;
         word-wrap: break-word;
       }
@@ -106,12 +105,21 @@
       }
       .tlc-set {
         overflow: scroll;
-      } 
+      }
 
-       #markdown-container img{
+      #markdown-container img {
         width: 100%;
-         
-       }
+      }
+      #testcases-container img {
+        /* width: 100%; */
+      }
+
+      #testcases {
+        margin: 5px;
+        padding: 10px;
+        border: 1px solid #dee2e6;
+        border-radius: 5px;
+      }
       /* tr:nth-child(even) {
         background-color: #dddddd;
       } */
@@ -199,10 +207,10 @@ <h1 class="text-center">ONDC Mobility Developer Guide</h1>
                   role="tab"
                   aria-selected="false"
                   >Feature-UI</a
-                  >
-                </li>
+                >
+              </li>
 
-              <li class="nav-item d-none" id="sandbox-nav"   >
+              <li class="nav-item d-none" id="sandbox-nav">
                 <a
                   class="nav-link"
                   id="sandbox-ui-tab"
@@ -213,8 +221,18 @@ <h1 class="text-center">ONDC Mobility Developer Guide</h1>
                   >SandBox-UI</a
                 >
               </li>
+              <li class="nav-item" id="testcases-navbar">
+                <a
+                  class="nav-link"
+                  id="testcases-tab"
+                  data-bs-toggle="tab"
+                  href="#testcases"
+                  role="tab"
+                  aria-selected="false"
+                  >TestCases-UI</a
+                >
+              </li>
             </ul>
-            
           </div>
           <div class="tab-content">
             <div class="tab-pane fade show active" id="swagger" role="tabpanel">
@@ -315,7 +333,7 @@ <h5 id="flow-summary" class="card-title"></h5>
                     <th>From</th>
                     <th>Event</th>
                     <th>Description</th>
-                  </tr> 
+                  </tr>
                 </table>
               </div>
             </div>
@@ -334,21 +352,25 @@ <h5 id="flow-summary" class="card-title"></h5>
                     <th>Owner</th>
                     <th>Value</th>
                     <th>Interpretation and configuration</th>
-                  </tr> 
+                  </tr>
                 </table>
               </div>
-            </div>  
+            </div>
             <div class="tab-pane fade" id="sandbox-ui" role="tabpanel">
               <div class="me-5 mt-1 ms-3">
                 <label for="api-contracts"> Version:</label>
-                <select id="sandbox-dropdown" 
-                
-                onchange="updateSandbox()">
+                <select id="sandbox-dropdown" onchange="updateSandbox()">
                   <!-- <option>Credit</option> -->
                 </select>
               </div>
 
-              <iframe src="" height="800px" width="100%" title="Iframe Example" id="sandbox-iframe"></iframe>
+              <iframe
+                src=""
+                height="800px"
+                width="100%"
+                title="Iframe Example"
+                id="sandbox-iframe"
+              ></iframe>
             </div>
             <div class="tab-pane fade" id="feature" role="tabpanel">
               <table class="table">
@@ -367,6 +389,23 @@ <h5 id="flow-summary" class="card-title"></h5>
                 <div id="markdown-container"></div>
               </div>
             </div>
+            <div class="tab-pane fade" id="testcases" role="tabpanel">
+              <table class="table">
+                <tr>
+                  <td><b>Test Cases</b></td>
+                  <td>
+                    <select
+                      id="testcases-dropdown"
+                      class="form-select"
+                      onchange="updateCases()"
+                    ></select>
+                  </td>
+                </tr>
+              </table>
+              <div class="testcases-set">
+                <div id="testcases-container"></div>
+              </div>
+            </div>
           </div>
         </div>
         <div class="col-lg-4">
@@ -471,7 +510,7 @@ <h5 class="card-title">Tags</h5>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/marked@4.3.0/lib/marked.umd.min.js"></script>
-    
+
     <script src="ui/build.js"></script>
     <script src="ui/api-contract.js"></script>
     <script src="ui/tabs.js"></script>
@@ -485,7 +524,7 @@ <h5 class="card-title">Tags</h5>
     <script src="ui/tlc.js"></script>
     <script src="ui/markdown.js"></script>
     <script src="ui/sandboxui.js"></script>
-
+    <script src="ui/testCases.js"></script>
     <!-- Your existing scripts here -->
   </body>
 </html>
diff --git a/ui/tabs.js b/ui/tabs.js
index cd3a1701..55bf20f5 100644
--- a/ui/tabs.js
+++ b/ui/tabs.js
@@ -1,82 +1,99 @@
-
-
 function onFirstLoad(build_spec) {
-      let data = build_spec;
-      const xProperties = ["x-enum", "x-tags", "x-examples", "x-flows", "x-attributes", "x-errorcodes", "x-tlc","x-featureui","x-sandboxui"];
-      const dropdown =  document.getElementById("contract-dropdown");
-      const branch_name = dropdown.options[dropdown.selectedIndex].text;
-      xProperties.forEach((xProperty) => {
-        if (data[xProperty]) {
-          switch (xProperty) {
-            case "x-enum":
-              initSchema(data[xProperty]);
-              break;
-            case "x-tags":
-              initTag(data[xProperty]);
-              break;
-            case "x-examples":
-              loadExample(data[xProperty]);
-              break;
-            case "x-flows":
-              loadFlows(data[xProperty]);
-              break;
-            case "x-attributes":
-              loadAttributes(data[xProperty]);
-              break;
-            case "x-errorcodes":
-              shouldDisplay(data[xProperty].code,"errorcodes-navbar")
-              loadErrors(data[xProperty]);
-              break;
-            case "x-tlc":
-              shouldDisplay(data[xProperty].code,"tlc-nav")
-              loadTlc(data[xProperty]);
-              break;
-               case "x-featureui":
-                 if(shouldDisplay(data[xProperty].filenames,"feature-ui-nav"))renderDropdownMarkdown(branch_name,data[xProperty].filenames)
-                   break;
-              case "x-sandboxui":
-                 if(shouldDisplay(data[xProperty].dropdown,"sandbox-nav")) loadSandbox(data[xProperty])
-                 break;
+  let data = build_spec;
+  const xProperties = [
+    "x-enum",
+    "x-tags",
+    "x-examples",
+    "x-flows",
+    "x-attributes",
+    "x-errorcodes",
+    "x-tlc",
+    "x-featureui",
+    "x-sandboxui",
+    "x-testcasesui",
+  ];
+  const dropdown = document.getElementById("contract-dropdown");
+  const branch_name = dropdown.options[dropdown.selectedIndex].text;
+  xProperties.forEach((xProperty) => {
+    if (data[xProperty]) {
+      switch (xProperty) {
+        case "x-enum":
+          initSchema(data[xProperty]);
+          break;
+        case "x-tags":
+          initTag(data[xProperty]);
+          break;
+        case "x-examples":
+          loadExample(data[xProperty]);
+          break;
+        case "x-flows":
+          loadFlows(data[xProperty]);
+          break;
+        case "x-attributes":
+          loadAttributes(data[xProperty]);
+          break;
+        case "x-errorcodes":
+          shouldDisplay(data[xProperty].code, "errorcodes-navbar");
+          loadErrors(data[xProperty]);
+          break;
+        case "x-tlc":
+          shouldDisplay(data[xProperty].code, "tlc-nav");
+          loadTlc(data[xProperty]);
+          break;
+        case "x-featureui":
+          if (shouldDisplay(data[xProperty].filenames, "feature-ui-nav"))
+            renderDropdownMarkdown(branch_name, data[xProperty].filenames);
+          break;
+        case "x-sandboxui":
+          if (shouldDisplay(data[xProperty].dropdown, "sandbox-nav"))
+            loadSandbox(data[xProperty]);
+          break;
+        case "x-testcasesui":
+          if (shouldDisplay(data[xProperty].filenames, "testcases-navbar"))
+            renderDropdownCases(branch_name, data[xProperty].filenames);
+          break;
 
+        default:
+          break;
+      }
+    } else {
+      //remove from dom if not found
+      switch (`${xProperty}`) {
+        case "x-featureui":
+          shouldDisplay([], "feature-ui-nav");
+          break;
+        case "x-errorcodes":
+          shouldDisplay([], "errorcodes-navbar");
+          break;
+        case "x-tlc":
+          shouldDisplay([], "tlc-nav");
+          break;
+        case "x-sandboxui":
+          shouldDisplay([], "sandbox-nav");
+          break;
+        case "x-testcasesui":
+          shouldDisplay([], "testcases-navbar");
+          break;
 
-            default:
-              break; 
-          }
-        } else {            
-            //remove from dom if not found
-            switch(`${xProperty}`){
-              case "x-featureui":
-               shouldDisplay([],"feature-ui-nav")
-                break;   
-              case "x-errorcodes":
-                shouldDisplay([],"errorcodes-navbar")
-                break;
-              case "x-tlc":
-                shouldDisplay([],"tlc-nav")
-                break;
-              case "x-sandboxui":
-                shouldDisplay([],"sandbox-nav")
-                break;
-             
-              default:
-                break;
-            }
-          console.log(`${xProperty} is not present in the build_spec.`);
-        }
-      });
+        default:
+          break;
+      }
+      console.log(`${xProperty} is not present in the build_spec.`);
     }
-
-function shouldDisplay (data,id){
-if(isNaN(data?.length) || data?.length <1){
-  const element = document.getElementById(id)
-  if(element) element.classList.add("d-none")
-  return false
-}else{
-  const element = document.getElementById(id)
-  if(element) element.classList.remove("d-none")
-  return true
+  });
 }
+
+function shouldDisplay(data, id) {
+  if (isNaN(data?.length) || data?.length < 1) {
+    const element = document.getElementById(id);
+    if (element) element.classList.add("d-none");
+    return false;
+  } else {
+    const element = document.getElementById(id);
+    if (element) element.classList.remove("d-none");
+    return true;
+  }
 }
 // window.onload = function(){
 //       onFirstLoad(build_spec)
-// } 
+// }
diff --git a/ui/testCases.js b/ui/testCases.js
new file mode 100644
index 00000000..5175c288
--- /dev/null
+++ b/ui/testCases.js
@@ -0,0 +1,32 @@
+
+function renderDropdownCases(branchname,filteredData){
+
+  console.log('filteredData', filteredData)
+
+    var setsDropDown = document.getElementById("testcases-dropdown");
+      setsDropDown.innerHTML = "";
+      filteredData?.forEach(function (item) {
+        var option = document.createElement("option");
+        const fileName = item?.split('.md')[0];
+        option.text = fileName;
+        setsDropDown.add(option);
+      });
+      renderCases(branchname,filteredData[0]?.split('.md')[0]);
+}
+
+function renderCases(branchName,file) {
+  fetch(
+    `https://raw.githubusercontent.com/ONDC-Official/mobility-specification/${branchName}/api/components/docs/${file}.md`
+  )
+  .then((response) => response.text())
+  .then((text) => {
+    const html = marked.parse(text);
+    document.getElementById("testcases-container").innerHTML = html;
+  });
+}
+
+function updateCases() {
+var example_set = document.getElementById("testcases-dropdown");
+const selectedOption = document.getElementById("contract-dropdown")?.value;
+renderCases(selectedOption,example_set.value);
+}
\ No newline at end of file