Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: vue2 global directives in component testing #24488

Merged
merged 6 commits into from Nov 14, 2022

Conversation

crazyk2
Copy link
Contributor

@crazyk2 crazyk2 commented Nov 1, 2022

User facing changelog

mount() now accept a extensions.directives option, which will be registered globally for Vue2 component testing

Additional details

To register custom vue directive you should pass option like

    mount(HelloWorld, {
      directives: { customDirective: { /* stub */ }}
    })

and this works but only for first level mounted component.

If you test component with nested components which have custom directive, you see error in console
[Vue warn]: Failed to resolve directive: customDirective

Steps to test

How has the user experience changed?

Now you can pass

  mount(HelloWorld, {
    extensions: {
      directives: { customDirective: { /* stub */ }}
    },
  })

And it will be registered globally and works everywhere.

See example /system-tests/projects/vueclivue2-configured/src/components/HelloWorld.cy.js

  • Have tests been added/updated?
  • Has the original issue (or this PR, if no issue exists) been tagged with a release in ZenHub? (user-facing changes only)
  • Has a PR for user-facing changes been opened in cypress-documentation?
  • Have API changes been updated in the type definitions?

@cypress-bot
Copy link
Contributor

cypress-bot bot commented Nov 1, 2022

Thanks for taking the time to open a PR!

@CLAassistant
Copy link

CLAassistant commented Nov 1, 2022

CLA assistant check
All committers have signed the CLA.

@crazyk2 crazyk2 changed the title fix vue2 global directives in component testing fix: vue2 global directives in component testing Nov 1, 2022
@nagash77 nagash77 added CT Issue related to component testing routed-to-ct labels Nov 1, 2022
Copy link
Contributor

@lmiller1990 lmiller1990 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good... I guess this is a bug in Test Utils, I wonder if we should patch it there, too. Happy to do it here, though - thanks for the PR and test.

@@ -13,4 +15,30 @@ describe('<Logo />', () => {

cy.contains('h1', slotContent)
})

it('Vue2 custom directive should work ', () => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice job figuring out where to add a test 👍

@lmiller1990
Copy link
Contributor

Hmmm looks like some CI failures. I will take a look.

@lmiller1990
Copy link
Contributor

I pushed a commit to fix the tests.

@lmiller1990 lmiller1990 merged commit 741019d into cypress-io:develop Nov 14, 2022
@cypress-bot
Copy link
Contributor

cypress-bot bot commented Nov 15, 2022

Released in 11.1.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v11.1.0, please open a new issue.

@cypress-bot cypress-bot bot locked as resolved and limited conversation to collaborators Nov 15, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
CT Issue related to component testing
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

6 participants