Vben
2 years ago
committed by
GitHub
GitHub
53 changed files with 241 additions and 156 deletions
@ -1,4 +1,4 @@ |
|||
export { default as VbenBreadcrumb } from './breadcrumb.vue'; |
|||
export { default as VbenBackgroundBreadcrumb } from './breadcrumb-background.vue'; |
|||
|
|||
export type * from './interface'; |
|||
export type * from './types'; |
|||
|
|||
@ -1,2 +1,2 @@ |
|||
export { default as VbenInput } from './input.vue'; |
|||
export type * from './interface'; |
|||
export type * from './types'; |
|||
|
|||
@ -1,3 +1,3 @@ |
|||
export { default as VbenPinInput } from './input.vue'; |
|||
|
|||
export type * from './interface'; |
|||
export type * from './types'; |
|||
|
|||
@ -1,3 +1,3 @@ |
|||
export type * from './interface'; |
|||
|
|||
export { default as VbenSegmented } from './segmented.vue'; |
|||
|
|||
export type * from './types'; |
|||
|
|||
@ -0,0 +1,39 @@ |
|||
import { mount } from '@vue/test-utils'; |
|||
import { describe, expect, it } from 'vitest'; |
|||
|
|||
import { EllipsisText } from '..'; |
|||
|
|||
describe('ellipsis-text.vue', () => { |
|||
it('renders the correct content and truncates text', async () => { |
|||
const wrapper = mount(EllipsisText, { |
|||
props: { |
|||
line: 1, |
|||
title: 'Test Title', |
|||
}, |
|||
slots: { |
|||
default: 'This is a very long text that should be truncated.', |
|||
}, |
|||
}); |
|||
|
|||
expect(wrapper.text()).toContain('This is a very long text'); |
|||
// 检查 ellipsis 是否应用了正确的 class
|
|||
const ellipsis = wrapper.find('.truncate'); |
|||
expect(ellipsis.exists()).toBe(true); |
|||
}); |
|||
|
|||
it('expands text on click if expand is true', async () => { |
|||
const wrapper = mount(EllipsisText, { |
|||
props: { |
|||
expand: true, |
|||
line: 1, |
|||
}, |
|||
slots: { |
|||
default: 'This is a very long text that should be truncated.', |
|||
}, |
|||
}); |
|||
|
|||
const ellipsis = wrapper.find('.truncate'); |
|||
await ellipsis.trigger('click'); |
|||
expect(wrapper.emitted('expandChange')).toBeTruthy(); |
|||
}); |
|||
}); |
|||
@ -0,0 +1,74 @@ |
|||
import { mount } from '@vue/test-utils'; |
|||
import { describe, expect, it } from 'vitest'; |
|||
|
|||
import { Page } from '..'; |
|||
|
|||
describe('page.vue', () => { |
|||
it('renders title when passed', () => { |
|||
const wrapper = mount(Page, { |
|||
props: { |
|||
title: 'Test Title', |
|||
}, |
|||
}); |
|||
|
|||
expect(wrapper.text()).toContain('Test Title'); |
|||
}); |
|||
|
|||
it('renders description when passed', () => { |
|||
const wrapper = mount(Page, { |
|||
props: { |
|||
description: 'Test Description', |
|||
}, |
|||
}); |
|||
|
|||
expect(wrapper.text()).toContain('Test Description'); |
|||
}); |
|||
|
|||
it('renders default slot content', () => { |
|||
const wrapper = mount(Page, { |
|||
slots: { |
|||
default: '<p>Default Slot Content</p>', |
|||
}, |
|||
}); |
|||
|
|||
expect(wrapper.html()).toContain('<p>Default Slot Content</p>'); |
|||
}); |
|||
|
|||
it('renders footer slot when showFooter is true', () => { |
|||
const wrapper = mount(Page, { |
|||
props: { |
|||
showFooter: true, |
|||
}, |
|||
slots: { |
|||
footer: '<p>Footer Slot Content</p>', |
|||
}, |
|||
}); |
|||
|
|||
expect(wrapper.html()).toContain('<p>Footer Slot Content</p>'); |
|||
}); |
|||
|
|||
it('applies the custom contentClass', () => { |
|||
const wrapper = mount(Page, { |
|||
props: { |
|||
contentClass: 'custom-class', |
|||
}, |
|||
}); |
|||
|
|||
const contentDiv = wrapper.find('.m-4'); |
|||
expect(contentDiv.classes()).toContain('custom-class'); |
|||
}); |
|||
|
|||
it('does not render description slot if description prop is provided', () => { |
|||
const wrapper = mount(Page, { |
|||
props: { |
|||
description: 'Test Description', |
|||
}, |
|||
slots: { |
|||
description: '<p>Description Slot Content</p>', |
|||
}, |
|||
}); |
|||
|
|||
expect(wrapper.text()).toContain('Test Description'); |
|||
expect(wrapper.html()).not.toContain('Description Slot Content'); |
|||
}); |
|||
}); |
|||
@ -1,13 +0,0 @@ |
|||
<script setup lang="ts"> |
|||
defineOptions({ |
|||
name: 'PageFooter', |
|||
}); |
|||
</script> |
|||
|
|||
<template> |
|||
<div |
|||
class="bg-card align-center absolute bottom-0 left-0 right-0 flex px-6 py-4" |
|||
> |
|||
<slot></slot> |
|||
</div> |
|||
</template> |
|||
@ -1,18 +0,0 @@ |
|||
<script setup lang="ts"> |
|||
import type { PageHeaderProps } from './page.ts'; |
|||
|
|||
defineOptions({ |
|||
name: 'PageHeader', |
|||
}); |
|||
|
|||
const props = defineProps<PageHeaderProps>(); |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="bg-card px-6 py-4"> |
|||
<div class="mb-2 flex justify-between text-xl font-bold leading-10"> |
|||
{{ props.title }} |
|||
</div> |
|||
<slot></slot> |
|||
</div> |
|||
</template> |
|||
@ -1,11 +0,0 @@ |
|||
interface PageHeaderProps { |
|||
title?: string; |
|||
description?: string; |
|||
} |
|||
|
|||
interface Props extends PageHeaderProps { |
|||
contentClass?: string; |
|||
showFooter?: boolean; |
|||
} |
|||
|
|||
export type { PageHeaderProps, Props }; |
|||
@ -1,9 +0,0 @@ |
|||
interface LockAndRegisterParams { |
|||
lockScreenPassword: string; |
|||
} |
|||
|
|||
interface RegisterEmits { |
|||
submit: [LockAndRegisterParams]; |
|||
} |
|||
|
|||
export type { LockAndRegisterParams, RegisterEmits }; |
|||
@ -1,7 +1,11 @@ |
|||
<script lang="ts" setup> |
|||
import { Page } from '@vben/common-ui'; |
|||
import { Fallback } from '@vben/common-ui'; |
|||
</script> |
|||
|
|||
<template> |
|||
<Page description="当前页面仅 Admin 账号可见" title="页面访问测试" /> |
|||
<Fallback |
|||
description="当前页面仅 Admin 账号可见" |
|||
status="coming-soon" |
|||
title="页面访问测试" |
|||
/> |
|||
</template> |
|||
|
|||
@ -1,7 +1,11 @@ |
|||
<script lang="ts" setup> |
|||
import { Page } from '@vben/common-ui'; |
|||
import { Fallback } from '@vben/common-ui'; |
|||
</script> |
|||
|
|||
<template> |
|||
<Page description="当前页面仅 Super 账号可见" title="页面访问测试" /> |
|||
<Fallback |
|||
description="当前页面仅 Super 账号可见" |
|||
status="coming-soon" |
|||
title="页面访问测试" |
|||
/> |
|||
</template> |
|||
|
|||
@ -1,7 +1,11 @@ |
|||
<script lang="ts" setup> |
|||
import { Page } from '@vben/common-ui'; |
|||
import { Fallback } from '@vben/common-ui'; |
|||
</script> |
|||
|
|||
<template> |
|||
<Page description="当前页面仅 User 账号可见" title="页面访问测试" /> |
|||
<Fallback |
|||
description="当前页面仅 User 账号可见" |
|||
status="coming-soon" |
|||
title="页面访问测试" |
|||
/> |
|||
</template> |
|||
|
|||
Loading…
Reference in new issue