Adding warnings for non-standard escape sequence usage
This commit is contained in:
parent
a4f831bc60
commit
f842b424cc
@ -1,4 +1,5 @@
|
|||||||
import javascript from 'src/js/parser/javascript/parser.js';
|
import javascript from 'src/js/parser/javascript/parser.js';
|
||||||
|
import Node from 'src/js/parser/javascript/node.js';
|
||||||
import util from 'src/js/util.js';
|
import util from 'src/js/util.js';
|
||||||
import _ from 'lodash';
|
import _ from 'lodash';
|
||||||
import Snap from 'snapsvg';
|
import Snap from 'snapsvg';
|
||||||
@ -49,6 +50,14 @@ describe('parser/javascript/charset.js', function() {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('adds a warning for character sets the contain non-standard escapes', function() {
|
||||||
|
var node;
|
||||||
|
|
||||||
|
Node.state = { warnings: [] };
|
||||||
|
node = new javascript.Parser('[\\c]').__consume__charset();
|
||||||
|
expect(node.state.warnings).toEqual(['The character set "[\\c]" contains the \\c escape followed by a character other than A-Z. This can lead to different behavior depending on browser. The representation here is the most common interpretation.']);
|
||||||
|
});
|
||||||
|
|
||||||
describe('_anchor property', function() {
|
describe('_anchor property', function() {
|
||||||
|
|
||||||
it('calculates the anchor based on the partContainer', function() {
|
it('calculates the anchor based on the partContainer', function() {
|
||||||
|
@ -119,4 +119,13 @@ describe('parser/javascript.js', function() {
|
|||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
describe('warnings property', function() {
|
||||||
|
|
||||||
|
it('returns the content of the warnings state variable', function() {
|
||||||
|
this.parser.state.warnings.push('example');
|
||||||
|
expect(this.parser.warnings).toEqual(['example']);
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
|
@ -11,6 +11,7 @@ describe('regexper.js', function() {
|
|||||||
this.root.innerHTML = [
|
this.root.innerHTML = [
|
||||||
'<form id="regexp-form" action="/"><input type="text" id="regexp-input" /></form>',
|
'<form id="regexp-form" action="/"><input type="text" id="regexp-input" /></form>',
|
||||||
'<div id="error"></div>',
|
'<div id="error"></div>',
|
||||||
|
'<ul id="warnings"></ul>',
|
||||||
'<div><a href="#" data-glyph="link-intact"></a></div>',
|
'<div><a href="#" data-glyph="link-intact"></a></div>',
|
||||||
'<div><a href="#" data-glyph="data-transfer-download"></a></div>',
|
'<div><a href="#" data-glyph="data-transfer-download"></a></div>',
|
||||||
'<div id="progress"><div></div></div>',
|
'<div id="progress"><div></div></div>',
|
||||||
@ -355,6 +356,15 @@ describe('regexper.js', function() {
|
|||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
describe('#displayWarnings', function() {
|
||||||
|
|
||||||
|
it('adds a list item for each warning', function() {
|
||||||
|
this.regexper.displayWarnings(['warning 1', 'warning 2']);
|
||||||
|
expect(this.regexper.warnings.innerHTML).toEqual('<li class="oi with-text" data-glyph="warning">warning 1</li><li class="oi with-text" data-glyph="warning">warning 2</li>');
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
describe('#renderRegexp', function() {
|
describe('#renderRegexp', function() {
|
||||||
|
|
||||||
beforeEach(function() {
|
beforeEach(function() {
|
||||||
@ -366,6 +376,7 @@ describe('regexper.js', function() {
|
|||||||
|
|
||||||
spyOn(this.regexper, '_trackEvent');
|
spyOn(this.regexper, '_trackEvent');
|
||||||
spyOn(this.regexper, 'updateLinks');
|
spyOn(this.regexper, 'updateLinks');
|
||||||
|
spyOn(this.regexper, 'displayWarnings');
|
||||||
|
|
||||||
this.regexper.renderRegexp('example expression');
|
this.regexper.renderRegexp('example expression');
|
||||||
});
|
});
|
||||||
@ -440,6 +451,10 @@ describe('regexper.js', function() {
|
|||||||
expect(this.regexper.updateLinks).toHaveBeenCalled();
|
expect(this.regexper.updateLinks).toHaveBeenCalled();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('displays the warnings', function() {
|
||||||
|
expect(this.regexper.displayWarnings).toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
|
||||||
it('tracks the complete render', function() {
|
it('tracks the complete render', function() {
|
||||||
expect(this.regexper._trackEvent).toHaveBeenCalledWith('visualization', 'complete');
|
expect(this.regexper._trackEvent).toHaveBeenCalledWith('visualization', 'complete');
|
||||||
});
|
});
|
||||||
|
@ -24,6 +24,8 @@
|
|||||||
|
|
||||||
<div id="error"></div>
|
<div id="error"></div>
|
||||||
|
|
||||||
|
<ul id="warnings"></ul>
|
||||||
|
|
||||||
<!-- NOTE: Do not put anything in #regexp-render other than the <svg> element -->
|
<!-- NOTE: Do not put anything in #regexp-render other than the <svg> element -->
|
||||||
<div id="regexp-render">
|
<div id="regexp-render">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"></svg>
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"></svg>
|
||||||
|
@ -9,7 +9,8 @@ export default class Parser {
|
|||||||
groupCounter: 1,
|
groupCounter: 1,
|
||||||
renderCounter: 0,
|
renderCounter: 0,
|
||||||
maxCounter: 0,
|
maxCounter: 0,
|
||||||
cancelRender: false
|
cancelRender: false,
|
||||||
|
warnings: []
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -58,4 +59,8 @@ export default class Parser {
|
|||||||
cancel() {
|
cancel() {
|
||||||
this.state.cancelRender = true;
|
this.state.cancelRender = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
get warnings() {
|
||||||
|
return this.state.warnings;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -41,5 +41,9 @@ export default {
|
|||||||
this.elements = _.unique(this.properties.parts.elements, part => {
|
this.elements = _.unique(this.properties.parts.elements, part => {
|
||||||
return [part.type, part.textValue].join(':');
|
return [part.type, part.textValue].join(':');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
if (this.textValue.match(/\\c[^a-zA-Z]/)) {
|
||||||
|
this.state.warnings.push(`The character set "${this.textValue}" contains the \\c escape followed by a character other than A-Z. This can lead to different behavior depending on browser. The representation here is the most common interpretation.`);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
import util from './util.js';
|
import util from './util.js';
|
||||||
import Parser from './parser/javascript.js';
|
import Parser from './parser/javascript.js';
|
||||||
import Q from 'q';
|
import Q from 'q';
|
||||||
|
import _ from 'lodash';
|
||||||
|
|
||||||
export default class Regexper {
|
export default class Regexper {
|
||||||
constructor(root) {
|
constructor(root) {
|
||||||
@ -8,6 +9,7 @@ export default class Regexper {
|
|||||||
this.form = root.querySelector('#regexp-form');
|
this.form = root.querySelector('#regexp-form');
|
||||||
this.field = root.querySelector('#regexp-input');
|
this.field = root.querySelector('#regexp-input');
|
||||||
this.error = root.querySelector('#error');
|
this.error = root.querySelector('#error');
|
||||||
|
this.warnings = root.querySelector('#warnings');
|
||||||
this.permalink = root.querySelector('a[data-glyph="link-intact"]');
|
this.permalink = root.querySelector('a[data-glyph="link-intact"]');
|
||||||
this.download = root.querySelector('a[data-glyph="data-transfer-download"]');
|
this.download = root.querySelector('a[data-glyph="data-transfer-download"]');
|
||||||
this.percentage = root.querySelector('#progress div');
|
this.percentage = root.querySelector('#progress div');
|
||||||
@ -122,6 +124,12 @@ export default class Regexper {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
displayWarnings(warnings) {
|
||||||
|
this.warnings.innerHTML = _.map(warnings, warning => {
|
||||||
|
return `<li class="oi with-text" data-glyph="warning">${warning}</li>`;
|
||||||
|
}).join('');
|
||||||
|
}
|
||||||
|
|
||||||
renderRegexp(expression) {
|
renderRegexp(expression) {
|
||||||
if (this.runningParser) {
|
if (this.runningParser) {
|
||||||
let deferred = Q.defer();
|
let deferred = Q.defer();
|
||||||
@ -154,6 +162,7 @@ export default class Regexper {
|
|||||||
.then(() => {
|
.then(() => {
|
||||||
this.state = 'has-results';
|
this.state = 'has-results';
|
||||||
this.updateLinks();
|
this.updateLinks();
|
||||||
|
this.displayWarnings(this.runningParser.warnings);
|
||||||
this._trackEvent('visualization', 'complete');
|
this._trackEvent('visualization', 'complete');
|
||||||
})
|
})
|
||||||
.then(null, message => {
|
.then(null, message => {
|
||||||
|
@ -6,6 +6,7 @@ $light-gray: tint($gray, 25%);
|
|||||||
$tan: #cbcbba;
|
$tan: #cbcbba;
|
||||||
$red: #b3151a;
|
$red: #b3151a;
|
||||||
$blue: #dae9e5;
|
$blue: #dae9e5;
|
||||||
|
$yellow: #f8ca00;
|
||||||
$black: #000;
|
$black: #000;
|
||||||
$white: #fff;
|
$white: #fff;
|
||||||
|
|
||||||
|
@ -383,6 +383,21 @@ header {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#warnings {
|
||||||
|
@include adjust-font-size-to($base-font-size, 1);
|
||||||
|
font-weight: bold;
|
||||||
|
background-color: $yellow;
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin: rhythm(1/4);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.has-results & {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
#regexp-render {
|
#regexp-render {
|
||||||
background: $white;
|
background: $white;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
Loading…
Reference in New Issue
Block a user