Fix escaping of HTML

principiamentis · Feb 24, 2019 · e2ec6f0 · e2ec6f0
1 parent 75c9da3
commit e2ec6f0
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 36 deletions.
diff --git a/cypress/cypress/integration/__snapshots__/toMatchSnapshot.spec.js.snap b/cypress/cypress/integration/__snapshots__/toMatchSnapshot.spec.js.snap
@@ -1,4 +1,4 @@
-exports[`toMatchSnapshot > toMatchSnapshot - json #0`] = 
+exports[`toMatchSnapshot > toMatchSnapshot - json #0`] =
 {
   "number": 1234,
   "object": {
@@ -7,35 +7,34 @@ exports[`toMatchSnapshot > toMatchSnapshot - json #0`] =
       "bar": "foo"
     }
   },
-  "string": "string"
+  "string": "string\\d"
 };
 
 exports[`toMatchSnapshot > toMatchSnapshot - html #0`] = `
 <div class="wrapper" data-test="test">
-    <h1>Lorem Ipsum</h1>
-    <p>Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing elit. Integer dignissim, odio sed interdum porta, urna ex ultricies tellus, non fringilla purus nulla nec augue. Vivamus eget iaculis lorem. Proin blandit dictum enim, vitae efficitur arcu euismod a. Sed sodales nisi volutpat dui convallis ullamcorper. Aenean eget semper metus. Curabitur quis imperdiet lorem. Ut vitae mauris augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut rhoncus augue et scelerisque malesuada. Pellentesque bibendum sit amet tellus sit amet pellentesque. Maecenas eu magna dapibus, tristique est nec, ornare libero. Sed consectetur consequat nisi.</p>
-    <h2>Curabitur finibus quam</h2>
-    <p>Curabitur finibus quam quam, in viverra nulla dapibus sed. Praesent cursus nec erat ut tempor. Donec pharetra rutrum aliquam. Mauris eget gravida quam. Aenean sodales eros a <a href="#">felis lobortis</a> faucibus. Donec sed luctus purus. Nullam nisi ipsum, scelerisque at felis eu, aliquam condimentum ex. Quisque nec orci at justo faucibus maximus. Suspendisse lobortis id mauris in pellentesque. Praesent et dolor ultricies, vestibulum ipsum vel, auctor lacus. Nullam nec dui id arcu consectetur aliquam.</p>
-  </div>
-`;
-
-exports[`Test > toMatchSnapshot - json #0`] = 
-{
-  "number": 1234,
-  "object": {
-    "foo": "bar",
-    "nestedObject": {
-      "bar": "foo"
-    }
-  },
-  "string": "string"
-};
-
-exports[`Test > toMatchSnapshot - html #0`] = `
-<div data-test="test">
-  <h1>Title</h1>
-  <p>Paragraph 1</p>
-  <p>Paragraph 2</p>
+  <h1>Lorem \\d Ipsum</h1>
+  <p>
+    Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing elit.
+    Integer dignissim, odio sed interdum porta, urna ex ultricies tellus, non
+    fringilla purus nulla nec augue. Vivamus eget iaculis lorem. Proin blandit
+    dictum enim, vitae efficitur arcu euismod a. Sed sodales nisi volutpat dui
+    convallis ullamcorper. Aenean eget semper metus. Curabitur quis imperdiet
+    lorem. Ut vitae mauris augue. Pellentesque habitant morbi tristique senectus
+    et netus et malesuada fames ac turpis egestas. Ut rhoncus augue et
+    scelerisque malesuada. Pellentesque bibendum sit amet tellus sit amet
+    pellentesque. Maecenas eu magna dapibus, tristique est nec, ornare libero.
+    Sed consectetur consequat nisi.
+  </p>
+  <h2>Curabitur finibus quam</h2>
+  <p>
+    Curabitur finibus quam quam, in viverra nulla dapibus sed. Praesent cursus
+    nec erat ut tempor. Donec pharetra rutrum aliquam. Mauris eget gravida quam.
+    Aenean sodales eros a <a href="#">felis lobortis</a> faucibus. Donec sed
+    luctus purus. Nullam nisi ipsum, scelerisque at felis eu, aliquam
+    condimentum ex. Quisque nec orci at justo faucibus maximus. Suspendisse
+    lobortis id mauris in pellentesque. Praesent et dolor ultricies, vestibulum
+    ipsum vel, auctor lacus. Nullam nec dui id arcu consectetur aliquam.
+  </p>
 </div>
 `;
 

