Udacity Feedback Settings
Want to write tests? Here’s the API.
Grading Engine Test!
75% width
b
this is the correct innerHTML
d
has test attr
f
looking at this one’s abs pos
h
i
j
center
Hello, I’m a p tag.
This box is not the last child
Last child of this container
INIT
================================================
FILE: sample/test.json
================================================
[{
"name": "Meta Info",
"code": "Got the meta stuff",
"tests": [
{
"description": "<meta> has name set to udacity-grader",
"definition": {
"nodes": "meta",
"limit": 1,
"attribute": "name",
"equals": "udacity-grader"
}
},
{
"description": "<meta> has a content tag with a link to json",
"definition": {
"nodes": "meta",
"limit": 1,
"attribute": "content",
"hasSubstring": ".json"
},
"flags": {
"optional": true
}
}
]
},
{
"name": "These should pass",
"code": "you should see this",
"tests": [
{
"description": "There are 19 divs",
"definition": {
"nodes": "div",
"get": "count",
"equals": 19
}
},
{
"description": "Width check - 75% of page width is between 1 and 10000 px",
"definition": {
"nodes": ".three-quarters",
"cssProperty": "width",
"isInRange": {
"lower": 1,
"upper": 10000
}
}
},
{
"description": "There is a Udacity logo",
"definition": {
"nodes": "img#udacity",
"exists": true
}
},
{
"description": "One div has test attr",
"definition": {
"nodes": "div",
"limit": 1,
"attribute": "test",
"exists": true
}
},
{
"description": "The innerHTML div has correct innerHTML",
"definition": {
"nodes": "div.innerHTML",
"get": "innerHTML",
"equals": "this is the correct innerHTML"
}
},
{
"description": "The UA string has Mozilla in it",
"definition": {
"get": "UAString",
"hasSubstring": "Mozilla"
}
},
{
"description": "page body is bigger than 400px",
"definition": {
"nodes": "body",
"cssProperty": "width",
"isGreaterThan": 400
}
},
{
"description": "the random div is in the right spot",
"definition": {
"nodes": ".abs",
"absolutePosition": "top",
"equals": 30
}
},
{
"description": "the random div has absolute position left of 0",
"definition": {
"nodes": ".abs",
"absolutePosition": "left",
"equals": 0
}
},
{
"description": "the right div is on the far right",
"definition": {
"nodes": ".box4",
"absolutePosition": "right",
"equals": "max"
}
},
{
"description": "the box with just a b in it has a b in it",
"definition": {
"nodes": ".box2",
"get": "innerHTML",
"equals": ["b", "d"]
}
},
{
"description": "listening to events",
"definition": {
"waitForEvent": "ud-test",
"exists": true
}, "flags": {
"noRepeat": true
}
},
{
"description": "DPR is equal to 2 (optional)",
"definition": {
"get": "DPR",
"equals": 2
},
"flags": {
"optional": true
}
},
{
"description": "All divs have class box OR flex",
"definition": {
"nodes": "div",
"attribute": "class",
"hasSubstring": {
"expected": [".*flex.*", ".*box.*"]
}
}
},
{
"description": "Some divs have class box",
"definition": {
"nodes": "div",
"limit": "some",
"attribute": "class",
"hasSubstring": ".*box.*"
}
},
{
"description": "The output box is showing events resulting from tests passing",
"definition": {
"nodes": ".output",
"get": "innerHTML",
"exists": true
}
},
{
"description": "The center box is on the middle",
"definition": {
"nodes": ".center",
"cssProperty": "marginLeft",
"equals": "100px"
}
},
{
"description": "The center box doesn’t have a margin at bottom",
"definition": {
"nodes": ".center",
"cssProperty": "marginBottom",
"equals": "0px"
}
},
{
"description": "The green box is the last child of “.flex-container”",
"definition": {
"nodes": ".flex-container",
"children": ".flex:last-child",
"attribute": "class",
"hasSubstring": "flex5"
}
},
{
"description": "The magenta box is not the last child of “.flex-container”",
"definition": {
"nodes": ".flex-container",
"children": ".flex:last-child",
"attribute": "class",
"not": true,
"hasSubstring": "flex4"
}
},
{
"description": "The number of “.flex-container:last-child” is 0",
"definition": {
"nodes": ".flex-container",
"children": ".flex-4:last-child",
"get": "count",
"equals": 0
}
}
]
},
{
"name": "These should fail",
"code": "it’s bad if you see this",
"tests": [
{
"description": "There are 15 divs (just delete one)",
"definition": {
"nodes": "div",
"get": "count",
"equals": 15
}
},
{
"description": "Width check - 75% of page width is between 900 and 1000 px (just resize)",
"definition": {
"nodes": ".three-quarters",
"cssProperty": "width",
"isInRange": {
"lower": 800,
"upper": 900
}
}
},
{
"description": "No Udacity logo (delete the Udacity logo)",
"definition": {
"nodes": "img#udacity",
"exists": false
}
},
{
"description": "No divs have test attr",
"definition": {
"nodes": "div",
"limit": 1,
"attribute": "test",
"exists": false
}
},
{
"description": "The innerHTML div has incorrect innerHTML",
"definition": {
"nodes": "div.innerHTML",
"get": "innerHTML",
"not": true,
"equals": "this is the correct innerHTML"
}
},
{
"description": "The UA string has iPad in it",
"definition": {
"get": "UAString",
"hasSubstring": "iPad"
}
},
{
"description": "page body is less than 400px",
"definition": {
"nodes": "body",
"cssProperty": "width",
"isLessThan": 400
}
},
{
"description": "the random div is in the wrong spot",
"definition": {
"nodes": ".abs",
"absolutePosition": "left",
"equals": 401
}
},
{
"description": "the box with just a b in it doesn’t have a c or a p in it",
"definition": {
"nodes": ".box2",
"get": "innerHTML",
"equals": ["c", "p"]
}
},
{
"description": "the random div has absolute position left greater than 1",
"definition": {
"nodes": ".abs",
"absolutePosition": "left",
"isGreaterThan": 1
}
},
{
"description": "DPR is equal to 0.5",
"definition": {
"get": "DPR",
"equals": 0.5
},
"flags": {
"optional": true
}
},
{
"description": "All divs have class box AND flex",
"definition": {
"nodes": "div",
"attribute": "class",
"hasSubstring": {
"expected": [".*flex.*", ".*box.*"],
"minValues": 2
}
}
},
{
"description": "The output box is not showing events resulting from tests passing",
"definition": {
"nodes": ".output",
"get": "innerHTML",
"hasSubstring": "$^"
}
},
{
"description": "The magenta box is the last child of “.flex-container”",
"definition": {
"nodes": ".flex-container",
"children": ".flex:last-child",
"attribute": "class",
"hasSubstring": "flex4"
}
}
]
},
{
"name": "These tests should err",
"code": "ERROR ERROR",
"tests": [
{
"description": "absolute positions",
"definition": {
"nodes": "body",
"absolutePositions": "left",
"equals": 1
}
},
{
"description": "bad counts",
"definition": {
"nodes": "body",
"get": "counts",
"equals": 1
}
}
]
},
{
"name": "This should err",
"code": "ERROR ERROR",
"tests": [
{
"description": "absolute positionsss",
"definitions": {
"nodes": "body",
"absolutePositions": "left",
"equals": 1
}
}
]
},
{
"name": "Just one",
"code": "thing",
"tests": [
{
"description": "There is a body?",
"definition": {
"nodes": "body",
"get": "count",
"equals": 1
}
}
]
}]
================================================
FILE: sample/unit-tests.js
================================================
/**
* @fileOverview This file contains unit tests to be loaded.
* @name unit-tests.js| Whitelist | |
|---|---|
| Remote hosts | |
| host | |
| Local directories | |
Help
Usage
Not sure what how to make it work? Try the walkthrough.
Reporting bugs
Because this extension tries to supports multiple browsers, it’s not unusual to find bugs when a new browser version rolls out. For any suggestions or bug reports, please make a new issue on the GitHub platform. Make sure to include your browser version and the currently installed version of the extension.
Contact
You can contact us at udacityfeedback@udacity.com.
' +
'
' +
'';
/**
* Function to mark a test as `Passed`.
* @param {HTMLElement} markRightOrWrong - The element containing the mark.
* @private
*/
function _testHasPassed(markRightOrWrong) {
markRightOrWrong.classList.remove('incorrect');
markRightOrWrong.classList.remove('error');
markRightOrWrong.classList.add('correct');
}
/**
* Function to mark a test as `Failed`.
* @param {HTMLElement} markRightOrWrong - The element containing the mark.
* @private
*/
function _testHasFailed(markRightOrWrong) {
markRightOrWrong.classList.add('incorrect');
markRightOrWrong.classList.remove('correct');
markRightOrWrong.classList.remove('error');
}
/**
* Function to mark a test as `Erred` (is not valid).
* @param {HTMLElement} markRightOrWrong - The element containing the mark.
* @private
*/
function _testHasErred(markRightOrWrong) {
markRightOrWrong.classList.remove('correct');
markRightOrWrong.classList.remove('incorrect');
markRightOrWrong.classList.add('error');
}
/**
* Main function for updating member elements.
*/
function updateView() {
var testPassed, testDescription;
try {
testDescription = self.dataset.description;
testPassed = self.dataset.testPassed;
} catch (e) {
console.warn(e);
}
var markRightOrWrong = self.querySelector('.mark');
var descriptionDisplay = self.querySelector('.test-desc');
// Simple fix for backward compatibility
descriptionDisplay.textContent = testDescription.replace(/<|>/g, function(match) {
return {'<': '<', '>': '>'}[match];
});
if (testPassed === 'true') {
_testHasPassed(markRightOrWrong);
} else if (testPassed === 'false') {
_testHasFailed(markRightOrWrong);
} else if (testPassed === 'error') {
_testHasErred(markRightOrWrong);
}
}
/**
* Called when the element gets attached to the document
*/
proto.attachedCallback = function() {
self = this;
self.dataset.testPassed = false;
updateView();
};
/**
* Called when any attribute on the element changes
*/
proto.attributeChangedCallback = function () {
self = this;
updateView();
};
components.registerElement('active-test', template, proto);
})();
// active_test.js' +
'
' +
'' +
'
' +
'
' +
'';
var buildSuiteElement = function() {};
proto.attachedCallback = function() {
var self = this;
// console.log(self);
var testSuites = self.querySelector('.test-suites');
var hideShowButton = self.querySelector('button.toggle-display');
var placeholder = self.querySelector('em.placeholder');
/**
* Builds a new suite of tests.
* @param {suite} newSuite - The suite to build
* @returns {HTMLElement} The newly created suite.
*/
buildSuiteElement = function (newSuite) {
// toggle button and placeholder views
if (hideShowButton.disabled === true) {
hideShowButton.removeAttribute('disabled');
}
placeholder.textContent = '';
// actually create the suite
var _testSuiteFragment = components.createElement('test-suite');
var _testSuite = '';
// Take the first Node (not a comment)
for(var i=0, len=_testSuiteFragment.childNodes.length; i' +
' No tests loaded' +
' ' +
'
' +
' ' +
'' +
' ' +
' ' +
'
' +
'';
function updateView() {
var suiteName = self.dataset.name;
var suitePassed = self.dataset.suitePassed;
var suiteCode = self.code;
var numberOfTests = self.dataset.numberOfTests;
// Is it ever used?
var suite = self;
var codeContainer = {
container: self.getElementsByClassName('suite-code-container')[0],
suiteName: self.getElementsByClassName('suite-name')[0],
suiteCode: self.getElementsByClassName('suite-code')[0]
};
var titleEnd = numberOfTests > 1 ? ' Tests' : ' Test';
self.querySelector('.suite-title').textContent = suiteName + titleEnd;
// Redefinition at each update?
/**
* Displays the secret code.
* @param {boolean} show - Whether the code should be shown.
*/
function displayCode (show) {
if (show) {
codeContainer.container.style.display = 'block';
codeContainer.suiteName.textContent = suiteName;
codeContainer.suiteCode.textContent = suiteCode;
} else {
codeContainer.container.style.display = 'none';
codeContainer.suiteName.textContent = '';
codeContainer.suiteCode.textContent = '';
}
}
if (suitePassed === 'true') {
displayCode(true);
} else {
displayCode(false);
}
}
/**
* Called when the component is attached to the DOM.
*/
proto.attachedCallback = function() {
var suite = this.suite; // Is it ever used?
self = this;
updateView();
};
/**
* Called when the main container changed its attributes.
*/
proto.attributeChangedCallback = function() {
self = this;
updateView();
};
components.registerElement('test-suite', template, proto);
})();
// test_suite.js Code:
' +
'Udacity Feedback
' +
' ' +
'
' +
' ' +
' ' +
''
};
/**
* Returns the frame context.
* @returns {Document} The current
* @throws {Error} Errors about bad initialization.
* @private
*/
var _frameContext = function () {
if(frameId === null) {
throw new Error('The widget must first be created.');
}
var tw = document.getElementById(frameId);
if(tw === null) {
throw new Error('The “' + frameId + '” iframe doesn’t exist.');
}
// Compatibility fix
return tw.contentWindow || tw.contentDocument.document || tw.contentDocument;
};
/**
* Get the widget document. It prevents direct access to the iFrame.
* @returns {Document}
*/
var _frameDocument = function() {
return _frameContext().document;
};
/**
* Calculate the height of the test-widget could have. It can’t be bigger than the window since it has position of fixed.
* @returns {}
*/
var _calculateFrameHeight = function() {
var frameHeight = _frameDocument().body.offsetHeight;
var windowHeight = window.innerHeight;
return frameHeight < windowHeight ? frameHeight : windowHeight;
};
/**
* Set the `testWidget` frame element height to its inner height (height of child document).
*/
var _setFrameHeight = function() {
var frameHeight = _calculateFrameHeight();
// console.log("frameHeight = ", frameHeight);
if(window.innerHeight !== lastWindowHeight || frameHeight !== lastFrameHeight) {
lastWindowHeight = window.innerHeight;
lastFrameHeight = frameHeight;
frameElement.style.height = frameHeight + 'px';
// console.log("frameElement.style.height = ", frameElement.style.height);
}
// console.log("lastFrameHeight = ", lastFrameHeight);
// console.log("lastWindowHeight = ", lastWindowHeight);
};
/**
* Execute a callback function when the iFrame document changes.
* @param {function} callback - The callback to call when the iFrame document changes.
*/
var _onFrameChange = function(callback) {
var frameDocument = _frameDocument();
var observer = new MutationObserver(function(mutations) {
// debugger;
// console.log('Inside _onFrameChange MutationObserver. Mutation: ', mutations[i]);
// console.log('Callback: ', callback.toString());
callback(mutations);
});
observer.observe(frameDocument, {childList: true, attributes: true, characterData: true, subtree: true});
};
/**
* Initializes the widget with its random ID (Not really useful) and append the widget to the current Document. The widget is an iFrame
* @returns {Document} The iFrame document.
* @throws {Error} The test widget can’t be loaded.
*/
var _buildFrame = function() {
frameId = 'tw-' + Math.floor(Math.random() * 100000000000).toString();
// Since the iFrame loading is asynchronous
var promise = new Promise(
function(resolve, reject) {
var tw = document.createElement('iframe');
tw.id = frameId;
tw.className = 'test-widget-display';
tw.srcdoc = '';
document.body.appendChild(tw);
tw.onload = function() {
frameElement = tw;
window.addEventListener('resize', function() {
_setFrameHeight();
});
_onFrameChange(_setFrameHeight);
resolve(tw);
};
tw.onerror = function(e) {
reject(e);
};
}).catch(function(e) {
throw new Error('Couldn’t load the test widget: ' + e.message);
});
return promise;
};
/**
* Calls {@link _buildFrame} and initialize {@link testResults}.
*/
var _buildWidget = function() {
// Wait for the iFrame to load since it would return null
return _buildFrame().then(function() {
var testWidgetDisplay = _frameDocument();
// Reviewer: This is only local
testWidgetDisplay.head.innerHTML = template.head;
testWidgetDisplay.body.innerHTML = template.body;
var outerCSS = document.createElement('style');
outerCSS.id = 'outer-styles';
// Reviewer: This is only local
outerCSS.textContent = outerStyles;
document.head.appendChild(outerCSS);
// console.log("testWidgetDisplay = ", testWidgetDisplay);
var viewContainer = testWidgetDisplay.querySelector('.view-container');
// console.log("viewContainer = ", viewContainer);
// initialize the view options
var testResultsElem = components.createElement('test-results');
viewContainer.appendChild(testResultsElem);
});
};
/**
* Removes the widget from the current Document.
*/
var _killWidget = function() {
var tw = document.getElementById(frameId);
var styles = document.getElementById('outer-styles');
document.body.removeChild(tw);
document.head.removeChild(styles);
frameId = null;
};
exports = {
buildWidget: _buildWidget,
killWidget: _killWidget,
// TODO: Doesn’t seem to be used outside
frameDocument: _frameDocument
};
return exports;
})();
// test-widget.js