https://cypress.io logo
Join Discord
Powered by
# vue
  • n

    nutritious-restaurant-91514

    08/13/2022, 12:17 PM
    Hey everyone 🙂 I’m reading the docs on Vue component testing and I’m struggling to understand why does the chapter on
    emit
    have this
    onChange
    prop. I especially don’t understand the naming,. Obviously, this ties to
    change
     emit, but where does the
    on
    come from? is this a naming convention? I wasn’t able to find any indicator either in Cypress or Vue test utils docs on this
  • r

    rapid-yak-87393

    08/15/2022, 3:47 PM
    Hi Filip, I believe when passing a prop (instead of an event), the name of the prop is the event name prepended with 'on'. Since the name of the event is 'change', the name of the prop is 'onChange'
  • n

    nutritious-restaurant-91514

    08/15/2022, 6:01 PM
    that’s interesting. I couldn’t find a mention of this in vue docs or anywhere. it made sense and it was surprising to me when I was testing it out, but I wondered about it 🙂
  • a

    adorable-leather-85140

    08/17/2022, 12:24 PM
    Hi, I'm currently setting up cypress in a nuxt app, so far I followed the documentation and it works on Cypress side ( I can test a component yay ). The problem is when Nuxt is loading it doesnt recognize anything from cypress... here is the Media.cy.js file > import Media from "./Media.vue" > import 'tailwindcss/dist/tailwind.min.css' > > describe('', () => { > it('renders', () => { > // see: https://test-utils.vuejs.org/guide/ > cy.mount(Media) > }) > }) The configuration is the base one you can get when launching cypress open
  • a

    adorable-leather-85140

    08/17/2022, 12:25 PM
    Here is the error from Nuxt :
  • a

    adorable-leather-85140

    08/17/2022, 12:25 PM
    I'm on cypress 10.6 and nuxt 2.15
  • r

    ripe-plumber-61789

    08/17/2022, 4:12 PM
    Hi everyone, how do we handle
    v-model
    in component testing? I have a
    DataPickerComp.vue
    component. How can I define and pass the v-model value for component testing? Thanks!
    Copy code
    <template>
      <v-row justify="center">
        <v-date-picker v-model="picker" />
      </v-row>
    </template>
    
    <script>
    export default {
      data() {
        return {
          picker: (new Date(Date.now() - (new Date()).getTimezoneOffset() * 60000)).toISOString().substr(0, 10),
        };
      },
    };
    </script>
    DatePickerComp.cy.js
    Copy code
    import DatePickerComp from '../../../../src/components/elements/DatePickerComp.vue';
    describe('DatePickerComp', function () {
      it('date model', function () {
        cy.mount(DatePickerComp);
      });
    });
  • a

    ancient-appointment-66951

    08/18/2022, 9:12 AM
    Hello all, 1.5h tutorial on Cypress and Vue 3. Hopefully it’s useful!! https://m.youtube.com/playlist?list=PLC2LZCNWKL9bLQrMQKfTnpihgW0VFSJ_n
  • a

    ancient-appointment-66951

    08/18/2022, 9:13 AM
    Hi! I usually create a wrapper https://m.youtube.com/watch?v=SU_bsYprv6E&list=PLC2LZCNWKL9bLQrMQKfTnpihgW0VFSJ_n&index=2
  • g

    great-arm-27075

    08/23/2022, 6:51 AM
    Hi everyone, here I write a test to click on the drop-down button so that will see all available options in that. but when I click on the drop-down no options are displayed. here is my code, here I tried adding wait as well to let complete back end call, also tried to trigger click and direct click, but none of it worked. also tried the pipe plugin suggested by Gleb bahmutiv in this article. https://www.cypress.io/blog/2019/01/22/when-can-the-test-click/ but manually there is no issue with everything working as expected. for information, I'm using the cypress 9.6.1 version
  • g

    great-arm-27075

    08/24/2022, 5:20 AM
    @nutritious-restaurant-91514 hi there, can you help me to resolve above problem?
  • a

    ancient-appointment-66951

    08/24/2022, 6:13 AM
    Is the goal just to see all the options? I wonder if you can do something like
    cy.get('select').find('option')
    or something along those lines.
  • g

    great-arm-27075

    08/26/2022, 7:50 AM
    @ancient-appointment-66951 This drop-down is a Button type (not a select type drop-down) here is some DOM sample. Thank you for your response, any suggestion would be helpful
  • a

    ancient-appointment-66951

    08/30/2022, 12:54 AM
    You should just be able to do
    cy.get
    to get your elements - are you saying the options are simply not displayed during testing? That's weird - is the data fetched correctly?
  • d

    dazzling-ram-7318

    08/30/2022, 8:13 PM
    Are there any resources on using Cypress 10 component testing with Vue and Ionic? I've seen this, but it is not using current versions so things appear to be different now: https://github.com/codeluggage/ionic-5-vue-3-cypress-ct-and-e2e-combined
  • g

    great-arm-27075

    09/01/2022, 4:48 AM
    yes, during automation, the cy.get() finding the exact drop-down and click() performing on the same element but the options are not displaying. when I time travel, I see the actions performed exactly but the output that I should see options is not displayed. but during manual testing, the options of dropdown are displayed when we click on it.
  • c

    colossal-farmer-50435

    09/01/2022, 5:34 AM
    When Can the Test Click?
  • a

    ancient-appointment-66951

    09/01/2022, 11:07 AM
    Are you able to make a minimal example? I can't think of any obvious problem - definitely can look at some code if you've got some.
  • a

    aloof-football-89504

    09/02/2022, 10:26 PM
    hi guys, how can i select an list item, like
  • a

    aloof-football-89504

    09/02/2022, 10:26 PM
    my frontend is vue.js
  • a

    aloof-football-89504

    09/02/2022, 10:27 PM
    cy.contains('div', 'Código da Loja') here i find the field, but now i want to bringdown the list, and select for example, 09000012
  • d

    dazzling-ram-7318

    09/06/2022, 10:03 PM
    Here is a quick minimal repo showing how I got component testing to work with Vue+Ionic. There is probably a better way, but it works. https://github.com/crobinson-expl/vue-ionic-cypress-component-testing
  • m

    microscopic-ice-2827

    09/26/2022, 1:32 PM
    Hello dear developers where I can pass the Auth0 authorization for Cypress tests with Vue 3 composition api, could you help me by sending me an example with real code with these versions. i see this example https://docs.cypress.io/guides/end-to-end-testing/auth0-authentication#Auth0-Application-Setup but is write in React and use auht0-spa-js library no have same methos that @auth0/auth0-vue PS: I see that there are several developers stuck on this part. I use the library: https://www.npmjs.com/package/@auth0/auth0-vue and cypress: 10.8.0
  • a

    ancient-appointment-66951

    10/13/2022, 2:53 AM
    @microscopic-ice-2827 can you share a component/test you are trying to write? I think, in general, auth sounds like an E2E concern - not something you'd want to test with a component test. Or are you writing an E2E test and happen to be using the Vue Auth0 lib? Can you clarify?
  • l

    limited-room-30929

    10/14/2022, 6:52 AM
    Just wanted to say extra thanks for the async devserver config @ancient-appointment-66951 😄
  • a

    ancient-appointment-66951

    10/14/2022, 11:15 PM
    Looking forward to using Quasar w Cyprss hehe
  • m

    microscopic-ice-2827

    10/18/2022, 4:32 PM
    Sorry for the delay. Yes, I am trying to run cypress e2e tests with auth0-vue library but I have not been successful in bypassing auth0
  • a

    adamant-mouse-7124

    10/19/2022, 8:04 AM
    Hello guys, I'm new here and i can't seem to find some good use case tests on canvas and how to draw or make signature, can someone help me with this, please ?
  • e

    eager-pager-61350

    10/20/2022, 6:08 PM
    Hi, the following
    Copy code
    typescript
    mount(SomeVueComponent, { Props: { SomeNumber: 12 } })
    doesn't provide intellisense for Props. Nor does it highlight errors when trying to put string inside a number prop etc. I noticed 'mount' has one overload where options parameter isn't of type 'any'. I had no luck forcing it to use that overload though. Pls help, I want my component tests to be more future proof with strongly typed props.
  • e

    eager-pager-61350

    10/20/2022, 8:49 PM
    UPDATE: This is much better when migrating my "*.cy.ts" test files to "*.cy.tsx". TSX leads to perfect strong typing of props. Also forces you to provide all required props. But, there is one issue left in my case. When trying to call custom commands that worked before in "*.cy.ts", I get the following error: "Cannot read properties of undefined (reading 'global')"
1...3334353637Latest