https://cypress.io logo
Join Discord
Powered by
# vue
  • s
    cool. i can create more public examples after finishing each private project section and then add them. Right now i have to finish a bunch of individual components....then i can add examples for those, then i'll be making some for views and make examples for those. At work is where i'm working on them the most but i still spend a lot of time outside of work messing with similar projects. I don't do any articles or blog post but can try to look out more for questions on stackoverflow and github issues
  • s
    Yeah. That's great stuff.
  • s
    You using the project is the BEST thing you can do
  • s
    and if you are active in this chat, that's also very valuable 🙂
  • s
    Happy to have you around. LMK if you need anything else
  • s
    Thank you! glad to be here and thanks again to you and @User for helping me get started using this with nuxt
  • r
    Great talk @User - I have one more question: So when it comes to Vuetify, I am used to mock/set-up a lot of stuff just to being able to test my components that consist of other vuetify components. How about Cypress? Is the amount of mocking/setting-up the same?
  • r
    Like do I still need to import all the used Vuetify components, initialize Vuetify, etc. ?
  • r
    @User
  • s
    @User You do need to do all the same setup
  • s
    Essentially, each component is a root level that is either passed to createApp (Vue 3) or to new Vue() (Vue 2)
  • s
    I always make a wrapped 
    mount
    function inside of a helpers file and I use that helper exclusively. I never use the "raw" mount function if I'm doing anything that contains plugins/app setup. These wrapper functions setup the proper plugins, such as Vuetify, and then I never have to think about it again.
  • s
    Cypress also lets you register custom commands. I've used this to make a 
    cy.mount
    command which contains the Vue-level 
    mount
    but also pipes through all of my Vuetify/Vuex/Vue Router setup, etc
  • s
    This is a best practice even if you are not using Cypress. I recommend this for vanilla Vue Test Utils code
  • r
    @User true! Alright, good to know. Thank you very much for this detailed answer 👍
  • r
    Hi! 👋 , does any of you have a problem loading the styles of a SFC when using cypress ct with Vue?
  • s
    Hey @User this is because your main.css or index.css is targeting #app yeah?
  • r
  • s
  • s
    there's a general rule when component testing: You need to make sure your app's environments (CSS Resets, icons, global styles, etc) are all applied and targeting your app's container.
  • r
    You are right 😅 . what should I do to make it work Jess?
  • s
    So for example, you have an component that sets up "global" styles for your application.
  • s
    Personally, the first thing I do is make a "main.css" file and anything that is global that needs to be part of every setup needs to go in there
  • s
    So any CSS resets, or any default fonts, those go in there
  • b
    @User I am cloning your repo as we speak
  • b
    double checking what we say
  • s
    Yeah we'll give you a PR onto it, but... essentially your "support.js" file is going to be where you setup your application's global state
  • s
    anything you need to do on window, or with styles... that happens in there. So you'd do
    Copy code
    import './main.css'
  • s
    and that would give you all of your global styles
  • s
    There are other approaches, but that is my recommended one
1...141516...37Latest