Skip to content

Commit

Permalink
Some code cleanup and updated tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@vakenbolt
vakenbolt committed May 9, 2020
1 parent 08c7cca commit 2e7b1d3
Show file tree
Hide file tree
Showing 3 changed files with 179 additions and 123 deletions.
10 changes: 5 additions & 5 deletions test_report.html.template
View file
Original file line number Diff line number Diff line change
Expand Up @@ -216,11 +216,11 @@
*/
const data = {{.TestResults}}

const report = new window.GoTestReport({
data: data,
testResultsElem: document.getElementById('testResults'),
testGroupListElem: document.getElementById('testGroupList')
});
const report = window.GoTestReport({
data: data,
testResultsElem: document.getElementById('testResults'),
testGroupListElem: document.getElementById('testGroupList')
});


</script>
Expand Down
216 changes: 116 additions & 100 deletions test_report.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,147 +6,163 @@
* @property {Array.<string>} Output
* @property {boolean} Passed
*/
class TestStatus {}

/**
* @typedef TestGroupData
* @type {object}
* @property {string} FailureIndicator
* @property {Array.<TestStatus>}
*/
class TestGroupData {}

/**
* @typedef TestResults
* @type {Array.<TestGroupData>}
*/
class TestResults extends Array {}

/**
* @typedef SelectedItems
* @property {HTMLElement|EventTarget} testResults
* @property {String} selectedTestGroupColor
*/
class SelectedItems {}

/**
* @typedef GoTestReportElements
* @property {TestResults} data
* @property {HTMLElement} testResultsElem
* @property {HTMLElement} testGroupListElem
*/
class GoTestReportElements {}


