fix: re-enable lazy-loading capabilities (#28)

TheAlexLichter · web-flow · commit e7928ab7e11c · 2019-01-11T19:40:24.000Z
This has been fixed by the latest svg-to-vue-component version
diff --git a/package.json b/package.json
@@ -22,7 +22,7 @@
   "scripts": {
     "dev": "nuxt --config-file test/fixture/configs/default.js",
     "lint": "eslint lib test",
-    "test": "yarn run lint && jest",
+    "test": "yarn run lint && jest --detectOpenHandles",
     "release": "standard-version && git push --follow-tags && npm publish",
     "commitlint": "commitlint -e $GIT_PARAMS",
     "coverage": "codecov"
diff --git a/test/__snapshots__/module.test.js.snap b/test/__snapshots__/module.test.js.snap
@@ -1,13 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ssr correctly register SVG loader and load SVG correctly 1`] = `
+exports[`ssr correctly load two lazy-loaded SVGs 1`] = `
 "<!doctype html>
 <html data-n-head-ssr data-n-head=\\"\\">
   <head data-n-head=\\"\\">
     <title data-n-head=\\"true\\"></title><style data-vue-ssr-id=\\"17cfdfa9:0\\">.nuxt-progress{position:fixed;top:0;left:0;right:0;height:2px;width:0;opacity:1;transition:width .1s,opacity .4s;background-color:#000;z-index:999999}.nuxt-progress.nuxt-progress-notransition{transition:none}.nuxt-progress-failed{background-color:red}</style>
   </head>
   <body data-n-head=\\"\\">
-    <div data-server-rendered=\\"true\\" id=\\"__nuxt\\"><!----><div id=\\"__layout\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"1 2 3 4\\" width=\\"100\\"><g id=\\"Nuxt_svg__nuxt\\"><path d=\\"M317.9 852H3.7l408.1-704 408.1 704H507.7\\" fill=\\"#41b883\\"></path><path d=\\"M779.8 852h216.5l-354-608.5-351 608.5h216.5\\" fill=\\"#328170\\"></path><path d=\\"M651.2 852h159.5L549.9 403.8 291.3 852h159.5\\" fill=\\"#35495e\\"></path></g></svg></div></div><script>window.__NUXT__={layout:\\"default\\",data:[{}],error:null,serverRendered:true};</script><script src=\\"/_nuxt/runtime.js\\" defer></script><script src=\\"/_nuxt/pages/index.js\\" defer></script><script src=\\"/_nuxt/commons.app.js\\" defer></script><script src=\\"/_nuxt/app.js\\" defer></script>
+    <div data-server-rendered=\\"true\\" id=\\"__nuxt\\"><!----><div id=\\"__layout\\"><div><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"1 2 3 4\\" width=\\"100\\"><g id=\\"Nuxt_svg__nuxt\\"><path d=\\"M317.9 852H3.7l408.1-704 408.1 704H507.7\\" fill=\\"#41b883\\"></path><path d=\\"M779.8 852h216.5l-354-608.5-351 608.5h216.5\\" fill=\\"#328170\\"></path><path d=\\"M651.2 852h159.5L549.9 403.8 291.3 852h159.5\\" fill=\\"#35495e\\"></path></g></svg> <svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 1000 1000\\"><g id=\\"NuxtTwo_svg__nuxt\\"><path d=\\"M317.9 852H3.7l408.1-704 408.1 704H507.7\\" fill=\\"#41b883\\"></path><path d=\\"M779.8 852h216.5l-354-608.5-351 608.5h216.5\\" fill=\\"#328170\\"></path><path d=\\"M651.2 852h159.5L549.9 403.8 291.3 852h159.5\\" fill=\\"#35495e\\"></path></g></svg></div></div></div><script>window.__NUXT__={layout:\\"default\\",data:[{}],error:null,serverRendered:true};</script><script src=\\"/_nuxt/runtime.js\\" defer></script><script src=\\"/_nuxt/pages/two.js\\" defer></script><script src=\\"/_nuxt/6.js\\" defer></script><script src=\\"/_nuxt/commons.app.js\\" defer></script><script src=\\"/_nuxt/app.js\\" defer></script>
   </body>
 </html>
 "
diff --git a/test/fixture/components/NuxtTwo.svg b/test/fixture/components/NuxtTwo.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  x="0px" y="0px"
+	 viewBox="0 0 1000 1000" style="enable-background:new 0 0 1000 1000;" xml:space="preserve">
+<style type="text/css">
+	.st0{display:none;}
+	.st1{display:inline;}
+	.st2{fill:#222222;}
+	.st3{fill:#41B883;}
+	.st4{fill:#328170;}
+	.st5{fill:#35495E;}
+</style>
+<g id="nuxt">
+	<path class="st3" d="M317.9,852h-151H3.7l408.1-704l408.1,704H658.7h-151"/>
+	<path class="st4" d="M779.8,852h216.5l-354-608.5L291.3,852h216.5"/>
+	<path class="st5" d="M651.2,852h159.5L549.9,403.8L291.3,852h159.5"/>
+</g>
+</svg>
diff --git a/test/fixture/pages/two.vue b/test/fixture/pages/two.vue
@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <nuxt-logo viewBox="1 2 3 4" width="100" />
+    <nuxt-logo-two />
+  </div>
+</template>
+
+<script>
+export default {
+  loading: false,
+  components: {
+    NuxtLogo: () => import('../components/Nuxt.svg'),
+    NuxtLogoTwo: () => import('../components/NuxtTwo.svg')
+  }
+}
+</script>
diff --git a/test/module.test.js b/test/module.test.js
@@ -21,9 +21,9 @@ describe('ssr', () => {
     Error('Never reach this state')
   })
 
-  test('correctly register SVG loader and load SVG correctly', async () => {
+  test('correctly load two lazy-loaded SVGs', async () => {
     const nuxt = await setupNuxt(require('./fixture/configs/default'))
-    const { html } = await nuxt.renderRoute('/')
+    const { html } = await nuxt.renderRoute('/two')
     expect(html).toMatchSnapshot()
   })
 
