Во-первых, вы действительно должны показать в своем вопросе, что вы уже пробовали, и уточнить, с чем конкретно у вас возникают проблемы.
Этот метод использует объекты DOM для создания формы. Он использует фрагмент документа для ограничения количества фактических обновлений DOM. Надеюсь, комментарии в коде говорят сами за себя.
//Just for demo purposes - this would be your API Call
var data = getData();
//Get the bit we need
var formData = data.formProperties;
//Call our function to carete the form
createForm(formData);
//The magic
function createForm(data){
//Create a fragment so we aren't constantly updating the DOM
var container = document.createDocumentFragment();
data.forEach(function(formProp){
//Create a row div with a class
var rowDiv = document.createElement("div");
rowDiv.classList.add("rowDiv");
//Create a label
var label = document.createElement("label");
label.setAttribute("for", formProp.id);
label.innerHTML = formProp.name;
//Create a form element
var formElement = document.createElement(formProp.type == "enum" ? "select" : "input");
//Set it's properties
formElement.id = formProp.id;
formElement.name = formProp.id;
formElement.required = formProp.required;
formElement.readOnly = !formProp.writable;
//Do some stuff if the form element is required
if(formProp.required){
rowDiv.classList.add("required");
}
//Do stuf for not select
if(formProp.type != "enum"){
formElement.value = formProp.value;
if(formProp.type == "date") {
formElement.type = "date";
}
//Add any other types here
else {
//falback to text
formElement.type = "text";
}
}
//Add the enum values
else {
formProp.enumValues.forEach(function(formEnum){
var opt = document.createElement("option");
opt.value = formEnum.id;
opt.text = formEnum.name;
opt.selected = formEnum.id == formProp.value;
formElement.appendChild(opt);
});
}
//Add label and element to div
rowDiv.append(label);
rowDiv.append(formElement);
//Apend div to fragment
container.appendChild(rowDiv);
});
//Add fragment to form
document.getElementById("mainForm").appendChild(container);
}
function getData(){
var data = {
"formKey": null,
"deploymentId": "21151",
"processDefinitionId": null,
"processDefinitionUrl": null,
"taskId": "21159",
"taskUrl": "http://localhost:8080/activiti-rest/service/runtime/tasks/21159",
"formProperties": [
{
"id": "firstName",
"name": "First Name",
"type": "string",
"value": null,
"readable": true,
"writable": true,
"required": true,
"datePattern": null,
"enumValues": []
},
{
"id": "lastName",
"name": "Last Name",
"type": "string",
"value": null,
"readable": true,
"writable": true,
"required": false,
"datePattern": null,
"enumValues": []
},
{
"id": "phoneNumber",
"name": "Phone Number",
"type": "string",
"value": null,
"readable": true,
"writable": true,
"required": false,
"datePattern": null,
"enumValues": []
},
{
"id": "dateTime",
"name": "Date Time",
"type": "date",
"value": null,
"readable": true,
"writable": true,
"required": false,
"datePattern": "dd/MM/yyyy",
"enumValues": []
},
{
"id": "city",
"name": "City",
"type": "enum",
"value": null,
"readable": true,
"writable": true,
"required": false,
"datePattern": null,
"enumValues": [
{
"id": "0",
"name": "TPHCM"
},
{
"id": "1",
"name": "HN"
}
]
}
]
}
return data;
};
/*Add some styling for required*/
.required::after {
content: " *";
color:#F00;
}
.rowDiv {
padding:2px;
}
.rowDiv label {
display:inline-block;
width: 20%;
}
<form id="form">
<fieldset id="mainForm">
</fieldset>
<fieldset id="buttons">
<input type="submit" value="Complete Task">
<input type="reset" value="Reset From">
</fieldset>
</form>
На самом деле мы сделали то использование инструмента Trx2Html с открытым исходным кодом
Его действительно простое - получает trx файл и выходной HTML. Существуют определенные версии для VS2005 trx и VS2008 trx.
Можно опубликовать к серверу отчета, и затем отчеты будут доступны от веб-интерфейса.
trx файлы являются довольно простыми xml документами, которые могут легко быть обработаны с XSLT для представления гибких и специализированных отчетов.
Если Вы гуглите trx, и xslt you'le находят, что много примеров запускают Вас.
(Я сделал это в PowerShell),
Вам нужен этот dll
Microsoft.VisualStudio.Coverage.Analysis.dll
затем эта строка превратит .coverage в XML-файл (который .trx уже),
$dataStore = ([Microsoft.VisualStudio.CodeCoverage.CoverageInfoManager]::CreateInfoFromFile("$homeDir\tests.coverage")).BuildDataSet($null)
$dataStore.WriteXml("$homeDir\Coverage.xml")
Затем Вы могли использовать файл MsTest xsl из cruisecontrol.net для помещения результатов испытаний в хороший формат HTML, и у меня есть XSL для покрытия. Который не будет соответствовать здесь. Мне жаль, что у них не было способа загрузить файлы. Пошлите мне по электронной почте, alex отмечают точкой hutton в hotmail, и я могу заставить Вас xsl отображать то покрытие
Вот как вы можете сгенерировать html-отчет для вашего trx с помощью XSLT http://www.mytechfinds.com/articles/software-testing/6-test-automation/27- trx-to-html-using-xslt
Я добавил для этого проект codeplex, вы также можете сгенерировать html из trx как добавить данные о покрытии кода в тот же отчет. http://trxtohtml.codeplex.com/