[Docs] Unit testing components built on vue-material

Open JimBacon opened this issue 7 years ago • 1 comments

You can use Cypress plus cypress-vue-unit-test to test single file components (.vue files) that you create. If your components have been built with vue-material then you need it to be available during test so that your component under test loads correctly. I have found the following template to be effective and it could be beneficial to other users to document this.

const mountVue = require('cypress-vue-unit-test')
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.min.css'
import 'vue-material/dist/theme/default.css'

// Create the options to pass to mountView()
// Material-design is a plugin which is loaded with 'use'.
// Html option is needed to inject Roboto font and icons.
const options = {
  extensions: {
    use: [VueMaterial]
  },
  html: `
      <html>
        <head>
          <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,500,700,400italic|Material+Icons">
        </head>
        <body>
          <div id="app"></div>
        </body>
      </html>
    `
}

import Component from '~/components/your-component.vue'

describe('Component unit tests', () => {
  beforeEach(mountVue(Component, options))

  it('should do something', () => {
    // Insert cy tests here.
  })
})

Dec 17 '18 11:12 JimBacon

How to use this sintaxe for 2 diferents components? It's possible?

Jul 27 '20 20:07 MatheusFernandess