diff --git a/packages/components/config-provider/__tests__/config-provider.spec.ts b/packages/components/config-provider/__tests__/config-provider.spec.ts index 0f08deac6a..b1a6e458b8 100644 --- a/packages/components/config-provider/__tests__/config-provider.spec.ts +++ b/packages/components/config-provider/__tests__/config-provider.spec.ts @@ -7,8 +7,10 @@ import { ElButton, ElMessage } from '@element-plus/components' import { rAF } from '@element-plus/test-utils/tick' 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 { ConfigProviderProps } from '../src/config-provider' jest.useFakeTimers() @@ -22,6 +24,10 @@ const TestComp = { } describe('config-provider', () => { + afterAll(() => { + jest.useRealTimers() + }) + describe('locale-provider', () => { let wrapper: VueWrapper @@ -240,45 +246,50 @@ describe('config-provider', () => { }) }) - describe('experimental features', () => { - it('should provide feature flag', () => { - const TestComponent = defineComponent({ - setup() { - const features = useGlobalConfig('experimentalFeatures') - return { - features, - } + describe('feature checking', () => { + const TestComponent = defineComponent({ + props: { + configKey: { + type: String as PropType, + required: true, }, - template: `
`, - }) - - const testFeature = { - someFeature: true, - } - - const wrapper = mount({ - components: { - [ConfigProvider.name]: ConfigProvider, - TestComponent, - }, - template: ` - - - - `, - data() { - return { - experimentalFeatures: testFeature, - } - }, - }) - expect( - ( - wrapper.findComponent(TestComponent) as VueWrapper< - InstanceType - > - ).vm.features - ).toEqual(testFeature) + }, + setup(props) { + const features = useGlobalConfig(props.configKey) + return { + [props.configKey]: features, + } + }, + template: `
`, }) + + it.each` + feature | config + ${'a11y'} | ${false} + ${'keyboardNavigation'} | ${false} + ${'experimentalFeatures'} | ${{ someFeature: true }} + `( + 'should inject config $feature to $config correctly', + ({ feature, config }: { feature: string; config: any }) => { + const wrapper = mount({ + components: { + [ConfigProvider.name]: ConfigProvider, + TestComponent, + }, + template: ` + + + + `, + data() { + return { + [feature]: config, + } + }, + }) + + expect(wrapper.findComponent(TestComponent).vm[feature]).toEqual(config) + } + ) }) }) diff --git a/packages/components/config-provider/src/config-provider.ts b/packages/components/config-provider/src/config-provider.ts index 55d2de02fd..62c7609663 100644 --- a/packages/components/config-provider/src/config-provider.ts +++ b/packages/components/config-provider/src/config-provider.ts @@ -1,6 +1,8 @@ import { defineComponent, renderSlot, watch } from 'vue' import { buildProps, definePropType } from '@element-plus/utils' import { provideGlobalConfig } from '@element-plus/hooks' + +import type { ExtractPropTypes } from 'vue' import type { ExperimentalFeatures } from '@element-plus/tokens' import type { Language } from '@element-plus/locale' import type { ButtonConfigContext } from '@element-plus/components/button' @@ -9,6 +11,12 @@ import type { MessageConfigContext } from '@element-plus/components/message' export const messageConfig: MessageConfigContext = {} export const configProviderProps = buildProps({ + // Controlling if the users want a11y features. + a11y: { + type: Boolean, + default: true, + }, + locale: { type: definePropType(Object), }, @@ -26,6 +34,12 @@ export const configProviderProps = buildProps({ type: definePropType(Object), }, + // Controls if we should handle keyboard navigation + keyboardNavigation: { + type: Boolean, + default: true, + }, + message: { type: definePropType(Object), }, @@ -56,3 +70,5 @@ export default defineComponent({ return () => renderSlot(slots, 'default', { config: config?.value }) }, }) + +export type ConfigProviderProps = ExtractPropTypes