Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve "to have attributes" diff + some more #15

Merged
merged 5 commits into from
May 6, 2015
Merged

Improve "to have attributes" diff + some more #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
bf1317e
Improve 'to have attributes' diff by not reordering the attributes.
papandreou May 4, 2015
afc3a6f
Removed bogus disabled test.
papandreou May 4, 2015
7067825
Add helper function for entitification.
papandreou May 5, 2015
df8d8e1
Fixed typo in variable name.
papandreou May 5, 2015
2fb57a6
HTMLElement diff: Implemented inline diffing of attributes.
papandreou May 5, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
119 changes: 71 additions & 48 deletions lib/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,9 @@ function styleStringToObject(str) {
var styles = {};

str.split(';').forEach(function (rule) {
var touple = rule.split(':').map(function (part) { return part.trim(); });
var tuple = rule.split(':').map(function (part) { return part.trim(); });

styles[touple[0]] = touple[1];
styles[tuple[0]] = tuple[1];
});

return styles;
Expand Down Expand Up @@ -68,6 +68,10 @@ function getCanonicalAttributes(element) {
return result;
}

function entitify(value) {
return String(value).replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;');
}

function isVoidElement(elementName) {
return (/(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)/i).test(elementName);
}
Expand All @@ -83,7 +87,7 @@ function writeAttributeToMagicPen(output, attributeName, value) {
}).join('; ');
}
output['prism:punctuation']('="');
output['prism:attr-value'](value.replace(/&/g, '&amp;').replace(/"/g, '&quot;'));
output['prism:attr-value'](entitify(value));
output['prism:punctuation']('"');
}
}
Expand All @@ -98,7 +102,7 @@ function stringifyAttribute(attributeName, value) {
return [cssProp, value[cssProp]].join(': '); // FIXME: entitify
}).join('; ') + '"';
} else {
return attributeName + '="' + value.replace(/&/g, '&amp;').replace(/"/g, '&quot;') + '"';
return attributeName + '="' + entitify(value) + '"';
}
}

Expand Down Expand Up @@ -209,7 +213,7 @@ module.exports = {
return a.nodeValue.trim() === b.nodeValue.trim();
},
inspect: function (element, depth, output) {
return output.code(element.nodeValue.trim().replace(/</g, '&lt;'), 'html');
return output.code(entitify(element.nodeValue.trim()), 'html');
},
diff: function (actual, expected, output, diff, inspect, equal) {
var d = diff(actual.nodeValue, expected.nodeValue);
Expand Down Expand Up @@ -351,10 +355,49 @@ module.exports = {
var emptyElements = actual.childNodes.length === 0 && expected.childNodes.length === 0;
var conflictingElement = actual.nodeName.toLowerCase() !== expected.nodeName.toLowerCase() || !equal(getAttributes(actual), getAttributes(expected));

if (!conflictingElement) {
if (conflictingElement) {
var canContinueLine = true;
output['prism:punctuation']('<');
output['prism:tag'](actual.nodeName.toLowerCase());
if (actual.nodeName.toLowerCase() !== expected.nodeName.toLowerCase()) {
output.sp().annotationBlock(function () {
this.error('should be').sp()['prism:tag'](expected.nodeName.toLowerCase());
}).nl();
canContinueLine = false;
}
var actualAttributes = getAttributes(actual);
var expectedAttributes = getAttributes(expected);
Object.keys(actualAttributes).forEach(function (attributeName) {
output.sp(canContinueLine ? 1 : 2 + actual.nodeName.length);
writeAttributeToMagicPen(output, attributeName, actualAttributes[attributeName]);
if (attributeName in expectedAttributes) {
if (actualAttributes[attributeName] === expectedAttributes[attributeName]) {
canContinueLine = true;
} else {
output.sp().annotationBlock(function () {
this.error('should equal').sp().append(inspect(entitify(expectedAttributes[attributeName])));
}).nl();
canContinueLine = false;
}
delete expectedAttributes[attributeName];
} else {
output.sp().annotationBlock(function () {
this.error('should be removed');
}).nl();
canContinueLine = false;
}
});
Object.keys(expectedAttributes).forEach(function (attributeName) {
output.sp(canContinueLine ? 1 : 2 + actual.nodeName.length);
output.annotationBlock(function () {
this.error('missing').sp();
writeAttributeToMagicPen(this, attributeName, expectedAttributes[attributeName]);
}).nl();
canContinueLine = false;
});
output['prism:punctuation']('>');
} else {
output.code(stringifyStartTag(actual), 'html');
} else if (!emptyElements) {
output.append(diff(stringifyStartTag(actual), stringifyStartTag(expected)).diff);
}

if (!emptyElements) {
Expand All @@ -363,16 +406,7 @@ module.exports = {
output.nl().outdentLines();
}

if (emptyElements && conflictingElement) {
output.append(diff(stringifyStartTag(actual) + stringifyEndTag(actual), stringifyStartTag(expected) + stringifyEndTag(expected)).diff);
} else {
if (actual.nodeName.toLowerCase() === expected.nodeName.toLowerCase()) {
output.code(stringifyEndTag(actual), 'html');
} else {
output.append(diff(stringifyEndTag(actual), stringifyEndTag(expected)).diff);
}
}

output.code(stringifyEndTag(actual), 'html');
return result;
}
});
Expand Down Expand Up @@ -486,41 +520,28 @@ module.exports = {
expect.fail({
diff: function (output, diff, inspect, equal) {
output['prism:punctuation']('<')['prism:tag'](subject.nodeName.toLowerCase());
var failedAttributeNames = [];
var isFirst = true;
var canContinueLine = true;
Object.keys(attrs).forEach(function (attributeName) {
var lowerCaseAttributeName = attributeName.toLowerCase();
var promise = promiseByKey.attributes[lowerCaseAttributeName];
output.sp(canContinueLine ? 1 : 2 + subject.nodeName.length);
writeAttributeToMagicPen(output, attributeName, attrs[attributeName]);
if ((promise && promise.isFulfilled()) || (!promise && (!flags.only || expectedAttributeNames.indexOf(lowerCaseAttributeName) !== -1))) {
output.sp();
writeAttributeToMagicPen(output, attributeName, attrs[attributeName]);
isFirst = false;
} else {
failedAttributeNames.push(attributeName);
}
});
failedAttributeNames.forEach(function (attributeName) {
var lowerCaseAttributeName = attributeName.toLowerCase();
var promise = promiseByKey.attributes[lowerCaseAttributeName];
if (isFirst) {
output.sp();
canContinueLine = true;
} else {
output
.nl()
.sp(2 + subject.nodeName.length);
.sp()
.annotationBlock(function () {
if (promise) {
this.append(promise.reason().output); // v8: getErrorMessage
} else {
// flags.only === true
this.error('should be removed');
}
})
.nl();
canContinueLine = false;
}
writeAttributeToMagicPen(output, attributeName, attrs[attributeName]);
output
.sp()
.annotationBlock(function () {
if (promise) {
this.append(promise.reason().output); // v8: getErrorMessage
} else {
// flags.only === true
this.error('should be removed');
}
});
isFirst = false;
});
expectedAttributeNames.forEach(function (attributeName) {
if (!subject.hasAttribute(attributeName)) {
Expand All @@ -542,11 +563,13 @@ module.exports = {
.sp()
.append(inspect(expectedValueByAttributeName[attributeName]));
}
});
})
.nl();
}
canContinueLine = false;
}
});
output.nl()['prism:punctuation']('>');
output['prism:punctuation']('>');
return {
inline: true,
diff: output
Expand Down
Loading