UNPKG

@ln-maf/validations

Version:

This module is created to allow other projects to easily validate JSON utilizing a set of steps.

1,906 lines (970 loc) 95.4 kB
<!DOCTYPE html> <html lang="en"> <head> <script src="../assets/js/darkmode.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!-- Meta, title, CSS, favicons, etc. --> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Cache-control" content="public"> <title>Multiple Cucumber HTML Reporter</title> <!-- Bootstrap --> <link rel="stylesheet" href="../assets/css/bootstrap.min.css" > <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="../assets/js/html5shiv.min.js"></script> <script src="../assets/js/respond.min.js"></script> <![endif]--> <link href="../assets/css/font-awesome.min.css" rel="stylesheet"> <!-- Custom Theme Style --> <style type="text/css"> body { color: #73879C; background: #F7F7F7; font-family: "Helvetica Neue", Roboto, Arial, "Droid Sans", sans-serif; font-size: 13px; font-weight: 400; line-height: 1.471; } .main_container { padding: 10px 20px 0; } i span { display: none; } /* Navigation */ nav.navbar { background: #EDEDED; border-bottom: 1px solid #D9DEE4; margin-bottom: 0; } nav .navbar-brand { border-right: 1px solid #D9DEE4; color: #5A738E; } nav .navbar-text { font-size: 18px; height: 50px; margin-bottom: 0; margin-top: 0; padding: 15px 0; float: right; } /* Table */ table { width: 100%; } table.chart tr th:first-of-type { width: 33.333%; } .table > thead > tr > th { background: #F5F7FA; } table.tile h3, table.tile h4, table.tile span { font-weight: bold; vertical-align: middle !important; } table.tile th, table.tile td { text-align: center; } table.tile th { border-bottom: 1px solid #E6ECEE; } table.tile td { padding: 5px 0; } table.tile td ul { text-align: left; padding-left: 0; } table.tile td ul li { list-style: none; width: 100%; } table.tile td ul li a { width: 100%; } table.tile td ul li a big { right: 0; float: right; margin-right: 13px; } table.tile_info { width: 100%; } table.tile_info td { text-align: left; padding: 1px; font-size: 15px; } table.tile_info td p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; line-height: 28px; } table.tile_info td i { display: inline-block; margin-right: 8px; font-size: 17px; float: left; width: 18px; line-height: 28px; text-align: center; } table.tile_info td:first-child { width: 65%; } td span { line-height: 28px; } table.tile_info td.percentage { text-align: right; } /* chart in table */ table td.chart { display: inline-block; position: relative; } table td.chart #feature-chart, table td.chart #scenario-chart, table td.chart .total { height: 140px; margin: 15px 10px 10px 0; width: 140px; } table td.chart .total { display: inline-block; position: absolute; font-size: 2em; height: 50px; line-height: 50px; top: 45px; left: 45px; text-align: center; vertical-align: middle; width: 50px; } /* colors */ .ambiguous-color { color: #E74C3C !important; } .failed-color { color: #E74C3C !important; } .not-defined-color { color: #F39C12 !important; } .passed-color { color: #1ABB9C !important; } .pending-color { color: #FFD119 !important; } .skipped-color { color: #3498DB !important; } /* backgrounds */ .ambiguous-background { background: #b73122 !important; } .failed-background { background: #E74C3C !important; } .not-defined-background { background: #F39C12 !important; } .passed-background { background: #1ABB9C !important; } .pending-background { background: #FFD119 !important; } .skipped-background { background: #3498DB !important; } /* general */ .x_panel { position: relative; width: 100%; margin-bottom: 10px; padding: 10px 17px; display: inline-block; background: #fff; border: 1px solid #E6E9ED; -webkit-column-break-inside: avoid; opacity: 1; } .x_title { border-bottom: 2px solid #E6E9ED; padding: 1px 5px 6px; margin-bottom: 10px; } .x_title .filter { width: 40%; float: right; } .x_title h2 { margin: 5px 0 6px; float: left; font-size: 24px; font-weight: 400; display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .fixed_height_320 { height: 320px; } .x_title span { color: #BDBDBD; } .x_content { padding: 0 5px 6px; position: relative; width: 100%; float: left; clear: both; margin-top: 5px; } .x_content h4 { font-size: 16px; font-weight: 500; } .panel_toolbox { float: right; margin: 5px 0 0; min-width: 70px; } .panel_toolbox > li { float: right; } .panel_toolbox > li > a { cursor: pointer; } .panel_toolbox > li > a { padding: 5px; color: #C5C7CB; font-size: 14px; } .panel_toolbox > li > a:hover { background: #F5F7FA; } .page-title { width: 100%; padding: 10px 0 30px 0; } .page-title { display: block; } .page-title h1 { margin: 9px 0 9px 13px; font-size: 30px; } .page-title .title_right { width: 55%; float: left; display: block; } .page-title .title_right .pull-right { margin: 10px 0; } .page-title p { margin-left: 15px; } .dashboard-widget-content { padding-top: 9px; } .dashboard-widget-content .sidebar-widget { width: 50%; display: inline-block; vertical-align: top; background: #fff; border: 1px solid #abd9ea; border-radius: 5px; text-align: center; float: right; padding: 2px; margin-top: 10px; } ul.quick-list { padding-left: 0; display: inline-block; } ul.quick-list li, table.quick-list tr { padding-left: 10px; list-style: none; margin: 0; padding-bottom: 6px; padding-top: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } ul.quick-list li .meta-data-title, table.quick-list td.meta-data-title { display: inline-block; min-width: 75px; font-weight: bold; } ul.quick-list li span, table.quick-list td { line-height: 28px; } ul.quick-list li, table.quick-list tr { border-bottom: 1px solid #efefef; padding: 0.5em 0; } ul.quick-list li:last-child, table.quick-list tr:last-child { border-bottom: none; } ul.quick-list li i { padding-right: 10px; color: #757679; } .screenshot{ max-height: 100%; max-width: 100%; } .videoCapture{ width: 50%; height: 50%; max-height: 100%; max-width: 100%; } /* Features / Scenarios */ ul.panel_toolbox li .step { border-radius: 50%; color: #ffffff; display: block; font-size: 14px; height: 30px; margin-right: 5px; padding: 5px; text-align: center; width: 30px; } .scenario-step-container { margin-bottom: 10px; } .scenario-step-container .label { display: inline-block; text-align: center; width: 30px; } .scenario-step-container .text { display: inline; } .scenario-step-container .duration { position: relative; float: right; } .scenario-step-container .text .keyword.highlight { font-size: 1.2em; font-weight: 700; } .scenario-scroll-bar { overflow-x: scroll; } .scenario-step-collapse, .scenario-scroll-bar .arguments { margin-left: 30px; width: auto; } /* media */ @media (max-width: 1200px) { .x_title h2 { width: 70%; } } @media (max-width: 640px) { .x_title h2 { width: 100%; } } /* override */ table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before, table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child:before { background: #1ABB9C; } table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child:before, table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th:first-child:before { background: #E74C3C; } .created-by { padding: 50px 0; text-align: center; } body.darkmode, body.darkmode div.created-by, body.darkmode .dropdown-menu { background: #212121 !important; color: #b4bfca; border-color: #2e2e2e; } body.darkmode .x_panel { background: #1c1c21 !important; color: #b4bfca; border: 1px solid #2e2e2e; } body.darkmode div.container-fluid { background: #2b2b2b !important; color: #b4bfca; border: 0 solid #2e2e2e; } body.darkmode nav.navbar { background: #2b2b2b; border-bottom: 1px solid #313a45; margin-bottom: 0; } body.darkmode .x_title { background: #1c1c21 !important; border-bottom: 2px solid #2e2e2e; padding: 1px 5px 6px; margin-bottom: 10px; } body.darkmode table.quick-list tr { border-bottom: 1px solid #292929; padding: 0.5em 0; } body.darkmode ul.quick-list li, body.darkmode table.quick-list tr { border-bottom: 1px solid #2e2e2e; padding: 0.5em 0; } .darkModeIcon { font-size: x-large; float: left; padding-top: 12px; padding-left: 4px; cursor: pointer; color: #b4bfca; border-color: #2e2e2e; } .darkModeIcon:before { content: ''; } body.darkmode a.navbar-default, body.darkmode a.navbar-brand { color: #b1bfcd; background: transparent !important; border-right: 1px solid #313a45; } body.darkmode a { background: transparent !important; color: #9cc2e3; border-color: #2e2e2e; } body.darkmode a.collapse-link { color: #c7c7c7; border-color: #2e2e2e; } body.darkmode li:not([class])>a[id] { color: white; } body.darkmode li:not([class])>a[id]:hover { background: darkslateblue; } body.darkmode #features-table { color: #b4bfca; border-color: #2e2e2e; } body.darkmode #features-table th { background: #212121 !important; color: #a3c2db; border-color: #2e2e2e; } body.darkmode #features-table td { border-color: #2e2e2e; } body.darkmode #features-table tr:nth-of-type(odd) { background: #212121 !important; border-color: #2e2e2e; } body.darkmode table.dataTable>tbody>tr.child ul.dtr-details li { border-bottom: 1px solid #2e2e2e; padding: 0.5em 0; } body.darkmode .pagination, body.darkmode .pagination>.active>a, body.darkmode .pagination>.active>a:focus, body.darkmode .pagination>.active>a:hover, body.darkmode .pagination>.active>span, body.darkmode .pagination>.active>span:focus, body.darkmode .pagination>.active>span:hover { background: #3a7ab7; border-color: #3a7ab7; } body.darkmode .pagination>.disabled>a, body.darkmode .pagination>.disabled>a:focus, body.darkmode .pagination>.disabled>a:hover, body.darkmode .pagination>.disabled>span, body.darkmode .pagination>.disabled>span:focus, body.darkmode .pagination>.disabled>span:hover { background: #3a7ab7; border-color: #3b3b3b; color: #bfbfbf; } body.darkmode table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child::before, table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child::before { border: 1px solid #2e2e2e; } body.darkmode #features-table>thead>tr { color: #b4bfca; border-color: #2e2e2e; } body.darkmode .form-control { background: #212121 !important; color: #c3c3c3; border-color: #2e2e2e; } body.darkmode li[id*=features]>a { background: #212121 !important; } body.darkmode .btn-info { color: #b4bfca; background: #337ab7; border-color: #337ab7; } body.darkmode .panel_toolbox > li > a:hover { background: transparent; } body.darkmode .table-striped>tbody>tr:nth-of-type(even) { background: #1c1c21; } body.darkmode div pre { background: #212121 !important; color: #b4bfca; } body.darkmode span.tag { color: #b4bfca; } body.darkmode .keyword { color: #b4bfca; } body.darkmode div.tags ~h1 { color: #b4bfca; } body.darkmode div.tags ~h2 { color: #b4bfca; } body.darkmode div.tags ~h1 small { color: #bfbfbf; } body.darkmode div.tags ~h2 small { color: #bfbfbf; } svg#moon, svg#sun { width: 40px; height: 30px; fill: #ec6d04; } input#darkCheck:checked ~ label>svg#sun { display: none; border-color: #212121; } label>svg#moon { display: none; } input#darkCheck:checked ~ label>svg#moon { display: inline-block; fill: #b4bfca; border-color: #212121; } </style> </head> <body> <script type="text/javascript"> window.onload = function() { if(window.localStorage['darkmode'] === 'on') { applyFontStyle(); } } </script> <nav class="navbar"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#" onclick="history.back(-1)"> <i class="fa fa-arrow-left"><span>Back</span></i> </a> </div> <p class="navbar-text" style="float: left">Features Overview </p> <p class="navbar-text">Multiple Cucumber HTML Reporter</p> </div> </nav> <div class="main_container"> <div class="page-title"> <div class="tags"> </div> <h1>Feature: <small>Validations: Json Path Testing</small> </h1> <p> <p><strong>File name:</strong> jpath.feature </p> <p><strong>Relative path:</strong> features/jpath.feature</p> </div> <div class="clearfix"></div> <div class="row"> <div class="col-md-8 col-xs-12"> <div class="x_panel fixed_height_320"> <div class="x_title"> <h2>Scenarios</h2> <ul class="nav navbar-right panel_toolbox"> <li> <a class="collapse-link"> <i class="fa fa-chevron-up"></i> </a> </li> </ul> <div class="clearfix"></div> </div> <div class="x_content"> <table class="chart"> <tr> <th> <p>Chart</p> </th> <th> <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7"> <p class="">Status</p> </div> <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5"> <p class="" style="float:right;">Progress</p> </div> </th> </tr> <tr> <td class="chart"> <canvas id="scenario-chart"></canvas> <div class="total">4</div> </td> <td> <table class="tile_info"> <tr> <td> <p data-toggle="tooltip" data-placement="left" title="Scenario passed"> <i class="fa fa-check-circle passed-color"></i> Passed </p> </td> <td class="percentage">100.00 %</td> </tr> <tr> <td> <p data-toggle="tooltip" data-placement="left" title="Scenario failed"> <i class="fa fa-exclamation-circle failed-color"></i> Failed </p> </td> <td class="percentage">0.00 %</td> </tr> </table> </td> </tr> <tr> <th> Total duration:</th> <tr><td>00:00:00.193</td></tr> </tr> </table> </div> </div> </div> <div class="col-md-4 col-xs-12"> <div class="x_panel fixed_height_320"> <div class="x_title"> <h2>Metadata</h2> <ul class="nav navbar-right panel_toolbox"> <li> <a class="collapse-link"> <i class="fa fa-chevron-up"></i> </a> </li> </ul> <div class="clearfix"></div> </div> <div class="x_content"> <div class="dashboard-widget-content"> <ul class="quick-list"> <li> <span class="meta-data-title"> <i class="fa fa-desktop fa-lg"></i> <i class="fa fa-mobile fa-lg"></i> </span> <span class="meta-data-data"> <i class="fa fa-desktop fa-lg"> <span>desktop</span> </i> </span> </li> <li> <span class="meta-data-title">Device</span> <span class="meta-data-data">RISM-FWQR0M02</span> </li> <li> <span class="meta-data-title">OS</span> <span class="meta-data-data"> <i class="fa fa-apple fa-lg"> <span>apple</span> </i> 23.6.0 </span> </li> </ul> </div> </div> </div> </div> </div> <div class="dropdown pull-right dropup" > <button class="btn btn-info dropdown-toggle btn-sm" type="button" data-toggle="dropdown" style="margin-bottom: 15px;"> Filter By<span class="caret" style="margin-left: 5px"></span></button> <ul class="dropdown-menu"> <li> <a id="passed" href="javascript:void(0)" onclick="hideResult(this.id)">Passed <i class="fa fa-check-circle passed-color filter-i"></i></a> </li> <li> <a id="failed" href="javascript:void(0)" onclick="hideResult(this.id)">Failed <i class="fa fa-exclamation-circle failed-color filter-i"></i></a> </li> <li> <a id="pending" href="javascript:void(0)" onclick="hideResult(this.id)">Pending <i class="fa fa-minus-circle pending-color filter-i"></i></a> </li> <li> <a id="skipped" href="javascript:void(0)" onclick="hideResult(this.id)">Skipped <i class="fa fa-arrow-circle-right fa skipped-color filter-i"></i></a> </li> <li> <a id="not-defined" href="javascript:void(0)" onclick="hideResult(this.id)">Not Defined <i class="fa fa-question-circle not-defined-color filter-i"></i></a> </li> <li> <a id="ambiguous" href="javascript:void(0)" onclick="hideResult(this.id)">Ambiguous <i class="fa fa-flash ambiguous-color filter-i"></i></a> </li> <li class="divider"></li> <li> <a id="clear" href="javascript:void(0)"onclick="showAll()">Clear <i class="fa fa-times-circle"></i></a> </li> </ul> </div> <div class="row"> <div class="col-md-12 col-sm-12 col-xs-12"> <div class="x_panel" style="height: auto;"> <div class="x_title"> <div class="tags"> </div> <h2>Scenario: <small>When set array value it is able to validate in the area</small></h2> <ul class="nav navbar-right panel_toolbox"> <li> <a class="collapse-link"><i class="fa fa-chevron-down"></i></a> </li> <li> <span class="step passed-background" data-toggle="tooltip" title="Scenario passed">12</span> </li> <li> <span style="font-size:1.2em"> Duration:</span> <span style=padding-right:5em>00:00:00.183</span> </li> </ul> <div class="clearfix"></div> </div> <div class="x_content" style="display: none;"> <div class="scenario-step-container"></div> <div class="scenario-step-container"> <div class="label" title="Success"> <i class="fa fa-check-circle fa-2x passed-color" data-toggle="tooltip" data-placement="top" title="Step passed"></i> </div> <div class="text"> <span class="keyword highlight">When </span> set "directory" to "./test" <span class="duration">00:00:00.000</span> </div> <a href="#info0-1-text" data-toggle="collapse">+ Show Info</a> </div> <div id="info0-1-text" class="scenario-step-collapse collapse"> <pre class=info>v*�r�+��^�</pre> </div> <div class="scenario-step-container"> <div class="label" title="Success"> <i class="fa fa-check-circle fa-2x passed-color" data-toggle="tooltip" data-placement="top" title="Step passed"></i> </div> <div class="text"> <span class="keyword highlight">When </span> set "item" to file "file.json" <span class="duration">00:00:00.000</span> </div> <a href="#info0-2-text" data-toggle="collapse">+ Show Info</a> </div> <div id="info0-2-text" class="scenario-step-collapse collapse"> <pre class=info>�צ�����ߝ����</pre> </div> <div class="scenario-step-container"> <div class="label" title="Success"> <i class="fa fa-check-circle fa-2x passed-color" data-toggle="tooltip" data-placement="top" title="Step passed"></i> </div> <div class="text"> <span class="keyword highlight">When </span> set "expected" to '["joe", "jeff"]' <span class="duration">00:00:00.000</span> </div> <a href="#info0-3-text" data-toggle="collapse">+ Show Info</a> </div> <div id="info0-3-text" class="scenario-step-collapse collapse"> <pre class=info>{^rם���y�</pre> </div> <div class="scenario-step-container"> <div class="label" title="Success"> <i class="fa fa-check-circle fa-2x passed-color" data-toggle="tooltip" data-placement="top" title="Step passed"></i> </div> <div class="text"> <span class="keyword highlight">And </span> run json path '$..name' on item 'item' <span class="duration">00:00:00.175</span> </div> <a href="#info0-4-text" data-toggle="collapse">+ Show Info</a> </div> <div id="info0-4-text" class="scenario-step-collapse collapse"> <pre class=info>��-F��y��</pre> </div> <div class="scenario-step-container"> <div class="label" title="Success"> <i class="fa fa-check-circle fa-2x passed-color" data-toggle="tooltip" data-placement="top" title="Step passed"></i> </div> <div class="text"> <span class="keyword highlight">Then </span> set "item" to it <span class="duration">00:00:00.000</span> </div> <a href="#info0-5-text" data-toggle="collapse">+ Show Info</a> </div> <div id="info0-5-text" class="scenario-step-collapse collapse"> <pre class=info>�צ��ߎ�</pre> </div> <div class="scenario-step-container"> <div class="label" title="Success"> <i class="fa fa-check-circle fa-2x passed-color" data-toggle="tooltip" data-placement="top" title="Step passed"></i> </div> <div class="text"> <span class="keyword highlight">Then </span> the set "lastRun" matches the set "expected" <span class="duration">00:00:00.000</span> </div> <span>[</span> <a href="#info0-6-attachment0" data-toggle="collapse">Attachment</a> <span>]</span> </div> <div id="info0-6-attachment0" class="scenario-step-collapse collapse"> <object class="attachment-object" type="text" id="my_attachments_0" data="data:text;base64,{ "queryResult": [], "expected": [] }"></object> </div> <div class="scenario-step-container"> <div class="label" title="Success"> <i class="fa fa-check-circle fa-2x passed-color" data-toggle="tooltip" data-placement="top" title="Step passed"></i> </div> <div class="text"> <span class="keyword highlight">Then </span> the set "lastRun" matches the set from file "expected.json" <span class="duration">00:00:00.002</span> </div> <span>[</span> <a href="#info0-7-attachment0" data-toggle="collapse">Attachment</a> <span>]</span> </div> <div id="info0-7-attachment0" class="scenario-step-collapse collapse"> <object class="attachment-object" type="text" id="my_attachments_0" data="data:text;base64,{ "queryResult": [], "expected": [] }"></object> </div> <div class="scenario-step-container"> <div class="label" title="Success"> <i class="fa fa-check-circle fa-2x passed-color" data-toggle="tooltip" data-placement="top" title="Step passed"></i> </div> <div class="text"> <span class="keyword highlight">Then </span> it matches the set from file "expected.json" <span class="duration">00:00:00.000</span> </div> <span>[</span> <a href="#info0-8-attachment0" data-toggle="collapse">Attachment</a> <span>]</span> </div> <div id="info0-8-attachment0" class="scenario-step-collapse collapse"> <object class="attachment-object" type="text" id="my_attachments_0" data="data:text;base64,{ "queryResult": [], "expected": [] }"></object> </div> <div class="scenario-step-container"> <div class="label" title="Success"> <i class="fa fa-check-circle fa-2x passed-color" data-toggle="tooltip" data-placement="top" title="Step passed"></i> </div> <div class="text"> <span class="keyword highlight">Then </span> it matches the set "expected" <span class="duration">00:00:00.000</span> </div> <span>[</span> <a href="#info0-9-attachment0" data-toggle="collapse">Attachment</a> <span>]</span> </div> <div id="info0-9-attachment0" class="scenario-step-collapse collapse"> <object class="attachment-object" type="text" id="my_attachments_0" data="data:text;base64,{ "queryResult": [], "expected": [] }"></object> </div> <div class="scenario-step-container"> <div class="label" title="Success"> <i class="fa fa-check-circle fa-2x passed-color" data-toggle="tooltip" data-placement="top" title="Step passed"></i> </div> <div class="text"> <span class="keyword highlight">Then </span> item "item" is equal to: <span class="duration">00:00:00.000</span> </div> </div> <div class="scenario-scroll-bar"> </div> <pre class="info">[ "jeff", "joe" ]</pre> <div class="scenario-step-container"> <div class="label" title="Success"> <i class="fa fa-check-circle fa-2x passed-color" data-toggle="tooltip" data-placement="top" title="Step passed"></i> </div> <div class="text"> <span class="keyword highlight">And </span> it is written to file "hello.txt" <span class="duration">00:00:00.001</span> </div> </div> <div class="scenario-step-container"> <div class="label" title="Success"> <i class="fa fa-check-circle fa-2x passed-color" data-toggle="tooltip" data-placement="top" title="Step passed"></i> </div> <div class="text"> <span class="keyword highlight">And </span> item "item" is written to file "hello2.txt" <span class="duration">00:00:00.001</span> </div> </div> </div> </div> </div> <div class="col-md-12 col-sm-12 col-xs-12"> <div class="x_panel" style="height: auto;"> <div class="x_title"> <div class="tags">