swift-glass-92692
11/04/2022, 4:03 PMwindow
object directly or utilizing cy.window().then(win} => {...})
. For example:
import HelloWorld from './HelloWorld/vue'
describe('HelloWorld', () => {
beforeEach(() => {
cy.window().then((win) => {
win.MY_GLOBAL_STATE = { hello: 'world' }
})
})
it('should use window data', () => {
cy.mount(HelloWorld)
})
})
fresh-belgium-26376
11/04/2022, 10:24 PM<script>
const hostWindowApp = window.APP
const errorNotificationMixin = hostWindowApp?.errorNotificationMixin
const userMetricMixin = hostWindowApp?.userMetricMixin
const friendlyDateTimeMixin = hostWindowApp?.friendlyDateTimeMixin
export default {
name: 'MyModuleChangeMe',
mixins: [errorNotificationMixin, userMetricMixin, friendlyDateTimeMixin]
}
</script>
This is the error Cannot read properties of undefined (reading 'errorNotificationMixin')
fresh-belgium-26376
11/04/2022, 10:27 PM<script>
const hostWindowApp = { errorNotificationMixin: {} }
const errorNotificationMixin = hostWindowApp?.errorNotificationMixin
export default {
name: 'MyModuleChangeMe',
mixins: [errorNotificationMixin]
}
</script>
nice-piano-83242
11/12/2022, 2:32 AMbland-agent-12274
11/20/2022, 9:14 PMmelodic-kitchen-91147
11/26/2022, 3:21 PMcy.mount(MyComponent, { props })
, how then do I change the value of selected props? I want to test that the component updates when the prop values change. Thanksmelodic-tomato-72168
11/27/2022, 6:21 PMwonderful-match-15836
11/28/2022, 3:05 AM.as('component')
to alias the mounted component so we can check it with the initial props first.
Then later I call cy.get('@component')
to grab the VTU wrapper and use its setProps
method in the callback.
it('shows a message when passed as a prop', () => {
cy.mount(<FancyMessage message="hello" />).as('component')
cy.contains('p', '~hello~').should('be.visible')
cy.get('@component').then(({wrapper}) => {
wrapper.setProps({message: 'test'})
})
cy.contains('p', '~test~').should('be.visible')
})
I'm not sure how much you need to do this, possibly it's worth if there is other complicated ephemeral state in the component at the moment you change props. In many cases it feels like "testing the framework" - Vue will update when props change.
It often might be more useful to test the same behavior from a higher level, to make sure that say, some parent is changing state that gets passed into the props and the DOM reflects that correctly. This implicitly tests the prop but avoids having to dip into the framework.melodic-kitchen-91147
11/28/2022, 6:33 AM// this is the Vue Test Utils wrapper
), but for some reason it just never registered with me as I was reading it. Cheers
BTW, I notice you're part of the core team, may I request/suggest that that specific example be updated with something to more clearly(?) indicate that it is the test utils wrapper, i.e. replace the comment with something like wrapper.setProps({ foo: bar })
. It'll be a lot harder to miss that way 🙂wonderful-match-15836
11/28/2022, 7:23 PMmelodic-kitchen-91147
11/30/2022, 12:20 AMcy.js
extension. I switched it to cy.ts
(for reasons), but now my IDE (PHPStorm) is complaining about cy.mount(...)
that Property 'mount' does not exist on type 'cy & CyEventEmitter
? The ./support/components.ts
file (setup by default) does contain the mount
reference, and the test does run... I'm not sure how to get my IDE to stop complaining though. Cheersmelodic-kitchen-91147
11/30/2022, 12:25 AM/// <reference path="../../cypress/support/component.ts" />
to the top of the file, but I'm guessing this isn't the cleanest solution?melodic-kitchen-91147
11/30/2022, 1:32 AMcy.mount(<FancyMessage... />)
doesn't work? Cypress throws an Unexpected token <
error . I understand this syntax works for React, but doesn't seem to be the case for Vue. I just wanted to be sure I wasn't missing something?
Secondly, from a TS perspective, how would you type the wrapper
in .then(({ wrapper }) => ...
? TS thinks cy.get('@component')
locates a JQuery<HTMLElement>
, and is then complaining that wrapper
doesn't exist on JQuery?
Thank youwonderful-match-15836
11/30/2022, 5:24 PMmelodic-kitchen-91147
11/30/2022, 11:46 PMsparse-megabyte-40861
12/03/2022, 12:39 PMsparse-megabyte-40861
12/03/2022, 4:27 PMsparse-megabyte-40861
12/03/2022, 5:59 PMbland-zebra-74669
12/06/2022, 3:50 PMimport { useAnalytics } from '@/composables/analytics';
const { log } = useAnalytics();
But neither const log = cy.stub('log');
or const analytics = useAnalytics(); const log = cy.stub(analytics, 'log');
seems to work in my component tests...adventurous-eve-81295
12/15/2022, 9:06 AMcy.wait(1000).get('[data-cy="button"]').as('buttons)
cy.get('@buttons').click({ multiple: true })
But the error says: We initially found matching elements. But while waiting for them to become actionable they disappeared from the page.
The buttons are still there... why can't Cypress find them ?microscopic-ice-2827
12/20/2022, 4:00 PMstraight-rose-89671
12/21/2022, 12:32 PMget('[data-cy="button"]').click()
Or
get('[data-cy="button"]').each(($el) => cy.wrap($el).click())
ancient-appointment-66951
12/22/2022, 2:55 AMcy.origin
to do auth. https://docs.cypress.io/api/commands/origin#SSO-login-custom-commandancient-appointment-66951
12/22/2022, 2:56 AMancient-appointment-66951
12/22/2022, 2:56 AMminiature-animal-96670
12/26/2022, 11:04 PMsome-oil-10020
12/27/2022, 11:38 AMorange-dusk-15826
12/29/2022, 7:14 PM<template>
<div>
<h1>Inject/Provide</h1>
<p data-cy="foo">{{ foo }}</p>
</div>
</template>
<script setup lang="ts">
import {inject, onMounted} from 'vue'
const foo = inject('foo');
onMounted(() => {
console.log(foo); // foo is undefined
})
</script>
Component test:
import InjectProvideComponent from "@/components/injectprovidecomponent/InjectProvideComponent.vue";
describe('InjectProviderComponent', () => {
it('mount', () => {
cy.mount(InjectProvideComponent, {
provide: {
foo: 'Hello World!'
}
});
cy.get('[data-cy="foo"]').contains('Hello World!');
});
});
wonderful-match-15836
01/03/2023, 11:30 PM