vuematerial / vue-material

Vue.js Framework - ready-to-use Vue components with Material Design, free forever.
https://www.creative-tim.com/vuematerial
MIT License
9.88k stars 1.16k forks source link

[Docs] Unit testing components built on vue-material #1983

Open JimBacon opened 5 years ago

JimBacon commented 5 years ago

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.
  })
})
MatheusFernandess commented 3 years ago

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