https://cypress.io logo
Join Discord
Powered by
# vue
  • b
    NP !!
  • b
    @narrow-flag-76711 I updated the vuetify example so that it is usable. @User and I are working on a more clean way to bring on the styles. https://github.com/elevatebart/cy-ct-vuetify/blob/main/cypress/support/commands.js
  • b
    This would look something like a WrapperContainer component
  • b
    in the options of the mount function
  • s
    Is there a method to how you figure out how to get stubs working? For example. font-awesome is working great in my nuxt app. Now I'm testing a component that has a icon. I've used stubs to help with bootstrap and thought i'd do the same thing here. But 
    @nuxt/fontawesome
    doesn't have 
    FontAwesomeIcon
    but it uses 
    @fortawesome/vue-fontawesome
    so the following seems to work. 
    import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
    That lead to me getting a error that 
    could not find one or more icons {prefix: "fas", iconName: "filter"}
    which lead me to think i should use 
    import { faFilter } from '@fortawesome/free-solid-svg-icons'
    and then pass 
    faFilter
    to stubs as key/value. But that results in error 
    options.sutb values must be passed a string or component
    . I'm not sure what I need to send and i'm not sure how i should go about figuring that out.
  • s
    Right. 
    faFilter
    is an svg. What you really want to do is register the FontAwesome plugin with Vue.
  • s
    Here's an example of how I do it in a React project.
  • s
    Because FA is generally a global singleton, you don't need to pass anything into the Vue instance itself, yknow?
  • s
    When I have global setup code like this, I generally move it to the top of the support.js file
  • s
    @User does that help?
  • s
    @User thank you! That was a tremendous help. Thank you for the tip! Here is what I have in vue after updating. I still had to add stub for font-awesome-icon, maybe because of how vue and nuxt is setup. I'm not sure but it is working with your help.
    Copy code
    import { mount } from '@cypress/vue'
import { BButton } from 'bootstrap-vue'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'
import Button from './Button.vue'

library.add(fas)
library.add(fab)

const stubs = {
  // used to register custom or third-party components
  'b-btn': BButton,
  'font-awesome-icon': FontAwesomeIcon,
}
  • s
    Yeah that makes sense.
  • s
    You should wrap the mount command in a custom mount command so it always does this, instead of per-mount
  • s
    I would do that in the support file and then inside of the mount from 
    @cypress/vue
    you would grab your own. Then you don't need to write the stubs at the beginning of each test
  • s
    Copy code
    js
// support.js within cypress.json's supportFile
import { mount: cyMount } from '@cypress/mount'
Cypress.Commands.add('mount', (options) => {
  const globalOptions = { stubs: { /* your stubs */ } }
  return cyMount({ ...globalOptions, ...options})
})

// MyComponent.spec.js
const MyComponent = {
  template: '<h1>Hello World</h1>'
}

it('renders', () => {
  cy.mount(MyComponent).get('h1').should('contain', 'Hello World')
})
  • s
    Something like this
  • s
    Hello, I'm not sure if this is a bug or if I'm handling it wrong. I'm testing a component that has sub components (Bootstrap Vue and Nuxt). The component looks like this:
    Copy code
    <div v-else-if="buttonType === 'popover'">
    <b-btn
      id="showHideColContainer"
      ref="button"
      class="tst-btn-group"
      variant="primary"
      @click="
        (e) => {
          e.target.blur()
        }
      "
    >
      {{ title }}
    </b-btn>
    <b-popover
      ref="popover"
      target="showHideColContainer"
      triggers="click"
      :show.sync="selectHiddenCol"
      placement="auto"
      container="my-container"
      @show="() => {}"
    >
      <template slot="title">
        <b-button
          class="close"
          aria-label="Close"
          @click="selectHiddenCol = false"
        >
          <span class="d-inline-block" aria-hidden="true">×</span>
        </b-button>
        {{ title }}
      </template>

      <div style="max-height: 150px; overflow: auto">
        <div v-for="(field, index) in fields" :key="index">
          <b-form-checkbox
            v-if="field.label !== '*'"
            v-model="field.hide"
            style="margin-left: 10px; width: 150px"
          >
            {{ field.label }}
          </b-form-checkbox>
        </div>
      </div>

      <b-button size="sm" variant="primary" @click="selectHiddenCol = false"
        >Ok</b-button
      >
    </b-popover>
  </div>
    My test:
    Copy code
    it('renders button with popover', () => {
    const fields = [
      { label: 'id', hide: true },
      { label: 'name', hide: false },
      { label: 'date', hide: true },
    ]

    shallowMount(Button, {
      stubs,
      propsData: { buttonType: 'popover', fields, title: 'Hidden Columns' },
    })
    cy.get('button').should('include.text', 'Hidden')
    cy.get('button').click()
    cy.get('.popover').find('label').should('have.length', 3))
  })
  • s
    But the popover is outside of root. The result is it seems i can't access it and i also get errors AFTER click (
    unknown custom element b-button
    )
  • s
    I'm basically trying to test this button the way it is used (people click the button and then click check boxes to show or hide columns) Is this a limitation or am i doing it wrong?
  • s
    What errors do you get? You should be able to do this, I test in chakra like this
  • s
    @User Sorry, the test passes and is working but I get the console error about b-button unknown custom element (after the click). Eventually i will be testing full views and I'm not sure if I'm donig things wrong while i work my way up because of this console error.
  • s
    Right. Because that component doesn't explicitly register the global components (e.g. 
    { components: { 'b-button': BootstrapButton } }
    ) it doesn't know what components are available
  • s
    Is there a way for me to tell it, or is this something i should keep in mind when testing components that mount other components?
  • s
    So the best way to think of it is to look at your main.js file
  • s
    I don't remember if nuxt has a specific vue-bootstrap plugin, or if you do it inside of 
    createApp
    (or 
    new Vue()
    )
  • s
    It has a bootstrap-vue plugin
  • s
    grr ok I've never done that then
  • s
    modules: [ // https://go.nuxtjs.dev/bootstrap 'bootstrap-vue/nuxt',]
  • s
    In the meantime you can use the client side registration for the Vue Bootstrap plugin and put it inside of the plugins: [] that VTU expects
  • s
    essentially forget that it's nuxt and treat it as-if it was all client-side
1...232425...37Latest