/**
*
* @param {GoTestReportElements} elements
* @returns {{testResultsClickHandler: testResultsClickHandler}}
* @constructor
*/
class GoTestReport {
/**
* @param {GoTestReportElements} elements
*/
constructor(elements) {
const /**@type {SelectedItems}*/ selectedItems = {
testResults: null,
selectedTestGroupColor: null
}
elements.testResultsElem
.addEventListener('click', event => this.testResultsClickHandler(/**@type {HTMLElement}*/ event.target,
event.shiftKey,
elements.data,
selectedItems,
this.testGroupListHandler));

elements.testGroupListElem
.addEventListener('click', event => this.testGroupListHandler(/**@type {Element}*/ event.target,
elements.data));
window.GoTestReport = function (elements) {
const /**@type {SelectedItems}*/ selectedItems = {
testResults: null,
selectedTestGroupColor: null
}

/**
*
* @param {HTMLElement} target
* @param {boolean} shiftKey
* @param {TestResults} data
* @param {SelectedItems} selectedItems
* @param {function(target: Element, data: TestResults)} testGroupListHandler
*/
testResultsClickHandler(target,
shiftKey,
data,
selectedItems,
testGroupListHandler) {
if (selectedItems.testResults != null) {
let f = /**@type {HTMLElement}*/ selectedItems.testResults;
f.style.backgroundColor = selectedItems.selectedTestGroupColor;
function addEventData(event) {
if (event.data == null) {
event.data = {target: event.target}
}
const testGroupId = /**@type {number}*/ target['id'];
const testResults = /**@type {TestResults}*/ data[testGroupId]['TestResults'];
let testGroupList = /**@type {string}*/ '';
selectedItems.selectedTestGroupColor = getComputedStyle(target).getPropertyValue('background-color');
selectedItems.testResults = target;
target.style.backgroundColor = 'black';
for (let i = 0; i < testResults.length; i++) {
const testResult = /**@type {TestGroupData}*/ testResults[i];
const testPassed = /**@type {boolean}*/ testResult.Passed
const testPassedStatus = /**@type {string}*/ (testPassed) ? '' : 'failed';
const testId = /**@type {string}*/ target.attributes['id'].value;
testGroupList += `<div class="testGroupRow ${testPassedStatus}" data-testid="${testId}" data-index="${i}">
return event
}


const goTestReport = {
/**
*
* @param {HTMLElement} target
* @param {boolean} shiftKey
* @param {TestResults} data
* @param {SelectedItems} selectedItems
* @param {function(target: Element, data: TestResults)} testGroupListHandler
*/
testResultsClickHandler: function (target,
shiftKey,
data,
selectedItems,
testGroupListHandler) {
if (selectedItems.testResults != null) {
let f = /**@type {HTMLElement}*/ selectedItems.testResults
f.style.backgroundColor = selectedItems.selectedTestGroupColor
}
const testGroupId = /**@type {number}*/ target.id
const testResults = /**@type {TestResults}*/ data[testGroupId]['TestResults']
let testGroupList = /**@type {string}*/ ''
selectedItems.selectedTestGroupColor = getComputedStyle(target).getPropertyValue('background-color')
selectedItems.testResults = target
target.style.backgroundColor = 'black'
for (let i = 0; i < testResults.length; i++) {
const testResult = /**@type {TestGroupData}*/ testResults[i]
const testPassed = /**@type {boolean}*/ testResult.Passed
const testPassedStatus = /**@type {string}*/ (testPassed) ? '' : 'failed'
const testId = /**@type {string}*/ target.attributes['id'].value
testGroupList += `<div class="testGroupRow ${testPassedStatus}" data-testid="${testId}" data-index="${i}">
<span class="testStatus ${testPassedStatus}">${(testPassed) ? '&check' : '&cross'};</span>
<span class="testTitle">${testResult.TestName}</span>
<span class="testDuration"><span>${testResult.ElapsedTime}s </span>⏱</span>
</div>`
}
const testGroupListElem = document.querySelector('div.cardContainer.testGroupList');
testGroupListElem.innerHTML = '';
testGroupListElem.innerHTML = testGroupList;

if (shiftKey) {
testGroupListElem.querySelectorAll('.testGroupRow')
.forEach((elem) => testGroupListHandler(elem, data))
} else if (testResults.length === 1) {
testGroupListHandler(testGroupListElem.querySelector('.testGroupRow'), data)
}
}
}
const testGroupListElem = elements.testGroupListElem
testGroupListElem.innerHTML = ''
testGroupListElem.innerHTML = testGroupList

if (shiftKey) {
testGroupListElem.querySelectorAll('.testGroupRow')
.forEach((elem) => testGroupListHandler(elem, data))
} else if (testResults.length === 1) {
testGroupListHandler(testGroupListElem.querySelector('.testGroupRow'), data)
}
},

/**
*
* @param {Element} target
* @param {TestResults} data
*/
testGroupListHandler: function (target, data) {
const attribs = target['attributes']
if (attribs.hasOwnProperty('data-testid')) {
const testId = /**@type {number}*/ attribs['data-testid'].value
const index = /**@type {number}*/ attribs['data-index'].value
const testStatus = /**@type {TestStatus}*/ data[testId]['TestResults'][index]
const testOutputDiv = /**@type {HTMLDivElement}*/ target.querySelector('div.testOutput')

/**
*
* @param {Element} target
* @param {TestResults} data
*/
testGroupListHandler(target, data) {
const attribs = target['attributes']
if (attribs.hasOwnProperty('data-testid')) {
const testId = /**@type {number}*/ attribs['data-testid'].value;
const index = /**@type {number}*/ attribs['data-index'].value
const testStatus = /**@type {TestStatus}*/ data[testId]['TestResults'][index]
const testOutputDiv = /**@type {HTMLDivElement}*/ target.querySelector('div.testOutput');

if (testOutputDiv == null) {
const testOutputDiv = document.createElement('div');
testOutputDiv.classList.add('testOutput');
const consoleSpan = document.createElement('span');
consoleSpan.classList.add('console');
const testDetailDiv = document.createElement('div');
testDetailDiv.classList.add('testDetail');
const packageNameDiv = document.createElement('div');
packageNameDiv.classList.add('package')
packageNameDiv.innerHTML = `<strong>Package:</strong> ${testStatus.Package}`;
const testFileNameDiv = document.createElement('div');
testFileNameDiv.classList.add('filename')
testFileNameDiv.innerHTML = `<strong>Filename:</strong> `;

testDetailDiv.insertAdjacentElement('beforeend', packageNameDiv);
testDetailDiv.insertAdjacentElement('beforeend', testFileNameDiv);
testOutputDiv.insertAdjacentElement('afterbegin', consoleSpan);
testOutputDiv.insertAdjacentElement('beforeend', testDetailDiv);
target.insertAdjacentElement('beforeend', testOutputDiv);

if (testStatus.Passed) {
consoleSpan.classList.remove('failed');
if (testOutputDiv == null) {
const testOutputDiv = document.createElement('div')
testOutputDiv.classList.add('testOutput')
const consoleSpan = document.createElement('span')
consoleSpan.classList.add('console')
const testDetailDiv = document.createElement('div')
testDetailDiv.classList.add('testDetail')
const packageNameDiv = document.createElement('div')
packageNameDiv.classList.add('package')
packageNameDiv.innerHTML = `<strong>Package:</strong> ${testStatus.Package}`
const testFileNameDiv = document.createElement('div')
testFileNameDiv.classList.add('filename')
testFileNameDiv.innerHTML = `<strong>Filename:</strong> `

testDetailDiv.insertAdjacentElement('beforeend', packageNameDiv)
testDetailDiv.insertAdjacentElement('beforeend', testFileNameDiv)
testOutputDiv.insertAdjacentElement('afterbegin', consoleSpan)
testOutputDiv.insertAdjacentElement('beforeend', testDetailDiv)
target.insertAdjacentElement('beforeend', testOutputDiv)

if (testStatus.Passed) {
consoleSpan.classList.remove('failed')
} else {
consoleSpan.classList.add('failed')
}
consoleSpan.textContent = testStatus.Output.join('')
} else {
consoleSpan.classList.add('failed');
testOutputDiv.remove()
}
consoleSpan.textContent = testStatus.Output.join('');
} else {
testOutputDiv.remove()
}
}
}
}

window.GoTestReport = GoTestReport;
elements.testResultsElem
.addEventListener('click', event =>
goTestReport.testResultsClickHandler(/**@type {HTMLElement}*/ addEventData(event).data.target,
event.shiftKey,
elements.data,
selectedItems,
goTestReport.testGroupListHandler))

elements.testGroupListElem
.addEventListener('click', event =>
goTestReport.testGroupListHandler(/**@type {Element}*/ event.target,
elements.data))

return goTestReport
}
Loading

0 comments on commit 2e7b1d3

Please sign in to comment.