popper.js being Included in dist Bundle Makes Unit Testing Hard

[arranf]

A brief description of the issue

popper.js is bundled in the dist version of vue-material which causes issues when attempting to unit test components which rely on popper.js using jsdom as popper.js relies on unsupported APIs.

Steps to reproduce

1. Create a new project with jest unit tests (you can use the vue-cli for this)
2. Create a component that uses any vue-material component that includes a popper (autocomplete for instance) importing with the suggested vue-material/dist/component syntax
3. Run a unit test that interacts with the component (clicks a suggestion for instance)
4. An error will be thrown due to popper.js being unsupported in jsdom

Which browser?

Vue 2.5 Vue-Material 1.0-beta-7

What is expected?

I'd expect to either:

1. Be able to import components without using the /dist bundle
2. Be able to import a single bundle from /dist and load in dependencies like popper.js separately

What is actually happening?

popper.js is bundled in with dist causing errors such as the following:

at c (node_modules/vue-material/dist/components/index.js:1:45522)
      at C (node_modules/vue-material/dist/components/index.js:1:49901)
      at Object.q [as onLoad] (node_modules/vue-material/dist/components/index.js:1:54229)
      at node_modules/vue-material/dist/components/index.js:1:65942
          at Array.forEach (<anonymous>)
      at new e (node_modules/vue-material/dist/components/index.js:1:65890)
      at VueComponent.<anonymous> (node_modules/vue-material/dist/components/index.js:1:43468)
      at tryCatch (node_modules/babel-runtime/node_modules/regenerator-runtime/runtime.js:62:40)
      at Generator.invoke [as _invoke] (node_modules/babel-runtime/node_modules/regenerator-runtime/runtime.js:296:22)
      at Generator.prototype.(anonymous function) [as next] (node_modules/babel-runtime/node_modules/regenerator-runtime/runtime.js:114:21)
      at r (node_modules/vue-material/dist/components/index.js:1:40979)
      at node_modules/vue-material/dist/components/index.js:1:41155
          at new Promise (<anonymous>)
      at new F (node_modules/core-js/library/modules/_export.js:35:28)
      at VueComponent.<anonymous> (node_modules/vue-material/dist/components/index.js:1:40900)
      at VueComponent.e (node_modules/vue-material/dist/components/index.js:1:43134)
      at VueComponent.boundFn [as createPopper] (node_modules/vue/dist/vue.runtime.common.js:193:12)
      at VueComponent.<anonymous> (node_modules/vue-material/dist/components/index.js:1:43003)
      at tryCatch (node_modules/babel-runtime/node_modules/regenerator-runtime/runtime.js:62:40)
      at Generator.invoke [as _invoke] (node_modules/babel-runtime/node_modules/regenerator-runtime/runtime.js:296:22)
      at Generator.prototype.(anonymous function) [as next] (node_modules/babel-runtime/node_modules/regenerator-runtime/runtime.js:114:21)
      at r (node_modules/vue-material/dist/components/index.js:1:40979)
      at node_modules/vue-material/dist/components/index.js:1:41095
          at <anonymous>

The suggestion by popper.js is to mock it but that's impossible due to the bundle

[marcosmoura]

Right now there is no workaround for this. Sorry! I have plans to ditch Popper.js asap and create our own "Popper" thing.

For the very next version, I will create a better guide on how to import the source code, instead of bundled one (like your scenario).

This will take a while, since my mac died Yesterday. :|

I will keep this issue opened until the fix!

Thank you!

[marcosmoura]

@arranf Thinking here, I will change the codebase to generate different bundles. UMD, CJS, and ESM. This would definitely be easy to use in your case, because you'll import the esm file, that do not contain any dependency/polyfill. This will be on beta-8