Add jest-serializer-vue as snapshot serializer (SSENSE#341)

mxzinke · Dec 27, 2018 · 5ab768b · 5ab768b
1 parent 5509f78
commit 5ab768b
Show file tree

Hide file tree

Showing 10 changed files with 451 additions and 406 deletions.
diff --git a/package.json b/package.json
@@ -56,11 +56,11 @@
     "eslint-plugin-prettier": "^2.6.0",
     "eslint-plugin-vue": "^4.0.0",
     "html-webpack-plugin": "^3.2.0",
-    "html2jade": "^0.8.6",
     "husky": "^0.12.0",
     "isparta": "^4.0.0",
     "isparta-loader": "^2.0.0",
     "jest": "^23.5.0",
+    "jest-serializer-vue": "^2.0.2",
     "lint-staged": "^8.1.0",
     "prettier": "^1.10.2",
     "prettier-eslint": "^8.8.1",

diff --git a/tests/client.jest.json b/tests/client.jest.json
@@ -4,6 +4,9 @@
   "transform": {
     ".*\\.(js|vue)$": "<rootDir>/tests/preprocessor.js"
   },
+  "snapshotSerializers": [
+    "jest-serializer-vue"
+  ],
   "testPathIgnorePatterns": [
     "/node_modules/",
     "/debug/"

diff --git a/tests/client/components/__snapshots__/carousel.spec.js.snap b/tests/client/components/__snapshots__/carousel.spec.js.snap
diff --git a/tests/client/components/__snapshots__/navigation.spec.js.snap b/tests/client/components/__snapshots__/navigation.spec.js.snap
@@ -1,91 +1,76 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Navigation should mount successfully 1`] = `
-".VueCarousel-wrapper
-  .VueCarousel-inner(style='transform: translate(0px, 0); visibility: hidden; height: auto;')
-    .VueCarousel-slide(tabindex='-1', role='tabpanel', aria-hidden='true')
-    .VueCarousel-slide.VueCarousel-slide-active.VueCarousel-slide-center(tabindex='-1', role='tabpanel')
-|  
-.VueCarousel-navigation
-  button.VueCarousel-navigation-button.VueCarousel-navigation-prev(type='button', aria-label='Previous page', tabindex='0', style='padding: 8px; margin-right: -8px;') &#x25C0;
-  |  
-  button.VueCarousel-navigation-button.VueCarousel-navigation-next.VueCarousel-navigation--disabled(type='button', aria-label='Next page', tabindex='-1', style='padding: 8px; margin-left: -8px;') &#x25B6;
-|  
-.VueCarousel-pagination(style='')
-  .VueCarousel-dot-container(role='tablist', style='margin-top: 20px;')
-    button.VueCarousel-dot(aria-hidden='false', role='tab', title='Item 0', value='Item 0', aria-label='Item 0', aria-selected='false', style='margin-top: 20px; padding: 10px; width: 10px; height: 10px; background-color: rgb(239, 239, 239);')
-    button.VueCarousel-dot.VueCarousel-dot--active(aria-hidden='false', role='tab', title='Item 1', value='Item 1', aria-label='Item 1', aria-selected='true', style='margin-top: 20px; padding: 10px; width: 10px; height: 10px; background-color: rgb(0, 0, 0);')
-"
+<section class="VueCarousel">
+  <div class="VueCarousel-wrapper">
+    <div class="VueCarousel-inner" style="transform: translate(0px, 0); visibility: hidden; height: auto;">
+      <div tabindex="-1" role="tabpanel" class="VueCarousel-slide" aria-hidden="true"></div>
+      <div tabindex="-1" role="tabpanel" class="VueCarousel-slide VueCarousel-slide-active VueCarousel-slide-center"></div>
+    </div>
+  </div>
+  <div class="VueCarousel-navigation"><button type="button" aria-label="Previous page" tabindex="0" class="VueCarousel-navigation-button VueCarousel-navigation-prev" style="padding: 8px; margin-right: -8px;">◀</button> <button type="button" aria-label="Next page" tabindex="-1" class="VueCarousel-navigation-button VueCarousel-navigation-next VueCarousel-navigation--disabled" style="padding: 8px; margin-left: -8px;">▶</button></div>
+  <div class="VueCarousel-pagination" style="">
+    <div role="tablist" class="VueCarousel-dot-container" style="margin-top: 20px;"><button aria-hidden="false" role="tab" title="Item 0" value="Item 0" aria-label="Item 0" aria-selected="false" class="VueCarousel-dot" style="margin-top: 20px; padding: 10px; width: 10px; height: 10px; background-color: rgb(239, 239, 239);"></button><button aria-hidden="false" role="tab" title="Item 1" value="Item 1" aria-label="Item 1" aria-selected="true" class="VueCarousel-dot VueCarousel-dot--active" style="margin-top: 20px; padding: 10px; width: 10px; height: 10px; background-color: rgb(0, 0, 0);"></button></div>
+  </div>
+</section>
 `;
 
 exports[`Navigation should render a next button 1`] = `
-".VueCarousel-wrapper
-  .VueCarousel-inner(style='transform: translate(0px, 0); visibility: hidden; height: auto;')
-    .VueCarousel-slide(tabindex='-1', role='tabpanel', aria-hidden='true')
-    .VueCarousel-slide.VueCarousel-slide-active.VueCarousel-slide-center(tabindex='-1', role='tabpanel')
-|  
-.VueCarousel-navigation
-  button.VueCarousel-navigation-button.VueCarousel-navigation-prev(type='button', aria-label='Previous page', tabindex='0', style='padding: 8px; margin-right: -8px;') &#x25C0;
-  |  
-  button.VueCarousel-navigation-button.VueCarousel-navigation-next.VueCarousel-navigation--disabled(type='button', aria-label='Next page', tabindex='-1', style='padding: 8px; margin-left: -8px;') &#x25B6;
-|  
-.VueCarousel-pagination(style='')
-  .VueCarousel-dot-container(role='tablist', style='margin-top: 20px;')
-    button.VueCarousel-dot(aria-hidden='false', role='tab', title='Item 0', value='Item 0', aria-label='Item 0', aria-selected='false', style='margin-top: 20px; padding: 10px; width: 10px; height: 10px; background-color: rgb(239, 239, 239);')
-    button.VueCarousel-dot.VueCarousel-dot--active(aria-hidden='false', role='tab', title='Item 1', value='Item 1', aria-label='Item 1', aria-selected='true', style='margin-top: 20px; padding: 10px; width: 10px; height: 10px; background-color: rgb(0, 0, 0);')
-"
+<section class="VueCarousel">
+  <div class="VueCarousel-wrapper">
+    <div class="VueCarousel-inner" style="transform: translate(0px, 0); visibility: hidden; height: auto;">
+      <div tabindex="-1" role="tabpanel" class="VueCarousel-slide" aria-hidden="true"></div>
+      <div tabindex="-1" role="tabpanel" class="VueCarousel-slide VueCarousel-slide-active VueCarousel-slide-center"></div>
+    </div>
+  </div>
+  <div class="VueCarousel-navigation"><button type="button" aria-label="Previous page" tabindex="0" class="VueCarousel-navigation-button VueCarousel-navigation-prev" style="padding: 8px; margin-right: -8px;">◀</button> <button type="button" aria-label="Next page" tabindex="-1" class="VueCarousel-navigation-button VueCarousel-navigation-next VueCarousel-navigation--disabled" style="padding: 8px; margin-left: -8px;">▶</button></div>
+  <div class="VueCarousel-pagination" style="">
+    <div role="tablist" class="VueCarousel-dot-container" style="margin-top: 20px;"><button aria-hidden="false" role="tab" title="Item 0" value="Item 0" aria-label="Item 0" aria-selected="false" class="VueCarousel-dot" style="margin-top: 20px; padding: 10px; width: 10px; height: 10px; background-color: rgb(239, 239, 239);"></button><button aria-hidden="false" role="tab" title="Item 1" value="Item 1" aria-label="Item 1" aria-selected="true" class="VueCarousel-dot VueCarousel-dot--active" style="margin-top: 20px; padding: 10px; width: 10px; height: 10px; background-color: rgb(0, 0, 0);"></button></div>
+  </div>
+</section>
 `;
 
 exports[`Navigation should render a prev button 1`] = `
-".VueCarousel-wrapper
-  .VueCarousel-inner(style='transform: translate(0px, 0); visibility: hidden; height: auto;')
-    .VueCarousel-slide(tabindex='-1', role='tabpanel', aria-hidden='true')
-    .VueCarousel-slide.VueCarousel-slide-active.VueCarousel-slide-center(tabindex='-1', role='tabpanel')
-|  
-.VueCarousel-navigation
-  button.VueCarousel-navigation-button.VueCarousel-navigation-prev(type='button', aria-label='Previous page', tabindex='0', style='padding: 8px; margin-right: -8px;') &#x25C0;
-  |  
-  button.VueCarousel-navigation-button.VueCarousel-navigation-next.VueCarousel-navigation--disabled(type='button', aria-label='Next page', tabindex='-1', style='padding: 8px; margin-left: -8px;') &#x25B6;
-|  
-.VueCarousel-pagination(style='')
-  .VueCarousel-dot-container(role='tablist', style='margin-top: 20px;')
-    button.VueCarousel-dot(aria-hidden='false', role='tab', title='Item 0', value='Item 0', aria-label='Item 0', aria-selected='false', style='margin-top: 20px; padding: 10px; width: 10px; height: 10px; background-color: rgb(239, 239, 239);')
-    button.VueCarousel-dot.VueCarousel-dot--active(aria-hidden='false', role='tab', title='Item 1', value='Item 1', aria-label='Item 1', aria-selected='true', style='margin-top: 20px; padding: 10px; width: 10px; height: 10px; background-color: rgb(0, 0, 0);')
-"
+<section class="VueCarousel">
+  <div class="VueCarousel-wrapper">
+    <div class="VueCarousel-inner" style="transform: translate(0px, 0); visibility: hidden; height: auto;">
+      <div tabindex="-1" role="tabpanel" class="VueCarousel-slide" aria-hidden="true"></div>
+      <div tabindex="-1" role="tabpanel" class="VueCarousel-slide VueCarousel-slide-active VueCarousel-slide-center"></div>
+    </div>
+  </div>
+  <div class="VueCarousel-navigation"><button type="button" aria-label="Previous page" tabindex="0" class="VueCarousel-navigation-button VueCarousel-navigation-prev" style="padding: 8px; margin-right: -8px;">◀</button> <button type="button" aria-label="Next page" tabindex="-1" class="VueCarousel-navigation-button VueCarousel-navigation-next VueCarousel-navigation--disabled" style="padding: 8px; margin-left: -8px;">▶</button></div>
+  <div class="VueCarousel-pagination" style="">
+    <div role="tablist" class="VueCarousel-dot-container" style="margin-top: 20px;"><button aria-hidden="false" role="tab" title="Item 0" value="Item 0" aria-label="Item 0" aria-selected="false" class="VueCarousel-dot" style="margin-top: 20px; padding: 10px; width: 10px; height: 10px; background-color: rgb(239, 239, 239);"></button><button aria-hidden="false" role="tab" title="Item 1" value="Item 1" aria-label="Item 1" aria-selected="true" class="VueCarousel-dot VueCarousel-dot--active" style="margin-top: 20px; padding: 10px; width: 10px; height: 10px; background-color: rgb(0, 0, 0);"></button></div>
+  </div>
+</section>
 `;
 
 exports[`Navigation should trigger page advance backward when prev is clicked 1`] = `
-".VueCarousel-wrapper
-  .VueCarousel-inner(style='transform: translate(0px, 0); visibility: hidden; height: auto;')
-    .VueCarousel-slide(tabindex='-1', role='tabpanel', aria-hidden='true')
-    .VueCarousel-slide.VueCarousel-slide-active.VueCarousel-slide-center(tabindex='-1', role='tabpanel')
-|  
-.VueCarousel-navigation
-  button.VueCarousel-navigation-button.VueCarousel-navigation-prev(type='button', aria-label='Previous page', tabindex='0', style='padding: 8px; margin-right: -8px;') &#x25C0;
-  |  
-  button.VueCarousel-navigation-button.VueCarousel-navigation-next.VueCarousel-navigation--disabled(type='button', aria-label='Next page', tabindex='-1', style='padding: 8px; margin-left: -8px;') &#x25B6;
-|  
-.VueCarousel-pagination(style='')
-  .VueCarousel-dot-container(role='tablist', style='margin-top: 20px;')
-    button.VueCarousel-dot(aria-hidden='false', role='tab', title='Item 0', value='Item 0', aria-label='Item 0', aria-selected='false', style='margin-top: 20px; padding: 10px; width: 10px; height: 10px; background-color: rgb(239, 239, 239);')
-    button.VueCarousel-dot.VueCarousel-dot--active(aria-hidden='false', role='tab', title='Item 1', value='Item 1', aria-label='Item 1', aria-selected='true', style='margin-top: 20px; padding: 10px; width: 10px; height: 10px; background-color: rgb(0, 0, 0);')
-"
+<section class="VueCarousel">
+  <div class="VueCarousel-wrapper">
+    <div class="VueCarousel-inner" style="transform: translate(0px, 0); visibility: hidden; height: auto;">
+      <div tabindex="-1" role="tabpanel" class="VueCarousel-slide" aria-hidden="true"></div>
+      <div tabindex="-1" role="tabpanel" class="VueCarousel-slide VueCarousel-slide-active VueCarousel-slide-center"></div>
+    </div>
+  </div>
+  <div class="VueCarousel-navigation"><button type="button" aria-label="Previous page" tabindex="0" class="VueCarousel-navigation-button VueCarousel-navigation-prev" style="padding: 8px; margin-right: -8px;">◀</button> <button type="button" aria-label="Next page" tabindex="-1" class="VueCarousel-navigation-button VueCarousel-navigation-next VueCarousel-navigation--disabled" style="padding: 8px; margin-left: -8px;">▶</button></div>
+  <div class="VueCarousel-pagination" style="">
+    <div role="tablist" class="VueCarousel-dot-container" style="margin-top: 20px;"><button aria-hidden="false" role="tab" title="Item 0" value="Item 0" aria-label="Item 0" aria-selected="false" class="VueCarousel-dot" style="margin-top: 20px; padding: 10px; width: 10px; height: 10px; background-color: rgb(239, 239, 239);"></button><button aria-hidden="false" role="tab" title="Item 1" value="Item 1" aria-label="Item 1" aria-selected="true" class="VueCarousel-dot VueCarousel-dot--active" style="margin-top: 20px; padding: 10px; width: 10px; height: 10px; background-color: rgb(0, 0, 0);"></button></div>
+  </div>
+</section>
 `;
 
 exports[`Navigation should trigger page advance when next is clicked 1`] = `
-".VueCarousel-wrapper
-  .VueCarousel-inner(style='transform: translate(0px, 0); visibility: hidden; height: auto;')
-    .VueCarousel-slide(tabindex='-1', role='tabpanel', aria-hidden='true')
-    .VueCarousel-slide.VueCarousel-slide-active.VueCarousel-slide-center(tabindex='-1', role='tabpanel')
-|  
-.VueCarousel-navigation
-  button.VueCarousel-navigation-button.VueCarousel-navigation-prev(type='button', aria-label='Previous page', tabindex='0', style='padding: 8px; margin-right: -8px;') &#x25C0;
-  |  
-  button.VueCarousel-navigation-button.VueCarousel-navigation-next.VueCarousel-navigation--disabled(type='button', aria-label='Next page', tabindex='-1', style='padding: 8px; margin-left: -8px;') &#x25B6;
-|  
-.VueCarousel-pagination(style='')
-  .VueCarousel-dot-container(role='tablist', style='margin-top: 20px;')
-    button.VueCarousel-dot(aria-hidden='false', role='tab', title='Item 0', value='Item 0', aria-label='Item 0', aria-selected='false', style='margin-top: 20px; padding: 10px; width: 10px; height: 10px; background-color: rgb(239, 239, 239);')
-    button.VueCarousel-dot.VueCarousel-dot--active(aria-hidden='false', role='tab', title='Item 1', value='Item 1', aria-label='Item 1', aria-selected='true', style='margin-top: 20px; padding: 10px; width: 10px; height: 10px; background-color: rgb(0, 0, 0);')
-"
+<section class="VueCarousel">
+  <div class="VueCarousel-wrapper">
+    <div class="VueCarousel-inner" style="transform: translate(0px, 0); visibility: hidden; height: auto;">
+      <div tabindex="-1" role="tabpanel" class="VueCarousel-slide" aria-hidden="true"></div>
+      <div tabindex="-1" role="tabpanel" class="VueCarousel-slide VueCarousel-slide-active VueCarousel-slide-center"></div>
+    </div>
+  </div>
+  <div class="VueCarousel-navigation"><button type="button" aria-label="Previous page" tabindex="0" class="VueCarousel-navigation-button VueCarousel-navigation-prev" style="padding: 8px; margin-right: -8px;">◀</button> <button type="button" aria-label="Next page" tabindex="-1" class="VueCarousel-navigation-button VueCarousel-navigation-next VueCarousel-navigation--disabled" style="padding: 8px; margin-left: -8px;">▶</button></div>
+  <div class="VueCarousel-pagination" style="">
+    <div role="tablist" class="VueCarousel-dot-container" style="margin-top: 20px;"><button aria-hidden="false" role="tab" title="Item 0" value="Item 0" aria-label="Item 0" aria-selected="false" class="VueCarousel-dot" style="margin-top: 20px; padding: 10px; width: 10px; height: 10px; background-color: rgb(239, 239, 239);"></button><button aria-hidden="false" role="tab" title="Item 1" value="Item 1" aria-label="Item 1" aria-selected="true" class="VueCarousel-dot VueCarousel-dot--active" style="margin-top: 20px; padding: 10px; width: 10px; height: 10px; background-color: rgb(0, 0, 0);"></button></div>
+  </div>
+</section>
 `;
diff --git a/tests/client/components/__snapshots__/slide.spec.js.snap b/tests/client/components/__snapshots__/slide.spec.js.snap
@@ -1,12 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Slide should mount successfully 1`] = `
-".VueCarousel-wrapper
-  .VueCarousel-inner(style='transform: translate(0px, 0); visibility: hidden; height: auto;')
-    .VueCarousel-slide(tabindex='-1', aria-hidden='true', role='tabpanel')
-// 
-.VueCarousel-pagination(style='display: none;')
-  .VueCarousel-dot-container(role='tablist', style='margin-top: 20px;')
-    button.VueCarousel-dot.VueCarousel-dot--active(aria-hidden='false', role='tab', title='Item 0', value='Item 0', aria-label='Item 0', aria-selected='true', style='margin-top: 20px; padding: 10px; width: 10px; height: 10px; background-color: rgb(0, 0, 0);')
-"
+<section class="VueCarousel">
+  <div class="VueCarousel-wrapper">
+    <div class="VueCarousel-inner" style="transform: translate(0px, 0); visibility: hidden; height: auto;">
+      <div tabindex="-1" aria-hidden="true" role="tabpanel" class="VueCarousel-slide"></div>
+    </div>
+  </div>
+  <!---->
+  <div class="VueCarousel-pagination" style="display: none;">
+    <div role="tablist" class="VueCarousel-dot-container" style="margin-top: 20px;"><button aria-hidden="false" role="tab" title="Item 0" value="Item 0" aria-label="Item 0" aria-selected="true" class="VueCarousel-dot VueCarousel-dot--active" style="margin-top: 20px; padding: 10px; width: 10px; height: 10px; background-color: rgb(0, 0, 0);"></button></div>
+  </div>
+</section>
 `;