53 |

54 |

this.setState({html: e.target.value})} style={{width: '500px', height: '500px', fontSize: '1em'}} />
55 |         </div>
56 |         <div style={{border: '1px dashed #666', padding: '0.5em', display: 'inline-block'}} className="demo-a">
57 |           {display}
58 |         </div>
59 |         <hr />
60 | 
61 |         <pre>{renderToString(display)}</pre>
62 |         <hr />
63 |         <pre className="demo-b">
64 |         </pre>
65 |       </div>
66 |     );
67 |   }
68 | }
69 | 
70 | ReactDOM.render(<App />, document.getElementById('root'));
71 | 
72 | 
73 |

--------------------------------------------------------------------------------
/src/__tests__/propertyTests.js:
--------------------------------------------------------------------------------
 1 | const React = require('react');
 2 | const { renderToString } = require('react-dom/server');
 3 | 
 4 | var RSH = require('../ReactSafeHtml.js');
 5 | 
 6 | var components = {};
 7 | var cSE = RSH.components.createSimpleElement;
 8 | 
 9 | const allowed = ['y1', 'y2', 'y3', 'y4'];
10 | const disallow = ['n1', 'n2', 'n3'];
11 | 
12 | var allowProp = 'data-yep';
13 | var disallowProp = 'data-nope';
14 | 
15 | allowed.forEach((name) => { components[name] = cSE(name, { [allowProp]: true }); });
16 | 
17 | const choice = xs => xs[Math.floor(Math.random() * xs.length)];
18 | 
19 | const makeHtml = (tag, attr, child) => {
20 |   return `<${tag} ${attr ? `${attr}="yes"` : ''}>${child}</${tag}>`;
21 | }
22 | 
23 | const zeroOut = (target, list) => list.forEach((key) => { target[key] = 0 });
24 | 
25 | describe(`Property tests`, () => {
26 |   const run = html => renderToString(React.createElement(RSH, { html, components })).replace(/^<.*?>/, '').replace(/<\/span>$/, '');
27 | 
28 |   for (const depth of [1, 2, 3, 4, 5]) {
29 |     it(`works at depth ${depth}`, () => {
30 |       for (let i = 0; i < 15; i += 1) {
31 |         const expected = {};
32 | 
33 |         zeroOut(expected, allowed);
34 |         zeroOut(expected, disallow);
35 |         zeroOut(expected, [allowProp]);
36 |         zeroOut(expected, [disallowProp]);
37 | 
38 |         const inputHtml = Array.from({ length: depth }).reduce((html) => {
39 |           const prop = choice([null, allowProp, disallowProp]);
40 | 
41 |           let tag;
42 |           if (Math.random() > 0.5) {
43 |             tag = choice(allowed);
44 |             expected[tag] += 2;
45 | 
46 |             if (prop === allowProp) {
47 |               expected[prop] += 1;
48 |             }
49 |           } else {
50 |             tag = choice(disallow);
51 |           }
52 | 
53 |           return makeHtml(tag, prop, html);
54 |         });
55 |         const resHtml = run(inputHtml);
56 | 
57 |         const actual = {};
58 |         Object.keys(expected).forEach((key) => {
59 |           const re = new RegExp(`\\b${key}\\b`, 'g');
60 |           const m = resHtml.match(re);
61 |           const count = m ? m.length : 0;
62 |           actual[key] = count;
63 |         });
64 | 
65 |         try {
66 |           expect(actual).toEqual(expected);
67 |         } catch (e) {
68 |           console.log(`At depth ${depth}:\nFor input\n${inputHtml}\nThe output was\n${resHtml}`);
69 |           expect(actual).toEqual(expected);
70 |         }
71 |       }
72 |     });
73 |   }
74 | });
75 | 
76 |

--------------------------------------------------------------------------------