Make snapshots more readable

spec/frontend/vue_shared/components/__snapshots__/expand_button_spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Expand button on click when short text is provided renders button after text 1`] = `
-"<span><button aria-label=\\"Click to expand text\\" type=\\"button\\" class=\\"btn js-text-expander-prepend text-expander btn-blank btn-secondary btn-md\\" style=\\"display: none;\\"><svg aria-hidden=\\"true\\" class=\\"s12 ic-ellipsis_h\\"><use xlink:href=\\"#ellipsis_h\\"></use></svg></button> <!----> <span><p>Expanded!</p></span> <button aria-label=\\"Click to expand text\\" type=\\"button\\" class=\\"btn js-text-expander-append text-expander btn-blank btn-secondary btn-md\\" style=\\"\\"><svg aria-hidden=\\"true\\" class=\\"s12 ic-ellipsis_h\\">
-    <use xlink:href=\\"#ellipsis_h\\"></use>
-  </svg></button></span>"
+<span>
+  <button
+    aria-label="Click to expand text"
+    class="btn js-text-expander-prepend text-expander btn-blank btn-secondary btn-md"
+    style="display: none;"
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      class="s12 ic-ellipsis_h"
+    >
+      <use
+        xlink:href="#ellipsis_h"
+      />
+    </svg>
+  </button>
+   
+  <!---->
+   
+  <span>
+    <p>
+      Expanded!
+    </p>
+  </span>
+   
+  <button
+    aria-label="Click to expand text"
+    class="btn js-text-expander-append text-expander btn-blank btn-secondary btn-md"
+    style=""
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      class="s12 ic-ellipsis_h"
+    >
+      <use
+        xlink:href="#ellipsis_h"
+      />
+    </svg>
+  </button>
+</span>
 `;
 
 exports[`Expand button when short text is provided renders button before text 1`] = `
-"<span><button aria-label=\\"Click to expand text\\" type=\\"button\\" class=\\"btn js-text-expander-prepend text-expander btn-blank btn-secondary btn-md\\"><svg aria-hidden=\\"true\\" class=\\"s12 ic-ellipsis_h\\"><use xlink:href=\\"#ellipsis_h\\"></use></svg></button> <span><p>Short</p></span>
-<!----> <button aria-label=\\"Click to expand text\\" type=\\"button\\" class=\\"btn js-text-expander-append text-expander btn-blank btn-secondary btn-md\\" style=\\"display: none;\\"><svg aria-hidden=\\"true\\" class=\\"s12 ic-ellipsis_h\\">
-    <use xlink:href=\\"#ellipsis_h\\"></use>
-  </svg></button></span>"
+<span>
+  <button
+    aria-label="Click to expand text"
+    class="btn js-text-expander-prepend text-expander btn-blank btn-secondary btn-md"
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      class="s12 ic-ellipsis_h"
+    >
+      <use
+        xlink:href="#ellipsis_h"
+      />
+    </svg>
+  </button>
+   
+  <span>
+    <p>
+      Short
+    </p>
+  </span>
+   
+  <!---->
+   
+  <button
+    aria-label="Click to expand text"
+    class="btn js-text-expander-append text-expander btn-blank btn-secondary btn-md"
+    style="display: none;"
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      class="s12 ic-ellipsis_h"
+    >
+      <use
+        xlink:href="#ellipsis_h"
+      />
+    </svg>
+  </button>
+</span>
 `;

spec/frontend/vue_shared/components/expand_button_spec.js

@@ -71,7 +71,7 @@ describe('Expand button', () => {
     it('renders button before text', () => {
       expect(expanderPrependEl().isVisible()).toBe(true);
       expect(expanderAppendEl().isVisible()).toBe(false);
-      expect(wrapper.find(ExpandButton).html()).toMatchSnapshot();
+      expect(wrapper.find(ExpandButton).element).toMatchSnapshot();
     });
   });
 
@@ -119,7 +119,7 @@ describe('Expand button', () => {
       it('renders button after text', () => {
         expect(expanderPrependEl().isVisible()).toBe(false);
         expect(expanderAppendEl().isVisible()).toBe(true);
-        expect(wrapper.find(ExpandButton).html()).toMatchSnapshot();
+        expect(wrapper.find(ExpandButton).element).toMatchSnapshot();
       });
     });
   });