Skip to content

fix: return correct html depending if outer element is root Vue app #174

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.

Sign up for GitHub

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

Merged
merged 2 commits into from
Aug 21, 2020
Merged

fix: return correct html depending if outer element is root Vue app #174

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6a6dd41
fix: return correct html depending if outer element is root Vue app
lmiller1990 Aug 12, 2020
fc045f7
tests: add more tests
lmiller1990 Aug 14, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion src/vueWrapper.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,12 @@ export class VueWrapper<T extends ComponentPublicInstance> {
}

html() {
return this.parentElement.innerHTML
// cover cases like <Suspense>, multiple root nodes.
if (this.parentElement['__vue_app__']) {
Copy link
Member

Choose a reason for hiding this comment

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

__vue_app__ is only present on the root component no? Does it still work if the suspense or multi-root node component is not directly under the app?

Copy link
Member Author

@lmiller1990 lmiller1990 Aug 13, 2020 •
edited
Loading

Choose a reason for hiding this comment

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

I have no idea if this will work with nested <Suspense>, we should add a test and find out!

Copy link
Member Author

Choose a reason for hiding this comment

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

Seems fine fc045f7#diff-7906b5e8a0a656a314ef4e609e16f76dR54

Is this what you meant @cexbrayat ?

Copy link
Member

Choose a reason for hiding this comment

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

I was thinking about an extra layer of component, something like mount(App) with App just displaying the Component you have in your test. Because as is in your test, Component is the root comp, so it has the __vue_app_ attribute I guess? But maybe I'm misunderstanding something: if you're confident that's OK for me!

Copy link
Member Author

Choose a reason for hiding this comment

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

I'm not that confident, better have a test. Can you give me an example of what you mean (doesn't need to be working). The way I read is it something like this:

const Comp = {
  template: `
    <ComponentA>
      <ComponentB>1</ComponentB>
      <ComponentB>2</ComponentB>
      <ComponentB>3</ComponentB>
  </ComponentA>
`
}

const App = {
  template: `
    <ComponentA />
  `
}

mount(App)

?

Copy link
Member

Choose a reason for hiding this comment

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

Exactly!

Copy link
Member Author

Choose a reason for hiding this comment

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

So this does NOT work

  it.only('works', () => {
    const ComponentA = {
      name: 'ComponentA',
      template: `<div class="comp-a"><slot /></div>`
    }
    const ComponentB = {
      name: 'ComponentB',
      template: `<div class="comp-b"><slot /></div>`
    }
    const Main = {
      components: { ComponentA, ComponentB },
      template: `
        <ComponentA>
          <ComponentB>1</ComponentB>
          <ComponentB>2</ComponentB>
          <ComponentB>3</ComponentB>
        </ComponentA>
      `
    }

    const App = {
      components: { Main },
      template: '<Main />'
    }

    const wrapper = mount(App)

    expect(wrapper.getComponent(ComponentB).html()).toBe('<div class="comp-b">1</div>')

It cannot find ComponentB at all. I don't know why (nothing to do this with PR though).

Copy link
Member Author

Choose a reason for hiding this comment

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

Made issue... #180

I still don't fully get how Vue stores the component hierarchy internally. Hm.

return this.parentElement.innerHTML
}

return this.element.outerHTML
}

text() {
Expand Down
56 changes: 56 additions & 0 deletions tests/findComponent.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,4 +170,60 @@ describe('findComponent', () => {
const wrapper = mount(compA)
expect(wrapper.findComponent(Hello).unmount).toThrowError()
})

// https://github.com/vuejs/vue-test-utils-next/issues/173
const ComponentA = {
name: 'ComponentA',
template: `<div><slot></slot></div>`
}

const ComponentB = {
name: 'ComponentB',
template: '<div><slot></slot></div>'
}

it('finds nested components and obtains expected html and innerText', () => {
const wrapper = mount({
components: {
ComponentA,
ComponentB
},
template: `
<ComponentA>
<ComponentB>1</ComponentB>
<ComponentB>2</ComponentB>
<ComponentB>3</ComponentB>
</ComponentA>
`
})
const com1 = wrapper.findComponent(ComponentB)
expect(com1.html()).toBe('<div>1</div>')
})

it('finds nested components and obtains expected html and innerText', () => {
const wrapper = mount({
components: {
ComponentA,
ComponentB
},
template: `
<ComponentA>
<ComponentB>
<div class="content" id="1">1</div>
</ComponentB>
<ComponentB>
<div class="content" id="2">2</div>
</ComponentB>
<ComponentB>
<div class="content" id="3">3</div>
</ComponentB>
</ComponentA>
`
})

const compB = wrapper.findAllComponents(ComponentB)
expect(compB[0].find('.content').text()).toBe('1')
expect(compB[0].vm.$el.querySelector('.content').innerHTML).toBe('1')
expect(compB[0].vm.$el.querySelector('.content').textContent).toBe('1')
})
})
29 changes: 29 additions & 0 deletions tests/html.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,4 +50,33 @@ describe('html', () => {
const wrapper = mount(Component)
expect(wrapper.html()).toEqual('<div class="Foo">FOO</div>')
})

it('returns the html with findComponent in a nested Suspense component', () => {
const Foo = defineComponent({
template: '<div class="Foo">FOO</div>',
setup() {
return {}
}
})
const Component = {
template: `
<div>
<span>
<Suspense>
<template #default>
<Foo />
</template>

<template #fallback>
Fallback
</template>
</Suspense>
</span>
</div>`,
components: { Foo }
}
const wrapper = mount(Component)
const foo = wrapper.findComponent(Foo)
expect(foo.html()).toEqual('<div class="Foo">FOO</div>')
})
})