123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285 |
- import { defineComponent, nextTick, reactive, ref } from 'vue'
- import { mount } from '@vue/test-utils'
- import { afterEach, beforeEach, describe, expect, it } from 'vitest'
- import { useLocale } from '@element-plus/hooks'
- import Chinese from '@element-plus/locale/lang/zh-cn'
- import English from '@element-plus/locale/lang/en'
- import { ElButton, ElMessage } from '@element-plus/components'
- import { rAF } from '@element-plus/test-utils/tick'
- import {
- useGlobalComponentSettings,
- useGlobalConfig,
- } from '../src/hooks/use-global-config'
- import ConfigProvider from '../src/config-provider'
- import type { PropType } from 'vue'
- import type { VueWrapper } from '@vue/test-utils'
- import type { Language } from '@element-plus/locale'
- import type { ComponentSize } from '@element-plus/constants'
- import type { ConfigProviderProps } from '../src/config-provider-props'
- const TestComp = defineComponent({
- setup() {
- const { t } = useLocale()
- return () => <div>{t('el.popconfirm.confirmButtonText')}</div>
- },
- })
- describe('config-provider', () => {
- describe('locale-provider', () => {
- let wrapper: VueWrapper<any>
- beforeEach(() => {
- const currentLocale = ref<Language>(English)
- const oppositeLocale = ref<Language>(Chinese)
- const toEn = () => {
- currentLocale.value = English
- oppositeLocale.value = Chinese
- }
- const toZh = () => {
- currentLocale.value = Chinese
- oppositeLocale.value = English
- }
- wrapper = mount(() => (
- <>
- <ConfigProvider locale={currentLocale.value}>
- <TestComp class="current-locale" />
- <ConfigProvider locale={oppositeLocale.value}>
- <TestComp class="opposite-locale" />
- </ConfigProvider>
- </ConfigProvider>
- <button onClick={toEn} class="to-en">
- toEn
- </button>
- <button onClick={toZh} class="to-zh">
- toZh
- </button>
- </>
- ))
- })
- afterEach(() => {
- wrapper.unmount()
- })
- it('should provide locale properly', async () => {
- expect(wrapper.find('.current-locale').text()).toBe(
- English.el.popconfirm.confirmButtonText
- )
- expect(wrapper.find('.opposite-locale').text()).toBe(
- Chinese.el.popconfirm.confirmButtonText
- )
- })
- it('should reactively update the text on page', async () => {
- expect(wrapper.find('.current-locale').text()).toBe(
- English.el.popconfirm.confirmButtonText
- )
- expect(wrapper.find('.opposite-locale').text()).toBe(
- Chinese.el.popconfirm.confirmButtonText
- )
- await wrapper.find('.to-zh').trigger('click')
- expect(wrapper.find('.current-locale').text()).toBe(
- Chinese.el.popconfirm.confirmButtonText
- )
- expect(wrapper.find('.opposite-locale').text()).toBe(
- English.el.popconfirm.confirmButtonText
- )
- })
- })
- describe('button-config', () => {
- it('autoInsertSpace', async () => {
- const config = reactive({
- autoInsertSpace: true,
- })
- const wrapper = mount(() => (
- <>
- <ConfigProvider button={config}>
- <ElButton>中文</ElButton>
- </ConfigProvider>
- <button
- class="toggle"
- onClick={() => (config.autoInsertSpace = !config.autoInsertSpace)}
- >
- toggle
- </button>
- </>
- ))
- await nextTick()
- expect(
- wrapper.find('.el-button .el-button__text--expand').exists()
- ).toBeTruthy()
- await wrapper.find('.toggle').trigger('click')
- expect(
- wrapper.find('.el-button .el-button__text--expand').exists()
- ).toBeFalsy()
- })
- })
- describe('namespace-config', () => {
- it('reactive namespace', async () => {
- const namespace = ref()
- const wrapper = mount(() => (
- <ConfigProvider namespace={namespace.value}>
- <ElButton>test str</ElButton>
- </ConfigProvider>
- ))
- await nextTick()
- expect(wrapper.find('button').classes().join('')).toBe('el-button')
- namespace.value = 'ep'
- await nextTick()
- expect(wrapper.find('button').classes().join('')).toBe('ep-button')
- })
- })
- describe('message-config', () => {
- afterEach(() => {
- ElMessage.closeAll()
- })
- it('limit the number of messages displayed at the same time', async () => {
- const config = reactive({
- max: 3,
- })
- const open = () => {
- ElMessage('this is a message.')
- }
- const wrapper = mount(() => (
- <ConfigProvider message={config}>
- <ElButton onClick={open}>open</ElButton>
- </ConfigProvider>
- ))
- await nextTick()
- wrapper.find('.el-button').trigger('click')
- wrapper.find('.el-button').trigger('click')
- wrapper.find('.el-button').trigger('click')
- wrapper.find('.el-button').trigger('click')
- await nextTick()
- expect(document.querySelectorAll('.el-message').length).toBe(3)
- config.max = 10
- await nextTick()
- wrapper.find('.el-button').trigger('click')
- wrapper.find('.el-button').trigger('click')
- wrapper.find('.el-button').trigger('click')
- wrapper.find('.el-button').trigger('click')
- await nextTick()
- expect(document.querySelectorAll('.el-message').length).toBe(7)
- })
- it('multiple config-provider config override', async () => {
- const config = reactive({
- max: 3,
- })
- const overrideConfig = reactive({
- max: 1,
- })
- const open = () => {
- ElMessage('this is a message.')
- }
- const wrapper = mount(() => (
- <ConfigProvider message={config}>
- <ConfigProvider message={overrideConfig}>
- <ElButton onClick={open}>open</ElButton>
- </ConfigProvider>
- </ConfigProvider>
- ))
- await rAF()
- await wrapper.find('.el-button').trigger('click')
- await wrapper.find('.el-button').trigger('click')
- await wrapper.find('.el-button').trigger('click')
- await nextTick()
- expect(document.querySelectorAll('.el-message').length).toBe(1)
- })
- })
- describe('feature checking', () => {
- const TestComponent = defineComponent({
- props: {
- configKey: {
- type: String as PropType<keyof ConfigProviderProps>,
- required: true,
- },
- },
- setup(props) {
- const features = useGlobalConfig(props.configKey)
- return {
- [props.configKey]: features,
- }
- },
- render: () => <div />,
- })
- it.each([
- { feature: 'a11y', config: false },
- { feature: 'keyboardNavigation', config: false },
- { feature: 'experimentalFeatures', config: { someFeature: true } },
- ])(
- 'should inject config $feature to $config correctly',
- ({ feature, config }: { feature: string; config: any }) => {
- const props: Record<string, any> = {}
- props[feature] = config
- const wrapper = mount(() => (
- <ConfigProvider {...props}>
- <TestComponent configKey={feature as keyof ConfigProviderProps} />
- </ConfigProvider>
- ))
- expect(wrapper.findComponent(TestComponent).vm[feature]).toEqual(config)
- }
- )
- })
- describe('global component configs', () => {
- it('should use global configured settings', async () => {
- const namespace = 'test'
- const locale = Chinese
- const zIndex = 1000
- const block = 'button'
- const size = 'large'
- const receiverRef = ref()
- const fallback = ref('' as ComponentSize)
- const ReceiverComponent = defineComponent({
- setup() {
- receiverRef.value = useGlobalComponentSettings(block, fallback)
- },
- template: '<div></div>',
- })
- mount(() => (
- <ConfigProvider
- zIndex={zIndex}
- locale={locale}
- namespace={namespace}
- size={size}
- >
- <ReceiverComponent />
- </ConfigProvider>
- ))
- const vm = receiverRef.value
- expect(vm.ns.namespace).toBe(namespace)
- expect(vm.locale.locale).toBe(locale)
- expect(vm.zIndex.currentZIndex).toBeGreaterThanOrEqual(zIndex)
- expect(vm.size).toBe(size)
- fallback.value = 'small'
- await nextTick()
- expect(vm.size).toBe('small')
- })
- })
- })
|