feat(layout): layout 组件补充测试用例(changelog-needed)

affects: @ued-plus/components

ISSUES CLOSED: none

Author: bin-K

packages/components/src/layout/__test__/layout.test.tsx

@@ -0,0 +1,140 @@
+import { nextTick, ref } from 'vue'
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { UedRow, UedCol } from '@ued-plus/components'
+
+describe('Row.vue', () => {
+	it('create', () => {
+		const wrapper = mount(UedRow)
+		expect(wrapper.classes()).toContain('ued-row')
+	})
+
+	it('gutter', () => {
+		const wrapper = mount(UedRow, {
+			props: {
+				gutter: 20,
+			},
+		})
+		const rowElm = wrapper.element as HTMLElement
+		expect(rowElm.style.marginLeft).toEqual('-10px')
+		expect(rowElm.style.marginRight).toEqual('-10px')
+	})
+
+	it('justify', () => {
+		const wrapper = mount(UedRow, {
+			props: {
+				justify: 'end',
+			},
+		})
+		expect(wrapper.classes()).toContain('is-justify-end')
+	})
+
+	it('align', () => {
+		const wrapper = mount(UedRow, {
+			props: {
+				align: 'bottom',
+			},
+		})
+		expect(wrapper.classes()).toContain('is-align-bottom')
+	})
+})
+
+describe('Col.vue', () => {
+	it('create', () => {
+		const wrapper = mount(UedCol)
+		expect(wrapper.classes()).toContain('ued-col')
+	})
+
+	it('span', () => {
+		const wrapper = mount(UedCol, {
+			props: {
+				span: 12,
+			},
+		})
+		expect(wrapper.classes()).toContain('ued-col-12')
+	})
+
+	it('pull', () => {
+		const wrapper = mount(UedCol, {
+			props: {
+				pull: 3,
+			},
+		})
+		expect(wrapper.classes()).toContain('ued-col-pull-3')
+	})
+
+	it('push', () => {
+		const wrapper = mount(UedCol, {
+			props: {
+				push: 3,
+			},
+		})
+		expect(wrapper.classes()).toContain('ued-col-push-3')
+	})
+
+	it('gutter', () => {
+		const wrapper = mount({
+			setup: () => () => (
+				<UedRow gutter={20}>
+					<UedCol span={12} ref="col"></UedCol>
+				</UedRow>
+			),
+		})
+
+		const colElm = wrapper.findComponent({ ref: 'col' }).element as HTMLElement
+		expect(colElm.style.paddingLeft === '10px').toBe(true)
+		expect(colElm.style.paddingRight === '10px').toBe(true)
+	})
+
+	it('change gutter value', async () => {
+		const outer = ref(20)
+
+		const wrapper = mount({
+			setup: () => () => (
+				<UedRow gutter={outer.value} ref="row">
+					<UedCol span={12} ref="col" />
+				</UedRow>
+			),
+		})
+
+		const rowElm = wrapper.findComponent({ ref: 'row' }).element as HTMLElement
+		const colElm = wrapper.findComponent({ ref: 'col' }).element as HTMLElement
+
+		expect(rowElm.style.marginLeft === '-10px').toBe(true)
+		expect(rowElm.style.marginRight === '-10px').toBe(true)
+		expect(colElm.style.paddingLeft === '10px').toBe(true)
+		expect(colElm.style.paddingRight === '10px').toBe(true)
+
+		outer.value = 40
+		await nextTick()
+
+		expect(rowElm.style.marginLeft === '-20px').toBe(true)
+		expect(rowElm.style.marginRight === '-20px').toBe(true)
+		expect(colElm.style.paddingLeft === '20px').toBe(true)
+		expect(colElm.style.paddingRight === '20px').toBe(true)
+	})
+
+	it('responsive', () => {
+		const wrapper = mount({
+			setup: () => () => (
+				<UedRow gutter={20}>
+					<UedCol
+						ref="col"
+						sm={{ span: 4, offset: 2 }}
+						md={8}
+						lg={{ span: 6, offset: 3 }}
+					/>
+				</UedRow>
+			),
+		})
+
+		const colElmClass = wrapper.findComponent({ ref: 'col' }).classes()
+
+		expect(colElmClass.includes('ued-col-sm-4')).toBe(true)
+		expect(colElmClass.includes('ued-col-sm-4')).toBe(true)
+		expect(colElmClass.includes('ued-col-offset-sm-2')).toBe(true)
+		expect(colElmClass.includes('ued-col-lg-6')).toBe(true)
+		expect(colElmClass.includes('ued-col-offset-lg-3')).toBe(true)
+		expect(colElmClass.includes('ued-col-md-8')).toBe(true)
+	})
+})

