Skip to content

Commit

Permalink
test(hooks): 添加 useLocale 钩子的单元测试
Browse files Browse the repository at this point in the history
- 创建 useLocale.test.tsx 文件,实现对 useLocale 钩子的全面测试
- 测试内容包括:
  - 正确提供 locale 配置
  - 反应式更新文本
  - 未定义键时返回键名
  - 覆盖全局配置的功能
- 使用 Vitest 和 @vue/test-utils 进行测试
  • Loading branch information
liuyunhe committed Nov 15, 2024
1 parent e704e9f commit d903fe8
Showing 1 changed file with 97 additions and 0 deletions.
97 changes: 97 additions & 0 deletions src/hooks/__tests__/useLocale.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
import { computed, defineComponent, nextTick } from 'vue'
import { mount } from '@vue/test-utils'
import { afterEach, beforeEach, describe, expect, it } from 'vitest'
import Chinese from '@/locale/lang/zh-cn'
import English from '@/locale/lang/en'
import { provideGlobalConfig } from '@/components/configProvider'
import { buildTranslator, useLocale } from '../useLocale'
import type { Language } from '@/locale'
import type { ComponentPublicInstance, PropType } from 'vue'
import type { VueWrapper } from '@vue/test-utils'

const TestComp = defineComponent({
setup() {
const { t } = useLocale()
return () => (
<div class="locale-manifest">{t('el.popconfirm.confirmButtonText')}</div>
)
},
})

describe('use-locale', () => {
let wrapper: VueWrapper<ComponentPublicInstance>

beforeEach(() => {
wrapper = mount(
defineComponent({
props: {
locale: {
type: Object as PropType<Language>,
default: Chinese,
},
},
setup(props) {
provideGlobalConfig(computed(() => ({ locale: props.locale })))
return () => <TestComp />
},
})
)
})

afterEach(() => {
wrapper.unmount()
})

it('should provide locale correctly', async () => {
await nextTick()
expect(wrapper.find('.locale-manifest').text()).toBe(
Chinese.el.popconfirm.confirmButtonText
)
})

it('should update the text reactively', async () => {
await nextTick()
expect(wrapper.find('.locale-manifest').text()).toBe(
Chinese.el.popconfirm.confirmButtonText
)
await wrapper.setProps({
locale: English,
})

expect(wrapper.find('.locale-manifest').text()).toBe(
English.el.popconfirm.confirmButtonText
)
})

it('return key name if not defined', () => {
const t = buildTranslator(English)
expect(t('el.popconfirm.someThing')).toBe('el.popconfirm.someThing')
})

describe('overrides', () => {
it('should be override correctly', () => {
const override = computed(() => English)

const wrapper = mount(
defineComponent({
setup(_, { expose }) {
const { locale } = useLocale(override)
expose({
locale,
})
},
template: '<div></div>',
}),
{
global: {
provide: {
locale: Chinese,
},
},
}
)

expect(wrapper.vm.locale).toBe(override.value)
})
})
})

0 comments on commit d903fe8

Please sign in to comment.