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(create-instance): revert stubbing of component _Ctor #1479

Merged
merged 1 commit into from
Mar 25, 2020
Merged

fix(create-instance): revert stubbing of component _Ctor #1479

merged 1 commit into from
Mar 25, 2020

Conversation

kaidjohnson
Copy link
Contributor

What kind of change does this PR introduce? (check at least one)

  • Bugfix
  • Feature
  • Code style update
  • Refactor
  • Build-related changes
  • Other, please describe:

Does this PR introduce a breaking change? (check one)

  • Yes
  • No

The PR fulfills these requirements:

Other information:

Hello and thank you for these awesome utils, they make testing components a breeze!

This PR is a fix to address what is likely to be a very extreme edge-case. It reverts three small changes made between v1.0.0-beta.29 and v1.0.0-beta.30 that are preventing us from being able to upgrade. The offending changes were included in this commit 0c07653, but appear to not specifically be a requirement for that change.

When upgrading v1.0.0-beta.30, a few tests for our custom scrollable table started to fail. After some careful investigation, it appears the cause of the failure was the inability to support the DOM restructuring done in the directive. We do some shallow cloning of Nodes and move some parts around using standard DOM APIs including insertBefore and append.

I've tried to come up with the exact scenario to reproduce the issue, but I've come up short! Here's what we're doing in a nutshell:

  • Wrapping the bootstrap-vue table component (https://bootstrap-vue.js.org/docs/components/table) with our own render function in order to customize the component more easily
  • Including a directive that restructures the resulting DOM template to support a "sticky" header -- we're basically ripping the <thead> out and putting it in a new <table> alongside the component's rendered table. This approach works perfectly in browsers and with test-utils v1.0.0-beta.29 in jest.

I've attempted to recreate the scenario in a unit test, but I can't get the test to fail, so I'm confident I'm missing a key piece of knowledge around the inner workings of Vue.

We tried a handful of approaches to satisfy the test utils, but kept getting stuck in the same spot: appending the <thead> into the new <table> simultaneously caused the <thead> and <tbody> to disappear from the original <table> and nothing to render in the new header <table>. Given that it worked in beta.29 and not in beta.30, I combed through the changelog and commits. Nothing jumped out, so I bisected commits between the two releases and finally identified the commit above.

I'm not entirely up to speed with how the _Ctor reference works in Vue, but the issue was resolved as soon as I removed the _Ctor stubs from the component reference. This revert did not cause any tests to fail, but I wish I could better reproduce the issue in testing to avoid having it re-introduced, as it's not an obvious issue.

@lmiller1990
Copy link
Member

I am also not 100% sure on how that part of the code base works. Since all the tests seem to be passing, I think this is fine. Let's see if @dobromir-hristov or @JessicaSachs has any thoughts, if not I'm happy to merge this up.

@lmiller1990 lmiller1990 self-requested a review March 23, 2020 06:49
Copy link
Member

@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.

Seems ok... 🤔 let's get a second opinion.

@dobromir-hristov
Copy link
Contributor

I think this is a sort of cache that Edd cleared ... But I am not sure

@lmiller1990
Copy link
Member

I say we go for it - it's breaking at least one test suite for no obvious reason, and our tests aren't catching it.

@lmiller1990 lmiller1990 merged commit 70b553b into vuejs:dev Mar 25, 2020
@kaidjohnson kaidjohnson deleted the issue-ctor branch March 30, 2020 14:19
@kaidjohnson
Copy link
Contributor Author

Thanks for merging this fix! Any ETA for a tagged release? We're excited to upgrade!

@lmiller1990
Copy link
Member

I can do a release this week!

@sullivanpt
Copy link

sullivanpt commented Apr 23, 2020

Just a note to maybe help others. After this change (patch-create-element.js#extend remove componentOptions._Ctor = {}) my transition stubs stopped working. I am testing components that deep mount Vuetify components. I was able to reenable transition stubs by switching to the new syntax. Specifically this method from the current docs no longer works:

const transitionStub = () => ({
  render: function(h) {
    return this.$options._renderChildren
  }
})
...
const wrapper = mount(Foo, {
    stubs: {
      transition: transitionStub()
    }
  })

This does work (also after #1411 hits it will be the default behavior):

const wrapper = mount(Foo, {
    stubs: {
        transition: true,
        'transition-group': true
    }
  })

@lmiller1990
Copy link
Member

@sullivanpt thanks for the feedback, this is useful to know about.

The next release will be 1.0! Aiming for end of this month. All that is left is backport a few things from VTU next (mainly await wrapper.trigger, which returns nextTick, so you don't need to do nextTick manually anymore).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants