Skip to content

Commit

Permalink
Merge pull request #77 from ONDC-Official/feat/testcase-ui
Browse files Browse the repository at this point in the history 
feat:added test case ui
  • Loading branch information
@92shreyansh
92shreyansh authored Dec 18, 2023
2 parents 35a6f2c + fbe9b5a commit c2cf967
Show file tree
Hide file tree
Showing 3 changed files with 189 additions and 101 deletions.
93 changes: 66 additions & 27 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -92,7 +91,7 @@
flex-direction: column;
}

td.Attribute{
td.Attribute {
max-width: 100px;
word-wrap: break-word;
}
Expand All @@ -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;
} */
Expand Down Expand Up @@ -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"
Expand All @@ -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">
Expand Down Expand Up @@ -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>
Expand All @@ -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">
Expand All @@ -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">
Expand Down Expand Up @@ -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/[email protected]/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>
Expand All @@ -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>
165 changes: 91 additions & 74 deletions ui/tabs.js
View file
Original file line number Diff line number Diff line change
@@ -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)
// }
// }
32 changes: 32 additions & 0 deletions ui/testCases.js
View file
Original file line number Diff line number Diff line change
@@ -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);
}

0 comments on commit c2cf967

Please sign in to comment.