fix: tests

dword-design · Jun 27, 2021 · 888eca4 · 888eca4
1 parent c441d5f
commit 888eca4
Show file tree

Hide file tree

Showing 3 changed files with 4,634 additions and 180 deletions.
diff --git a/package.json b/package.json
@@ -30,7 +30,14 @@
     "rollup": "^2.22.1"
   },
   "devDependencies": {
-    "@dword-design/base": "^8.0.0"
+    "@dword-design/base": "^8.0.0",
+    "@dword-design/chdir": "^2.0.4",
+    "@dword-design/puppeteer": "^5.0.3",
+    "@dword-design/tester": "^2.0.6",
+    "@dword-design/tester-plugin-tmp-dir": "^2.1.1",
+    "file-url": "^3.0.0",
+    "nuxt": "^2.15.7",
+    "output-files": "^2.0.5"
   },
   "engines": {
     "node": ">=12"

diff --git a/src/index.spec.js b/src/index.spec.js
@@ -0,0 +1,147 @@
+import chdir from '@dword-design/chdir'
+import { endent } from '@dword-design/functions'
+import puppeteer from '@dword-design/puppeteer'
+import tester from '@dword-design/tester'
+import testerPluginTmpDir from '@dword-design/tester-plugin-tmp-dir'
+import execa from 'execa'
+import fileUrl from 'file-url'
+import { mkdir, outputFile, remove } from 'fs-extra'
+import { Builder, Nuxt } from 'nuxt'
+import outputFiles from 'output-files'
+
+export default tester(
+  {
+    directive: async () => {
+      await outputFiles({
+        'pages/index.vue': endent`
+          <template>
+            <div class="component" v-tmp-directive />
+          </template>
+
+          <script>
+          import TmpDirective from '../../tmp-directive'
+          
+          export default {
+            directives: {
+              TmpDirective,
+            },
+          }
+          </script>
+        `,
+      })
+
+      const nuxt = new Nuxt()
+      await new Builder(nuxt).build()
+      await nuxt.listen()
+
+      const browser = await puppeteer.launch()
+
+      const page = await browser.newPage()
+      try {
+        await page.goto('http://localhost:3000')
+
+        const component = await page.waitForSelector('.component')
+        expect(await component.evaluate(el => el.innerText)).toEqual(
+          'Hello world'
+        )
+      } finally {
+        await browser.close()
+        await nuxt.close()
+      }
+    },
+    plugin: async () => {
+      await outputFiles({
+        'pages/index.vue': endent`
+          <template>
+            <div class="component" v-tmp-directive />
+          </template>
+        `,
+        'plugins/plugin.js': endent`
+          import Vue from 'vue'
+          import TmpDirective from '../../tmp-directive'
+          
+          Vue.use(TmpDirective)
+        `,
+      })
+
+      const nuxt = new Nuxt({ plugins: ['~/plugins/plugin.js'] })
+      await new Builder(nuxt).build()
+      await nuxt.listen()
+
+      const browser = await puppeteer.launch()
+
+      const page = await browser.newPage()
+      try {
+        await page.goto('http://localhost:3000')
+
+        const component = await page.waitForSelector('.component')
+        expect(await component.evaluate(el => el.innerText)).toEqual(
+          'Hello world'
+        )
+      } finally {
+        await browser.close()
+        await nuxt.close()
+      }
+    },
+    script: async () => {
+      await outputFile(
+        'index.html',
+        endent`
+        <body>
+          <script src="https://unpkg.com/vue"></script>
+          <script src="../tmp-directive/dist/index.min.js"></script>
+        
+          <div id="app"></div>
+        
+          <script>
+            new Vue({
+              el: '#app',
+              template: '<div class="component" v-tmp-directive />',
+            })
+          </script>
+        </body>
+      `
+      )
+
+      const browser = await puppeteer.launch()
+
+      const page = await browser.newPage()
+      try {
+        await page.goto(fileUrl('index.html'))
+
+        const component = await page.waitForSelector('.component')
+        expect(await component.evaluate(el => el.innerText)).toEqual(
+          'Hello world'
+        )
+      } finally {
+        await browser.close()
+      }
+    },
+  },
+  [
+    {
+      after: () => remove('tmp-directive'),
+      before: async () => {
+        await mkdir('tmp-directive')
+        await chdir('tmp-directive', async () => {
+          await outputFiles({
+            'node_modules/base-config-self/index.js':
+              "module.exports = require('../../../src')",
+            'package.json': JSON.stringify({
+              baseConfig: 'self',
+              name: 'tmp-directive',
+            }),
+            'src/index.js': endent`
+              export default {
+                bind: el => el.innerText = 'Hello world',
+              }
+            `,
+          })
+          await execa.command('base prepare')
+          await execa.command('base prepublishOnly')
+        })
+      },
+    },
+    testerPluginTmpDir(),
+  ]
+)