Merge pull request #184 from SergeAstapov/add-fastboot-tests

Add fastboot tests to help avoid issues like #178

addon/utils/make-svg.js

@@ -4,13 +4,38 @@ import { htmlSafe } from '@ember/template';
 
 const accessibilityElements = ['title', 'desc'];
 
+const ESC = {
+  '"': '"',
+  '&': '&',
+  '<': '&lt;',
+  '>': '&gt;'
+};
+
+function matcher(char) {
+  return ESC[char];
+}
+
+function escapeText(text) {
+  if (typeof text !== 'string') {
+    return '';
+  }
+
+  if (text.indexOf('>') > -1
+    || text.indexOf('<') > -1
+    || text.indexOf('&') > -1
+    || text.indexOf('"') > -1
+  ) {
+    return text.replace(/[&"<>]/g, matcher);
+  }
+
+  return text;
+}
+
 export function sanitizeAttrs(attrs) {
   let attrsCopy = Object.assign({}, attrs);
 
   Object.keys(attrsCopy).forEach((key) => {
-    let element = document.createElement('div');
-    element.innerText = attrsCopy[key];
-    attrsCopy[key] = element.innerHTML;
+    attrsCopy[key] = escapeText(attrsCopy[key]);
   });
 
   return attrsCopy;

config/ember-try.js

@@ -4,6 +4,7 @@ const getChannelURL = require('ember-source-channel-url');
 
 module.exports = async function() {
   return {
+    useYarn: true,
     scenarios: [
       {
         name: 'ember-lts-2.8',

package.json

@@ -56,6 +56,8 @@
     "ember-cli": "~3.11.0",
     "ember-cli-dependency-checker": "^3.1.0",
     "ember-cli-eslint": "^5.1.0",
+    "ember-cli-fastboot": "^2.2.3",
+    "ember-cli-fastboot-testing": "^0.4.0",
     "ember-cli-htmlbars": "^3.0.1",
     "ember-cli-htmlbars-inline-precompile": "^2.1.0",
     "ember-cli-inject-live-reload": "^1.8.2",

tests/acceptance/inline-svg-test.js

@@ -0,0 +1,25 @@
+import { module, test } from 'qunit';
+import { visit, find } from '@ember/test-helpers';
+import { setupApplicationTest } from 'ember-qunit';
+
+module('Acceptance | inline-svg', function(hooks) {
+  setupApplicationTest(hooks);
+
+  test('inline svg is injected to the document', async function(assert) {
+    await visit('/');
+    assert.dom('.inline-icon > svg').exists();
+
+    let expectedSVG = '<svg viewBox="0 0 24 24" height="24" width="24"><circle cx="12" cy="12" r="6" fill="red"></circle></svg>';
+    let actualSVG = find('.inline-icon > svg').outerHTML;
+    assert.equal(actualSVG, expectedSVG);
+  });
+
+  test('inline accessible svg is injected to the document', async function(assert) {
+    await visit('/');
+    assert.dom('.inline-accessible-icon > svg').exists();
+
+    let expectedSVG = '<svg viewBox="0 0 24 24" height="24" width="24" aria-labelledby="title desc"><title id="title">dummy title</title><desc id="desc">dummy dec</desc><circle cx="12" cy="12" r="6" fill="red"></circle></svg>';
+    let actualSVG = find('.inline-accessible-icon > svg').outerHTML;
+    assert.equal(actualSVG, expectedSVG);
+  });
+});

tests/dummy/app/templates/application.hbs

@@ -2,4 +2,12 @@
 {{welcome-page}}
 {{!-- Feel free to remove this! --}}
 
+<div class="inline-icon">
+  {{svg-jar "icon"}}
+</div>
+
+<div class="inline-accessible-icon">
+  {{svg-jar "icon" title="dummy title" desc="dummy dec"}}
+</div>
+
 {{outlet}}

tests/fastboot/inline-svg-test.js

@@ -0,0 +1,25 @@
+import { module, test } from 'qunit';
+import { setup, visit, /* mockServer */ } from 'ember-cli-fastboot-testing/test-support';
+import { find } from '@ember/test-helpers';
+
+module('FastBoot | inline-svg', function(hooks) {
+  setup(hooks);
+
+  test('inline svg is injected to the document.', async function(assert) {
+    await visit('/');
+    assert.dom('.inline-icon > svg').exists();
+
+    let expectedSVG = '<svg viewBox="0 0 24 24" height="24" width="24"><circle cx="12" cy="12" r="6" fill="red"></circle></svg>';
+    let actualSVG = find('.inline-icon > svg').outerHTML;
+    assert.equal(actualSVG, expectedSVG);
+  });
+
+  test('inline accessible svg is injected to the document', async function(assert) {
+    await visit('/');
+    assert.dom('.inline-accessible-icon > svg').exists();
+
+    let expectedSVG = '<svg viewBox="0 0 24 24" height="24" width="24" aria-labelledby="title desc"><title id="title">dummy title</title><desc id="desc">dummy dec</desc><circle cx="12" cy="12" r="6" fill="red"></circle></svg>';
+    let actualSVG = find('.inline-accessible-icon > svg').outerHTML;
+    assert.equal(actualSVG, expectedSVG);
+  });
+});