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 set data reactive #540

Merged
merged 4 commits into from
Apr 19, 2021
Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
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: 5 additions & 2 deletions src/dataMixin.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,13 @@
import { getCurrentInstance } from 'vue'
import { getCurrentInstance, reactive } from 'vue'

export const createDataMixin = (data: Record<string, unknown>) => {
return {
created() {
for (const [k, v] of Object.entries(data)) {
getCurrentInstance()!.data = { ...getCurrentInstance()!.data, [k]: v }
getCurrentInstance()!.data = reactive({
...getCurrentInstance()!.data,
[k]: v
})
}
}
}
Expand Down
1 change: 0 additions & 1 deletion src/mount.ts
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,6 @@ import { attachEmitListener } from './emit'
import { createDataMixin } from './dataMixin'
import { MOUNT_COMPONENT_REF, MOUNT_PARENT_NAME } from './constants'
import { createStub, stubComponents } from './stubs'
import { hyphenate } from './utils/vueShared'

// NOTE this should come from `vue`
type PublicProps = VNodeProps & AllowedComponentProps & ComponentCustomProps
Expand Down
41 changes: 41 additions & 0 deletions tests/setData.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -123,4 +123,45 @@ describe('setData', () => {
'Cannot add property count'
)
})

it('https://github.com/vuejs/vue-test-utils-next/issues/538', async () => {
Copy link
Member

Choose a reason for hiding this comment

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

super nit: I prefer when we have a readable test name instead of just a link to a Github issue (easier to understand when the test is failing)

Copy link
Member Author

Choose a reason for hiding this comment

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

Sure, I'll update

const Comp = defineComponent<
{},
{},
{ field: number | null },
{ isFieldNull: any }
Copy link
Member Author

Choose a reason for hiding this comment

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

Unfortunately the type for this is not exported. I thought we had some way to type computed properties and vm 🤔

Copy link
Member

Choose a reason for hiding this comment

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

I don't use the Options API, so I don't know... Shouldn't it be boolean 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.

According to VS Code it should be Computed<boolean> or something like that, but it is not exported from Vue. I shouldn't actually need to specify this here, but if I don't TS complains.

I have not used TS with Options API before so I have no idea 🤷‍♂️

>({
template: `
<div>{{ isFieldNull ? 'It is null' : 'It is not null' }}</div>
`,
data() {
return {
field: null
}
},
computed: {
isFieldNull() {
return this.field === null
}
}
})

const wrapper = mount(Comp, {
data() {
return {
field: null
}
}
})

expect(wrapper.vm.isFieldNull).toBe(true)
expect(wrapper.html()).toContain('It is null')

await wrapper.setData({ field: 10 })
await wrapper.vm.$nextTick()

expect(wrapper.html()).toContain('It is not null')
expect(wrapper.vm.field).toEqual(10)
expect(wrapper.vm.isFieldNull).toBe(false)
})
})