diff --git a/cypress/test-server/static/stub.html b/cypress/test-server/static/stub.html
@@ -35,7 +35,7 @@
 </head>
 <body>
   <div class="wrapper" data-test="test">
-    <h1>Lorem Ipsum</h1>
+    <h1>Lorem \d Ipsum</h1>
     <p>Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing elit. Integer dignissim, odio sed interdum porta, urna ex ultricies tellus, non fringilla purus nulla nec augue. Vivamus eget iaculis lorem. Proin blandit dictum enim, vitae efficitur arcu euismod a. Sed sodales nisi volutpat dui convallis ullamcorper. Aenean eget semper metus. Curabitur quis imperdiet lorem. Ut vitae mauris augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut rhoncus augue et scelerisque malesuada. Pellentesque bibendum sit amet tellus sit amet pellentesque. Maecenas eu magna dapibus, tristique est nec, ornare libero. Sed consectetur consequat nisi.</p>
     <h2>Curabitur finibus quam</h2>
     <p>Curabitur finibus quam quam, in viverra nulla dapibus sed. Praesent cursus nec erat ut tempor. Donec pharetra rutrum aliquam. Mauris eget gravida quam. Aenean sodales eros a <a href="#">felis lobortis</a> faucibus. Donec sed luctus purus. Nullam nisi ipsum, scelerisque at felis eu, aliquam condimentum ex. Quisque nec orci at justo faucibus maximus. Suspendisse lobortis id mauris in pellentesque. Praesent et dolor ultricies, vestibulum ipsum vel, auctor lacus. Nullam nec dui id arcu consectetur aliquam.</p>

diff --git a/cypress/test-server/static/stub.json b/cypress/test-server/static/stub.json
@@ -1,5 +1,5 @@
 {
-  "string": "string",
+  "string": "string\\d",
   "number": 1234,
   "ignore": "this field should be ignored",
   "object": {

diff --git a/src/save/saveTextSnapshot.js b/src/save/saveTextSnapshot.js
@@ -5,10 +5,10 @@ function saveTextSnapshot(data) {
   const {
     snapshotFile,
     snapshotTitle,
-    subject,
+    actual,
     dataType,
   } = data;
-  updateSnapshot(snapshotFile, snapshotTitle, subject, dataType);
+  updateSnapshot(snapshotFile, snapshotTitle, actual, dataType);
   return merge({}, data, {
     saved: true
   });

diff --git a/src/utils/tasks/textSnapshots.js b/src/utils/tasks/textSnapshots.js
@@ -2,7 +2,7 @@ const path = require('path');
 const fs = require('fs-extra');
 const unidiff = require('unidiff');
 const prettier = require('prettier');
-const { TYPE_JSON, TYPE_HTML } = require('../../dataTypes');
+const { TYPE_JSON } = require('../../dataTypes');
 const {
   getConfig,
   shouldNormalize,
@@ -100,22 +100,22 @@ function readFile(filename) {
 
 function updateSnapshot(filename, snapshotTitle, subject, dataType = TYPE_JSON) {
   const store = readFile(filename);
-
-  if (dataType === TYPE_HTML) {
-    store[snapshotTitle] = subject.replace(/\\/g, '\\\\');
+  if (dataType === TYPE_JSON) {
+    store[snapshotTitle] = JSON.parse(subject);
   } else {
     store[snapshotTitle] = subject;
   }
 
+
   // Reformat to `exports` format which is nicer for Git diffs
   const saveResult = Object.keys(store).reduce((result, key) => {
     let value = store[key];
     if (typeof value === 'string') {
-      value = `\`\n${value.trim().replace(/`/g, '\\`')}\n\``;
+      value = ` \`\n${value.trim().replace(/\\/g, '\\\\').replace(/`/g, '\\`')}\n\``;
     } else {
       value = `\n${formatJson(value)}`;
     }
-    result += `exports[\`${key}\`] = ${value}`;
+    result += `exports[\`${key}\`] =${value}`;
     result += ";\n\n";
 
     return result;