packages/components/src/layout/col.vue

@@ -8,6 +8,7 @@
 import './styles/col.scss'
 import { computed, inject, PropType } from 'vue'
 import { isPositiveNumber } from '@ued-plus/utils'
+import { rowpKey } from './contant'
 
 defineOptions({ name: 'UedCol' })
 
@@ -61,7 +62,16 @@ const colProps = defineProps({
 	},
 })
 
-const rowGutter = inject('row-gutter', undefined)
+const rowInject = inject(rowpKey, undefined)
+
+const gutter = computed(() => {
+	if (rowInject?.gutter) {
+		return isPositiveNumber(rowInject.gutter)
+			? Math.floor(rowInject.gutter)
+			: undefined
+	}
+	return undefined
+})
 
 const handleBootstrap = (size: number | ColProps, sizeType: string) => {
 	if (typeof size === 'object') {
@@ -91,7 +101,7 @@ const colClass = computed(() => {
 		[`ued-col-offset-${colProps.offset}`]: isPositiveNumber(colProps.offset),
 		[`ued-col-pull-${colProps.pull}`]: isPositiveNumber(colProps.pull),
 		[`ued-col-push-${colProps.push}`]: isPositiveNumber(colProps.push),
-		'is-guttered': rowGutter,
+		'is-guttered': gutter.value,
 		...xsSize,
 		...smSize,
 		...mdSize,
@@ -101,7 +111,7 @@ const colClass = computed(() => {
 })
 
 const colStyle = computed(() => {
-	const paddingNum = rowGutter ? rowGutter / 2 : undefined
+	const paddingNum = gutter.value ? gutter.value / 2 : undefined
 	return {
 		'padding-left': `${paddingNum}px`,
 		'padding-right': `${paddingNum}px`,

packages/components/src/layout/contant.ts

@@ -0,0 +1,3 @@
+import type { InjectionKey } from 'vue'
+import { RowPropsType } from './row'
+export const rowpKey: InjectionKey<RowPropsType> = Symbol('RowKey')

packages/components/src/layout/row.ts

@@ -0,0 +1,22 @@
+import { ExtractPropTypes } from 'vue'
+
+export const RowProps = {
+	gutter: {
+		type: Number,
+		default: 0,
+	},
+	justify: {
+		type: String,
+		default: undefined,
+	},
+	align: {
+		type: String,
+		default: undefined,
+	},
+	tag: {
+		type: String,
+		default: undefined,
+	},
+}
+
+export type RowPropsType = ExtractPropTypes<typeof RowProps>

packages/components/src/layout/row.vue

@@ -6,33 +6,20 @@
 
 <script lang="ts" setup>
 import './styles/row.scss'
-import { computed, provide } from 'vue'
+import { computed, provide, reactive, toRefs } from 'vue'
 import { isPositiveNumber } from '@ued-plus/utils'
+import { rowpKey } from './contant'
+import { RowProps } from './row'
 
 defineOptions({ name: 'UedRow' })
 
-const rowProps = defineProps({
-	gutter: {
-		type: Number,
-		default: 0,
-	},
-	justify: {
-		type: String,
-		default: undefined,
-	},
-	align: {
-		type: String,
-		default: undefined,
-	},
-	tag: {
-		type: String,
-		default: undefined,
-	},
-})
+const rowProps = defineProps(RowProps)
 
 provide(
-	'row-gutter',
-	isPositiveNumber(rowProps.gutter) ? Math.floor(rowProps.gutter) : undefined
+	rowpKey,
+	reactive({
+		...toRefs(rowProps),
+	})
 )
 
 const rowClass = computed(() => {